初步完工

src/pages/Home/index.tsx

@@ -16,25 +16,28 @@ import { RootState } from "@/store";
 
 echarts.use([TooltipComponent, GridComponent, BarChart, CanvasRenderer]);
 
-// 顶部右侧数据
-const tabListTemp = [
-  { id: 1, done: false, path: "/object", name: "藏品登记" },
-  { id: 2, done: false, path: "/object/2", name: "藏品总账" },
-  { id: 3, done: false, path: "/object/3", name: "入库管理" },
-  { id: 4, done: false, path: "/object/4", name: "出库管理" },
-  { id: 5, done: false, path: "/object/6", name: "藏品注销" },
-];
-
-// 右下方的数据
-const tempDone = [
-  { id: 1, done: false, path: "/object", num: 0, name: "藏品登记" },
-  { id: 2, done: false, path: "/object/3", num: 0, name: "入库管理" },
-  { id: 3, done: false, path: "/object/4", num: 0, name: "出库管理" },
-  { id: 4, done: false, path: "/object/5", num: 0, name: "藏品修改" },
-  { id: 5, done: false, path: "/object/6", num: 0, name: "藏品注销" },
-];
-
 export default function Home() {
+  // 顶部右侧数据
+  const tabListTemp = useMemo(() => {
+    return [
+      { id: 1, done: false, path: "/object", name: "藏品登记" },
+      { id: 2, done: false, path: "/object/2", name: "藏品总账" },
+      { id: 3, done: false, path: "/object/3", name: "入库管理" },
+      { id: 4, done: false, path: "/object/4", name: "出库管理" },
+      { id: 5, done: false, path: "/object/6", name: "藏品注销" },
+    ];
+  }, []);
+  // 右下方的数据
+  const tempDone = useMemo(() => {
+    return [
+      { id: 1, done: false, path: "/object", num: 0, name: "藏品登记" },
+      { id: 2, done: false, path: "/object/3", num: 0, name: "入库管理" },
+      { id: 3, done: false, path: "/object/4", num: 0, name: "出库管理" },
+      { id: 4, done: false, path: "/object/5", num: 0, name: "藏品修改" },
+      { id: 5, done: false, path: "/object/6", num: 0, name: "藏品注销" },
+    ];
+  }, []);
+
   const [tabList, setTabList] = useState(tabListTemp);
   const powerInfo = useSelector(
     (state: RootState) => state.loginStore.authPageArr
@@ -50,7 +53,7 @@ export default function Home() {
       if (v.id === 600) tabListTemp[4].done = tempDone[4].done = true;
     });
     setTabList(tabListTemp);
-  }, [powerInfo]);
+  }, [powerInfo, tabListTemp, tempDone]);
 
   // 实时时间
   const [nowTime, setNowTime] = useState(
@@ -189,7 +192,7 @@ export default function Home() {
       else if (v.groupKey === "cancel") data[4].num = v.count;
     });
     setDoneList(data);
