.

src/components/RoleCheckbox/index.jsx

+import React, { useState, useEffect, useRef } from 'react';
+import { Checkbox, Divider } from 'antd';
+
+const BoxGroup = (props) => {
+  const { value, onchange, title, currenList } = props;
+  const [indeterminate, setIndeterminate] = useState(false);
+  const [checkAll, setCheckAll] = useState(false);
+  const [oldRoleList, setOldRoleList] = useState([]);
+
+  const onChange = (list) => {
+    var current;
+    if (oldRoleList.length === 0) {
+      onchange([...value, list[0]]);
+    } else if (list.length === 0) {
+      onchange(value.filter((item) => item !== oldRoleList[0]));
+    } else if (oldRoleList.length > list.length) {
+      //老的数据大于新的数据说明在减少
+      oldRoleList.map((item) => {
+        if (list.indexOf(item) === -1) {
+          current = item;
+        }
+      });
+      onchange(value.filter((item) => item !== current));
+    } else {
+      list.map((item) => {
+        if (oldRoleList.indexOf(item) === -1) {
+          current = item;
+        }
+      });
+      onchange([...value, current]);
+    }
+    setIndeterminate(!!list.length && list.length < currenList.length);
+    setCheckAll(list.length === currenList.length);
+    setOldRoleList(list);
+  };
+  const onCheckAllChange = (e) => {
+    var list = currenList.map((item) => {
+      return item.permissionId;
+    });
+    // 将对象数组转换为字符串数组
+    var list2 = [...value];
+    if (e.target.checked) {
+      // 全选了吧需要的加入
+      list.forEach((item) => {
+        if (list2.indexOf(item) === -1) {
+          list2.push(item);
+        }
+      });
+      onchange(list2);
+    } else {
+      list.forEach((item) => {
+        if (list2.indexOf(item) !== -1) {
+          list2.splice(list2.indexOf(item), 1);
+        }
+      });
+      onchange(list2);
+    }
+    setIndeterminate(false);
+    setCheckAll(e.target.checked);
+  };
+  useEffect(() => {
+    if (currenList.length > 0) {
+      let num = 0;
+      var list = currenList.map((item) => {
+        return item.permissionId;
+      });
+      value.forEach((item) => {
+        if (list.indexOf(item) !== -1) {
+          num++;
+        }
+      });
+      if (num === 0) {
+        setIndeterminate(false);
+        setCheckAll(false);
+      } else if (num < currenList.length) {
+        setIndeterminate(!!num && num < currenList.length);
+      } else {
+        setIndeterminate(false);
+        setCheckAll(true);
+      }
+    }
+  }, [currenList]);
+  return (
+    <>
+      <Divider orientation="center">{title}权限</Divider>
+      {currenList.length > 0 && (
+        <Checkbox indeterminate={indeterminate} onChange={onCheckAllChange} checked={checkAll}>
+          全选
+        </Checkbox>
+      )}
+      <Checkbox.Group style={{ width: '100%' }} value={value} onChange={onChange}>
+        {currenList.map((item) => {
+          return (
+            <div key={item.permissionId}>
+              <Checkbox value={item.permissionId}>{item.name}</Checkbox>
+              <br />
+            </div>
+          );
+        })}
+      </Checkbox.Group>
+    </>
+  );
+};
+export default BoxGroup;

src/pages/ContentManagementSystem/Advertisement/edit.jsx

 
   const Submit = (values) => {
     message.success(`成功成功成功`);
-    console.log('🚀 ~ file: index.jsx ~ line 21 ~ values', values);
   };
 
   return (

src/pages/ContentManagementSystem/InformationClassification/InformationClassificationEdit/index.jsx

     wrapperCol: { span: 14 },
   };
 
-  const Submit = (values) => {
-    console.log('🚀 ~ file: index.jsx ~ line 21 ~ values', values);
-  };
+  const Submit = (values) => {};
 
   return (
     <Card>

src/pages/ContentManagementSystem/InformationList/InformationListEdit/index.jsx

     wrapperCol: { span: 14 },
   };
 
