feat: 修复缓存机制中存在的bug

src/components/LeftSide/index.tsx

@@ -1,5 +1,5 @@
 import SvgIcon from '@/components/SvgIcon'
-import { tenderStore, userStore } from '@/store/mobx'
+import { userStore } from '@/store/mobx'
 import { iNavSide } from '@/types/router'
 import { observer } from 'mobx-react'
 import React from 'react'
@@ -7,23 +7,24 @@ import { Link } from 'react-router-dom'
 import "./index.scss"
 
 const leftSide:React.FC<iNavSide> = ({ childRoutes, location }) => {
-
-  if (location.state?.id) {
-    tenderStore.saveBidsectionId(location.state?.id)
-  }
   const pathname = location.pathname
-
+  const route = childRoutes.find(item => pathname.indexOf(item.path) !== -1)
+  let basePathname = location.pathname
+  if (route) {
+    basePathname = pathname.substring(0, pathname.indexOf(route.path))
+  }
   return (
     <div className={userStore.showLeftSide ? "panel-sidebar" : "scale-out-hor-left"}>
       <div>
         <div className="pi-pd-10 pi-mg-bottom-10 sidebar-title">项目设置</div>
         <div className="pi-flex-column pi-justify-start">
           { childRoutes.map((item, idx) =>
-            item.meta && <Link key={idx} to={{ pathname: item.path, state: { id: location.state?.id } }} className={pathname.indexOf(item.path) !== -1 ? 'nav-link active' : 'nav-link'}>{item.meta.icon ? <SvgIcon type={item.meta.icon}></SvgIcon> : ''} {item.meta.title}</Link>
+            item.meta && <Link key={idx} to={{ pathname: basePathname + item.path }} className={pathname.indexOf(item.path) !== -1 ? 'nav-link active' : 'nav-link'}>{item.meta.icon ? <SvgIcon type={item.meta.icon}></SvgIcon> : ''} {item.meta.title}</Link>
           )}
         </div>
       </div>
-      <div></div>
+      <div>
+      </div>
       {/* <div className="pi-text-center pi-pd-10 pi-pointer" onClick={() => userStore.toggleLeftSide()}>
         <Tooltip title="折叠侧栏">
           <SvgIcon type="xxh-sign-out" style={{ color: '#007bff', fontSize: 24 }}></SvgIcon>

src/components/Navigation/index.tsx

@@ -6,6 +6,7 @@ import React, { Component } from 'react'
 import KeepAlive from 'react-activation'
 // import { KeepAlive } from 'react-keep-alive'
 import { Redirect, Route } from "react-router-dom"
+
 class NavigationGuards extends Component<NavigationGuardsProps, any> {
     constructor(props: NavigationGuardsProps) {
         super(props)
@@ -116,7 +117,7 @@ function LoginHandler(props: { targetRoute: RouteModel, ErrorPage: any }): any {
                     noCache ?
                         <targetRoute.component {...props} routeConfig={targetRoute.childRoutes}></targetRoute.component> :
                         (
-                            <KeepAlive id={`${path}`}>
+                            <KeepAlive name={`${path}`}>
                                 <targetRoute.component {...props} routeConfig={targetRoute.childRoutes}></targetRoute.component>
                             </KeepAlive>
                         )

src/pages/Contract/Content/Income/components/TableContent/index.tsx

@@ -7,8 +7,7 @@ import Modal from 'antd/lib/modal/Modal'
 import { RadioChangeEvent } from 'antd/lib/radio'
 import { ColumnsType } from 'antd/lib/table'
 import { observer } from 'mobx-react'
-import React, { KeyboardEvent, useEffect, useRef, useState } from 'react'
-import { useActivate } from 'react-activation'
+import React, { useEffect, useRef, useState } from 'react'
 import { apiResfulContractTree } from '../../api'
 import { apiContractIncome, apiSetTemplate } from '../Modal/api'
 import Detail from '../Tabs/Detail'
@@ -181,10 +180,6 @@ const GCsheet: React.FC<iTableContentPorps> = ({ modalHandler, row, setRow }) =>
 
   ]
 
-  useActivate(() =>{
-    initHandler()
-  })
-
   // modal 确认 - 回调
   const handleModalConfirm = async () => {
     setSectionTemplate({

src/pages/Management/Info/index.tsx

@@ -4,7 +4,6 @@ import consts from '@/utils/consts'
 import { dayjsFomrat } from '@/utils/util'
 import { Button, Form, Input, message } from 'antd'
 import React, { useEffect, useState } from 'react'
-import { useActivate } from 'react-activation'
 import { apiProjectInfo, apiSaveProjectInfo } from './api'
 import styles from './index.module.scss'
 interface iProjectInfo {
@@ -27,9 +26,6 @@ const [ loading, setLoading ] = useState<boolean>(false)
   useEffect(() => {
     initData()
   }, [])
-  useActivate(() => {
-    initData()
-  })
   useEffect(() => {
     form.setFieldsValue(
       { ...projectInfo,

src/pages/Safe/Content/Detail/index.tsx

@@ -13,7 +13,6 @@ import { Button, Input, Pagination, Tooltip } from 'antd'
 import locale from 'antd/es/date-picker/locale/zh_CN'
 import dayjs from 'dayjs'
 import React, { useEffect, useState } from 'react'
-import { useActivate } from 'react-activation'
 import { RouteComponentProps } from 'react-router'
 import { apiGetSafeDetail, apiSaveFileInfo } from './api'
 import styles from './index.module.scss'
@@ -56,7 +55,6 @@ const Detail:React.FC<RouteComponentProps> = (props) => {
   useEffect(() => {
     initData()
   }, [])
-  useActivate(() => initData())
   const initData = async() => {
     const { saveId = "" } = props.location.state as any
     const { code = -1, data = {} } = await apiGetSafeDetail(saveId)
@@ -129,7 +127,9 @@ const Detail:React.FC<RouteComponentProps> = (props) => {
                   return (
                     <tr key={idx}>
                       <td className="pi-width-70">{idx+1}</td>
-                      <td><a href={consts.OSS_PATH.REVIEW + file.filepath} target="_blank" rel="noopener noreferrer">{file.filename}</a></td>
+                      <td style={{ width: 383, maxWidth: 383, overflow: 'hidden', whiteSpace: 'nowrap',textOverflow:'ellipsis' }}>
+                        <a href={consts.OSS_PATH.REVIEW + file.filepath} target="_blank" rel="noopener noreferrer">{file.filename}</a>
+                      </td>
                       <td className="pi-text-center">{file.accountName}</td><td className="pi-text-center">{dayjsFomrat(file.createTime)}</td>
                       <td className="pi-text-center pi-width-90">
                         <Tooltip title="移除">

src/pages/Safe/Content/Summary/index.tsx

@@ -1,7 +1,5 @@
 import Header from '@/components/Header'
-import { tenderStore } from '@/store/mobx'
-import React, { useEffect } from 'react'
-import { useActivate } from 'react-activation'
+import React from 'react'
 import { RouteProps } from 'react-router'
 import './index.scss'
 
@@ -9,21 +7,21 @@ import './index.scss'
 const Summary:React.FC<RouteProps> = (props) => {
   // console.log(props.location?.state)
 
-  useActivate(() => {
-    BidHander()
-  })
-  useEffect(() => {
-    BidHander()
-  }, [])
-  const BidHander = () => {
-    if (Object.keys(props.location?.state as object).length) {
-      console.log(props.location?.state)
+  // useActivate(() => {
+  //   BidHander()
+  // })
+  // useEffect(() => {
+  //   BidHander()
+  // }, [])
+  // const BidHander = () => {
+  //   if (Object.keys(props.location?.state as object).length) {
+  //     // console.log(props.location?.state)
 
-      const { id = '', name = '' } = props.location?.state as {id: string;name: string}
-      id && (tenderStore.saveBidsectionId(id))
-      name && (tenderStore.saveName(name))
-    }
-  }
+  //     const { id = '', name = '' } = props.location?.state as {id: string;name: string}
+  //     id && (tenderStore.saveBidsectionId(id))
+  //     name && (tenderStore.saveName(name))
+  //   }
+  // }
   return (
     <div className="wrap-contaniner">
       <Header title="巡检概况"></Header>

src/pages/Safe/Content/Info/index.tsx

@@ -0,0 +1,18 @@
+import Guards from '@/components/Navigation'
+import { NavigationGuardsProps } from '@/types/router'
+import React from 'react'
+import { Switch } from 'react-router-dom'
+const Content:React.FC<NavigationGuardsProps> = props => {
+  const { routeConfig, match, location } = props
+  return (
+    <>
+      <div className="panel-content">
+        <Switch>
+              <Guards routeConfig={routeConfig} match={match} location={location}></Guards>
+        </Switch>
+      </div>
+    </>
+  )
+}
+
+export default Content

src/pages/Safe/Content/List/index.tsx

@@ -12,7 +12,6 @@ import { SettingOutlined } from '@ant-design/icons'
 import { Button, message, Table } from 'antd'
 import { ColumnsType } from 'antd/lib/table'
 import React, { useEffect, useState } from 'react'
-import { useActivate } from 'react-activation'
 import { Link } from 'react-router-dom'
 import { apiCreateSafe, apiSafeList, apiSaveRule } from './api'
 import AddModel from './modal'
@@ -55,9 +54,6 @@ const SafeList:React.FC<{}> =() => {
   useEffect(() => {
     initData()
   }, [])
-  useActivate(() => {
-    initData()
-  })
   const columns:ColumnsType<iSafeList> = [
     {
       title: '序号',
@@ -71,7 +67,7 @@ const SafeList:React.FC<{}> =() => {
       dataIndex: 'code',
       // eslint-disable-next-line react/display-name
       render: (text: string, record) => {
-        return <Link to={{ pathname: "/console/safe/content/detail", state: { id: tenderStore.bidsectionId, saveId: record.id } }}>{text}</Link>
+        return <Link to={{ pathname: "/console/safe/content/detail/info", state: { saveId: record.id } }}>{text}</Link>
       }
     },
     {
@@ -130,17 +126,20 @@ const SafeList:React.FC<{}> =() => {
     }
   ])
   const [ total, setTotal ] = useState<number>(0)
-  const initData = async (pageNo: number = 1, pageSize: number = consts.PAGE_SIZE) => {
-    const { code = -1, data = [], total = 0 } = await apiSafeList(tenderStore.bidsectionId, pageNo, pageSize)
-    if (code === consts.RET_CODE.SUCCESS) {
-      setList(data)
-      setTotal(total)
-    }
+  const initData = (pageNo: number = 1, pageSize: number = consts.PAGE_SIZE) => {
+    apiSafeList(tenderStore.bid, pageNo, pageSize).then(({ code = -1, data = [], total = 0 }) => {
+      if (code === consts.RET_CODE.SUCCESS) {
+        setList(data)
+        setTotal(total)
+      }
+    }).catch(err => {
+      console.log(err)
+    })
   }
 
   const onRuleCreate = async (ruleValue: any) => {
     setRuleModal({ ...ruleModal, loading: true })
-    const { code = -1 } = await apiSaveRule({ bidsectionId: tenderStore.bidsectionId, type: 'safe_rule', rule: ruleValue })
+    const { code = -1 } = await apiSaveRule({ bidsectionId: tenderStore.bid, type: 'safe_rule', rule: ruleValue })
     if (code === consts.RET_CODE.SUCCESS) {
       message.success("规则更改成功!")
       initData()

src/pages/Safe/Content/index.tsx

@@ -5,7 +5,6 @@ import React from 'react'
 import { Switch } from 'react-router-dom'
 const Content:React.FC<NavigationGuardsProps> = props => {
   const { routeConfig, match, location } = props
-
   return (
     <>
       <LeftSide childRoutes={routeConfig} location={location}></LeftSide>

src/pages/Safe/List/index.tsx

@@ -1,17 +1,20 @@
 import Header from '@/components/Header'
 import Slot from '@/components/Header/slot'
 import SvgIcon from '@/components/SvgIcon'
+import { tenderStore } from '@/store/mobx'
 import { ContractTree } from '@/types/contract'
 import consts from '@/utils/consts'
 import { CaretDownOutlined } from '@ant-design/icons'
 import { Button, Dropdown, Menu, message, Table } from 'antd'
 import { ColumnsType } from 'antd/lib/table'
 import React, { useEffect, useState } from 'react'
-import { Link } from 'react-router-dom'
+import { useAliveController } from 'react-activation'
+import { RouteComponentProps, withRouter } from 'react-router-dom'
 import { apiContractList } from './api'
 import styles from './index.module.scss'
 import './index.scss'
-const List: React.FC<{}> = () => {
+const List: React.FC<RouteComponentProps> = (props) => {
+  const { clear } = useAliveController()
   useEffect(() => {
     getTree()
   }, [])
@@ -42,6 +45,16 @@ const List: React.FC<{}> = () => {
       setTree(data)
     }
   }
+
+  const linkHandler = (id: string, name: string) => {
+    tenderStore.saveBidsectionId(id)
+    tenderStore.saveName(name)
+    props.history.push('/console/safe/content/summary')
+    // 清除所有的缓存页面
+    // console.log(getCachingNodes())
+
+    clear()
+  }
   const columns:ColumnsType<ContractTree> = [
     {
       title: '名称',
@@ -53,7 +66,8 @@ const List: React.FC<{}> = () => {
           return <div style={{ verticalAlign: "baseline" }}><SvgIcon type={record.hasFolder ? "xxh-folder-open" : "xxh-folder"} /><span className="pi-mg-left-2">{text}</span></div>
         } else {
         return <div><span style={{ color: '#6c757d', marginRight: '.5rem' }}>{record.isEnd ? '└' : '├'}</span>
-        <Link to={{ pathname: '/console/safe/content/summary', state: { id: record.bidsectionId, name: record.name } }}>{text}</Link>
+          {/* <Link to={{ pathname: '/console/safe/content/summary', search: `?bid=${record.id}` }}>{text}</Link> */}
+          <span className="pi-link-blue" onClick={() => linkHandler(record.bidsectionId, record.name)}>{text}</span>
         </div>
         }
       }
