upp

src/pages/Layout/index.tsx

@@ -15,6 +15,35 @@ import { useDispatch } from "react-redux";
 
 const NotFound = React.lazy(() => import("../../components/NotFound"));
 
+const tabList = [
+  {
+    id: 1,
+    Com: React.lazy(() => import("../Home")),
+    path: "/",
+    name: "首页",
+  },
+  {
+    id: 2,
+    Com: React.lazy(() => import("../Object")),
+    path: "/object",
+    name: "馆藏管理",
+  },
+  {
+    id: 3,
+    Com: React.lazy(() => import("../Stores")),
+    path: "/stores",
+    name: "库房管理",
+  },
+];
+const temp = getTokenInfo().user.isAdmin;
+if (temp === 1)
+  tabList.push({
+    id: 4,
+    Com: React.lazy(() => import("../System")),
+    path: "/system",
+    name: "系统管理",
+  });
+
 function Layout() {
   const location = useLocation();
   const [path, setPath] = useState("");
@@ -31,38 +60,6 @@ function Layout() {
     return getTokenInfo().user;
   }, []);
 
-  const tabList = useMemo(() => {
-    const tempArr = [
-      {
-        id: 1,
-        Com: React.lazy(() => import("../Home")),
-        path: "/",
-        name: "首页",
-      },
-      {
-        id: 2,
-        Com: React.lazy(() => import("../Object")),
-        path: "/object",
-        name: "馆藏管理",
-      },
-      {
-        id: 3,
-        Com: React.lazy(() => import("../Stores")),
-        path: "/stores",
-        name: "库房管理",
-      },
-    ];
-    const temp = getTokenInfo().user.isAdmin;
-    if (temp === 1 && tempArr.length <= 3)
-      tempArr.push({
-        id: 4,
-        Com: React.lazy(() => import("../System")),
-        path: "/system",
-        name: "系统管理",
-      });
-    return tempArr;
-  }, []);
-
   // 顶部路由跳转
   const pathCutFu = (path: string) => {
     history.push(path);
@@ -124,7 +121,7 @@ function Layout() {
             ))}
           </div>
           <div className="user">
-            {userInfo.userName}
+            {userInfo.realName}
             <div className="userSet">
               <span onClick={() => setOpen(true)}>修改密码</span>
               <Popconfirm

src/pages/SystemSon/System1/UserModal.tsx

