前端-数据字典的增删改查

2019-03-15 18:48:40 +08:00 · 2019-03-15 18:48:40 +08:00 · f47e564772
parent b1e10dc507
commit f47e564772
5 changed files with 113 additions and 64 deletions
--- a/admin-web/mock/admin.js
+++ b/admin-web/mock/admin.js
@ -6,6 +6,7 @@ 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';
+import dictionaryList from './geographic/dictionary-list.json';

 function getAdminMenu(req, res) {
  return res.json(adminMenu);
@ -43,6 +44,10 @@ function getDictionaryText(req, res) {
  return res.json(resultBody(values));
 }

+function getDictionaryList(req, res) {
+    return res.json(dictionaryList);
+}
+
 export default {
  'GET /admin-api/admins/admin/menu_resource_tree': getAdminMenuAll,
  'GET /admin-api/admins/admin/url_resource_list': getAdminUrls,
@ -51,4 +56,5 @@ export default {
  'GET /admin-api/admins/admin/page': getQueryRole,
  'GET /admin-api/admins/dictionary/getList': getDictionaryKeys,
  'GET /admin-api/admins/dictionary/queryText': getDictionaryText,
+  // 'GET /admin-api/admins/data_dict/list': getDictionaryList,
 };
--- a/admin-web/mock/geographic/dictionary-list.json
+++ b/admin-web/mock/geographic/dictionary-list.json
@ -8,7 +8,7 @@
      "value": "1",
      "displayName": "男",
      "sort": 1,
-      "memo": ""
+      "memo": "性别 - 男"
    },
    {
      "id": 2,
@ -16,7 +16,7 @@
      "value": "2",
      "displayName": "女",
      "sort": 2,
-      "memo": ""
+      "memo": "性别 - 女"
    }
  ]
 }