-  const Submit = (values) => {
-    console.log('🚀 ~ file: index.jsx ~ line 21 ~ values', values);
-  };
+  const Submit = (values) => {};
 
   return (
     <Card>

src/pages/SystemManagement/Administrator/index.jsx

 } from '@/services/user';
 import { PageHeaderWrapper } from '@ant-design/pro-layout';
 import PageTable from '@/components/PageTable';
+import moment from 'moment';
 import Search from '@/components/CooperativeSearch';
 
 const FormItem = Form.Item;
 const { Option } = Select;
-
+const formatterTime = (val) => {
+  return val && val !== '-' ? moment(val).format('YYYY-MM-DD') : '-';
+};
 export default (props) => {
   //编辑弹窗
   const formItemLayout = { labelCol: { span: 6 }, wrapperCol: { span: 14 } };
       dataIndex: 'email',
       key: 'email',
     },
+    {
+      title: '注册时间',
+      dataIndex: 'createDate',
+      key: 'createDate',
+      render: formatterTime,
+      search: false,
+    },
     {
       title: '状态',
       dataIndex: 'status',

src/pages/SystemManagement/UserRights/index.jsx

+import React, { useState, useEffect, useRef } from 'react';
+import { history, Link } from 'umi';
+import {
+  Button,
+  Popconfirm,
+  Modal,
+  Form,
+  Input,
+  message,
+  Tree,
+  Checkbox,
+  Row,
+  Col,
+  Divider,
+} from 'antd';
+import { PlusOutlined } from '@ant-design/icons';
+import { getRoleList, addRole, deleteRole, updateRole, getMenuList } from '@/services/role';
+import { getPermissionList, addPermission, getRoleRermissionDetail } from '@/services/permission';
+import { PageHeaderWrapper } from '@ant-design/pro-layout';
+import moment from 'moment';
+import PageTable from '@/components/PageTable';
+import RoleCheckbox from '@/components/RoleCheckbox';
+
+const formatterTime = (val) => {
+  return val && val !== '-' ? moment(val).format('YYYY-MM-DD') : '-';
+};
+const FormItem = Form.Item;
 
 export default (props) => {
+  //列表
+  const actionRef = useRef();
+  // 角色表单
+  const formItemLayout = { labelCol: { span: 6 }, wrapperCol: { span: 14 } };
+  const [form] = Form.useForm();
+  const [editModal, setEditModal] = useState(false);
+  const [loading, setLoading] = useState(false);
+  const [roleId, setRoleId] = useState();
+  const [roleMId, setRoleMId] = useState();
+
+  // 授权弹窗
+  const [showModal, setShowModal] = useState(false);
+  const [treeList, setTreeList] = useState([]);
+  const [permissionAllList, setPermissionAllList] = useState([]);
+  const [primordialData, setPrimordialData] = useState([]);
+
+  const [currenList, setCurrentList] = useState([]);
+  const [title, setTitle] = useState('');
+  //选中的权限列表
+  const [rolePermissionList, setRolePermissionList] = useState([]);
+  const [pLoading, setPLoading] = useState(false);
+  let parentList = [];
+  let pid = '';
+
+  //列表编辑
+  const handelEdit = (val) => {
+    setRoleId(val.roleId);
+    form.setFieldsValue(val);
+    setEditModal(true);
+  };
+  //列表删除
+  const handleDelete = (id) => {
+    deleteRole(id)
+      .then(() => {
+        message.success('删除成功');
+        actionRef.current.reload();
+      })
+      .catch((err) => {
+        message.error(err);
+      });
+  };
+  //列表角色授权
+  const handelEmpower = (val) => {
+    setRoleMId(val.roleId);
+    setShowModal(true);
+    getRoleRermissionDetail({ roleId: val.roleId })
+      .then((res) => {
+        setRolePermissionList(
+          res.map((item) => {
+            return item.permissionId;
+          }),
+        );
+      })
+      .catch((err) => {
+        message.error(err);
+      });
+  };
+
+  // 表单提交
+  const Submit = (values) => {
+    setLoading(true);
+    if (roleId) {
+      updateRole(roleId, values).then(() => {
+        setLoading(false);
+        message.success(`修改成功`);
+        onCancel();
+        actionRef.current.reload();
+      });
+    } else {
+      addRole(values)
+        .then(() => {
+          setLoading(false);
+          message.success(`保存成功`);
+          onCancel();
+          actionRef.current.reload();
+        })
+        .catch((err) => {
+          setLoading(false);
+          message.error(err.message || err);
+        });
+    }
+  };
+  //角色弹窗关闭
+  const onCancel = () => {
+    setRoleId();
+    form.resetFields();
+    setEditModal(false);
+  };
+  //授权弹窗关闭
+  const onEmpowerCancel = () => {
+    setRoleMId();
+    setShowModal(false);
+    setRolePermissionList([]);
+    setCurrentList([]);
+    parentList = [];
+    pid = '';
+  };
+  //递归取出树结构中的所以项便于加入最终选中的菜单项
+  const treeToArray = (tree) => {
+    if (tree.children) {
+      return [{ title: tree.title, key: tree.key }, ...tree.children];
+    } else return { title: tree.title, key: tree.key };
+  };
+  // 选择左侧的菜单多选框
+  const onCheck = (checkedKeys, info) => {
+    //当前选中数组
+    let list2;
+    let list3 = [...rolePermissionList];
+    //权限数据
+    var list4 = list3.filter((item) => item.split(':').length == 2);
+    if (info.checked) {
+      if (info.node.children) {
+        list2 = treeToArray(info.node).map((item) => {
+          return item.key;
+        });
+        list2.forEach((item) => {
+          if (list3.indexOf(item) === -1) {
+            list3.push(item);
+          }
+        });
+      } else {
+        list2 = info.node.key;
+        if (list3.indexOf(list2) === -1) {
+          list3.push(list2);
+        }
+      }
+    } else {
+      setTitle();
+      setCurrentList([]);
+      //取消菜单
+      if (info.node.children) {
+        list2 = treeToArray(info.node).map((item) => {
+          return item.key;
+        });
+        list2.forEach((item) => {
+          if (list3.indexOf(item) !== -1) {
+            list3.splice(list3.indexOf(item), 1);
+            list4.map((v) => {
+              if (v.split(':')[0] == item) {
+                list3.splice(list3.indexOf(v), 1);
+              }
+            });
+          }
+        });
+      } else {
+        list2 = info.node.key;
+        if (list3.indexOf(list2) !== -1) {
+          list3.splice(list3.indexOf(list2), 1);
+          list4.map((v) => {
+            if (v.split(':')[0] == list2) {
+              list3.splice(list3.indexOf(list2), 1);
+            }
+          });
+        }
+      }
+    }
+    if (list3.length < checkedKeys.length + list4.length) {
+      // 说明父节点是因为子节点全部选中才选中实际上菜单数组中没有父节点的数据
+      checkedKeys.forEach((item) => {
+        if (list3.indexOf(item) === -1) {
+          list3.push(item);
+        }
+      });
+    } else if (list3.length > checkedKeys.length + list4.length) {
+      // 说明父节点是因为子节点全部取消才取消实际上菜单数组中多了父节点的数据
+      list3.forEach((item) => {
+        if (checkedKeys.indexOf(item) === -1 && list4.indexOf(item) === -1) {
+          list3.splice(list3.indexOf(item), 1);
+        }
+      });
+    }
+    setRolePermissionList(list3);
+  };
+  // 选择左侧菜单文字
+  const onSelect = (checkedKeys, info) => {
+    if (info.selected) {
+      var list = permissionAllList.filter((item) => item.resourceId === info.node.key);
+      setTitle(info.node.title);
+      setCurrentList(list);
+    } else {
+      setTitle();
+      setCurrentList([]);
+    }
+  };
+  const setParnentList = (val) => {
+    pid = primordialData.filter((item) => item.menuId === val)[0].menuPId;
+    if (pid !== '-1') {
+      parentList.push(pid);
+      setParnentList(pid);
+    }
+  };
+  const handelOk = () => {
+    var list = [...rolePermissionList];
+    if (list.length == 0) {
+      message.info('授权内容不能为空');
+      return;
+    }
+    setPLoading(true);
+    //菜单数据
+    var list4 = rolePermissionList.filter((item) => item.split(':').length !== 2);
+    list4.forEach((item) => {
+      setParnentList(item);
+    });
+
+    parentList = [...new Set(parentList)];
+    parentList.forEach((item) => {
+      if (list.indexOf(item) === -1) {
+        list.push(item);
+      }
+    });
+    list = list.map((item) => {
+      return { permissionId: item };
+    });
+    addPermission(roleMId, list)
+      .then(() => {
+        message.success('授权成功');
+        setPLoading(false);
+        onEmpowerCancel();
+      })
+      .catch((err) => {
+        message.error(err);
+        setPLoading(false);
+      });
+  };
+
+  // 将一维对象数组装换为树形数组
+  const translateDataToTree = (data) => {
+    //没有父节点的数据
+    let parents = data.filter((value) => value.menuPId == '-1');
+
+    //有父节点的数据
+    let children = data.filter((value) => value.menuPId !== '-1');
+
+    //定义转换方法的具体实现
+    let translator = (parents, children) => {
+      //遍历父节点数据
+      parents.forEach((parent) => {
+        //遍历子节点数据
+        children.forEach((current, index) => {
+          //此时找到父节点对应的一个子节点
+          if (current.menuPId === parent.menuId) {
+            //对子节点数据进行深复制，这里只支持部分类型的数据深复制，对深复制不了解的童靴可以先去了解下深复制
+            let temp = JSON.parse(JSON.stringify(children));
+            //让当前子节点从temp中移除，temp作为新的子节点数据，这里是为了让递归时，子节点的遍历次数更少，如果父子关系的层级越多，越有利
+            temp.splice(index, 1);
+            //让当前子节点作为唯一的父节点，去递归查找其对应的子节点
+            translator([current], temp);
+            //把找到子节点放入父节点的children属性中
+            typeof parent.children !== 'undefined'
+              ? parent.children.push(current)
+              : (parent.children = [current]);
+          }
+        });
+      });
+    };
+
+    //调用转换方法
+    translator(parents, children);
+
+    //返回最终的结果
+    return parents;
+  };
+  useEffect(() => {
+    getMenuList()
+      .then((res) => {
+        setPrimordialData(res);
+        const list = translateDataToTree(res);
+        const list2 = list.map((item) => {
+          if (item.children?.length > 0) {
+            return {
+              title: item.name,
+              key: item.menuId,
+              children: item.children.map((v) => {
+                return { title: v.name, key: v.menuId };
+              }),
+            };
+          } else {
+            return { title: item.name, key: item.menuId };
+          }
+        });
+        setTreeList(list2);
+      })
+      .catch((err) => {
+        message.error(err);
+      });
+    getPermissionList()
+      .then((res) => {
+        setPermissionAllList(res);
+      })
+      .catch((err) => {
+        message.error(err);
+      });
+  }, []);
+  useEffect(() => {
+    if (roleId) {
+    } else {
+      form.resetFields();
+    }
+  }, [roleId]);
+
+  const actions = () => [
+    <Button key="add" type="primary" icon={<PlusOutlined />} onClick={() => setEditModal(true)}>
+      新增
+    </Button>,
+  ];
+  const columns = [
+    {
+      title: '角色名',
+      dataIndex: 'name',
+      key: 'name',
+    },
+    {
+      title: '创建时间',
+      dataIndex: 'createDate',
+      key: 'createDate',
+      render: formatterTime,
+    },
+    {
+      title: '操作',
+      valueType: 'option',
+      render: (_, record) => [
+        <a key={1} onClick={() => handelEdit(record)}>
+          编辑
+        </a>,
+        <Popconfirm
+          key={2}
+          title="您是否确认删除 ?"
+          onConfirm={() => handleDelete(record.roleId)}
+          okText="确定"
+          cancelText="取消"
+        >
+          <a href="#">删除</a>
+        </Popconfirm>,
+        <a key={3} onClick={() => handelEmpower(record)}>
+          角色授权
+        </a>,
+      ],
+    },
+  ];
 
   return (
-    <div>角色权限</div>
-  )
-}
+    <PageHeaderWrapper>
+      <PageTable
+        request={getRoleList}
+        // expfunc={exportPersonList}
+        columns={columns}
+        actionRef={actionRef}
+        rowKey="roleId"
+        options={false}
+        toolBarRender={actions}
+        search={false}
+      />
+      <Modal
+        forceRender
+        title={roleId ? '角色编辑' : '角色新增'}
+        visible={editModal}
+        onCancel={onCancel}
+        keyboard={false}
+        maskClosable={false}
+        destroyOnClose={true}
+        footer={null}
+      >
+        <Form {...formItemLayout} onFinish={Submit} form={form}>
+          <FormItem label="角色名" name="name" rules={[{ required: true, message: '请输入' }]}>
+            <Input placeholder="请输入" />
+          </FormItem>
+          <FormItem label=" " colon={false}>
+            <Button type="default" onClick={onCancel}>
+              取消
+            </Button>
+            <Button
+              type="primary"
+              loading={loading}
+              htmlType="Submit"
+              style={{ marginLeft: '4em' }}
+            >
+              确认
+            </Button>
+          </FormItem>
+        </Form>
+      </Modal>
+      <Modal
+        title="角色授权"
+        visible={showModal}
+        onCancel={onEmpowerCancel}
+        keyboard={false}
+        maskClosable={false}
+        destroyOnClose={true}
+        onOk={handelOk}
+        confirmLoading={pLoading}
+      >
+        <Row gutter={24}>
+          <Col span={12}>
+            <Divider orientation="center">菜单</Divider>
+            <Tree
+              height={500}
+              checkable
+              defaultExpandAll
+              onSelect={onSelect}
+              onCheck={onCheck}
+              checkStrictly
+              checkedKeys={rolePermissionList}
+              treeData={treeList}
+            />
+          </Col>
+          <Col span={12}>
+            <RoleCheckbox
+              value={rolePermissionList}
+              title={title}
+              currenList={currenList}
+              onchange={setRolePermissionList}
+            />
+          </Col>
+        </Row>
+      </Modal>
+    </PageHeaderWrapper>
+  );
+};