@@ -0,0 +1,170 @@
+import { RootState } from "@/store";
+import {
+  addUserAPI,
+  getUserInfoAPI,
+  userGetRoleAPI,
+} from "@/store/action/system";
+import { Button, Input, message, Modal, Select } from "antd";
+import React, { useCallback, useEffect, useState } from "react";
+import { useDispatch, useSelector } from "react-redux";
+
+type Props = {
+  id: any;
+  closeFu: any;
+  btnOkSuccFu: any;
+};
+
+function UserModal({ id, closeFu, btnOkSuccFu }: Props) {
+  const dispatch = useDispatch();
+
+  // 从仓库中获取所有角色下拉
+  const options = useSelector(
+    (state: RootState) => state.systemStore.roleSelect
+  );
+  // 获取所有角色下拉信息存到仓库
+  useEffect(() => {
+    dispatch(userGetRoleAPI());
+  }, [dispatch]);
+
+  // 用户详情信息
+  const [userInfo, setUserInfo] = useState<any>({});
+
+  const getUserInfoAPIFu = useCallback(async (id: number) => {
+    const res = await getUserInfoAPI(id);
+    setUserInfo(res.data);
+    setRoleId(res.data.roleId);
+    setUserName(res.data.userName);
+    setPhone(res.data.phone);
+    setRealName(res.data.realName);
+  }, []);
+
+  useEffect(() => {
+    if (id) getUserInfoAPIFu(id); // 是编辑
+  }, [getUserInfoAPIFu, id]);
+
+  useEffect(() => {
+    if (id) {
+      // 是编辑
+    } else {
+      // 是新增
+      setRoleId(options[0] && options[0].id ? options[0].id : "");
+    }
+  }, [id, options]);
+
+  // 角色
+  const [roleId, setRoleId] = useState();
+
+  // 账号
+  const [userName, setUserName] = useState("");
+
+  // 手机号码
+  const [phone, setPhone] = useState("");
+  // 真实姓名
+  const [realName, setRealName] = useState("");
+
+  // 点击提交
+  const btnOkFu = useCallback(async () => {
+    if (userName.length <= 4) return message.warning("用户账号长度为4-15位!");
+    var reg: any = new RegExp(/^1[3-9]\d{9}$/);
+    if (!reg.test(phone)) return message.warning("请输入正确格式的手机号!");
+    if (realName === "") return message.warning("真实姓名不能为空!");
+    const obj = {
+      ...userInfo,
+      phone,
+      realName,
+      userName,
+      roleId,
+    };
+    const res: any = await addUserAPI(obj);
+    if (res.code === 0) {
+      message.success("操作成功!");
+      btnOkSuccFu();
+    }
+  }, [btnOkSuccFu, phone, realName, roleId, userInfo, userName]);
+
+  return (
+    <>
+      <Modal
+        wrapClassName="systemUser"
+        destroyOnClose
+        open={true}
+        title={id ? "编辑用户" : "新增用户"}
+        onCancel={closeFu}
+        footer={
+          [] // 设置footer为空，去掉 取消 确定默认按钮
+        }
+      >
+        <div className="systemTit">
+          <div className="systemTitRow">
+            <div className="bs">*</div>
+            <div className="lable">用户账号：</div>
+            <Input
+              disabled={id}
+              maxLength={15}
+              showCount
+              style={{ width: 600 }}
+              placeholder="请输入"
+              value={userName}
+              onChange={(e) => setUserName(e.target.value.trim())}
+            />
+          </div>
+          <div className="systemTitRow">
+            <div className="bs">*</div>
+            <div className="lable">用户角色：</div>
+            <Select
+              value={roleId}
+              onChange={(val) => setRoleId(val)}
+              style={{ width: 600 }}
+              options={options.map((v: any) => ({
+                label: v.roleName,
+                value: v.id,
+              }))}
+            />
+          </div>
+          <div className="systemTitRow">
+            <div className="bs">*</div>
+            <div className="lable">手机号码：</div>
+            <Input
+              maxLength={11}
+              showCount
+              style={{ width: 600 }}
+              placeholder="请输入"
+              value={phone}
+              onChange={(e) => setPhone(e.target.value.trim())}
+            />
+          </div>
+          <div className="systemTitRow">
+            <div className="bs">*</div>
+            <div className="lable">真实姓名：</div>
+            <Input
+              maxLength={8}
+              showCount
+              style={{ width: 600 }}
+              placeholder="请输入"
+              value={realName}
+              onChange={(e) => setRealName(e.target.value.trim())}
+            />
+          </div>
+          {id ? null : (
+            <div className="systemTitRow">
+              <div className="systemTitRowTit">* 默认密码 123456</div>
+            </div>
+          )}
+
+          <br />
+          <div className="systemTitBtn">
+            <Button type="primary" onClick={btnOkFu}>
+              提交
+            </Button>
+            &emsp;
+            <Button onClick={closeFu}>取消</Button>
+          </div>
+        </div>
+      </Modal>
+    </>
+  );
+}
+
+const MemoUserModal = React.memo(UserModal);
+
+export default MemoUserModal;

src/pages/SystemSon/System1/index.css

@@ -11,12 +11,12 @@
   position: relative;
   margin-bottom: 15px;
   display: flex;
-  align-items: center;
 }
