添加 dic 组件，select 和 value text

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

@@ -0,0 +1,13 @@
+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[];
+}
+
+export default class DictionarySelectD extends React.Component<IDictionarySelectProps, any> {}

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

@@ -0,0 +1,20 @@
+import React, { PureComponent } from 'react';
+import { Select } from 'antd';
+
+export default class DictionarySelect extends PureComponent {
+  renderOptions() {
+    const { list } = this.props;
+    return list.map(item => {
+      return (
+        <Select.Option key={item.value} value={item.value}>
+          {item.text}
+        </Select.Option>
+      );
+    });
+  }
+
+  render() {
+    const options = this.renderOptions();
+    return <Select {...this.props}>{options}</Select>;
+  }
+}

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

@@ -0,0 +1,24 @@
+---
+title: DictionarySelect
+subtitle: 描述列表
+---
+
+次组件跟使用 Antd extends Select，使用方法跟 Select 一样
+
+## API
+
+### DescriptionList
+
+| 参数      | 说明                                      | 类型         | 默认值 |
+|----------|------------------------------------------|-------------|-------|
+| list    | 数据列表                                 | DictionObject[]  | [] |
+
+### DictionObject
+
+| 参数      | 说明                                      | 类型         | 默认值 |
+|----------|------------------------------------------|-------------|-------|
+| text     | 显示的文字                                 | string  | - |
+| value     | 选择后的值                                 | string number boolean  | - |
+
+
+

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

@@ -0,0 +1,40 @@
+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/Admin/RoleList.js

@@ -87,6 +87,7 @@ class RoleList extends PureComponent {
   };
 
   handleAdd = ({ fields, modalType, initValues }) => {
+    console.log('add ->>>', fields);
     const { dispatch, data } = this.props;
     const queryParams = {
       pageNo: data.pageNo,

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

@@ -0,0 +1,26 @@
+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/DictionaryValueText.js

@@ -0,0 +1,26 @@
+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

@@ -2,6 +2,8 @@ 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';
 
 export default class Home extends Component {
   state = {};
@@ -22,6 +24,9 @@ export default class Home extends Component {
           <Button type="primary">按钮 控制</Button>
         </AuthorityControl>
         <h1>home...</h1>
+        <DictionaryValueSelect dataKey="gender" defaultValue={1} />
+
+        <DictionaryValueText dataKey="gender" value="1" />
       </UrlsContext.Provider>
     );
   }

admin-web/src/services/dictionary.js

@@ -0,0 +1,14 @@
+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',
+  });
+}