yudao
/
spring-cloud
mirror of https://gitee.com/zhijiantianya/yudao-cloud.git
3
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

优化字典 select 和 text

pull/1/head
sin 2019-03-15 22:59:37 +08:00
parent 888151f523
commit 70b5ea48b3
19 changed files with 184 additions and 216 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
admin-web/mock/admin.js
View File

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

15
admin-web/mock/geographic/dictionary-list.json
View File

@ -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
View File

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

8
admin-web/src/components/Dictionary/DictionarySelect.d.ts vendored
View File

@ -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> {}

30
admin-web/src/components/Dictionary/DictionarySelect.js
View File

@ -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>
);
}
}

17
admin-web/src/components/Dictionary/DictionarySelect.md
View File

@ -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
View 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
View 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>
);
}
}

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

@ -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"/>
```

21
admin-web/src/layouts/BasicLayout.js
View File

@ -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)">

7
admin-web/src/layouts/UrlsContext.js
View File

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

40
admin-web/src/models/dictionary/dictionarySelect.js
View File

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

26
admin-web/src/pages/Dictionary/DictionaryValueSelect.js
View File

@ -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;

19
admin-web/src/pages/Dictionary/DictionaryValueSelect.md
View File

@ -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} />
```

26
admin-web/src/pages/Dictionary/DictionaryValueText.js
View File

@ -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;

24
admin-web/src/pages/Home/Home.js
View File

@ -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>
);
}
}

6
admin-web/src/services/admin.js
View File

@ -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',

14
admin-web/src/services/dictionary.js
View File

@ -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',
});
}