upp

src/pages/Goods/index.tsx

@@ -213,7 +213,7 @@ function Goods() {
       },
       {
         title: "所属展馆",
-        dataIndex: "num",
+        dataIndex: "exhibitionName",
       },
       {
         title: "年代",
@@ -319,7 +319,7 @@ function Goods() {
               onChange={(e) => nameChange(e)}
             />
           </div>
-          {ExhibitTableList.length > 1 ? (
+          {ExhibitTableList.length > 2 ? (
             <div className="row">
               <span>所属展馆：</span>
               <Select

src/pages/GoodsAdd/index.module.scss

@@ -5,7 +5,6 @@
   top: 0;
   left: 0;
   z-index: 10;
-  padding-right: 15px;
   background-color: #faf0e4;
 
 
@@ -153,6 +152,9 @@
 
 
       }
+
+      
+
     }
 
     .formBox::-webkit-scrollbar {

src/pages/Layout/index.module.scss

@@ -96,7 +96,7 @@
         display: flex;
         justify-content: flex-end;
         position: relative;
-        z-index: 10;
+        z-index: 11;
 
         .user {
           padding-right: 40px;

src/pages/Layout/index.tsx

@@ -18,8 +18,7 @@ import { Base64 } from "js-base64";
 import encodeStr from "@/utils/pass";
 import { getDictListAPI, passWordEditAPI } from "@/store/action/login";
 import { getTokenInfo, removeTokenInfo } from "@/utils/storage";
-import { useDispatch, useSelector } from "react-redux";
-import { RootState } from "@/store";
+import { useDispatch } from "react-redux";
 import inco1 from "@/assets/img/inco1.png";
 import inco2 from "@/assets/img/inco2.png";
 import inco3 from "@/assets/img/inco3.png";
@@ -38,7 +37,7 @@ function Layout() {
         id: 100,
         name: "展馆管理",
         path: "/",
-        done: true,
+        done: false,
         Com: React.lazy(() => import("../Exhibit")),
         inco: inco1,
         incoAc: inco1Ac,
@@ -47,7 +46,7 @@ function Layout() {
         id: 200,
         name: "馆藏管理",
         path: "/goods",
-        done: true,
+        done: false,
         Com: React.lazy(() => import("../Goods")),
         inco: inco2,
         incoAc: inco2Ac,
@@ -55,11 +54,6 @@ function Layout() {
     ];
   }, []);
 
-  // 从仓库中获取页面权限数据
-  const authPageArr = useSelector(
-    (state: RootState) => state.loginStore.authPageArr
-  );
-
   // 是超级管理员
   useEffect(() => {
     const userInfo = getTokenInfo().user;
@@ -90,6 +84,17 @@ function Layout() {
 
   // 权限的数据和页面判断
   useEffect(() => {
+    const userInfo = getTokenInfo().user;
+
+    console.log(123,userInfo);
+    
+
+    if (userInfo.isAdmin === 1) {
+      listTemp[0].done = listTemp[1].done = true;
+    } else {
+      if (userInfo.modulePerms.includes("exhibition")) listTemp[0].done = true;
+      if (userInfo.modulePerms.includes("goods")) listTemp[1].done = true;
+    }
     // authPageArr.forEach((v) => {
     //   if (v.authority) {
     //     listTemp.forEach((v2) => {
@@ -98,8 +103,8 @@ function Layout() {
     //   }
     // });
     // const newList = listTemp.filter((v) => v.done);
-    // setList(newList);
-  }, [authPageArr, listTemp]);
+    setList(listTemp.filter((v) => v.done));
+  }, [listTemp]);
 
   const [list, setList] = useState(listTemp);
 

src/pages/User/UserAdd/index.css

@@ -11,3 +11,19 @@
   font-size: 14px;
   padding-left: 98px;
 }
+.userAdd .userAddMain .fromBox {
+  margin-bottom: 20px;
+  display: flex;
+}
+.userAdd .userAddMain .fromBox .lable {
+  text-align: right;
+  width: 98.33px;
+}
+.userAdd .userAddMain .fromBox .lable > span {
+  position: relative;
+  top: 2px;
+  color: #ff4d4f;
+}
+.userAdd .userAddMain .fromBox .checkBox > div {
+  margin-bottom: 5px;
+}

src/pages/User/UserAdd/index.less

@@ -13,5 +13,26 @@
       font-size: 14px;
       padding-left: 98px;
     }
+
+    .fromBox{
+      margin-bottom: 20px;
+      display: flex;
+      // align-items: center;
+      .lable{
+        text-align: right;
+        width: 98.33px;
+        &>span{
+          position: relative;
+          top: 2px;
+          color: #ff4d4f;
+        }
+      }
+      .checkBox{
+        &>div{
+          margin-bottom: 5px;
+        }
+      }
+    }
+
   }
 }

src/pages/User/UserAdd/index.tsx

@@ -1,9 +1,16 @@
-import { RootState } from "@/store";
 import { getUserInfoByIdAPI, userSaveAPI } from "@/store/action/user";
 import { SaveUserType } from "@/types";
-import { Button, Form, Input, message, Modal, Popconfirm, Select } from "antd";
-import React, { useCallback, useEffect, useRef } from "react";
-import { useSelector } from "react-redux";
+import { ExhibitTableType } from "@/types/api/exhibit";
+import {
+  Button,
+  Checkbox,
+  Form,
+  Input,
+  message,
+  Modal,
+  Popconfirm,
+} from "antd";
+import React, { useCallback, useEffect, useRef, useState } from "react";
 import "./index.css";
 
 type Props = {
@@ -11,41 +18,134 @@ type Props = {
   closePage: () => void;
   upTableList: () => void;
   addTableList: () => void;
+  exhibitList: ExhibitTableType[];
 };
 
-function UserAdd({ id, closePage, upTableList, addTableList }: Props) {
-  // 设置表单初始数据（区分编辑和新增）
-  const FormBoxRef = useRef<any>({});
+function UserAdd({
+  id,
+  closePage,
+  upTableList,
+  addTableList,
+  exhibitList,
+}: Props) {
+  // -------有关页面权限
+  const [pagePower, serPagePower] = useState([
+    { id: 100, name: "展馆管理", authority: true, type: "exhibition" },
+    { id: 200, name: "馆藏管理", authority: true, type: "goods" },
+  ]);
 
-  const getInfoInAPIFu = useCallback(async (id: number) => {
-    const res =await getUserInfoByIdAPI(id)
-    FormBoxRef.current.setFieldsValue(res.data)
-    console.log("是编辑，在这里发请求拿数据",res);
-  }, []);
+  const checkPageChangeFu = useCallback(
+    (checked: boolean, id: number) => {
+      const newList = pagePower.map((v) => {
+        return {
+          ...v,
+          authority: v.id === id ? checked : v.authority,
+        };
+      });
+      serPagePower(newList);
+    },
+    [pagePower]
+  );
+
+  // ----------有关数据权限
+
+  const [dataPower, setDataPower] = useState<ExhibitTableType[]>([]);
+
+  useEffect(() => {
+    if (exhibitList && exhibitList.length) setDataPower(exhibitList);
+  }, [exhibitList]);
+
+  const checkDataChangeFu = useCallback(
+    (checked: boolean, id: number) => {
+      const newList = dataPower.map((v) => {
+        return {
+          ...v,
+          authority: v.id === id ? checked : v.authority,
+        };
+      });
+      setDataPower(newList);
+    },
+    [dataPower]
+  );
 
   // 没有通过校验
   const onFinishFailed = useCallback(() => {
     // return message.warning("有表单不符号规则!");
   }, []);
 
+  // 设置表单初始数据（区分编辑和新增）
+  const FormBoxRef = useRef<any>({});
+
+  const setPowerFu = useCallback(
+    (pagePowerList: string[], dataPowerList: string[]) => {
+      // 功能权限的回显
+      const newPagePower = pagePower.map((v) => {
+        return {
+          ...v,
+          authority: pagePowerList.includes(v.type) ? true : false,
+        };
+      });
+
+      serPagePower(newPagePower);
+
+      // 数据权限的回显
+
+      const newDataPower = exhibitList.map((v) => {
+        return {
+          ...v,
+          authority: dataPowerList.includes(v.id + "") ? true : false,
+        };
+      });
+      setDataPower(newDataPower);
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    []
+  );
+
+  const getInfoInAPIFu = useCallback(
+    async (id: number) => {
+      const res = await getUserInfoByIdAPI(id);
+      FormBoxRef.current.setFieldsValue(res.data);
+
+      // 功能权限的回显
+      const pagePowerList: string[] = res.data.modulePerms.split(",");
+
+      // 数据权限的回显
+      const dataPowerList: string[] = res.data.exhibitionIds.split(",");
+
+      setPowerFu(pagePowerList, dataPowerList);
+
+      console.log("是编辑，在这里发请求拿数据", res);
+    },
+    [setPowerFu]
+  );
+
   useEffect(() => {
     if (id) getInfoInAPIFu(id);
-    else {
-      FormBoxRef.current.setFieldsValue({});
-    }
+    // else {
+    //   FormBoxRef.current.setFieldsValue({});
+    // }
   }, [getInfoInAPIFu, id]);
 
-  // 从仓库获取角色下拉列表信息
-  const roleList = useSelector(
-    (state: RootState) => state.userReducer.roleList
-  );
-
   // 通过校验点击确定
   const onFinish = useCallback(
     async (values: any) => {
+      if (pagePower.every((v) => !v.authority))
+        return message.warning("至少勾选一个功能权限!");
+      if (dataPower.every((v) => !v.authority))
+        return message.warning("至少勾选一个数据权限!");
+
       const obj: SaveUserType = {
         ...values,
         id: id ? id : null,
+        modulePerms: pagePower
+          .filter((v) => v.authority)
+          .map((v) => v.type)
+          .join(","),
+        exhibitionIds: dataPower
+          .filter((v) => v.authority)
+          .map((v) => v.id)
+          .join(","),
       };
 
       const res: any = await userSaveAPI(obj);
@@ -59,7 +159,7 @@ function UserAdd({ id, closePage, upTableList, addTableList }: Props) {
       }
       console.log("通过校验，点击确定");
     },
-    [addTableList, closePage, id, upTableList]
+    [addTableList, closePage, dataPower, id, pagePower, upTableList]
   );
 
   return (
@@ -87,7 +187,12 @@ function UserAdd({ id, closePage, upTableList, addTableList }: Props) {
             rules={[{ required: true, message: "请输入账号名!" }]}
             getValueFromEvent={(e) => e.target.value.replace(/\s+/g, "")}
           >
-            <Input disabled={id} maxLength={15} showCount placeholder="请输入内容" />
+            <Input
+              disabled={id}
+              maxLength={15}
+              showCount
+              placeholder="请输入内容"
+            />
           </Form.Item>
 
           <Form.Item
@@ -100,14 +205,6 @@ function UserAdd({ id, closePage, upTableList, addTableList }: Props) {
           </Form.Item>
 
           <Form.Item
-            label="用户角色"
-            name="roleId"
-            rules={[{ required: true, message: "请选择角色!" }]}
-          >
-            <Select placeholder="请选择" options={roleList} />
-          </Form.Item>
-
-          <Form.Item
             label="真实姓名"
             name="realName"
             rules={[{ required: true, message: "请输入真实姓名!" }]}
@@ -116,6 +213,45 @@ function UserAdd({ id, closePage, upTableList, addTableList }: Props) {
             <Input maxLength={8} showCount placeholder="请输入内容" />
           </Form.Item>
 
+          {/* 功能权限 */}
+          <div className="fromBox">
+            <div className="lable">
+              {" "}
+              <span>*</span> 功能权限：
+            </div>
+            {pagePower.map((v) => (
+              <Checkbox
+                className="rowCheck"
+                key={v.id}
+                checked={v.authority}
+                onChange={(e) => checkPageChangeFu(e.target.checked, v.id)}
+              >
+                {v.name}
+              </Checkbox>
+            ))}
+          </div>
+
+          {/* 数据权限 */}
+          <div className="fromBox">
+            <div className="lable">
+              {" "}
+              <span>*</span> 数据权限：
+            </div>
+            <div className="checkBox">
+              {dataPower.map((v) => (
+                <div key={v.id}>
+                  <Checkbox
+                    className="rowCheck"
+                    checked={v.authority}
+                    onChange={(e) => checkDataChangeFu(e.target.checked, v.id)}
+                  >
+                    {v.name}
+                  </Checkbox>
+                </div>
+              ))}
+            </div>
+          </div>
+
           {id ? null : <div className="passTit">* 默认密码 123456</div>}
 
           {/* 确定和取消按钮 */}

src/pages/User/index.module.scss

@@ -1,12 +1,12 @@
 .User {
   :global {
     .userTop {
-      height: 100px;
+      margin-top: 15px;
       border-radius: 10px;
       background-color: #fff;
 
       .selectBox {
-        padding: 4px 24px 5px;
+        padding: 20px 24px;
         display: flex;
         align-items: center;
         justify-content: space-between;
@@ -21,7 +21,8 @@
         }
       }
     }
-    .tableBox{
+
+    .tableBox {
       margin-top: 15px;
       height: calc(100% - 110px);
       background-color: #fff;

src/pages/User/index.tsx

@@ -1,7 +1,7 @@
 import { RootState } from "@/store";
+import { getExhibitListAPI } from "@/store/action/exhibit";
 import {
   getUserListAPI,
-  getUserRoleAPI,
   userDisplayAPI,
   userPassResetAPI,
   userRemoveAPI,
@@ -31,9 +31,6 @@ const { RangePicker } = DatePicker;
 function User() {
   const dispatch = useDispatch();
 
-  const pageNumRef = useRef(1);
-  const pagePageRef = useRef(10);
-
   // 顶部筛选
   const [tableSelect, setTableSelect] = useState<UserTableAPIType>({
     startTime: "",
@@ -45,27 +42,25 @@ function User() {
     searchKey: "",
   });
 
-  // 进来用户管理页面获取角色的下拉列表
+
+  // 进来页面也要获取展馆的表格信息，用于数据权限的选择
   useEffect(() => {
-    dispatch(getUserRoleAPI());
+    dispatch(getExhibitListAPI());
   }, [dispatch]);
 
+  // 从仓库获取数据权限的列表
+
+  const exhibitList = useSelector(
+    (state: RootState) => state.ExhibitReducer.list
+  );
+
+
   // 封装发送请求的函数
 
   const getList = useCallback(async () => {
-    const data = {
-      ...tableSelect,
-      pageNum: pageNumRef.current,
-    };
-    dispatch(getUserListAPI(data));
+    dispatch(getUserListAPI(tableSelect));
   }, [dispatch, tableSelect]);
 
-  // 当前页码统一
-  useEffect(() => {
-    pageNumRef.current = tableSelect.pageNum;
-    pagePageRef.current = tableSelect.pageSize;
-  }, [tableSelect.pageNum, tableSelect.pageSize]);
-
   // 防止发送了2次请求来对应页码
 
   const getListRef = useRef(-1);
@@ -144,8 +139,6 @@ function User() {
   // 页码变化
   const paginationChange = useCallback(
     () => (pageNum: number, pageSize: number) => {
-      pageNumRef.current = pageNum;
-      pagePageRef.current = pageSize;
       setTableSelect({ ...tableSelect, pageNum, pageSize });
     },
     [tableSelect]
@@ -210,10 +203,7 @@ function User() {
         title: "用户昵称",
         dataIndex: "nickName",
       },
-      {
-        title: "用户角色",
-        dataIndex: "roleName",
-      },
+
       {
         title: "真实姓名",
         dataIndex: "realName",
@@ -280,8 +270,8 @@ function User() {
 
   return (
     <div className={styles.User}>
+      <div className="pageTitlt">用户管理</div>
       <div className="userTop">
-        <div className="pageTitlt">用户管理</div>
         <div className="selectBox">
           <div className="selectBoxL">
             <div className="row">
@@ -347,6 +337,7 @@ function User() {
           closePage={() => setEditPageShow(false)}
           upTableList={getList}
           addTableList={resetSelectFu}
+          exhibitList={exhibitList}
         />
       ) : null}
     </div>

src/store/action/user.ts

@@ -16,17 +16,6 @@ export const getUserListAPI = (data: UserTableAPIType) => {
   };
 };
 
-/**
- * 获取用户管理-角色列表
- */
-export const getUserRoleAPI = () => {
-  return async (dispatch: AppDispatch) => {
-    const res = await http.get("sys/user/getRole");
-    const data: any[] = res.data;
-    const newData = data.map((v) => ({ label: v.roleName, value: v.id }));
-    dispatch({ type: "user/getRoleList", payload: newData });
-  };
-};
 
 /**
  * 用户-是否显示

src/store/reducer/login.ts

@@ -1,4 +1,3 @@
-import {  PermissionsAPIType } from "@/types";
 
 // 初始化状态
 const initState = {
@@ -18,8 +17,7 @@ const initState = {
     level: [],
     source: [],
   } as any,
-  // 有关权限的信息
-  authPageArr: [] as PermissionsAPIType[],
+
 };
 
 // 定义 action 类型
@@ -28,7 +26,6 @@ type LoginActionType =
   | { type: "login/asyncLoding"; payload: boolean }
   | { type: "login/lookVideo"; payload: string }
   | { type: "login/getDictList"; payload: any }
-  | { type: "login/setAuthPageArr"; payload: PermissionsAPIType[] };
 
 // 频道 reducer
 export default function loginReducer(
@@ -48,9 +45,7 @@ export default function loginReducer(
     // 所有的下拉框数据
     case "login/getDictList":
       return { ...state, dictList: action.payload };
-    // 有关权限的信息
-    case "login/setAuthPageArr":
-      return { ...state, authPageArr: action.payload };
+
     default:
       return state;
   }

src/store/reducer/user.ts

@@ -7,11 +7,6 @@ const initState = {
     list: [] as UserTableListType[],
     total: 0,
   },
-  // 角色列表数据
-  roleList: [] as {
-    label: string;
-    value: number;
-  }[],
 };
 
 // 定义 action 类型
@@ -20,13 +15,7 @@ type UserActionType =
       type: "user/getList";
       payload: { list: UserTableListType[]; total: number };
     }
-  | {
-      type: "user/getRoleList";
-      payload: {
-        label: string;
-        value: number;
-      }[];
-    };
+
 
 // 频道 reducer
 export default function userReducer(state = initState, action: UserActionType) {
@@ -34,9 +23,7 @@ export default function userReducer(state = initState, action: UserActionType) {
     // 获取列表数据
     case "user/getList":
       return { ...state, tableInfo: action.payload };
-    // 获取角色列表数据
-    case "user/getRoleList":
-      return { ...state, roleList: action.payload };
+
 
     default:
       return state;

src/types/api/exhibit.d.ts

@@ -10,4 +10,5 @@ export type ExhibitTableType = {
   phone: string;
   thumb: string;
   updateTime: string;
+  authority:boolean
 };

src/types/api/user.d.ts

@@ -32,4 +32,6 @@ export type SaveUserType ={
   nickName:string
   roleId:number
   realName:string
+  modulePerms:string
+  exhibitionIds:string
 }