@@ -127,4 +141,4 @@ const List: React.FC<{}> = () => {
     </div>
   )
 }
-export default List
+export default withRouter(List)

src/router/routes.ts

@@ -106,7 +106,7 @@ export const routeConfig: RouteModel[] = [
             childRoutes: [
               {
                 path: 'summary',
-                component: AsyncModuleLoader(() => import('@/pages/Safe/Content/Summary')),
+                component: AsyncModuleLoader(() => import('@/pages/Safe/Content/Info/Summary')),
                 auth: [ 'USER', 'ADMIN' ],
                 defaultChildRoute: true,
                 meta: {
@@ -115,18 +115,27 @@ export const routeConfig: RouteModel[] = [
                 }
               },
               {
-                path: 'list',
-                component: AsyncModuleLoader(() => import('@/pages/Safe/Content/List')),
+                path: "detail",
+                component: AsyncModuleLoader(() => import('@/pages/Safe/Content/Info')),
                 auth: [ 'USER', 'ADMIN' ],
                 meta: {
                   title: '安全巡检'
-                }
-              },
-              {
-                path: 'detail',
-                component: AsyncModuleLoader(() => import('@/pages/Safe/Content/Detail')),
-                auth: [ 'USER', 'ADMIN' ]
+                },
+                childRoutes: [
+                  {
+                    path: 'list',
+                    component: AsyncModuleLoader(() => import('@/pages/Safe/Content/List')),
+                    auth: [ 'USER', 'ADMIN' ],
+                    defaultChildRoute: true
+                  },
+                  {
+                    path: 'info',
+                    component: AsyncModuleLoader(() => import('@/pages/Safe/Content/Info/Detail')),
+                    auth: [ 'USER', 'ADMIN' ]
+                  }
+                ]
               }
+
             ]
           }
         ]

