.

src/pages/SystemManagement/Administrator/index.jsx

 import React, { useState, useEffect, useRef } from 'react';
-import { Button, Popconfirm, Modal, Form, Input, message, Radio, Select } from 'antd';
+import { Button, Popconfirm, Modal, Form, Input, message, Radio, Select, Checkbox } from 'antd';
 import { PlusOutlined } from '@ant-design/icons';
 import { getCooperativeList } from '@/services/cooperative';
 import {
   getDefaultPassword,
   getUserDetail,
 } from '@/services/user';
+import { getRoleList } from '@/services/role';
+import { getUserRoleList, addUserUserRole, deleteUserRole } from '@/services/userRole';
 import { PageHeaderWrapper } from '@ant-design/pro-layout';
 import PageTable from '@/components/PageTable';
 import moment from 'moment';
   const [password, setPassWord] = useState('');
   const [cooperativeList, setCooperativeList] = useState([]);
 
+  const [editRoleModal, setEditRoleModal] = useState(false);
+  const [rLoading, setRLoading] = useState(false);
+  const [rUserId, setRUserId] = useState();
+  const [roleList, setRoleList] = useState([]);
+  const [currentCheckbox, setCurrentCheckbox] = useState();
   //列表数据
   const actionRef = useRef();
 
   const handelChange = () => {};
 
   // 列表点击编辑按钮
-  const handelEdit = (val) => {
+  const handleEdit = (val) => {
     setuserId(val.userId);
     setEditModal(true);
   };
       },
     });
   };
