权限分配

admin-web/src/pages/Admin/ResourceList.js

@@ -65,6 +65,7 @@ const CreateForm = Form.create()(props => {
           rules: [{ required: true, message: '请输入父级编号！' }],
           initialValue: initValues.pid,
         })(<Input placeholder="请输入" />)}
+        <span>根节点为 0</span>
       </FormItem>
       <FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="排序">
         {form.getFieldDecorator('sort', {

admin-web/src/pages/Admin/RoleList.js

@@ -3,13 +3,26 @@
 import React, { PureComponent, Fragment } from 'react';
 import { connect } from 'dva';
 import moment from 'moment';
-import { Card, Form, Input, Select, Button, Modal, message, Table, Divider } from 'antd';
+import {
+  Card,
+  Form,
+  Input,
+  Select,
+  Spin,
+  Button,
+  Modal,
+  message,
+  Table,
+  Divider,
+  Tree,
+} from 'antd';
 import PageHeaderWrapper from '@/components/PageHeaderWrapper';
 
 import styles from './RoleList.less';
 
 const FormItem = Form.Item;
 const { Option } = Select;
+const { TreeNode } = Tree;
 
 // 添加 form 表单
 const CreateForm = Form.create()(props => {
@@ -52,6 +65,78 @@ const CreateForm = Form.create()(props => {
   );
 });
 
+// 添加 form 表单
+const AssignModal = Form.create()(props => {
+  const {
+    modalVisible,
+    form,
+    handleOk,
+    handleModalVisible,
+    treeData,
+    checkedKeys,
+    loading,
+    handleCheckBoxClick,
+  } = props;
+
+  const renderTreeNodes = data => {
+    return data.map(item => {
+      if (item.children) {
+        return (
+          <TreeNode title={item.title} key={item.key} dataRef={item}>
+            {renderTreeNodes(item.children)}
+          </TreeNode>
+        );
+      }
+      return <TreeNode title={item.title} key={item.key} dataRef={item} />;
+    });
+  };
+
+  const renderModalContent = treeData => {
+    const RenderTreeNodes = renderTreeNodes(treeData);
+    if (RenderTreeNodes) {
+      return (
+        <FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="角色名">
+          {form.getFieldDecorator('name', {})(
+            <Tree
+              defaultExpandAll={true}
+              checkable={true}
+              checkedKeys={checkedKeys}
+              onCheck={handleCheckBoxClick}
+            >
+              {renderTreeNodes(treeData)}
+            </Tree>
+          )}
+        </FormItem>
+      );
+    } else {
+      return null;
+    }
+  };
+
+  const okHandle = () => {
+    form.validateFields((err, fieldsValue) => {
+      if (err) return;
+      form.resetFields();
+      handleOk({
+        fields: fieldsValue,
+      });
+    });
+  };
+
+  return (
+    <Modal
+      destroyOnClose
+      title="更新权限"
+      visible={modalVisible}
+      onOk={okHandle}
+      onCancel={() => handleModalVisible()}
+    >
+      <Spin spinning={loading}>{renderModalContent(treeData)}</Spin>
+    </Modal>
+  );
+});
+
+// roleList
 @connect(({ roleList, loading }) => ({
   roleList,
   list: roleList.list,
@@ -64,6 +149,8 @@ class RoleList extends PureComponent {
     modalVisible: false,
     modalType: 'add', //add update
     initValues: {},
+    roleAssignVisible: false,
+    roleAssignRecord: {},
   };
 
   componentDidMount() {
@@ -86,8 +173,51 @@ class RoleList extends PureComponent {
     });
   };
 
+  handleAssignModalVisible = (flag, record) => {
+    const { dispatch } = this.props;
+    dispatch({
+      type: 'roleList/queryRoleAssign',
+      payload: {
+        id: record.id,
+      },
+    });
+    this.setState({
+      roleAssignVisible: !!flag,
+      roleAssignRecord: record,
+    });
+  };
+
+  handleAssignModalVisibleClose(flag) {
+    this.setState({
+      roleAssignVisible: !!flag,
+    });
+  }
+
+  handleAssignCheckBoxClick = checkedKeys => {
+    const { dispatch } = this.props;
+    const newCheckedKeys = checkedKeys.map(item => {
+      return parseInt(item);
+    });
+    dispatch({
+      type: 'roleList/changeCheckedKeys',
+      payload: newCheckedKeys,
+    });
+  };
+
+  handleAssignOK = () => {
+    const { dispatch, data } = this.props;
+    const { roleAssignRecord } = this.state;
+    dispatch({
+      type: 'roleList/roleAssignResource',
+      payload: {
+        id: roleAssignRecord.id,
+        resourceIds: data.checkedKeys,
+      },
+    });
+    this.handleAssignModalVisibleClose(false);
+  };
+
   handleAdd = ({ fields, modalType, initValues }) => {
-    console.log('add ->>>', fields);
     const { dispatch, data } = this.props;
     const queryParams = {
       pageNo: data.pageNo,
@@ -151,7 +281,10 @@ class RoleList extends PureComponent {
 
   render() {
     const { list, data } = this.props;
-    const { modalVisible, modalType, initValues, defaultExpandAllRows } = this.state;
+
+    const { pageNo, pageSize, count, resourceTreeData, checkedKeys, assignModalLoading } = data;
+    const { modalVisible, modalType, initValues, roleAssignVisible } = this.state;
+
     const parentMethods = {
       handleAdd: this.handleAdd,
       handleModalVisible: this.handleModalVisible,
@@ -177,10 +310,13 @@ class RoleList extends PureComponent {
       },
       {
         title: '操作',
+        width: 200,
         render: (text, record) => (
           <Fragment>
             <a onClick={() => this.handleModalVisible(true, 'update', record)}>更新</a>
             <Divider type="vertical" />
+            <a onClick={() => this.handleAssignModalVisible(true, record)}>分配权限</a>
+            <Divider type="vertical" />
             <a className={styles.tableDelete} onClick={() => this.handleDelete(record)}>
               删除
             </a>
@@ -190,10 +326,11 @@ class RoleList extends PureComponent {
     ];
 
     const paginationProps = {
-      current: data.pageNo,
-      pageSize: data.pageSize,
-      total: data.count,
+      current: pageNo,
+      pageSize: pageSize,
+      total: count,
     };
+
     return (
       <PageHeaderWrapper title="查询表格">
         <Card bordered={false}>
@@ -211,6 +348,15 @@ class RoleList extends PureComponent {
           <Table columns={columns} dataSource={list} rowKey="id" />
         </Card>
         <CreateForm {...parentMethods} modalVisible={modalVisible} />
+        <AssignModal
+          loading={assignModalLoading}
+          treeData={resourceTreeData}
+          checkedKeys={checkedKeys}
+          handleOk={this.handleAssignOK}
+          modalVisible={roleAssignVisible}
+          handleCheckBoxClick={this.handleAssignCheckBoxClick}
+          handleModalVisible={() => this.handleAssignModalVisibleClose(false)}
+        />
       </PageHeaderWrapper>
     );
   }