-.systemUser .systemTit .systemTitRow > span {
-  display: inline-block;
+.systemUser .systemTit .systemTitRow .lable {
+  line-height: 30px;
   width: 80px;
   text-align: right;
+  font-weight: 700;
 }
 .systemUser .systemTit .systemTitRow .bs {
   position: absolute;
@@ -28,6 +28,47 @@
 .systemUser .systemTit .systemTitRow .bs2 {
   left: 26px;
 }
+.systemUser .systemTit .systemTitRow .systemTitRowTit {
+  color: #ff4d4f;
+  font-size: 14px;
+  padding-left: 80px;
+}
+.systemUser .systemTit .systemTitRow2 {
+  margin-top: 25px;
+}
+.systemUser .systemTit .systemTitRow2 .powerBox {
+  padding: 10px;
+  width: 600px;
+  border: 1px solid #d9d9d9;
+  border-radius: 5px;
+}
+.systemUser .systemTit .systemTitRow2 .powerBox .powerBoxRow {
+  padding: 10px;
+  border-bottom: 1px solid #d9d9d9;
+}
+.systemUser .systemTit .systemTitRow2 .powerBox .powerBoxRow .label {
+  display: inline-block;
+  margin-right: 10px;
+  font-weight: 700;
+}
+.systemUser .systemTit .systemTitRow2 .powerBox .powerBoxRow .oneCheck {
+  font-weight: 700;
+}
+.systemUser .systemTit .systemTitRow2 .powerBox .powerBoxRow:last-child {
+  border: none;
+}
+.systemUser .systemTit .systemTitRow3 {
+  align-items: center;
+}
+.systemUser .systemTit .systemTitBtn {
+  text-align: center;
+}
+.systemUser .looksystem {
+  pointer-events: none;
+}
+.systemUser .looksystem .systemTitBtn {
+  display: none;
+}
 .systemRole .ant-modal {
   width: 800px !important;
 }

src/pages/SystemSon/System1/index.less

@@ -8,16 +8,19 @@
     padding-top: 15px;
     width: 100%;
     margin-bottom: 15px;
+
     .systemTitRow {
       position: relative;
       margin-bottom: 15px;
       display: flex;
-      align-items: center;
-      &>span{
-        display: inline-block;
+
+      .lable {
+        line-height: 30px;
         width: 80px;
         text-align: right;
+        font-weight: 700;
       }
+
       .bs {
         position: absolute;
         top: 7px;
@@ -25,9 +28,61 @@
         z-index: 10;
         color: #ff4d4f;
       }
-      .bs2{
+
+      .bs2 {
         left: 26px;
       }
+
+      .systemTitRowTit{
+        color: #ff4d4f;
+        font-size: 14px;
+        padding-left: 80px;
+      }
+
+    }
+
+    .systemTitRow2 {
+      margin-top: 25px;
+
+      .powerBox {
+        padding: 10px;
+        width: 600px;
+        border: 1px solid #d9d9d9;
+        border-radius: 5px;
+
+        .powerBoxRow {
+          padding: 10px;
+          border-bottom: 1px solid #d9d9d9;
+
+          .label {
+            display: inline-block;
+            margin-right: 10px;
+            font-weight: 700;
+          }
+
+          .oneCheck {
+            font-weight: 700;
+          }
+
+          &:last-child {
+            border: none;
+          }
+        }
+      }
+    }
+
+    .systemTitRow3 {
+      align-items: center;
+    }
+
+    .systemTitBtn {
+      text-align: center;
+    }
+  }
+  .looksystem{
+    pointer-events: none;
+    .systemTitBtn{
+      display: none;
     }
   }
 }

src/pages/SystemSon/System1/index.tsx

@@ -1,11 +1,22 @@
 import BreadTit from "@/components/BreadTit";
 import { RootState } from "@/store";
-import { getUserListAPI } from "@/store/action/system";
-import { Button, Input, Modal, Table } from "antd";
-import React, { useEffect, useMemo, useRef, useState } from "react";
+import {
+  delUserAPI,
+  getUserListAPI,
+  userEditStatusAPI,
+} from "@/store/action/system";
+import { Button, Input, message, Popconfirm, Switch, Table } from "antd";
+import React, {
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
 import { useDispatch, useSelector } from "react-redux";
 import styles from "./index.module.scss";
 import "./index.css";
+import UserModal from "./UserModal";
 function System1() {
   const dispatch = useDispatch();
 
@@ -35,15 +46,36 @@ function System1() {
 
   // 点击新增或者编辑按钮
   const addSystem = (id?: any) => {
-    if (id) {
-      console.log("点了编辑");
-    } else {
-      console.log("点了新增");
-    }
+    if (id) idRef.current = id;
+    else idRef.current = null;
+    setOpen(true);
   };
 
+  // 点击删除按钮
+  const delOne = useCallback(
+    async (id: number) => {
+      const res: any = await delUserAPI(id);
+      if (res.code === 0) {
+        message.success("删除成功!");
+        // 重新发请求更新页面
+        dispatch(getUserListAPI(tableSelect));
+      }
+    },
+    [dispatch, tableSelect]
+  );
+
   // ---------关于表格
 
+  // 切换表格中的启用停用状态
+  const isEnabledClickFu = useCallback(
+    async (val: boolean, id: number) => {
+      const isDisable = val ? 1 : 0;
+      const res: any = await userEditStatusAPI(id, isDisable);
+      if (res.code === 0) dispatch(getUserListAPI(tableSelect));
+    },
+    [dispatch, tableSelect]
+  );
+
   // 页码变化
   const paginationChange = (pageNum: number, pageSize: number) => {
     pageNumRef.current = pageNum;
@@ -71,31 +103,65 @@ function System1() {
         dataIndex: "creatorName",
       },
       {
+        title: "真实姓名",
+        dataIndex: "realName",
+      },
+      {
         title: "手机号",
-        dataIndex: "phone",
+        render: (item: any) => (item.isAdmin === 1 ? "-" : item.phone),
       },
 
       {
         title: "状态",
-        render: (item: any) => (item.day && item.status === 3 ? item.day : "-"),
+        render: (item: any) => (
+          <Switch
+            checkedChildren="启用"
+            unCheckedChildren="停用"
+            checked={item.isEnabled === 1}
+            onChange={(val) => isEnabledClickFu(val, item.id)}
+            disabled={item.isAdmin === 1}
+          />
+        ),
       },
 
       {
         title: "操作",
         render: (item: any) => (
           <>
-            <Button type="text" danger>
-              查看
-            </Button>
+            {item.isAdmin === 1 ? (
+              "-"
+            ) : (
+              <>
+                <Button type="text" danger onClick={() => addSystem(item.id)}>
+                  编辑
+                </Button>
+                <Popconfirm
+                  title="确定删除吗?"
+                  okText="确定"
+                  cancelText="取消"
+                  onConfirm={() => delOne(item.id)}
+                >
+                  <Button type="text" danger>
+                    删除
+                  </Button>
+                </Popconfirm>
+              </>
+            )}
           </>
         ),
       },
     ];
-  }, []);
+  }, [delOne, isEnabledClickFu]);
 
   // 关于弹窗
   const [open, setOpen] = useState(false);
-  const editRef = useRef("add");
+  const idRef = useRef<any>(null);
+
+  // 在弹窗里面点击提交成功之后
+  const btnOkSuccFu = useCallback(() => {
+    dispatch(getUserListAPI(tableSelect));
+    setOpen(false);
+  }, [dispatch, tableSelect]);
 
   return (
     <div className={styles.System1}>
@@ -143,18 +209,13 @@ function System1() {
       </div>
 
       {/* 点击新增或者编辑出来的弹窗 */}
-      <Modal
-        wrapClassName="systemUser"
-        destroyOnClose
-        open={open}
-        title={editRef.current === "add" ? "新增用户" : "编辑用户"}
-        onCancel={() => setOpen(false)}
-        footer={
-          [] // 设置footer为空，去掉 取消 确定默认按钮
-        }
-      >
-        <div className="systemTit"></div>
-      </Modal>
+      {open ? (
+        <UserModal
+          btnOkSuccFu={btnOkSuccFu}
+          id={idRef.current}
+          closeFu={() => setOpen(false)}
+        />
+      ) : null}
     </div>
   );
 }

src/pages/SystemSon/System2/index.tsx

@@ -1,7 +1,22 @@
 import BreadTit from "@/components/BreadTit";
 import { RootState } from "@/store";
-import { getRoleListAPI } from "@/store/action/system";
-import { Button, Input, Modal, Popconfirm, Table } from "antd";
+import {
+  addRoleAPI,
+  delRoleAPI,
+  getRoleInfoAPI,
+  getRoleListAPI,
+  roleEditStatusAPI,
+} from "@/store/action/system";
+import {
+  Button,
+  Checkbox,
+  Input,
+  message,
+  Modal,
+  Popconfirm,
+  Switch,
+  Table,
+} from "antd";
 import TextArea from "antd/es/input/TextArea";
 import React, {
   useCallback,
@@ -12,10 +27,18 @@ import React, {
 } from "react";
 import { useDispatch, useSelector } from "react-redux";
 import styles from "./index.module.scss";
+import classNames from "classnames";
 import "../System1/index.css";
+
 function System2() {
   const dispatch = useDispatch();
 
+  // 从仓库中获取权限数据
+  const roleInfo = useSelector(
+    (state: RootState) => state.systemStore.roleInfo
+  );
+  const roleArr = useSelector((state: RootState) => state.systemStore.roleArr);
+
   // 筛选和分页
   const [tableSelect, setTableSelect] = useState({
     searchKey: "",
@@ -36,23 +59,136 @@ function System2() {
   }, [dispatch, tableSelect]);
 
   // 点击新增或者编辑按钮
-  const addRole = useCallback((id?: any) => {
-    if (id) {
-      editRef.current = "edit";
-      console.log("点了编辑");
-    } else {
-      editRef.current = "add";
-      console.log("点了新增");
-    }
-    setOpen(true);
-  }, []);
+  const addRole = useCallback(
+    async (id?: any) => {
+      if (id) {
+        const res: any = await getRoleInfoAPI(id);
+        const roleInfo = res.data.role;
+        const roleArr = res.data.permission;
+        dispatch({ type: "system/getRoleInfo", payload: roleInfo });
+        dispatch({ type: "system/getRoleArr", payload: roleArr });
+        setRoleDesc(roleInfo.roleDesc);
+        setRoleName(roleInfo.roleName);
+        editRef.current = "edit";
+      } else {
+        // 清空仓库角色信息
+        dispatch({ type: "system/getRoleInfo", payload: {} });
+        setRoleDesc("");
+        setRoleName("");
+        // 初始化权限信息
+        dispatch({
+          type: "system/getRoleArr",
+          payload: [
+            {
+              id: 100,
+              name: "藏品登记",
+              authority: false,
+              children: [
+                { name: "编辑", authority: false, id: 102 },
+                { name: "删除", authority: false, id: 103 },
+                { name: "审核", authority: false, id: 105 },
+              ],
+            },
+            {
+              id: 200,
+              name: "臧品总账",
+              authority: false,
+              children: [
+                { name: "编辑", authority: false, id: 202 },
+                { name: "移库", authority: false, id: 205 },
+              ],
+            },
+            {
+              id: 300,
+              name: "入库管理",
+              authority: false,
+              children: [
+                { name: "编辑", authority: false, id: 302 },
+                { name: "删除", authority: false, id: 303 },
+                { name: "审核", authority: false, id: 305 },
+              ],
+            },
+            {
+              id: 400,
+              name: "出库管理",
+              authority: false,
+              children: [
+                { name: "编辑", authority: false, id: 402 },
+                { name: "删除", authority: false, id: 403 },
+                { name: "审核", authority: false, id: 405 },
+                { name: "归还", authority: false, id: 406 },
+              ],
+            },
+            {
+              id: 500,
+              name: "臧品修改",
+              authority: false,
+              children: [
+                { name: "删除", authority: false, id: 503 },
+                { name: "审核", authority: false, id: 505 },
+              ],
+            },
+            {
+              id: 600,
+              name: "臧品注销",
+              authority: false,
+              children: [
+                { name: "编辑", authority: false, id: 602 },
+                { name: "删除", authority: false, id: 603 },
+                { name: "审核", authority: false, id: 605 },
+              ],
+            },
+            {
+              id: 700,
+              name: "库房设置",
+              authority: false,
+              children: [
+                { name: "编辑", authority: false, id: 702 },
+                { name: "删除", authority: false, id: 703 },
+              ],
+            },
+            {
+              id: 800,
+              name: "臧品移库",
+              authority: false,
+              children: [
+                { name: "删除", authority: false, id: 803 },
+                { name: "审核", authority: false, id: 805 },
+              ],
+            },
+          ],
+        });
+        editRef.current = "add";
+      }
+      setOpen(true);
+    },
+    [dispatch]
+  );
   // 点击删除
-  const delOne = useCallback((id: number) => {
-    console.log(id);
-  }, []);
+  const delOne = useCallback(
+    async (id: number) => {
+      const res: any = await delRoleAPI(id);
+      if (res.code === 0) {
+        message.success("删除成功!");
+        // 重新发请求更新页面
+        dispatch(getRoleListAPI(tableSelect));
+      }
+    },
+    [dispatch, tableSelect]
+  );
 
   // ---------关于表格
 
+  // 切换表格中的启用停用状态
+  const isEnabledClickFu = useCallback(
+    async (val: boolean, id: number) => {
+      const isDisable = val ? 1 : 0;
+      const res: any = await roleEditStatusAPI(id, isDisable);
+      if (res.code === 0) dispatch(getRoleListAPI(tableSelect));
+    },
+    [dispatch, tableSelect]
+  );
+
   // 页码变化
   const paginationChange = (pageNum: number, pageSize: number) => {
     setTableSelect({ ...tableSelect, pageNum, pageSize });
@@ -71,13 +207,21 @@ function System2() {
         dataIndex: "roleDesc",
       },
       {
-        title: "成语数量",
-        dataIndex: "sort",
+        title: "成员数量",
+        dataIndex: "count",
       },
 
       {
         title: "状态",
-        render: (item: any) => (item.day && item.status === 3 ? item.day : "-"),
+        render: (item: any) => (
+          <Switch
+            checkedChildren="启用"
+            unCheckedChildren="停用"
+            checked={item.isEnabled === 1}
+            onChange={(val) => isEnabledClickFu(val, item.id)}
+            disabled={item.roleKey && item.roleKey.includes("sys_")}
+          />
+        ),
       },
 
       {
@@ -85,27 +229,30 @@ function System2() {
         render: (item: any) => (
           <>
             <Button type="text" danger onClick={() => addRole(item.id)}>
-              编辑
+              {item.roleKey && item.roleKey.includes("sys_") ? "查看" : "编辑"}
             </Button>
-            &emsp;
-            <Popconfirm
-              title="确定删除吗?"
-              okText="确定"
-              cancelText="取消"
-              onConfirm={() => delOne(item.id)}
-            >
-              <Button type="text" danger>
-                删除
-              </Button>
-            </Popconfirm>
+            {item.roleKey && item.roleKey.includes("sys_") ? null : (
+              <>
+                <Popconfirm
+                  title="确定删除吗?"
+                  okText="确定"
+                  cancelText="取消"
+                  onConfirm={() => delOne(item.id)}
+                >
+                  <Button type="text" danger>
+                    删除
+                  </Button>
+                </Popconfirm>
+              </>
+            )}
           </>
         ),
       },
     ];
-  }, [addRole, delOne]);
+  }, [addRole, delOne, isEnabledClickFu]);
 
   // --------关于弹窗
-  const [open, setOpen] = useState(true);
+  const [open, setOpen] = useState(false);
   const editRef = useRef("add");
 
   // 角色名称
@@ -113,6 +260,62 @@ function System2() {
   // 描述
   const [roleDesc, setRoleDesc] = useState("");
 
+  // 权限第一级的改变
+  const checkOneFu = useCallback(
+    (val: boolean, id: number) => {
+      const data = roleArr.map((v: any) => {
+        return {
+          ...v,
+          authority: v.id === id ? val : v.authority,
+        };
+      });
+      dispatch({ type: "system/getRoleArr", payload: data });
+    },
+    [dispatch, roleArr]
+  );
+  // 权限的第二级改变
+  const checkTowFu = useCallback(
+    (val: boolean, id1: number, id2: number) => {
+      const data = [...roleArr];
+      data.forEach((v) => {
+        if (v.id === id1) {
+          v.children.forEach((v2: any) => {
+            if (v2.id === id2) v2.authority = val;
+          });
+        }
+      });
+      dispatch({ type: "system/getRoleArr", payload: data });
+    },
+    [dispatch, roleArr]
+  );
+
+  // 点击提交
+  const btnOkFu = useCallback(async () => {
+    if (roleName === "") return message.warning("角色名称不能为空!");
+    const txt = roleDesc.replaceAll(" ", "").replaceAll("\n", "");
+    if (txt === "") return message.warning("描述不能为空!");
+    const resources = [] as any;
+    roleArr.forEach((v: any) => {
+      if (v.authority) resources.push(v.id);
+      v.children.forEach((v2: any) => {
+        if (v2.authority) resources.push(v2.id);
+      });
+    });
+    const obj = {
+      ...roleInfo,
+      roleName,
+      roleDesc,
+      resources,
+    };
+    const res: any = await addRoleAPI(obj);
+    if (res.code === 0) {
+      message.success("操作成功!");
+      setOpen(false);
+      // 重新发请求更新页面
+      dispatch(getRoleListAPI(tableSelect));
+    }
+  }, [dispatch, roleArr, roleDesc, roleInfo, roleName, tableSelect]);
+
   return (
     <div className={styles.System2}>
       <div className="breadTit">
@@ -162,20 +365,33 @@ function System2() {
         wrapClassName="systemUser systemRole"
         destroyOnClose
         open={open}
-        title={editRef.current === "add" ? "新增角色" : "编辑角色"}
+        title={
+          editRef.current === "add"
+            ? "新增角色"
+            : roleInfo.roleKey && roleInfo.roleKey.includes("sys_")
+            ? "查看角色"
+            : "编辑角色"
+        }
         onCancel={() => setOpen(false)}
         footer={
           [] // 设置footer为空，去掉 取消 确定默认按钮
         }
       >
-        <div className="systemTit">
+        <div
+          className={classNames(
+            "systemTit",
+            roleInfo.roleKey && roleInfo.roleKey.includes("sys_")
+              ? "looksystem"
+              : ""
+          )}
+        >
           <div className="systemTitRow">
             <div className="bs">*</div>
-            <span>角色名称：</span>
+            <div className="lable">角色名称：</div>
             <Input
               maxLength={15}
               showCount
-              style={{ width: 500 }}
+              style={{ width: 600 }}
               placeholder="请输入"
               value={roleName}
               onChange={(e) => setRoleName(e.target.value.trim())}
@@ -183,9 +399,9 @@ function System2() {
           </div>
           <div className="systemTitRow">
             <div className="bs bs2">*</div>
-            <span>描述：</span>
+            <div className="lable">描述：</div>
             <TextArea
-              style={{ width: 500 }}
+              style={{ width: 600 }}
               value={roleDesc}
               onChange={(e) => setRoleDesc(e.target.value)}
               rows={3}
@@ -194,6 +410,44 @@ function System2() {
               maxLength={255}
             />
           </div>
+          <div className="systemTitRow systemTitRow2">
+            <div className="lable">权限设置：</div>
+            <div className="powerBox">
+              {roleArr.map((v: any) => (
+                <div className="powerBoxRow" key={v.id}>
+                  <span className="label">{v.name}：</span>
+                  <Checkbox
+                    className="oneCheck"
+                    checked={v.authority}
+                    onChange={(e) => checkOneFu(e.target.checked, v.id)}
+                  >
+                    启用
+                  </Checkbox>
+                  {v.children.map((v2: any) => (
+                    <Checkbox
+                      checked={v2.authority}
+                      onChange={(e) =>
+                        checkTowFu(e.target.checked, v.id, v2.id)
+                      }
+                      disabled={!v.authority}
+                      key={v2.id}
+                    >
+                      {v2.name}
+                    </Checkbox>
+                  ))}
+                </div>
+              ))}
+            </div>
+          </div>
+
+          <br />
+          <div className="systemTitBtn">
+            <Button type="primary" onClick={btnOkFu}>
+              提交
+            </Button>
+            &emsp;
+            <Button onClick={() => setOpen(false)}>取消</Button>
+          </div>
         </div>
       </Modal>
     </div>

src/store/action/system.ts

@@ -17,7 +17,6 @@ export const getUserListAPI = (data: any) => {
   };
 };
 
-
 /**
  * 获取系统日志列表
  */
@@ -40,7 +39,7 @@ export const getLogListAPI = (data: any) => {
 export const getRoleListAPI = (data: any) => {
   return async (dispatch: AppDispatch) => {
     // 获取列表数据
-    const res: any = await http.post("sys/role/list", data);
+    const res: any = await http.post("sys/role/listCountPage", data);
     const list = res.data.records;
     const obj = {
       list,
@@ -48,4 +47,71 @@ export const getRoleListAPI = (data: any) => {
     };
     dispatch({ type: "system/getTableList", payload: obj });
   };
+};
+
+/**
+ * 根据id获取角色详情
+ */
+export const getRoleInfoAPI = (id: any) => {
+  return http.get(`sys/role/detail/${id}`);
+};
+
+/**
+ * 新增角色或者修改角色
+ */
+export const addRoleAPI = (data: any) => {
+  return http.post("sys/role/save", data);
+};
+
+/**
+ * 删除角色
+ */
+export const delRoleAPI = (id: any) => {
+  return http.get(`sys/role/remove/${id}`);
+};
+
+/**
+ * 角色的启用和停用
+ */
+export const roleEditStatusAPI = (id: any, isDisable: any) => {
+  return http.get(`sys/role/editStatus/${id}/${isDisable}`);
+};
+
+/**
+ * 所有角色的下拉列表
+ */
+export const userGetRoleAPI = () => {
+  return async (dispatch: AppDispatch) => {
+    // 获取列表数据
+    const res: any = await http.get("sys/user/getRole");
+    dispatch({ type: "system/getRoleSelect", payload: res.data });
+  };
+};
+
+/**
+ * 新增用户或者修改用户
+ */
+export const addUserAPI = (data: any) => {
+  return http.post("sys/user/save", data);
+};
+
+/**
+ * 通过id获取用户详情
+ */
+export const getUserInfoAPI = (id: number) => {
+  return http.get(`sys/user/detail/${id}`);
+};
+
+/**
+ * 通过id删除用户
+ */
+export const delUserAPI = (ids: number) => {
+  return http.get(`sys/user/removes/${ids}`);
+};
+
+/**
+ * 用户的启用和停用
+ */
+export const userEditStatusAPI = (id: any, isDisable: any) => {
+  return http.get(`sys/user/editStatus/${id}/${isDisable}`);
 };

src/store/reducer/system.ts

@@ -5,15 +5,110 @@ const initState = {
     list: [] as any,
     total: 0,
   },
+  // 角色管理的角色权限弹窗信息
+  roleInfo: {} as any,
+  roleArr: [
+    {
+      id: 100,
+      name: "藏品登记",
+      authority: false,
+      children: [
+        { name: "编辑", authority: false, id: 102 },
+        { name: "删除", authority: false, id: 103 },
+        { name: "审核", authority: false, id: 105 },
+      ],
+    },
+    {
+      id: 200,
+      name: "臧品总账",
+      authority: false,
+      children: [
+        { name: "编辑", authority: false, id: 202 },
+        { name: "移库", authority: false, id: 205 },
+      ],
+    },
+    {
+      id: 300,
+      name: "入库管理",
+      authority: false,
+      children: [
+        { name: "编辑", authority: false, id: 302 },
+        { name: "删除", authority: false, id: 303 },
+        { name: "审核", authority: false, id: 305 },
+      ],
+    },
+    {
+      id: 400,
+      name: "出库管理",
+      authority: false,
+      children: [
+        { name: "编辑", authority: false, id: 402 },
+        { name: "删除", authority: false, id: 403 },
+        { name: "审核", authority: false, id: 405 },
+        { name: "归还", authority: false, id: 406 },
+      ],
+    },
+    {
+      id: 500,
+      name: "臧品修改",
+      authority: false,
+      children: [
+        { name: "删除", authority: false, id: 503 },
+        { name: "审核", authority: false, id: 505 },
+      ],
+    },
+    {
+      id: 600,
+      name: "臧品注销",
+      authority: false,
+      children: [
+        { name: "编辑", authority: false, id: 602 },
+        { name: "删除", authority: false, id: 603 },
+        { name: "审核", authority: false, id: 605 },
+      ],
+    },
+    {
+      id: 700,
+      name: "库房设置",
+      authority: false,
+      children: [
+        { name: "编辑", authority: false, id: 702 },
+        { name: "删除", authority: false, id: 703 },
+      ],
+    },
+    {
+      id: 800,
+      name: "臧品移库",
+      authority: false,
+      children: [
+        { name: "删除", authority: false, id: 803 },
+        { name: "审核", authority: false, id: 805 },
+      ],
+    },
+  ],
+  // 所有角色的下拉框
+  roleSelect: [] as any,
 };
 
-type ActionType = { type: "system/getTableList"; payload: any };
+type ActionType =
+  | { type: "system/getTableList"; payload: any }
+  | { type: "system/getRoleInfo"; payload: any }
+  | { type: "system/getRoleArr"; payload: any }
+  | { type: "system/getRoleSelect"; payload: any };
 
 export default function systemReducer(state = initState, action: ActionType) {
   switch (action.type) {
     // 用户管理表格信息
     case "system/getTableList":
       return { ...state, tableList: action.payload };
+    // 角色管理的角色权限弹窗信息
+    case "system/getRoleInfo":
+      return { ...state, roleInfo: action.payload };
+    case "system/getRoleArr":
+      return { ...state, roleArr: action.payload };
+    // 所有角色的下拉框
+    case "system/getRoleSelect":
+      return { ...state, roleSelect: action.payload };
 
     default:
       return state;