upp

src/components/NotFound/index.tsx

@@ -19,7 +19,7 @@ export default function NotFound() {
       <Result
         status="404"
         title="404"
-        subTitle="找不到页面!"
+        subTitle="找不到页面，或没有权限!"
       />
     </div>
   );

src/pages/A3User/UserAdd/dataRes.ts

@@ -0,0 +1,36 @@
+/**
+ *
+ * @param id 最后一级的id
+ * @returns 数组，所有父id+自己id的数组
+ */
+
+import { A5TableType } from "@/types";
+
+const lastIdresArrFu = (id: string, arrAll: A5TableType[]) => {
+  let arr: string[] = [];
+
+  arrAll.forEach((v1) => {
+    if (v1.id === id) arr = [id];
+    else {
+      v1.children?.forEach((v2) => {
+        if (v2.id === id) arr = [v1.id, id];
+        else {
+          v2.children?.forEach((v3) => {
+            if (v3.id === id) arr = [v1.id, v2.id, id];
+            else {
+              v3.children?.forEach((v4) => {
+                if (v4.id === id) {
+                  arr = [v1.id, v2.id, v3.id, id];
+                }
+              });
+            }
+          });
+        }
+      });
+    }
+  });
+
+  return arr;
+};
+
+export default lastIdresArrFu;

src/pages/A3User/UserAdd/index.tsx

