优化字典 select 和 text
This commit is contained in:
parent
888151f523
commit
70b5ea48b3
@ -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,
|
||||
};
|
||||
|
@ -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
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
6
admin-web/src/components/Dictionary/DictionaryContext.js
Normal file
6
admin-web/src/components/Dictionary/DictionaryContext.js
Normal file
@ -0,0 +1,6 @@
|
||||
import React from 'react';
|
||||
|
||||
// 字典全局的 Context,会提前初始化工作。
|
||||
const DictionaryContext = React.createContext({});
|
||||
|
||||
export default DictionaryContext;
|
@ -1,13 +1,9 @@
|
||||
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> {}
|
||||
|
@ -1,20 +1,32 @@
|
||||
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 (
|
||||
<Select.Option key={item.value} value={item.value}>
|
||||
{item.text}
|
||||
<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={value} value={value}>
|
||||
{text}
|
||||
</Select.Option>
|
||||
);
|
||||
});
|
||||
}
|
||||
|
||||
render() {
|
||||
const options = this.renderOptions();
|
||||
return <Select {...this.props}>{options}</Select>;
|
||||
return this.renderSelect(nodes);
|
||||
}}
|
||||
</DictionaryContext.Consumer>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
@ -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" />
|
||||
```
|
||||
|
||||
|
9
admin-web/src/components/Dictionary/DictionaryText.d.ts
vendored
Normal file
9
admin-web/src/components/Dictionary/DictionaryText.d.ts
vendored
Normal file
@ -0,0 +1,9 @@
|
||||
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> {}
|
21
admin-web/src/components/Dictionary/DictionaryText.js
Normal file
21
admin-web/src/components/Dictionary/DictionaryText.js
Normal file
@ -0,0 +1,21 @@
|
||||
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>
|
||||
);
|
||||
}
|
||||
}
|
@ -1,5 +1,5 @@
|
||||
---
|
||||
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"/>
|
||||
```
|
@ -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)">
|
||||
|
@ -1,6 +1,3 @@
|
||||
import React from 'react';
|
||||
import { createContext } from 'react';
|
||||
|
||||
// 创建全局的权限控制 context,方便在所有页面使用
|
||||
const UrlsContext = React.createContext({});
|
||||
|
||||
export default UrlsContext;
|
||||
export default createContext();
|
||||
|
47
admin-web/src/models/admin/dictionaryContext.js
Normal file
47
admin-web/src/models/admin/dictionaryContext.js
Normal file
@ -0,0 +1,47 @@
|
||||
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,
|
||||
};
|
||||
},
|
||||
},
|
||||
};
|
@ -1,40 +0,0 @@
|
||||
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,
|
||||
};
|
||||
},
|
||||
},
|
||||
};
|
@ -1,26 +0,0 @@
|
||||
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;
|
@ -1,19 +0,0 @@
|
||||
---
|
||||
title: DictionaryValueSelect
|
||||
subtitle: 字典 value 选择
|
||||
---
|
||||
|
||||
次组件跟使用 Antd extends Select,使用方法跟 Select 一样
|
||||
|
||||
## API
|
||||
|
||||
### DescriptionList
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
|----------|------------------------------------------|-------------|-------|
|
||||
| dataKey | 字典的key | string | [] |
|
||||
|
||||
### Demo
|
||||
```jsx harmony
|
||||
<DictionaryValueSelect dataKey="gender" defaultValue={1} />
|
||||
```
|
@ -1,26 +0,0 @@
|
||||
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;
|
@ -1,33 +1,23 @@
|
||||
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>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
@ -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',
|
||||
|
@ -1,14 +0,0 @@
|
||||
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',
|
||||
});
|
||||
}
|
Loading…
Reference in New Issue
Block a user