添加角色管理

admin-web/config/router.config.js

@@ -46,6 +46,11 @@ export default [
             name: 'resource-list',
             component: './Admin/ResourceList',
           },
+          {
+            path: '/admin/role-list',
+            name: 'role-list',
+            component: './Admin/RoleList',
+          },
         ],
       },
       {

admin-web/mock/admin.js

@@ -2,6 +2,7 @@ import adminMenu from './geographic/admin-menu.json';
 import adminMenuAll from './geographic/admin-menu-all.json';
 import adminUrls from './geographic/admin-urls';
 import resourceTree from './geographic/resource-tree.json';
+import roleQuery from './geographic/role-query.json';
 
 /* eslint-disable */
 function getAdminMenu(req, res) {
@@ -20,8 +21,13 @@ function getResourceTree(req, res) {
   return res.json(resourceTree);
 }
 
+function getQueryRole(req, res) {
+  return res.json(roleQuery);
+}
+
 export default {
   'GET /admin-api/admin/resource/admin_menu_tree': getAdminMenuAll,
   'GET /admin-api/admin/resource/admin_url_list': getAdminUrls,
   'GET /admin-api/admin/resource/tree': getResourceTree,
+  'GET /admin-api/admin/role/page': getQueryRole,
 };

admin-web/mock/geographic/role-query.json

+{
+  "code": 0,
+  "data": {
+    "count": 2,
+    "roles": [
+      {
+        "id": 1,
+        "name": "系统管理员",
+        "createTime": 1551332076000
+      },
+      {
+        "id": 2,
+        "name": "系统管理员",
+        "createTime": 1551332076000
+      }
+    ]
+  },
+  "message": "string"
+}

admin-web/src/locales/zh-CN/menu.js

@@ -3,6 +3,7 @@ export default {
   'menu.admin': 'Admin管理',
   'menu.admin.admin-list': '管理员列表',
   'menu.admin.resource-list': '资源列表',
+  'menu.admin.role-list': '角色列表',
   'menu.home': '首页',
   'menu.login': '登录',
   'menu.register': '注册',

admin-web/src/models/resourceList.js → admin-web/src/models/admin/resourceList.js

 import { message } from 'antd';
-import { addResource, updateResource, deleteResource, resourceTree } from '@/services/resource';
+import { addResource, updateResource, deleteResource, resourceTree } from '../../services/admin';
 
 export default {
   namespace: 'resourceList',

admin-web/src/models/admin/roleList.js

+import { message } from 'antd';
+import { addRole, updateRole, deleteRole, queryRole } from '../../services/admin';
+
+export default {
+  namespace: 'roleList',
+
+  state: {
+    list: [],
+    count: 0,
+    pageNo: 0,
+    pageSize: 10,
+  },
+
+  effects: {
+    *add({ payload }, { call, put }) {
+      const { callback, body, queryParams } = payload;
+      const response = yield call(addRole, body);
+      if (callback) {
+        callback(response);
+      }
+      yield put({
+        type: 'query',
+        payload: {
+          ...queryParams,
+        },
+      });
+    },
+    *update({ payload }, { call, put }) {
+      const { callback, body, queryParams } = payload;
+      const response = yield call(updateRole, body);
+      if (callback) {
+        callback(response);
+      }
+      yield put({
+        type: 'query',
+        payload: {
+          ...queryParams,
+        },
+      });
+    },
+    *delete({ payload }, { call, put }) {
+      const { queryParams, body } = payload;
+      yield call(deleteRole, body);
+      message.info('删除成功!');
+      yield put({
+        type: 'query',
+        payload: {
+          ...queryParams,
+        },
+      });
+    },
+    *query({ payload }, { call, put }) {
+      const response = yield call(queryRole, payload);
+      message.info('查询成功!');
+      const { count, roles } = response.data;
+      yield put({
+        type: 'querySuccess',
+        payload: {
+          list: roles,
+          count,
+        },
+      });
+    },
+  },
+
+  reducers: {
+    querySuccess(state, { payload }) {
+      return {
+        ...state,
+        ...payload,
+      };
+    },
+  },
+};

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

@@ -89,6 +89,7 @@ const CreateForm = Form.create()(props => {
 
 @connect(({ resourceList, loading }) => ({
   resourceList,
+  list: resourceList.list,
   loading: loading.models.resourceList,
 }))
 @Form.create()
@@ -103,7 +104,7 @@ class ResourceList extends PureComponent {
   componentDidMount() {
     const { dispatch } = this.props;
     dispatch({
-      type: 'resourceList/tree',
+      type: 'roleList/tree',
       payload: {},
     });
   }
@@ -172,9 +173,7 @@ class ResourceList extends PureComponent {
   }
 
   render() {
-    const {
-      resourceList: { list },
-    } = this.props;
+    const { list } = this.props;
     const { modalVisible, modalType, initValues, defaultExpandAllRows } = this.state;
     const parentMethods = {
       handleAdd: this.handleAdd,
@@ -253,6 +252,7 @@ class ResourceList extends PureComponent {
               <Button type="normal" onClick={() => this.changeExpandAll()}>
                 展开所有行
               </Button>
+              TODO 展开没效果，需要研究下
             </div>
           </div>
           <Table

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

+/* eslint-disable */
+
+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 PageHeaderWrapper from '@/components/PageHeaderWrapper';
+
+import styles from './ResourceList.less';
+
+const FormItem = Form.Item;
+const { Option } = Select;
+
+// 添加 form 表单
+const CreateForm = Form.create()(props => {
+  const { modalVisible, form, handleAdd, handleModalVisible, modalType, initValues } = props;
+
+  const okHandle = () => {
+    form.validateFields((err, fieldsValue) => {
+      if (err) return;
+      form.resetFields();
+      handleAdd({
+        fields: fieldsValue,
+        modalType,
+        initValues,
+      });
+    });
+  };
+
+  const selectStyle = {
+    width: 200,
+  };
+
+  const title = modalType === 'add' ? '添加一个 Role' : '更新一个 Role';
+  const okText = modalType === 'add' ? '添加' : '更新';
+  return (
+    <Modal
+      destroyOnClose
+      title={title}
+      visible={modalVisible}
+      onOk={okHandle}
+      okText={okText}
+      onCancel={() => handleModalVisible()}
+    >
+      <FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="角色名">
+        {form.getFieldDecorator('name', {
+          rules: [{ required: true, message: '请输入角色名！', min: 2 }],
+          initialValue: initValues.name,
+        })(<Input placeholder="请输入" />)}
+      </FormItem>
+    </Modal>
+  );
+});
+
+@connect(({ roleList, loading }) => ({
+  roleList,
+  list: roleList.list,
+  data: roleList,
+  loading: loading.models.resourceList,
+}))
+@Form.create()
+class RoleList extends PureComponent {
+  state = {
+    modalVisible: false,
+    modalType: 'add', //add update
+    initValues: {},
+  };
+
+  componentDidMount() {
+    const { dispatch } = this.props;
+    dispatch({
+      type: 'roleList/query',
+      payload: {
+        name: '',
+        pageNo: 0,
+        pageSize: 10,
+      },
+    });
+  }
+
+  handleModalVisible = (flag, modalType, initValues) => {
+    this.setState({
+      modalVisible: !!flag,
+      initValues: initValues || {},
+      modalType: modalType || 'add',
+    });
+  };
+
+  handleAdd = ({ fields, modalType, initValues }) => {
+    const { dispatch, data } = this.props;
+    const queryParams = {
+      pageNo: data.pageNo,
+      pageSize: data.pageSize,
+    };
+    if (modalType === 'add') {
+      dispatch({
+        type: 'roleList/add',
+        payload: {
+          body: {
+            ...fields,
+          },
+          queryParams,
+          callback: () => {
+            message.success('添加成功');
+            this.handleModalVisible();
+          },
+        },
+      });
+    } else {
+      dispatch({
+        type: 'roleList/update',
+        payload: {
+          body: {
+            ...initValues,
+            ...fields,
+          },
+          queryParams,
+          callback: () => {
+            message.success('更新成功');
+            this.handleModalVisible();
+          },
+        },
+      });
+    }
+  };
+
+  handleDelete(row) {
+    const { dispatch, data } = this.props;
+    const queryParams = {
+      pageNo: data.pageNo,
+      pageSize: data.pageSize,
+    };
+    Modal.confirm({
+      title: `确认删除?`,
+      content: `${row.name}`,
+      onOk() {
+        dispatch({
+          type: 'roleList/delete',
+          payload: {
+            body: {
+              id: row.id,
+            },
+            queryParams,
+          },
+        });
+      },
+      onCancel() {},
+    });
+  }
+
+  render() {
+    const { list, data } = this.props;
+    const { modalVisible, modalType, initValues, defaultExpandAllRows } = this.state;
+    const parentMethods = {
+      handleAdd: this.handleAdd,
+      handleModalVisible: this.handleModalVisible,
+      modalType,
+      initValues,
+    };
+
+    const columns = [
+      {
+        title: 'id',
+        dataIndex: 'id',
+        render: text => <strong>{text}</strong>,
+      },
+      {
+        title: '名称',
+        dataIndex: 'name',
+      },
+      {
+        title: '创建时间',
+        dataIndex: 'createTime',
+        sorter: true,
+        render: val => <span>{moment(val).format('YYYY-MM-DD')}</span>,
+      },
+      {
+        title: '操作',
+        render: (text, record) => (
+          <Fragment>
+            <a onClick={() => this.handleModalVisible(true, 'update', record)}>更新</a>
+            <Divider type="vertical" />
+            <a className={styles.tableDelete} onClick={() => this.handleDelete(record)}>
+              删除
+            </a>
+          </Fragment>
+        ),
+      },
+    ];
+
+    const paginationProps = {
+      current: data.pageNo,
+      pageSize: data.pageSize,
+      total: data.count,
+    };
+    return (
+      <PageHeaderWrapper title="查询表格">
+        <Card bordered={false}>
+          <div className={styles.tableList}>
+            <div className={styles.tableListOperator}>
+              <Button
+                icon="plus"
+                type="primary"
+                onClick={() => this.handleModalVisible(true, 'add', {})}
+              >
+                新建
+              </Button>
+            </div>
+          </div>
+          <Table columns={columns} dataSource={list} rowKey="id" />
+        </Card>
+        <CreateForm {...parentMethods} modalVisible={modalVisible} />
+      </PageHeaderWrapper>
+    );
+  }
+}
+
+export default RoleList;

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

+@import '~antd/lib/style/themes/default.less';
+@import '~@/utils/utils.less';
+
+.tableList {
+  .tableListOperator {
+    margin-bottom: 16px;
+    button {
+      margin-right: 8px;
+    }
+  }
+}
+
+.tableDelete {
+  color: red;
+}