@@ -15,6 +15,7 @@ import {
 import React, { useCallback, useEffect, useRef, useState } from "react";
 import { useSelector } from "react-redux";
 import styles from "./index.module.scss";
+import lastIdresArrFu from "./dataRes";
 
 type Props = {
   id: any;
@@ -24,39 +25,52 @@ type Props = {
 };
 
 function UserAdd({ id, closePage, upTableList, addTableList }: Props) {
+  // 从仓库获取角色下拉列表信息
+  const roleList = useSelector((state: RootState) => state.A3User.roleList);
+
+  // 从仓库获取部门 级联 信息
+  const deptList = useSelector((state: RootState) => state.A5Section.tableList);
+
   // 设置表单初始数据（区分编辑和新增）
   const FormBoxRef = useRef<FormInstance>(null);
 
-  const getInfoInAPIFu = useCallback(async (id: number) => {
-    const res = await getUserInfoByIdAPI(id);
+  // 回显 级联 信息
+  const idresArr = useCallback(
+    (deptId: string) => {
+      const arr = lastIdresArrFu(deptId, deptList);
+      return arr;
+    },
+    [deptList]
+  );
 
-    FormBoxRef.current?.setFieldsValue({
-      ...res.data,
-      // deptId: ["1", "2", "51", "52"],
-    });
-    console.log("是编辑，在这里发请求拿数据", res);
-  }, []);
+  const getInfoInAPIFu = useCallback(
+    async (id: number) => {
+      const res = await getUserInfoByIdAPI(id);
 
-  // 没有通过校验
-  const onFinishFailed = useCallback(() => {
-    // return MessageFu.warning("有表单不符号规则!");
-  }, []);
+      if (res.code === 0) {
+        FormBoxRef.current?.setFieldsValue({
+          ...res.data,
+          deptId: idresArr(res.data.deptId + ""),
+        });
+      }
+    },
+    [idresArr]
+  );
 
   useEffect(() => {
     if (id) getInfoInAPIFu(id);
-    else {
-      FormBoxRef.current?.setFieldsValue({});
-    }
+    // else {
+    //   FormBoxRef.current?.setFieldsValue({});
+    // }
   }, [getInfoInAPIFu, id]);
 
   // 密码提示
   const [passFlag, setPassFlag] = useState("");
 
-  // 从仓库获取角色下拉列表信息
-  const roleList = useSelector((state: RootState) => state.A3User.roleList);
-
-  // 从仓库获取部门 级联 信息
-  const deptList = useSelector((state: RootState) => state.A5Section.tableList);
+  // 没有通过校验
+  const onFinishFailed = useCallback(() => {
+    // return MessageFu.warning("有表单不符号规则!");
+  }, []);
 
   // 通过校验点击确定
   const onFinish = useCallback(

src/pages/A3User/index.tsx

@@ -6,7 +6,7 @@ import {
 } from "@/store/action/A3User";
 import { UserTableAPIType, UserTableListType } from "@/types";
 import { MessageFu } from "@/utils/message";
-import { Input, Button, Table, Popconfirm, Select } from "antd";
+import { Input, Button, Table, Popconfirm, Select, Cascader } from "antd";
 import React, {
   useCallback,
   useEffect,
@@ -33,10 +33,25 @@ function A3User() {
     searchKey: "",
   });
 
-  // 获取 部门 列表下拉框数据
+  // 获取 部门(树形) 列表下拉框数据
   const selectData1 = useSelector(
     (state: RootState) => state.A5Section.tableList
   );
+
+  // 部门树型选中的数组
+  const [treeDept, setTreeDept] = useState<any>([undefined]);
+
+  const setTreeDeptFu = useCallback(
+    (e: any) => {
+      setTreeDept(e);
+
+      const txt = e[e.length - 1];
+
+      setTableSelect({ ...tableSelect, deptId: txt ? Number(txt) : "" });
+    },
+    [tableSelect]
+  );
+
   // 获取 角色 列表下拉框数据
   const selectData2 = useSelector((state: RootState) => state.A3User.roleList);
 
@@ -85,6 +100,12 @@ function A3User() {
   // 点击重置
   const [inputKey, setInputKey] = useState(1);
   const resetSelectFu = useCallback(() => {
+
+    // 级联筛选 恢复 初始
+    setTreeDept([undefined])
+
+
+
     // 把2个输入框和时间选择器清空
     setInputKey(Date.now());
     setTableSelect({
@@ -156,7 +177,7 @@ function A3User() {
       },
       {
         title: "所属部门",
-        dataIndex: "nickName",
+        dataIndex: "deptName",
       },
       {
         title: "角色",
@@ -234,7 +255,18 @@ function A3User() {
 
           <div className="selectBoxRow">
             <span>所属部门：</span>
-            <Select
+
+            <Cascader
+              style={{ width: 300 }}
+              value={treeDept}
+              onChange={(e) => setTreeDeptFu(e)}
+              options={[{ value: undefined, name: "全部" }, ...selectData1]}
+              fieldNames={{ label: "name", value: "id" }}
+              placeholder="请选择"
+              allowClear={false}
+            />
+
+            {/* <Select
               style={{ width: 220 }}
               placeholder="请选择"
               value={tableSelect.deptId}
@@ -243,7 +275,7 @@ function A3User() {
                 { value: "", label: "全部" },
                 ...selectData1.map((v) => ({ value: v.id, label: v.name })),
               ]}
-            />
+            /> */}
           </div>
 
           <div className="selectBoxRow">

src/pages/A4Role/index.tsx

@@ -127,7 +127,7 @@ function A4Role() {
           item.pcsPerm ? item.pcsPerm + "项" : "-",
       },
       {
-        title: "应用权限",
+        title: "数据权限",
         render: (item: RoleTableType) =>
           item.dataScope === 1
             ? "本部门-自己创建的项目"

src/pages/Layout/data.ts

@@ -0,0 +1,56 @@
+import { RouterType } from "@/types";
+import React from "react";
+
+const tabLeftArr: RouterType = [
+  {
+    id: "1000",
+    name: "项目管理",
+    path: "/",
+    Com: React.lazy(() => import("../A1Project")),
+    done: false,
+  },
+  {
+    id: "100",
+    name: "字典管理",
+    path: "/dict",
+    Com: React.lazy(() => import("../A2Dict")),
+    done: false,
+  },
+  {
+    id: "200",
+    name: "用户管理",
+    path: "/user",
+    Com: React.lazy(() => import("../A3User")),
+    done: false,
+  },
+  {
+    id: "300",
+    name: "角色管理",
+    path: "/role",
+    Com: React.lazy(() => import("../A4Role")),
+    done: false,
+  },
+  {
+    id: "400",
+    name: "部门管理",
+    path: "/section",
+    Com: React.lazy(() => import("../A5Section")),
+    done: false,
+  },
+  {
+    id: "500",
+    name: "系统日志",
+    path: "/log",
+    Com: React.lazy(() => import("../A6Log")),
+    done: false,
+  },
+  {
+    id: "600",
+    name: "回收站",
+    path: "/recycled",
+    Com: React.lazy(() => import("../A7Recycled")),
+    done: false,
+  },
+];
+
+export default tabLeftArr;

src/pages/Layout/index.tsx

@@ -18,92 +18,57 @@ import encodeStr from "@/utils/pass";
 import { passWordEditAPI } from "@/store/action/layout";
 import { getTokenInfo, removeTokenInfo } from "@/utils/storage";
 import { MessageFu } from "@/utils/message";
-import { RouterType } from "@/types";
 import logoImg from "@/assets/img/logo.png";
-import { useDispatch } from "react-redux";
+import { useDispatch, useSelector } from "react-redux";
 import { A5_APIgetList } from "@/store/action/A5Section";
 import { A4_APIgetRoleAll } from "@/store/action/A4Role";
 import { A2_APIgetListFile } from "@/store/action/A2Dict";
 import { A3_APIgetRole } from "@/store/action/A3User";
-
-const NotFound = React.lazy(() => import("@/components/NotFound"));
+import NotFound from "@/components/NotFound";
+import tabLeftArr from "./data";
+import { RootState } from "@/store";
+import { RouterType } from "@/types";
 
 function Layout() {
+  const dispatch = useDispatch();
 
-  const dispatch =useDispatch()
-
-  useEffect(()=>{
+  useEffect(() => {
     // 进页面获取 部门 列表 信息（给 用户管理、字段管理、项目管理 页面使用）
-    dispatch(A5_APIgetList())
+    dispatch(A5_APIgetList());
 
     // 获取角色 列表 信息（给 用户管理、项目管理 页面使用）
     dispatch(A3_APIgetRole());
 
     // 获取权限信息(整个项目的关于权限的信息)
-    dispatch(A4_APIgetRoleAll())
+    dispatch(A4_APIgetRoleAll());
 
-    // 获取字典的 -内控文件属性(角色管理等页面使用)
+    // 获取字典的 -内控文件属性 列表(角色管理等页面使用)
     dispatch(A2_APIgetListFile());
+  }, [dispatch]);
 
-  },[dispatch])
+  // 左侧菜单 和 路由 信息
+  const [list, setList] = useState([] as RouterType);
 
+  //获取权限信息（id数组，已过滤）
+  const A4RoleAll = useSelector((state: RootState) => state.A4Role.A4RoleAll);
 
-  const listTemp = useMemo(() => {
-    const arr: RouterType = [
-      {
-        id: 1,
-        name: "项目管理",
-        path: "/",
-        Com: React.lazy(() => import("../A1Project")),
-        done: true,
-      },
-      {
-        id: 2,
-        name: "字典管理",
-        path: "/dict",
-        Com: React.lazy(() => import("../A2Dict")),
-        done: true,
-      },
-      {
-        id: 3,
-        name: "用户管理",
-        path: "/user",
-        Com: React.lazy(() => import("../A3User")),
-        done: true,
-      },
-      {
-        id: 4,
-        name: "角色管理",
-        path: "/role",
-        Com: React.lazy(() => import("../A4Role")),
-        done: true,
-      },
-      {
-        id: 5,
-        name: "部门管理",
-        path: "/section",
-        Com: React.lazy(() => import("../A5Section")),
-        done: true,
-      },
-      {
-        id: 6,
-        name: "系统日志",
-        path: "/log",
-        Com: React.lazy(() => import("../A6Log")),
-        done: true,
-      },
-      {
-        id: 7,
-        name: "回收站",
-        path: "/recycled",
-        Com: React.lazy(() => import("../A7Recycled")),
-        done: true,
-      },
-    ];
-    return arr;
-  }, []);
+  // 通过权限信息 动态 显示 侧边栏
+  useEffect(() => {
+    const arr = [...tabLeftArr];
+
+    arr.forEach((v) => {
+      if (A4RoleAll.includes(v.id)) v.done = true;
+      else v.done = false;
+    });
+    setList(arr.filter((v) => v.done));
+  }, [A4RoleAll]);
 
-  const [list, setList] = useState(listTemp.filter((v) => v.done));
+  // 第一个页面不是 项目 管理 的时候 动态 跳转
+  useEffect(() => {
+    if (list && list[0] && list[0].id !== "1000") {
+      history.replace(list[0].path);
+    }
+  }, [list]);
 
   // 点击跳转
   const pathCutFu = useCallback((path: string) => {

src/store/action/A3User.ts

@@ -1,10 +1,10 @@
-import { RoleTableType, SaveUserType, UserTableAPIType } from "@/types";
+import { RoleTableType, SaveUserType } from "@/types";
 import http from "@/utils/http";
 import { AppDispatch } from "..";
 /**
  * 获取用户管理表格列表
  */
-export const getUserListAPI = (data: UserTableAPIType) => {
+export const getUserListAPI = (data: any) => {
   return async (dispatch: AppDispatch) => {
     const res = await http.post("sys/user/pageList", data);
     if (res.code === 0) {

src/store/action/A4Role.ts

@@ -33,17 +33,6 @@ export const roleRemoveAPI = (id: number) => {
 // };
 
 /**
- * 获取用户的权限信息
- */
-export const getPermissionsAPI = () => {
-  return async (dispatch: AppDispatch) => {
-    const res = await http.get("sys/resource/getTreePermissions");
-    if (res.code === 0)
-      dispatch({ type: "layout/setAuthPageArr", payload: res.data });
-  };
-};
-
-/**
  * 新增或修改角色
  */
 export const roleSaveAPI = (data: AddRoleType) => {

src/store/reducer/layout.ts

@@ -1,4 +1,4 @@
-import { LookDomType, PermissionsAPIType } from "@/types";
+import { LookDomType } from "@/types";
 import { MessageType } from "@/utils/message";
 
 // 初始化状态
@@ -25,9 +25,6 @@ const initState = {
     fu: () => {},
     state: false,
   },
-
-  // 有关权限的信息
-  authPageArr: [] as PermissionsAPIType[],
 };
 
 // 定义 action 类型
@@ -35,7 +32,6 @@ type LayoutActionType =
   | { type: "layout/lookBigImg"; payload: { url: string; show: boolean } }
   | { type: "layout/lookDom"; payload: LookDomType }
   | { type: "layout/message"; payload: MessageType }
-  | { type: "layout/setAuthPageArr"; payload: PermissionsAPIType[] }
   | {
       type: "layout/closeUpFile";
       payload: {
@@ -60,9 +56,6 @@ export default function layoutReducer(
     // antd轻提示(兼容360浏览器)
     case "layout/message":
       return { ...state, message: action.payload };
-    // 有关权限的信息
-    case "layout/setAuthPageArr":
-      return { ...state, authPageArr: action.payload };
     // 上传文件点击取消
     case "layout/closeUpFile":
       return { ...state, closeUpFile: action.payload };

src/types/api/A4Role.d.ts

@@ -16,14 +16,6 @@ export type RoleTableType = {
   scopeDept: string;
 };
 
-export type PermissionsAPIType = {
-  authority: boolean;
-  id: number;
-  name: string;
-  parentId?: null;
-  resourceType?: string;
-};
-
 export type AddRoleType = {
   id: number | null;
   roleName: string;

src/types/api/layot.d.ts

@@ -3,7 +3,7 @@ export type LookDomType = {
   type: "video" | "audio" | "model" | "";
 };
 export type RouterType = {
-  id: number;
+  id: string;
   name: string;
   path: string;
   Com: React.LazyExoticComponent<React.MemoExoticComponent<() => JSX.Element>>;