LSDF/src/pages/Object/index.tsx

import styles from "./index.module.scss";
import LeftBar from "@/components/LeftBar";
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 { useSelector } from "react-redux";
import { RootState } from "@/store";

const LookObject1 = React.lazy(
  () => import("../ObjectSon/Object1/LookObject1")
);
const LookObject2 = React.lazy(
  () => import("../ObjectSon/Object2/LookObject2")
);
const LookObject3 = React.lazy(
  () => import("../ObjectSon/Object3/LookObject3")
);

const LookObject4 = React.lazy(
  () => import("../ObjectSon/Object4/LookObject4")
);
const LookObject5 = React.lazy(
  () => import("../ObjectSon/Object5/LookObject5")
);
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 [data, setData] = useState(dataTemp);
  const [dataIn, setDadaIn] = useState(dataInTemp);

  useEffect(() => {
    powerInfo.forEach((v: any) => {
      if (v.id === 100) {
        dataTemp[0].done = true;
        v.children.forEach((v2: any) => {
          if (v2.id === 102 && v2.authority) dataInTemp[0].done = true;
          if (v2.id === 105 && v2.authority) dataInTemp[1].done = true;
        });
      }
      if (v.id === 200) dataTemp[1].done = true;
      if (v.id === 300) {
        dataTemp[2].done = true;
        v.children.forEach((v2: any) => {
          if (v2.id === 302 && v2.authority) dataInTemp[2].done = true;
          if (v2.id === 305 && v2.authority) dataInTemp[3].done = true;
        });
      }
      if (v.id === 400) {
        dataTemp[3].done = true;
        v.children.forEach((v2: any) => {
          if (v2.id === 402 && v2.authority) dataInTemp[4].done = true;
          if (v2.id === 405 && v2.authority) dataInTemp[5].done = true;
        });
      }
      if (v.id === 500) {
        v.children.forEach((v2: any) => {
          if (v2.id === 505 && v2.authority) dataInTemp[6].done = true;
        });
        dataTemp[4].done = true;
      }
      if (v.id === 600) {
        dataTemp[5].done = true;
        v.children.forEach((v2: any) => {
          if (v2.id === 602 && v2.authority) dataInTemp[7].done = true;
          if (v2.id === 605 && v2.authority) dataInTemp[8].done = true;
        });
      }
    });
    setData(dataTemp.filter((v) => v.done));
    setDadaIn(dataInTemp.filter((v) => v.done));

  }, [powerInfo]);

  useEffect(() => {
    // 没有藏品登记页面的权限 跳到有权限的页面
    if (data[0].id !== 1) {
      history.replace(data[0].path);
    }
  }, [data]);

  return (
    <div className={styles.Object}>
      <div className="leftBar">
        <LeftBar data={data} />
      </div>
      {/* 三级路由页面 */}
      <div className="rightMain">
        <React.Suspense fallback={<SpinLoding />}>
          <Switch>
            {data.map((v: any, i: number) => (
              <AuthRoute
                exact
                // exact={i === 0 ? true : false}
                key={v.id}
                path={v.path}
                component={v.Com}
              />
            ))}
            {/* 查看页面，无需权限 */}
            <AuthRoute path="/object/1/look" component={LookObject1} />
            <AuthRoute path="/object/2/look" component={LookObject2} />
            <AuthRoute path="/object/3/look" component={LookObject3} />
            <AuthRoute path="/object/4/look" component={LookObject4} />
            <AuthRoute path="/object/5/look" component={LookObject5} />
            <AuthRoute path="/object/6/look" component={LookObject6} />

            {/* 新增 */}
            {dataIn.map((v: any) => (
              <AuthRoute key={v.id} path={v.path} component={v.Com} />
            ))}

            <Route path="*" component={NotFound} />
          </Switch>
        </React.Suspense>
      </div>
    </div>
  );
}