-  }, []);
+  }, [tempDone]);
 
   useEffect(() => {
     echartsFu();

src/pages/Layout/index.tsx

@@ -24,33 +24,35 @@ import { RootState } from "@/store";
 
 const NotFound = React.lazy(() => import("../../components/NotFound"));
 
-const tabListTemp = [
-  {
-    id: 1,
-    done: true,
-    Com: React.lazy(() => import("../Home")),
-    path: "/",
-    name: "首页",
-  },
-  {
-    id: 2,
-    done: false,
-    Com: React.lazy(() => import("../Object")),
-    path: "/object",
-    name: "馆藏管理",
-  },
-  {
-    id: 3,
-    done: true,
-    Com: React.lazy(() => import("../Stores")),
-    path: "/stores",
-    name: "库房管理",
-  },
-];
-
 function Layout() {
   const dispatch = useDispatch();
 
+  const tabListTemp = useMemo(() => {
+    return [
+      {
+        id: 1,
+        done: true,
+        Com: React.lazy(() => import("../Home")),
+        path: "/",
+        name: "首页",
+      },
+      {
+        id: 2,
+        done: false,
+        Com: React.lazy(() => import("../Object")),
+        path: "/object",
+        name: "馆藏管理",
+      },
+      {
+        id: 3,
+        done: true,
+        Com: React.lazy(() => import("../Stores")),
+        path: "/stores",
+        name: "库房管理",
+      },
+    ];
+  }, []);
+
   const [tabList, setTabList] = useState(tabListTemp);
 
   // 进页面获取权限信息
@@ -89,20 +91,23 @@ function Layout() {
         name: "系统管理",
       });
 
-    powerInfo.forEach((v: any) => {
-      if (
-        v.id === 100 ||
-        v.id === 200 ||
-        v.id === 300 ||
-        v.id === 400 ||
-        v.id === 500 ||
-        v.id === 600
-      ) {
-        tabListTemp[1].done = true;
-      }
-    });
+    if (powerInfo.length) {
+      powerInfo.forEach((v: any) => {
+        if (
+          v.id === 100 ||
+          v.id === 200 ||
+          v.id === 300 ||
+          v.id === 400 ||
+          v.id === 500 ||
+          v.id === 600
+        ) {
+          tabListTemp[1].done = true;
+        }
+      });
+    } else tabListTemp[1].done = false;
+
     setTabList(tabListTemp.filter((v) => v.done));
-  }, [powerInfo]);
+  }, [powerInfo, tabListTemp]);
 
   const location = useLocation();
   const [path, setPath] = useState("");

src/pages/Object/index.tsx

@@ -1,6 +1,6 @@
 import styles from "./index.module.scss";
 import LeftBar from "@/components/LeftBar";
-import React, { useEffect, useState } from "react";
+import React, { useEffect, useMemo, useState } from "react";
 import SpinLoding from "@/components/SpinLoding";
 import { Route, Switch } from "react-router-dom";
 import AuthRoute from "@/components/AuthRoute";
@@ -29,122 +29,126 @@ const LookObject6 = React.lazy(
   () => import("../ObjectSon/Object6/LookObject6")
 );
 