+
+  const handleRole = (val) => {
+    setRUserId(val.userId);
+    getUserRoleList({ user_id: val.userId }).then((res) => {
+      if (res.length !== 0) {
+        setCurrentCheckbox(res.map((item) => item.roleId));
+      }
+    });
+    setEditRoleModal(true);
+  };
+  //授权弹窗点击取消按钮
+  const onRoleCancel = () => {
+    setRUserId();
+    setCurrentCheckbox();
+    form.resetFields();
+    setEditRoleModal(false);
+  };
+  const handelOk = () => {
+    if (!currentCheckbox) {
+      message.info('请选择角色');
+      return;
+    }
+    setRLoading(true);
+    if (currentCheckbox.length === 0) {
+      deleteUserRole(rUserId)
+        .then(() => {
+          message.success('取消授权角色成功');
+          setRLoading(false);
+          onRoleCancel();
+        })
+        .catch((err) => {
+          message.error(err);
+          setRLoading(false);
+        });
+    } else {
+      addUserUserRole(
+        rUserId,
+        currentCheckbox.map((item) => {
+          return { userId: rUserId, roleId: item };
+        }),
+      )
+        .then(() => {
+          message.success('授权角色成功');
+          setRLoading(false);
+          onRoleCancel();
+        })
+        .catch((err) => {
+          message.error(err);
+          setRLoading(false);
+        });
+    }
+  };
+  const handleCheckboxChange = (list) => {
+    setCurrentCheckbox(list);
+  };
   useEffect(() => {
     //获取账号默认密码
     getDefaultPassword().then((res) => {
     getCooperativeList().then((res) => {
       setCooperativeList(res.records);
     });
+    //获取角色列表数据
+    getRoleList().then((res) => {
+      setRoleList(res.records);
+    });
+  }, []);
+  useEffect(() => {
     if (userId) {
       getUserDetail(userId).then((res) => {
         if (res.orgId === '-1') {
         <Button type="link" key={1} onClick={() => handleOK(record)}>
           {record.status === 0 ? '启用' : '禁用'}
         </Button>,
-        <a key={2} onClick={() => handelEdit(record)}>
+        <a key={2} onClick={() => handleEdit(record)}>
           编辑
         </a>,
+        <a key={3} onClick={() => handleRole(record)}>
+          授权角色
+        </a>,
         <Popconfirm
-          key={3}
+          key={4}
           title="您是否确认删除 ?"
           onConfirm={() => handleDelete(record.userId)}
           okText="确定"
         scroll={{ x: 1000 }}
       />
       <Modal
+        forceRender
         title={userId ? '人员编辑' : '人员新增'}
         visible={editModal}
         onCancel={onCancel}
         footer={null}
       >
         <Form {...formItemLayout} onFinish={Submit} form={form}>
-          <FormItem label="登录账号">
-            <Input.Group compact>
-              <Form.Item
-                name="loginName"
-                noStyle
-                rules={[{ required: true, message: '请输入登录账号' }]}
-              >
-                <Input placeholder="请输入" />
-              </Form.Item>
-              <span style={{ opacity: '0.7' }}>默认密码{password}</span>
-            </Input.Group>
-          </FormItem>
           <FormItem label="用户名" name="userName" rules={[{ required: true, message: '请输入' }]}>
             <Input placeholder="请输入" />
           </FormItem>
           <FormItem label="邮箱" name="email" rules={[{ required: true, message: '请输入' }]}>
             <Input placeholder="请输入" />
           </FormItem>
+          <FormItem label="登录账号">
+            <Input.Group compact>
+              <Form.Item
+                name="loginName"
+                noStyle
+                rules={[{ required: true, message: '请输入登录账号' }]}
+              >
+                <Input placeholder="请输入" />
+              </Form.Item>
+              <span style={{ opacity: '0.7' }}>默认密码{password}</span>
+            </Input.Group>
+          </FormItem>
           <FormItem label="所属机构" name="orgId" rules={[{ required: true, message: '请输入' }]}>
             <Search placeholder="请选择机构" onChange={handelChange} />
             {/* <Select
           </FormItem>
         </Form>
       </Modal>
+      <Modal
+        forceRender
+        title="角色授权"
+        visible={editRoleModal}
+        onCancel={onRoleCancel}
+        keyboard={false}
+        maskClosable={false}
+        destroyOnClose={true}
+        onOk={handelOk}
+        confirmLoading={rLoading}
+      >
+        <Checkbox.Group
+          style={{ width: '100%' }}
+          value={currentCheckbox}
+          onChange={handleCheckboxChange}
+        >
+          {roleList.map((item) => {
+            return (
+              <div key={item.roleId}>
+                <Checkbox value={item.roleId}>{item.name}</Checkbox>
+                <br />
+              </div>
+            );
+          })}
+        </Checkbox.Group>
+      </Modal>
     </PageHeaderWrapper>
   );
 };

src/pages/SystemManagement/Region/index.jsx

 import React, { useState, useEffect, useRef } from 'react';
-import { history, Link } from 'umi';
-import { Button, Popconfirm, Modal, Form, Input, message, Tooltip } from 'antd';
+import { Button, Popconfirm, Modal, Form, Input, message } from 'antd';
 import { PlusOutlined } from '@ant-design/icons';
-import { getRegionList, addRegion, deleteRegion, updateRegion } from '@/services/region';
 import { PageHeaderWrapper } from '@ant-design/pro-layout';
 import moment from 'moment';
 import PageTable from '@/components/PageTable';
+import { getRegionList, addRegion, deleteRegion, updateRegion } from '@/services/region';
 
 const formatterTime = (val) => {
   return val && val !== '-' ? moment(val).format('YYYY-MM-DD') : '-';
 const FormItem = Form.Item;
 
 export default (props) => {
-  const actions = () => [
-    <Button key="add" type="primary" icon={<PlusOutlined />} onClick={() => setEditModal(true)}>
-      新增
-    </Button>,
-  ];
   const formItemLayout = { labelCol: { span: 6 }, wrapperCol: { span: 14 } };
   const [form] = Form.useForm();
   const [editModal, setEditModal] = useState(false);
       form.resetFields();
     }
   }, [regionId]);
+  const actions = () => [
+    <Button key="add" type="primary" icon={<PlusOutlined />} onClick={() => setEditModal(true)}>
+      新增
+    </Button>,
+  ];
   const columns = [
     {
       title: '区域名',
     <PageHeaderWrapper>
       <PageTable
         request={getRegionList}
-        // expfunc={exportPersonList}
         columns={columns}
         actionRef={actionRef}
         rowKey="regionId"
         scroll={{ x: 1000 }}
       />
       <Modal
+        forceRender
         title={regionId ? '区域编辑' : '区域新增'}
         visible={editModal}
         onCancel={onCancel}

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 { Button, Popconfirm, Modal, Form, Input, message, Tree, 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';
+import { getRoleList, addRole, deleteRole, updateRole, getMenuList } from '@/services/role';
+import { getPermissionList, addPermission, getRoleRermissionDetail } from '@/services/permission';
 
 const formatterTime = (val) => {
   return val && val !== '-' ? moment(val).format('YYYY-MM-DD') : '-';
 
   // 授权弹窗
   const [showModal, setShowModal] = useState(false);
+  //左侧菜单数据源一维数组形式的
+  const [primordialData, setPrimordialData] = useState([]);
+  //左侧菜单树形数组
   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);
+  //用于储存父节点id数组 防止用户只选择了子节点没有选择父节点到时候显示不出来
   let parentList = [];
+  // 用于递归遍历时存放当前父节点id
   let pid = '';
 
   //列表编辑

src/services/userRole.js

+import request from '@/utils/request';
+
+/**
+ * 授权角色
+ * @param {*} data
+ * @returns
+ */
+export const addUserUserRole = (id, data) => request(`/user/${id}/role`, { method: 'post', data });
+
+/**
+ * 查询人员角色
+ * @param {*} params
+ * @returns
+ */
+export const getUserRoleList = (params) => request('/user-role', { params });
+
+/**
+ * 删除角色
+ * @param {*} data
+ * @returns
+ */
+export const deleteUserRole = (id) => request(`/user/${id}/role`, { method: 'delete' });