src/store/mobx/frame/index.ts

@@ -59,6 +59,7 @@ class RouterState {
 
     @action setRouteNameMapping(key: string, value: string) {
         this.routeNameMapping.set(key, value)
+
     }
 
     @action setCurrentRoutePath(cpath: string) {

src/store/mobx/tender/index.ts

@@ -1,4 +1,5 @@
-import { action, observable } from "mobx"
+import { storage } from "@/utils/util"
+import { action, computed, observable } from "mobx"
 
 class Tender {
   @observable bidsectionId:string = ''
@@ -6,10 +7,21 @@ class Tender {
 
   @action saveBidsectionId(id: string) {
     this.bidsectionId = id
+    storage.set('bid', id)
+
   }
   @action saveName(id: string) {
     this.name = id
   }
+
+  @computed get bid() {
+    if (!this.bidsectionId) {
+      const bid = storage.get('bid')
+      this.saveBidsectionId(bid)
+      return bid
+    }
+    return this.bidsectionId
+  }
 }
 
 export default new Tender()

src/types/router.d.ts

@@ -12,6 +12,7 @@ interface RouteModel {
 interface iNavSide extends RouteProps {
   childRoutes: RouteModel[]
   location: any
+  history?: any
 }
 interface iMenu {
   icon?: string;
@@ -30,7 +31,7 @@ interface iMenuItem {
   sort?: number;
 }
 interface NavigationGuardsProps extends RouteProps {
-  routeConfig: RouteModol[];
+  routeConfig: RouteModel[];
   match?: any;
   location?: any
   // permission: string | []