-const dataTemp = [
-  {
-    id: 1,
-    name: "藏品登记",
-    done: false,
-    Com: React.lazy(() => import("../ObjectSon/Object1")),
-    path: "/object",
-  },
-  {
-    id: 2,
-    done: false,
-    name: "藏品总账",
-    Com: React.lazy(() => import("../ObjectSon/Object2")),
-    path: "/object/2",
-  },
-  {
-    id: 3,
-    done: false,
-    name: "入库管理",
-    Com: React.lazy(() => import("../ObjectSon/Object3")),
-    path: "/object/3",
-  },
-  {
-    id: 4,
-    done: false,
-    name: "出库管理",
-    Com: React.lazy(() => import("../ObjectSon/Object4")),
-    path: "/object/4",
-  },
-  {
-    id: 5,
-    done: false,
-    name: "藏品修改",
-    Com: React.lazy(() => import("../ObjectSon/Object5")),
-    path: "/object/5",
-  },
-  {
-    id: 6,
-    done: false,
-    name: "藏品注销",
-    Com: React.lazy(() => import("../ObjectSon/Object6")),
-    path: "/object/6",
-  },
-];
-
-const dataInTemp = [
-  {
-    id: 1001,
-    done: false,
-    name: "藏品登记新增",
-    Com: React.lazy(() => import("../ObjectSon/Object1/AddObject1")),
-    path: "/object/1/add",
-  },
-  {
-    id: 1002,
-    done: false,
-    name: "藏品登记审核",
-    Com: React.lazy(() => import("../ObjectSon/Object1/AuditObject1")),
-    path: "/object/1/audit",
-  },
-  {
-    id: 3001,
-    done: false,
-    name: "入库管理新增",
-    Com: React.lazy(() => import("../ObjectSon/Object3/AddObject3")),
-    path: "/object/3/add",
-  },
-  {
-    id: 3002,
-    done: false,
-    name: "入库管理审核",
-    Com: React.lazy(() => import("../ObjectSon/Object3/AuditObject3")),
-    path: "/object/3/audit",
-  },
-  {
-    id: 4001,
-    done: false,
-    name: "出库管理新增",
-    Com: React.lazy(() => import("../ObjectSon/Object4/AddObject4")),
-    path: "/object/4/add",
-  },
-  {
-    id: 4002,
-    done: false,
-    name: "出库管理审核",
-    Com: React.lazy(() => import("../ObjectSon/Object4/AuditObject4")),
-    path: "/object/4/audit",
-  },
-  {
-    id: 5001,
-    done: false,
-    name: "出库管理审核",
-    Com: React.lazy(() => import("../ObjectSon/Object5/AuditObject5")),
-    path: "/object/5/audit",
-  },
-  {
-    id: 6001,
-    done: false,
-    name: "藏品注销新增",
-    Com: React.lazy(() => import("../ObjectSon/Object6/AddObject6")),
-    path: "/object/6/add",
-  },
-  {
-    id: 6002,
-    done: false,
-    name: "藏品注销审核",
-    Com: React.lazy(() => import("../ObjectSon/Object6/AuditObject6")),
-    path: "/object/6/audit",
-  },
-];
-
 export default function Object() {
   const powerInfo = useSelector(
     (state: RootState) => state.loginStore.authPageArr
   );
 
+  const dataTemp = useMemo(() => {
+    return [
+      {
+        id: 1,
+        name: "藏品登记",
+        done: false,
+        Com: React.lazy(() => import("../ObjectSon/Object1")),
+        path: "/object",
+      },
+      {
+        id: 2,
+        done: false,
+        name: "藏品总账",
+        Com: React.lazy(() => import("../ObjectSon/Object2")),
+        path: "/object/2",
+      },
+      {
+        id: 3,
+        done: false,
+        name: "入库管理",
+        Com: React.lazy(() => import("../ObjectSon/Object3")),
+        path: "/object/3",
+      },
+      {
+        id: 4,
+        done: false,
+        name: "出库管理",
+        Com: React.lazy(() => import("../ObjectSon/Object4")),
+        path: "/object/4",
+      },
+      {
+        id: 5,
+        done: false,
+        name: "藏品修改",
+        Com: React.lazy(() => import("../ObjectSon/Object5")),
+        path: "/object/5",
+      },
+      {
+        id: 6,
+        done: false,
+        name: "藏品注销",
+        Com: React.lazy(() => import("../ObjectSon/Object6")),
+        path: "/object/6",
+      },
+    ];
+  }, []);
+
+  const dataInTemp = useMemo(() => {
+    return [
+      {
+        id: 1001,
+        done: false,
+        name: "藏品登记新增",
+        Com: React.lazy(() => import("../ObjectSon/Object1/AddObject1")),
+        path: "/object/1/add",
+      },
+      {
+        id: 1002,
+        done: false,
+        name: "藏品登记审核",
+        Com: React.lazy(() => import("../ObjectSon/Object1/AuditObject1")),
+        path: "/object/1/audit",
+      },
+      {
+        id: 3001,
+        done: false,
+        name: "入库管理新增",
+        Com: React.lazy(() => import("../ObjectSon/Object3/AddObject3")),
+        path: "/object/3/add",
+      },
+      {
+        id: 3002,
+        done: false,
+        name: "入库管理审核",
+        Com: React.lazy(() => import("../ObjectSon/Object3/AuditObject3")),
+        path: "/object/3/audit",
+      },
+      {
+        id: 4001,
+        done: false,
+        name: "出库管理新增",
+        Com: React.lazy(() => import("../ObjectSon/Object4/AddObject4")),
+        path: "/object/4/add",
+      },
+      {
+        id: 4002,
+        done: false,
+        name: "出库管理审核",
+        Com: React.lazy(() => import("../ObjectSon/Object4/AuditObject4")),
+        path: "/object/4/audit",
+      },
+      {
+        id: 5001,
+        done: false,
+        name: "出库管理审核",
+        Com: React.lazy(() => import("../ObjectSon/Object5/AuditObject5")),
+        path: "/object/5/audit",
+      },
+      {
+        id: 6001,
+        done: false,
+        name: "藏品注销新增",
+        Com: React.lazy(() => import("../ObjectSon/Object6/AddObject6")),
+        path: "/object/6/add",
+      },
+      {
+        id: 6002,
+        done: false,
+        name: "藏品注销审核",
+        Com: React.lazy(() => import("../ObjectSon/Object6/AuditObject6")),
+        path: "/object/6/audit",
+      },
+    ];
+  }, []);
+
   const [data, setData] = useState(dataTemp);
   const [dataIn, setDadaIn] = useState(dataInTemp);
 
@@ -188,8 +192,7 @@ export default function Object() {
     });
     setData(dataTemp.filter((v) => v.done));
     setDadaIn(dataInTemp.filter((v) => v.done));