src/services/permission.js

+import request from '@/utils/request';
+
+/**
+ * 角色授权
+ * @param {*} data
+ * @returns
+ */
+export const addPermission = (id, data) =>
+  request(`/role/${id}/permission`, { method: 'post', data });
+/**
+ * 查询角色权限详情
+ * @param {*} params
+ * @returns
+ */
+export const getRoleRermissionDetail = (params) => request(`/role-permission`, { params });
+/**
+ * 查询权限列表
+ * @param {*} params
+ * @returns
+ */
+export const getPermissionList = (params) => request('/permission', { params });

src/services/role.js

+import request from '@/utils/request';
+
+/**
+ * 保存角色
+ * @param {*} data
+ * @returns
+ */
+export const addRole = (data) => request('/role', { method: 'post', data });
+
+/**
+ * 修改角色
+ * @param {*} data
+ * @returns
+ */
+export const updateRole = (id, data) => request(`/role/${id}`, { method: 'put', data });
+
+/**
+ * 查询角色列表
+ * @param {*} params
+ * @returns
+ */
+export const getRoleList = (params) => request('/role', { params });
+
+/**
+ * 删除角色
+ * @param {*} data
+ * @returns
+ */
+export const deleteRole = (id) => request(`/role/${id}`, { method: 'delete' });
+
+/**
+ * 查询角色详情
+ * @param {*} params
+ * @returns
+ */
+export const getRoleDetail = (id) => request(`/role/${id}`);
+
+/**
+ * 查询菜单列表
+ * @param {*} params
+ * @returns
+ */
+export const getMenuList = (params) => request('/menu', { params });
+
+/**
+ * 查询权限列表
+ * @param {*} params
+ * @returns
+ */
+export const getPermissionList = (params) => request('/permission', { params });