upp

src/assets/styles/base.css

@@ -46,14 +46,15 @@ ul {
 }
 
 /* 文本域取消下拉 */
-textarea{
-  resize:none !important;
+textarea {
+  resize: none !important;
 }
 
 /* 主题色 */
 :root {
   --themeColor: #9F1927
 }
+
 a {
   color: var(--themeColor);
 }
@@ -124,10 +125,17 @@ a {
   background-color: transparent;
 }
 
-img{
+img {
   object-fit: cover;
 }
 
 [hidden] {
   display: none !important;
 }
+
+
+/* 找不到页面 */
+.noFindPage {
+  opacity: 0;
+  transition: opacity .5s;
+}

src/components/NotFound/index.tsx

@@ -1,13 +1,32 @@
 import history from "@/utils/history";
 import { Button, Result } from "antd";
+import { useEffect, useRef } from "react";
 
 export default function NotFound() {
+  const timeRef = useRef(-1);
+
+  useEffect(() => {
+    timeRef.current = window.setTimeout(() => {
+      const dom: any = document.querySelector(".noFindPage");
+      dom.style.opacity = 1;
+    }, 200);
+    return () => {
+      clearTimeout(timeRef.current);
+    };
+  }, []);
+
   return (
-    <Result
-      status="404"
-      title="404"
-      subTitle="页面找不到了!"
-      extra={<Button onClick={()=>history.push('/')} type="primary">去首页</Button>}
-    />
+    <div className="noFindPage">
+      <Result
+        status="404"
+        title="404"
+        subTitle="页面找不到了!"
+        extra={
+          <Button onClick={() => history.push("/")} type="primary">
+            去首页
+          </Button>
+        }
+      />
+    </div>
   );
 }

src/pages/Home/index.tsx

@@ -1,4 +1,4 @@
-import { getPowerInfo, getTokenInfo } from "@/utils/storage";
+import { getTokenInfo } from "@/utils/storage";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import styles from "./index.module.scss";
 import dayjs from "dayjs";
@@ -11,11 +11,13 @@ import { CanvasRenderer } from "echarts/renderers";
 import history from "@/utils/history";
 import { getStores2API1 } from "@/store/action/stores1";
 import { getHomeNumsAPI } from "@/store/action/login";
+import { useSelector } from "react-redux";
+import { RootState } from "@/store";
 
 echarts.use([TooltipComponent, GridComponent, BarChart, CanvasRenderer]);
 
 // 顶部右侧数据
-const tabList = [
+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: "入库管理" },
@@ -33,18 +35,22 @@ const tempDone = [
 ];
 
 export default function Home() {
+  const [tabList, setTabList] = useState(tabListTemp);
+  const powerInfo = useSelector(
+    (state: RootState) => state.loginStore.authPageArr
+  );
+
   useEffect(() => {
-    // 根据权限来判断
-    const powerInfo = getPowerInfo();
     powerInfo.forEach((v: any) => {
-      if (v.id === 100) tabList[0].done = tempDone[0].done = true;
-      if (v.id === 200) tabList[1].done = true;
-      if (v.id === 300) tabList[2].done = tempDone[1].done = true;
-      if (v.id === 400) tabList[3].done = tempDone[2].done = true;
+      if (v.id === 100) tabListTemp[0].done = tempDone[0].done = true;
+      if (v.id === 200) tabListTemp[1].done = true;
+      if (v.id === 300) tabListTemp[2].done = tempDone[1].done = true;
+      if (v.id === 400) tabListTemp[3].done = tempDone[2].done = true;
       if (v.id === 500) tempDone[3].done = true;
-      if (v.id === 600) tabList[4].done = tempDone[4].done = true;
+      if (v.id === 600) tabListTemp[4].done = tempDone[4].done = true;
     });
-  }, []);
+    setTabList(tabListTemp);
+  }, [powerInfo]);
 
   // 实时时间
   const [nowTime, setNowTime] = useState(

src/pages/Layout/index.tsx

@@ -1,5 +1,4 @@
 import {
-  getPowerInfo,
   getTokenInfo,
   removePowerInfo,
   removeTokenInfo,
@@ -52,9 +51,7 @@ const tabListTemp = [
 function Layout() {
   const dispatch = useDispatch();
 
-  const tabList = useRef<any>(tabListTemp);
-
-  const [tabList,setTabList] =useState(tabListTemp)
+  const [tabList, setTabList] = useState(tabListTemp);
 
   // 进页面获取权限信息
   const getPowerInfoAPIFu = useCallback(async () => {
@@ -73,13 +70,17 @@ function Layout() {
   }, [dispatch]);
 
   // 获取页面权限信息
-  const powerInfo =useSelector((state:RootState)=>state.loginStore.authPageArr)
+  const powerInfo = useSelector(
+    (state: RootState) => state.loginStore.authPageArr
+  );
 
   useEffect(() => {
     getPowerInfoAPIFu();
+  }, [getPowerInfoAPIFu]);
 
+  useEffect(() => {
     const temp = getTokenInfo().user.isAdmin;
-    if (temp === 1)
+    if (temp === 1 && tabListTemp.length <= 3)
       tabListTemp.push({
         id: 4,
         done: true,
@@ -100,9 +101,8 @@ function Layout() {
         tabListTemp[1].done = true;
       }
     });
-
-    tabList.current = tabListTemp.filter((v) => v.done);
-  }, [getPowerInfoAPIFu]);
+    setTabList(tabListTemp.filter((v) => v.done));
+  }, [powerInfo]);
 
   const location = useLocation();
   const [path, setPath] = useState("");
@@ -169,7 +169,7 @@ function Layout() {
         <div className="main">
           <div className="logo"></div>
           <div className="tabCut">
-            {tabList.current.map((v: any) => (
+            {tabList.map((v: any) => (
               <div
                 onClick={() => pathCutFu(v.path)}
                 className={classNames("row", v.path === path ? "active" : "")}
@@ -199,7 +199,7 @@ function Layout() {
       <div className="pageMain">
         <React.Suspense fallback={<SpinLoding />}>
           <Switch>
-            {tabList.current.map((v: any, i: number) => (
+            {tabList.map((v: any, i: number) => (
               <AuthRoute
                 key={v.id}
                 exact={i === 0 ? true : false}

src/pages/Object/index.tsx

@@ -1,12 +1,13 @@
 import styles from "./index.module.scss";
 import LeftBar from "@/components/LeftBar";
-import React, { useEffect, useRef } from "react";
+import React, { useEffect, useState } from "react";
 import SpinLoding from "@/components/SpinLoding";
 import { Route, Switch } from "react-router-dom";
 import AuthRoute from "@/components/AuthRoute";
 import NotFound from "@/components/NotFound";
 import history from "@/utils/history";
-import { getPowerInfo } from "@/utils/storage";
+import { useSelector } from "react-redux";
+import { RootState } from "@/store";
 
 const LookObject1 = React.lazy(
   () => import("../ObjectSon/Object1/LookObject1")
@@ -140,12 +141,14 @@ const dataInTemp = [
 ];
 
 export default function Object() {
-  const data = useRef<any>([]);
-  const dataIn = useRef<any>([]);
+  const powerInfo = useSelector(
+    (state: RootState) => state.loginStore.authPageArr
+  );
+
+  const [data, setData] = useState(dataTemp);
+  const [dataIn, setDadaIn] = useState(dataInTemp);
 
   useEffect(() => {
-    // 根据权限来判断
-    const powerInfo = getPowerInfo();
     powerInfo.forEach((v: any) => {
       if (v.id === 100) {
         dataTemp[0].done = true;
@@ -183,15 +186,17 @@ export default function Object() {
         });
       }
     });
-    data.current = dataTemp.filter((v) => v.done);
-    console.log(1231231,data.current);
-    
-    dataIn.current = dataInTemp.filter((v) => v.done);
+    setData(dataTemp.filter((v) => v.done));
+    setDadaIn(dataInTemp.filter((v) => v.done));
+
+  }, [powerInfo]);
+
+  useEffect(() => {
     // 没有藏品登记页面的权限 跳到有权限的页面
-    if (data.current[0].id !== 1) {
-      history.replace(data.current[0].path);
+    if (data[0].id !== 1) {
+      history.replace(data[0].path);
     }
-  }, []);
+  }, [data]);
 
   return (
     <div className={styles.Object}>
@@ -202,7 +207,7 @@ export default function Object() {
       <div className="rightMain">
         <React.Suspense fallback={<SpinLoding />}>
           <Switch>
-            {data.current.map((v: any, i: number) => (
+            {data.map((v: any, i: number) => (
               <AuthRoute
                 exact
                 // exact={i === 0 ? true : false}
@@ -220,7 +225,7 @@ export default function Object() {
             <AuthRoute path="/object/6/look" component={LookObject6} />
 
             {/* 新增 */}
-            {dataIn.current.map((v: any) => (
+            {dataIn.map((v: any) => (
               <AuthRoute key={v.id} path={v.path} component={v.Com} />
             ))}
 

src/pages/ObjectSon/Object2/LookObject2/table.tsx

@@ -2,7 +2,6 @@ import AuthButton from "@/components/AuthButton";
 import { RootState } from "@/store";
 import { getObj2LogListAPI } from "@/store/action/object2";
 import { logTypeObj, logTypeOpenObj } from "@/utils/dataChange";
-import { getPowerInfo } from "@/utils/storage";
 import { Table } from "antd";
 import React, {
   useCallback,
@@ -17,12 +16,13 @@ type Props = {
   id: number;
 };
 
-// 根据权限来判断
-const powerInfo = getPowerInfo();
-
 function LookObject2Log({ id }: Props) {
   const dispatch = useDispatch();
 
+  const powerInfo = useSelector(
+    (state: RootState) => state.loginStore.authPageArr
+  );
+
   const pageNumRef = useRef(1);
   const pagePageRef = useRef(10);
   const [tableSelect, setTableSelect] = useState({
@@ -101,7 +101,7 @@ function LookObject2Log({ id }: Props) {
       },
     ];
     return tempArr;
-  }, [openURL]);
+  }, [openURL, powerInfo]);
 
   return (
     <Table

src/pages/Stores/index.tsx

@@ -2,9 +2,10 @@ import AuthRoute from "@/components/AuthRoute";
 import LeftBar from "@/components/LeftBar";
 import NotFound from "@/components/NotFound";
 import SpinLoding from "@/components/SpinLoding";
+import { RootState } from "@/store";
 import history from "@/utils/history";
-import { getPowerInfo } from "@/utils/storage";
-import React from "react";
+import React, { useEffect, useState } from "react";
+import { useSelector } from "react-redux";
 import { Route, Switch } from "react-router-dom";
 import styles from "./index.module.scss";
 
@@ -46,26 +47,35 @@ const dataInTemp = [
   },
 ];
 
-// 根据权限来判断
-const powerInfo = getPowerInfo();
-powerInfo.forEach((v: any) => {
-  if (v.id === 700) dataTemp[0].done = true;
-  if (v.id === 800) {
-    v.children.forEach((v2: any) => {
-      if (v2.id === 805 && v2.authority) dataInTemp[0].done = true;
+export default function Stores() {
+  const powerInfo = useSelector(
+    (state: RootState) => state.loginStore.authPageArr
+  );
+
+  const [data, setData] = useState(dataTemp);
+  const [dataIn, setDataIn] = useState(dataInTemp);
+
+  useEffect(() => {
+    powerInfo.forEach((v: any) => {
+      if (v.id === 700) dataTemp[0].done = true;
+      if (v.id === 800) {
+        v.children.forEach((v2: any) => {
+          if (v2.id === 805 && v2.authority) dataInTemp[0].done = true;
+        });
+        dataTemp[2].done = true;
+      }
     });
-    dataTemp[2].done = true;
-  }
-});
+    setData(dataTemp.filter((v) => v.done));
+    setDataIn(dataInTemp.filter((v) => v.done));
+  }, [powerInfo]);
 
-const data = dataTemp.filter((v) => v.done);
-const dataIn = dataInTemp.filter((v) => v.done);
-// 没有库房设置页面的权限 跳到有权限的页面
-if (data[0].id !== 1) {
-  history.replace(data[0].path);
-}
+  useEffect(() => {
+    // 没有库房设置页面的权限 跳到有权限的页面
+    if (data[0].id !== 1) {
+      history.replace(data[0].path);
+    }
+  }, [data]);
 
-export default function Stores() {
   return (
     <div className={styles.Stores}>
       <div className="leftBar">

src/pages/StoresSon/Stores1/index.tsx

@@ -27,21 +27,24 @@ import {
 import { useDispatch, useSelector } from "react-redux";
 import { RootState } from "@/store";
 import AuthButton from "@/components/AuthButton";
-import { getPowerInfo } from "@/utils/storage";
 
-// 根据权限来判断
-const powerInfo = getPowerInfo();
-const powerInfoTemp = powerInfo.filter((v: any) => v.id === 700)[0];
-let powerInfoRes = [false, false];
-if (powerInfoTemp) {
-  powerInfoTemp.children.forEach((v: any) => {
-    if (v.id === 702 && v.authority) powerInfoRes[0] = true;
-    if (v.id === 703 && v.authority) powerInfoRes[1] = true;
-  });
-}
+function Stores1() {
+  const powerInfo = useSelector(
+    (state: RootState) => state.loginStore.authPageArr
+  );
+  const [powerInfoRes1, setPowerInfoRes1] = useState(false);
+  const [powerInfoRes2, setPowerInfoRes2] = useState(false);
 
+  useEffect(() => {
+    const powerInfoTemp = powerInfo.filter((v: any) => v.id === 700)[0];
+    if (powerInfoTemp) {
+      powerInfoTemp.children.forEach((v: any) => {
+        if (v.id === 702 && v.authority) setPowerInfoRes1(true);
+        if (v.id === 703 && v.authority) setPowerInfoRes2(true);
+      });
+    }
+  }, [powerInfo]);
 
-function Stores1() {
   const dispatch = useDispatch();
 
   // 封装获取列表的函数
@@ -168,7 +171,7 @@ function Stores1() {
         title: "操作",
         render: (item: any) => (
           <div className="storesRTitInco">
-            {powerInfoRes[0] ? (
+            {powerInfoRes1 ? (
               <>
                 <EditOutlined
                   title="编辑货架"
@@ -184,13 +187,13 @@ function Stores1() {
               cancelText="取消"
               onConfirm={() => delOne(item.id)}
             >
-              {powerInfoRes[1] ? <DeleteOutlined title="删除货架" /> : null}
+              {powerInfoRes2 ? <DeleteOutlined title="删除货架" /> : null}
             </Popconfirm>
           </div>
         ),
       },
     ];
-  }, [addFu, delOne]);
+  }, [addFu, delOne, powerInfoRes1, powerInfoRes2]);
 
   return (
     <div className={styles.Stores1}>
@@ -239,7 +242,7 @@ function Stores1() {
                       {v.name}
                     </div>
                     <div className="inco2">
-                      {powerInfoRes[0] ? (
+                      {powerInfoRes1 ? (
                         <>
                           <PlusOutlined
                             title="新增库房"
@@ -249,7 +252,7 @@ function Stores1() {
                         </>
                       ) : null}
 
-                      {powerInfoRes[1] ? (
+                      {powerInfoRes2 ? (
                         <EditOutlined
                           title="编辑库区"
                           onClick={() => addFu("1", v.id)}
@@ -293,7 +296,7 @@ function Stores1() {
                   仓库编号：{infoList2[acind2].num}
                 </div>
                 <div className="storesRTitInco">
-                  {powerInfoRes[0] ? (
+                  {powerInfoRes1 ? (
                     <>
                       <PlusOutlined
                         title="新增货架"
@@ -314,9 +317,7 @@ function Stores1() {
                     cancelText="取消"
                     onConfirm={() => delOne(infoList2[acind2].id)}
                   >
-                    {powerInfoRes[1] ? (
-                      <DeleteOutlined title="删除库房" />
-                    ) : null}
+                    {powerInfoRes2 ? <DeleteOutlined title="删除库房" /> : null}
                   </Popconfirm>
                 </div>
               </>