-
-  }, [powerInfo]);
+  }, [dataInTemp, dataTemp, powerInfo]);
 
   useEffect(() => {
     // 没有藏品登记页面的权限 跳到有权限的页面

src/pages/Stores/index.tsx

@@ -4,7 +4,7 @@ import NotFound from "@/components/NotFound";
 import SpinLoding from "@/components/SpinLoding";
 import { RootState } from "@/store";
 import history from "@/utils/history";
-import React, { useEffect, useState } from "react";
+import React, { useEffect, useMemo, useState } from "react";
 import { useSelector } from "react-redux";
 import { Route, Switch } from "react-router-dom";
 import styles from "./index.module.scss";
@@ -13,41 +13,45 @@ const LookStores3 = React.lazy(
   () => import("../StoresSon/Stores3/LookStores3")
 );
 
-const dataTemp = [
-  {
-    id: 1,
-    done: false,
-    name: "库房设置",
-    Com: React.lazy(() => import("../StoresSon/Stores1")),
-    path: "/stores",
-  },
-  {
-    id: 2,
-    done: true,
-    name: "统计报表",
-    Com: React.lazy(() => import("../StoresSon/Stores2")),
-    path: "/stores/2",
-  },
-  {
-    id: 3,
-    done: false,
-    name: "藏品移库",
-    Com: React.lazy(() => import("../StoresSon/Stores3")),
-    path: "/stores/3",
-  },
-];
+export default function Stores() {
+  const dataTemp = useMemo(() => {
+    return [
+      {
+        id: 1,
+        done: false,
+        name: "库房设置",
+        Com: React.lazy(() => import("../StoresSon/Stores1")),
+        path: "/stores",
+      },
+      {
+        id: 2,
+        done: true,
+        name: "统计报表",
+        Com: React.lazy(() => import("../StoresSon/Stores2")),
+        path: "/stores/2",
+      },
+      {
+        id: 3,
+        done: false,
+        name: "藏品移库",
+        Com: React.lazy(() => import("../StoresSon/Stores3")),
+        path: "/stores/3",
+      },
+    ];
+  }, []);
 
-const dataInTemp = [
-  {
-    id: 1001,
-    done: false,
-    name: "藏品移库审核",
-    Com: React.lazy(() => import("../StoresSon/Stores3/AuditStores3")),
-    path: "/stores/3/audit",
-  },
-];
+  const dataInTemp = useMemo(() => {
+    return [
+      {
+        id: 1001,
+        done: false,
+        name: "藏品移库审核",
+        Com: React.lazy(() => import("../StoresSon/Stores3/AuditStores3")),
+        path: "/stores/3/audit",
+      },
+    ];
+  }, []);
 
-export default function Stores() {
   const powerInfo = useSelector(
     (state: RootState) => state.loginStore.authPageArr
   );
@@ -67,7 +71,7 @@ export default function Stores() {
     });
     setData(dataTemp.filter((v) => v.done));
     setDataIn(dataInTemp.filter((v) => v.done));
-  }, [powerInfo]);
+  }, [dataInTemp, dataTemp, powerInfo]);
 
   useEffect(() => {
     // 没有库房设置页面的权限 跳到有权限的页面

src/pages/StoresSon/Stores1/index.tsx

@@ -252,7 +252,7 @@ function Stores1() {
                         </>
                       ) : null}
 
-                      {powerInfoRes2 ? (
+                      {powerInfoRes1 ? (
                         <EditOutlined
                           title="编辑库区"
                           onClick={() => addFu("1", v.id)}