优化字典 select 和 text

admin-web/mock/admin.js

@@ -44,7 +44,7 @@ function getDictionaryText(req, res) {
   return res.json(resultBody(values));
 }
 
-function getDictionaryList(req, res) {
+function getDictionaryTree(req, res) {
   return res.json(dictionaryList);
 }
 
@@ -54,7 +54,5 @@ export default {
   'GET /admin-api/admins/resource/tree': getResourceTree,
   'GET /admin-api/admins/role/page': getQueryRole,
   '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,
+  'GET /admin-api/admins/data_dict/tree': getDictionaryTree,
 };

admin-web/mock/geographic/dictionary-list.json

@@ -3,20 +3,17 @@
   "message": "",
   "data": [
     {
-      "id": 1,
       "enumValue": "gender",
-      "value": "1",
+      "values": [
+        {
           "displayName": "男",
-      "sort": 1,
-      "memo": "性别 - 男"
+          "value": 1
         },
         {
-      "id": 2,
-      "enumValue": "gender",
-      "value": "2",
           "displayName": "女",
-      "sort": 2,
-      "memo": "性别 - 女"
+          "value": 2
+        }
+      ]
     }
   ]
 }

admin-web/src/components/Dictionary/DictionaryContext.js

+import React from 'react';
+
+// 字典全局的 Context，会提前初始化工作。
+const DictionaryContext = React.createContext({});
+
+export default DictionaryContext;

admin-web/src/components/Dictionary/DictionarySelect.d.ts

 import * as React from 'react';
 import { Select } from 'antd';
 
-export interface DictionaryObject {
-  text?: string;
-  value?: string | number | boolean;
-}
-
 export interface IDictionarySelectProps extends Select {
-  list?: DictionaryObject[];
+  dicKey?: string;
+  defaultValue?: string | number | boolean;
 }
 
 export default class DictionarySelectD extends React.Component<IDictionarySelectProps, any> {}

admin-web/src/components/Dictionary/DictionarySelect.js

 import React, { PureComponent } from 'react';
 import { Select } from 'antd';