--- a/admin-web/src/models/admin/dictionaryList.js
+++ b/admin-web/src/models/admin/dictionaryList.js
@ -1,5 +1,5 @@
-import { message } from 'antd';
-import { addResource, updateResource, deleteResource, dictionaryList } from '../../services/admin';
+import {message} from 'antd';
+import {dictionaryAdd, dictionaryDelete, dictionaryList, dictionaryUpdate} from '../../services/admin';

 export default {
  namespace: 'dictionaryList',
@ -11,7 +11,7 @@ export default {
  effects: {
    *add({ payload }, { call, put }) {
      const { callback, body } = payload;
-      const response = yield call(addResource, body);
+      const response = yield call(dictionaryAdd, body);
      if (callback) {
        callback(response);
      }
@ -22,7 +22,7 @@ export default {
    },
    *update({ payload }, { call, put }) {
      const { callback, body } = payload;
-      const response = yield call(updateResource, body);
+      const response = yield call(dictionaryUpdate, body);
      if (callback) {
        callback(response);
      }
@ -32,23 +32,53 @@ export default {
      });
    },
    *delete({ payload }, { call, put }) {
-      const response = yield call(deleteResource, payload);
+      const response = yield call(dictionaryDelete, payload);
      message.info('删除成功!');
+      // yield put({
+      //   type: 'treeSuccess',
+      //   payload: {
+      //     list: response.data,
+      //   },
+      // });
      yield put({
-        type: 'treeSuccess',
-        payload: {
-          list: response.data,
-        },
+        type: 'tree',
+        payload: {},
      });
    },
    *tree({ payload }, { call, put }) {
      const { queryParams } = payload;
      const response = yield call(dictionaryList, queryParams);
      message.info('查询成功!');
+
+      // 将数据格式化成 tree 格式
+      // debugger;
+      let treeNodeMap = new Map(); // key: enumValue value: Node
+      for(let i = 0, len = response.data.length; i < len; i++){
+        let dataDict = response.data[i];
+        let treeNode = treeNodeMap.get(dataDict.enumValue);
+        if (!treeNode) {
+            treeNode = {
+                enumValue: dataDict.enumValue,
+                children: [dataDict]
+            };
+            treeNodeMap.set(dataDict.enumValue, treeNode);
+            treeNode.index = dataDict.enumValue; // 因为 Table 必须要有 rowKey ，所以这里需要处理下。主要是数据字典的结构特殊
+        } else {
+            treeNode.children.push(dataDict);
+        }
+        dataDict.index = dataDict.id; // 因为 Table 必须要有 rowKey ，所以这里需要处理下。主要是数据字典的结构特殊
+      }
+      // 因为不支持 Map.values() 返回的结果，所以这里进行转换。
+      let list = [];
+      treeNodeMap.forEach(function (value, key, map) {
+        list.push(value)
+      });
+      // console.log(list);
+
      yield put({
        type: 'treeSuccess',
        payload: {
-          list: response.data,
+          list: list,
        },
      });
    },
--- a/admin-web/src/pages/Admin/DictionaryList.js
+++ b/admin-web/src/pages/Admin/DictionaryList.js
@ -3,7 +3,7 @@
 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, InputNumber, Select, Button, Modal, message, Table, Divider } from 'antd';
 import PageHeaderWrapper from '@/components/PageHeaderWrapper';

 import styles from './DictionaryList.less';
@ -32,8 +32,8 @@ const CreateForm = Form.create()(props => {
    width: 200,
  };

-  const title = modalType === 'add' ? '添加一个数据字典' : '更新一个数据字典';
-  const okText = modalType === 'add' ? '添加' : '更新';
+  const title = modalType === 'add' ? '新建数据字典' : '编辑数据字典';
+  const okText = '保存';
  return (
    <Modal
      destroyOnClose
@ -43,46 +43,35 @@ const CreateForm = Form.create()(props => {
      okText={okText}
      onCancel={() => handleModalVisible()}
    >
-      <FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="菜单展示名">
+      <FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="大类枚举值">
+        {form.getFieldDecorator('enumValue', {
+          rules: [{ required: true, message: '请输入大类枚举值！', min: 2 }],
+          initialValue: initValues.enumValue,
+        })(<Input placeholder="请输入" />)}
+      </FormItem>
+      <FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="小类数值">
+        {form.getFieldDecorator('value', {
+          rules: [{ required: true, message: '请输入小类数值！' }],
+          initialValue: initValues.value,
+        })(<Input placeholder="请输入" />)}
+      </FormItem>
+      <FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="展示名">
        {form.getFieldDecorator('displayName', {
-          rules: [{ required: true, message: '请输入菜单展示名字！', min: 2 }],
+          rules: [{ required: true, message: '请输入展示名！' }],
          initialValue: initValues.displayName,
        })(<Input placeholder="请输入" />)}
      </FormItem>
-      <FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="操作">
-        {form.getFieldDecorator('handler', {
-          initialValue: initValues.handler,
-        })(<Input placeholder="请输入" />)}
-      </FormItem>
-      <FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="资源名字">
-        {form.getFieldDecorator('name', {
-          rules: [{ required: true, message: '请输入资源名字！' }],
-          initialValue: initValues.name,
-        })(<Input placeholder="请输入" />)}
-      </FormItem>
-      <FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="父级资源编号">
-        {form.getFieldDecorator('pid', {
-          rules: [{ required: true, message: '请输入父级编号！' }],
-          initialValue: initValues.pid,
-        })(<Input placeholder="请输入" />)}
-        <span>根节点为 0</span>
-      </FormItem>
-      <FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="排序">
+      <FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="排序值">
        {form.getFieldDecorator('sort', {
-          rules: [{ required: true, message: '请输入菜单排序！' }],
+          rules: [{ required: true, message: '请输入排序值！' }],
          initialValue: initValues.sort,
-        })(<Input placeholder="请输入" />)}
+        })(<InputNumber placeholder="请输入" />)}
      </FormItem>
-      <FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="资源类型">
-        {form.getFieldDecorator('type', {
-          rules: [{ required: true, message: '请选择资源类型！' }],
-          initialValue: 1,
-        })(
-          <Select showSearch style={selectStyle} placeholder="请选择">
-            <Option value={1}>菜单</Option>
-            <Option value={2}>Url</Option>
-          </Select>
-        )}
+      <FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="备注">
+        {form.getFieldDecorator('memo', {
+          rules: [{ required: true, message: '请输入备注！' }],
+          initialValue: initValues.memo,
+         })(<Input.TextArea placeholder="请输入" />)}
      </FormItem>
    </Modal>
  );
@ -176,16 +165,17 @@ class DictionaryList extends PureComponent {
      modalType,
      initValues,
    };
+    let that = this;

    const columns = [
      {
-        title: '枚举值',
+        title: '大类枚举值',
        dataIndex: 'enumValue'
      },
-      {
-        title: '编号',
-        dataIndex: 'id',
-      },
+      // {
+      //   title: '编号',
+      //   dataIndex: 'id',
+      // },
      {
        title: '小类数值',
        dataIndex: 'value'
@ -210,15 +200,18 @@ class DictionaryList extends PureComponent {
      },
      {
        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>
-        ),
+        render: function(text, record) {
+          if (!record.id) {
+              return '';
+          }
+          return <Fragment>
+                <a onClick={() => that.handleModalVisible(true, 'update', record)}>编辑</a>
+                <Divider type="vertical" />
+                <a className={styles.tableDelete} onClick={() => that.handleDelete(record)}>
+                    删除
+                </a>
+            </Fragment>
+        }
      },
    ];

@ -232,11 +225,11 @@ class DictionaryList extends PureComponent {
                type="primary"
                onClick={() => this.handleModalVisible(true, 'add', {})}
              >
-                新建
+                新建数据字典
              </Button>
            </div>
          </div>
-          <Table defaultExpandAllRows={true} columns={columns} dataSource={list} rowKey="enumValue" />
+          <Table defaultExpandAllRows={true} columns={columns} dataSource={list} rowKey="index" />
        </Card>
        <CreateForm {...parentMethods} modalVisible={modalVisible} />
      </PageHeaderWrapper>
--- a/admin-web/src/services/admin.js
+++ b/admin-web/src/services/admin.js
@ -129,4 +129,24 @@ export async function dictionaryList(params) {
    return request(`/admin-api/admins/data_dict/list?${stringify(params)}`, {
        method: 'GET',
    });
+}
+
+export async function dictionaryAdd(params) {
+    return request(`/admin-api/admins/data_dict/add?${stringify(params)}`, {
+        method: 'POST',
+        body: {},
+    });
+}
+
+export async function dictionaryUpdate(params) {
+    return request(`/admin-api/admins/data_dict/update?${stringify(params)}`, {
+        method: 'POST',
+        body: {},
+    });
+}
+
+export async function dictionaryDelete(params) {
+    return request(`/admin-api/admins/data_dict/delete?${stringify(params)}`, {
+        method: 'POST',
+    });
 }