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

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,
 };

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": "性别 - 女"
     }
   ]
 }

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

@@ -1,5 +1,5 @@
-import { message } from 'antd';
+import {message} from 'antd';
-import { addResource, updateResource, deleteResource, dictionaryList } from '../../services/admin';
+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',
+        type: 'tree',
-        payload: {
+        payload: {},
-          list: response.data,
-        },
       });
     },
     *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,
         },
       });
     },

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 title = modalType === 'add' ? '新建数据字典' : '编辑数据字典';
-  const okText = 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="操作">
+      <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="排序">
         {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="资源类型">
+      <FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="备注">
-        {form.getFieldDecorator('type', {
+        {form.getFieldDecorator('memo', {
-          rules: [{ required: true, message: '请选择资源类型！' }],
+          rules: [{ required: true, message: '请输入备注！' }],
-          initialValue: 1,
+          initialValue: initValues.memo,
-        })(
+         })(<Input.TextArea placeholder="请输入" />)}
-          <Select showSearch style={selectStyle} placeholder="请选择">
-            <Option value={1}>菜单</Option>
-            <Option value={2}>Url</Option>
-          </Select>
-        )}
       </FormItem>
     </Modal>
   );
@@ -176,16 +165,17 @@ class DictionaryList extends PureComponent {
       modalType,
       initValues,
     };
+    let that = this;
 
     const columns = [
       {
-        title: '枚举值',
+        title: '大类枚举值',
         dataIndex: 'enumValue'
       },
-      {
+      // {
-        title: '编号',
+      //   title: '编号',
-        dataIndex: 'id',
+      //   dataIndex: 'id',
-      },
+      // },
       {
         title: '小类数值',
         dataIndex: 'value'
@@ -210,15 +200,18 @@ class DictionaryList extends PureComponent {
       },
       {
         title: '操作',
-        render: (text, record) => (
+        render: function(text, record) {
-          <Fragment>
+          if (!record.id) {
-            <a onClick={() => this.handleModalVisible(true, 'update', record)}>更新</a>
+              return '';
-            <Divider type="vertical" />
+          }
-            <a className={styles.tableDelete} onClick={() => this.handleDelete(record)}>
+          return <Fragment>
-              删除
+                <a onClick={() => that.handleModalVisible(true, 'update', record)}>编辑</a>
-            </a>
+                <Divider type="vertical" />
-          </Fragment>
+                <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>

admin-web/src/services/admin.js

@@ -130,3 +130,23 @@ export async function dictionaryList(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',
+    });
+}