+import DictionaryContext from './DictionaryContext';
 
 export default class DictionarySelect extends PureComponent {
-  renderOptions() {
-    const { list } = this.props;
-    return list.map(item => {
+  renderSelect(children) {
+    return <Select {...this.props}>{children}</Select>;
+  }
+
+  render() {
+    const { dicKey } = this.props;
+    return (
+      <DictionaryContext.Consumer>
+        {context => {
+          const dicValues = context[dicKey];
+          let nodes = [];
+          if (dicValues) {
+            nodes = Object.keys(dicValues).map(value => {
+              const text = dicValues[value];
               return (
-        <Select.Option key={item.value} value={item.value}>
-          {item.text}
+                <Select.Option key={value} value={value}>
+                  {text}
                 </Select.Option>
               );
             });
           }
-
-  render() {
-    const options = this.renderOptions();
-    return <Select {...this.props}>{options}</Select>;
+          return this.renderSelect(nodes);
+        }}
+      </DictionaryContext.Consumer>
+    );
   }
 }

admin-web/src/components/Dictionary/DictionarySelect.md

@@ -7,18 +7,15 @@ subtitle: 描述列表
 
 ## API
 
-### DescriptionList
+### DictionarySelect
 
 | 参数      | 说明                                      | 类型         | 默认值 |
 |----------|------------------------------------------|-------------|-------|
-| list    | 数据列表                                 | DictionObject[]  | [] |
-
-### DictionObject
-
-| 参数      | 说明                                      | 类型         | 默认值 |
-|----------|------------------------------------------|-------------|-------|
-| text     | 显示的文字                                 | string  | - |
-| value     | 选择后的值                                 | string number boolean  | - |
-
+| dicKey    | 字典key值                                 | string[]  | [] |
+| defaultValue    | 来自 antd Select组件             | string、number、boolean  | [] |
 
+### Demo
+```jsx harmony
+  <DictionarySelect dicKey="gender" defaultValue="1" />
+```
 

admin-web/src/components/Dictionary/DictionaryText.d.ts

+import * as React from 'react';
+import { Select } from 'antd';
+
+export interface IDictionaryTextProps extends Select {
+  dicKey?: string;
+  dicValue?: string | number | boolean | Array<string | number | boolean>;
+}
+
+export default class DictionaryText extends React.Component<IDictionaryTextProps, any> {}

admin-web/src/components/Dictionary/DictionaryText.js

+import React, { PureComponent } from 'react';
+import DictionaryContext from './DictionaryContext';
+
+export default class DictionaryText extends PureComponent {
+  componentDidMount() {}
+
+  render() {
+    const { dicKey, dicValue } = this.props;
+    return (
+      <DictionaryContext.Consumer>
+        {context => {
+          const dicValues = context[dicKey];
+          if (dicValues) {
+            return dicValues[dicValue];
+          }
+          return null;
+        }}
+      </DictionaryContext.Consumer>
+    );
+  }
+}

admin-web/src/pages/Dictionary/DictionaryValueText.md → admin-web/src/components/Dictionary/DictionaryText.md

 ---
-title: DictionaryValueText
+title: DictionaryText
 subtitle: 获取字典 value 显示值
 ---
 
@@ -9,11 +9,11 @@ subtitle: 获取字典 value 显示值
 
 | 参数      | 说明                                      | 类型         | 默认值 |
 |----------|------------------------------------------|-------------|-------|
-| dataKey    | 字典的key                                 | string  | [] |
-| value    | 显示的值                                 | string number  | [] |
+| dicKey    | 字典的key                                 | string  | [] |
+| dicValue    | value值                                 | string、number、boolean  | [] |
 
 
 ### Demo
 ```jsx harmony
- <DictionaryValueText dataKey="gender" value="1" />
+  <DictionaryValueText dicKey="gender" dicValue="2"/>
 ```

admin-web/src/layouts/BasicLayout.js

@@ -16,6 +16,7 @@ import Exception403 from '../pages/Exception/403';
 import PageLoading from '@/components/PageLoading';
 import SiderMenu from '@/components/SiderMenu';
 import getPageTitle from '@/utils/getPageTitle';
+import DictionaryContext from '@/components/Dictionary/DictionaryContext';
 import styles from './BasicLayout.less';
 
 // lazy load SettingDrawer
@@ -68,6 +69,10 @@ class BasicLayout extends React.Component {
       type: 'menu/getMenuData',
       payload: { routes, authority },
     });
+    dispatch({
+      type: 'dictionaryContext/tree',
+      payload: {},
+    });
   }
 
   getContext() {
@@ -81,10 +86,17 @@ class BasicLayout extends React.Component {
   getUrlsContext() {
     const { urlsData } = this.props;
     return {
+      urls: {
         ...urlsData,
+      },
     };
   }
 
+  getDictionaryContext() {
+    const { dicTreeMap } = this.props;
+    return dicTreeMap;
+  }
+
   getRouteAuthority = (pathname, routeData) => {
     const routes = routeData.slice(); // clone
 
@@ -178,7 +190,7 @@ class BasicLayout extends React.Component {
           />
           <Content className={styles.content} style={contentStyle}>
             <Authorized authority={routerConfig} noMatch={<Exception403 />}>
-              <UrlsContext.Provider values={this.getUrlsContext()}>{children}</UrlsContext.Provider>
+              {children}
             </Authorized>
           </Content>
           <Footer />
@@ -191,7 +203,11 @@ class BasicLayout extends React.Component {
           <ContainerQuery query={query}>
             {params => (
               <Context.Provider value={this.getContext()}>
+                <UrlsContext.Provider value={this.getUrlsContext()}>
+                  <DictionaryContext.Provider value={this.getDictionaryContext()}>
                     <div className={classNames(params)}>{layout}</div>
+                  </DictionaryContext.Provider>
+                </UrlsContext.Provider>
               </Context.Provider>
             )}
           </ContainerQuery>
@@ -202,12 +218,13 @@ class BasicLayout extends React.Component {
   }
 }
 
-export default connect(({ global, setting, menu: menuModel }) => ({
+export default connect(({ global, setting, dictionaryContext, menu: menuModel }) => ({
   collapsed: global.collapsed,
   layout: setting.layout,
   menuData: menuModel.menuData,
   urlsData: menuModel.urlsData,
   breadcrumbNameMap: menuModel.breadcrumbNameMap,
+  dicTreeMap: dictionaryContext.dicTreeMap,
   ...setting,
 }))(props => (
   <Media query="(max-width: 599px)">

admin-web/src/layouts/UrlsContext.js

-import React from 'react';
+import { createContext } from 'react';
 
-// 创建全局的权限控制 context，方便在所有页面使用
-const UrlsContext = React.createContext({});
-
-export default UrlsContext;
+export default createContext();

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

+import { dictionaryTree } from '../../services/admin';
+
+export default {
+  namespace: 'dictionaryContext',
+
+  state: {
+    dicTree: [],
+    dicTreeMap: {},
+  },
+
+  effects: {
+    *tree({ payload }, { call, put }) {
+      const response = yield call(dictionaryTree, payload);
+      const dicList = response.data;
+
+      const dicTreeMap = {};
+      dicList.map(item => {
+        const dicKey = item.enumValue;
+        const dicTreeItem = {};
+        item.values.map(item2 => {
+          dicTreeItem.text = item2.displayName;
+          dicTreeItem.value = item2.value;
+          return true;
+        });
+        dicTreeMap[dicKey] = dicTreeItem;
+        return true;
+      });
+
+      yield put({
+        type: 'treeSuccess',
+        payload: {
+          dicTree: dicList,
+          dicTreeMap,
+        },
+      });
+    },
+  },
+
+  reducers: {
+    treeSuccess(state, { payload }) {
+      return {
+        ...state,
+        ...payload,
+      };
+    },
+  },
+};

admin-web/src/models/dictionary/dictionarySelect.js

-import { queryKey, queryText } from '../../services/dictionary';
-
-export default {
-  namespace: 'dictionarySelect',
-
-  state: {
-    list: [],
-    text: '',
-  },
-
-  effects: {
-    *query({ payload }, { call, put }) {
-      const response = yield call(queryKey, payload);
-      yield put({
-        type: 'querySuccess',
-        payload: {
-          list: response.list,
-        },
-      });
-    },
-    *queryText({ payload }, { call, put }) {
-      const response = yield call(queryText, payload);
-      yield put({
-        type: 'querySuccess',
-        payload: {
-          text: response.text,
-        },
-      });
-    },
-  },
-
-  reducers: {
-    querySuccess(state, { payload }) {
-      return {
-        ...state,
-        ...payload,
-      };
-    },
-  },
-};

admin-web/src/pages/Dictionary/DictionaryValueSelect.js

-import React, { PureComponent } from 'react';
-import { connect } from 'dva';
-import DictionarySelect from '../../components/Dictionary/DictionarySelect';
-
-@connect(({ dictionarySelect, loading }) => ({
-  data: dictionarySelect,
-  loading: loading.models.dictionarySelect,
-}))
-class DictionaryValueSelect extends PureComponent {
-  componentDidMount() {
-    const { dataKey, dispatch } = this.props;
-    dispatch({
-      type: 'dictionarySelect/query',
-      payload: {
-        dataKey,
-      },
-    });
-  }
-
-  render() {
-    const { data } = this.props;
-    return <DictionarySelect {...this.props} list={data.list} />;
-  }
-}
-
-export default DictionaryValueSelect;

admin-web/src/pages/Dictionary/DictionaryValueSelect.md

----
-title: DictionaryValueSelect
-subtitle: 字典 value 选择
----
-
-次组件跟使用 Antd extends Select，使用方法跟 Select 一样
-
-## API
-
-### DescriptionList
-
-| 参数      | 说明                                      | 类型         | 默认值 |
-|----------|------------------------------------------|-------------|-------|
-| dataKey    | 字典的key                                 | string  | [] |
-
-### Demo
-```jsx harmony
- <DictionaryValueSelect dataKey="gender" defaultValue={1} />
-```

admin-web/src/pages/Dictionary/DictionaryValueText.js

-import React, { PureComponent } from 'react';
-import { connect } from 'dva';
-
-@connect(({ dictionarySelect, loading }) => ({
-  data: dictionarySelect,
-  loading: loading.models.dictionarySelect,
-}))
-class DictionaryValueText extends PureComponent {
-  componentDidMount() {
-    const { dataKey, dispatch } = this.props;
-    dispatch({
-      type: 'dictionarySelect/queryText',
-      payload: {
-        dataKey,
-        value: 1,
-      },
-    });
-  }
-
-  render() {
-    const { data } = this.props;
-    return <span>{data.text}</span>;
-  }
-}
-
-export default DictionaryValueText;

admin-web/src/pages/Home/Home.js

 import React, { Component } from 'react';
 import { Button } from 'antd';
-import AuthorityControl from '../../components/AuthorityControl';
-import UrlsContext from '../../layouts/UrlsContext';
-import DictionaryValueSelect from '../Dictionary/DictionaryValueSelect';
-import DictionaryValueText from '../Dictionary/DictionaryValueText';
+import DictionarySelect from '@/components/Dictionary/DictionarySelect';
+import DictionaryText from '@/components/Dictionary/DictionaryText';
+import AuthorityControl from '@/components/AuthorityControl';
 
 export default class Home extends Component {
   state = {};
 
   render() {
-    // 定义认证的属性 TODO
-    const GlobalAuthorityProps = {
-      user: 'admin',
-      login: 'success',
-      authList: {
-        'auth.button': true,
-      },
-    };
-
     return (
-      <UrlsContext.Provider value={GlobalAuthorityProps}>
+      <div>
         <AuthorityControl authKey="home.button">
           <Button type="primary">按钮 控制</Button>
         </AuthorityControl>
         <h1>home...</h1>
-        <DictionaryValueSelect dataKey="gender" defaultValue={1} />
 
-        <DictionaryValueText dataKey="gender" value="1" />
-      </UrlsContext.Provider>
+        <DictionarySelect dicKey="gender" defaultValue="1" />
+        <DictionaryText dicKey="gender" dicValue="2" />
+      </div>
     );
   }
 }

admin-web/src/services/admin.js

@@ -125,6 +125,12 @@ export async function roleAssignResource(params) {
 
 // dictionary
 
+export async function dictionaryTree(params) {
+  return request(`/admin-api/admins/data_dict/tree?${stringify(params)}`, {
+    method: 'GET',
+  });
+}
+
 export async function dictionaryList(params) {
   return request(`/admin-api/admins/data_dict/list?${stringify(params)}`, {
     method: 'GET',

admin-web/src/services/dictionary.js

-import { stringify } from '@/utils/request.qs';
-import request from '@/utils/request';
-
-export async function queryKey(params) {
-  return request(`/admin-api/admins/dictionary/getList?${stringify(params)}`, {
-    method: 'GET',
-  });
-}
-
-export async function queryText(params) {
-  return request(`/admin-api/admins/dictionary/queryText?${stringify(params)}`, {
-    method: 'GET',
-  });
-}