数据字典的前端学习~
This commit is contained in:
YunaiV
parent
e7d0e3d1f0
commit
b1e10dc507
|
|
@ -51,6 +51,11 @@ export default [
|
|||
name: 'role-list',
|
||||
component: './Admin/RoleList',
|
||||
},
|
||||
{
|
||||
path: '/admin/dictionary-list',
|
||||
name: 'dictionary-list',
|
||||
component: './Admin/DictionaryList',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
|
|
|
|||
|
|
@ -0,0 +1,22 @@
|
|||
{
|
||||
"code": 0,
|
||||
"message": "",
|
||||
"data": [
|
||||
{
|
||||
"id": 1,
|
||||
"enumValue": "gender",
|
||||
"value": "1",
|
||||
"displayName": "男",
|
||||
"sort": 1,
|
||||
"memo": ""
|
||||
},
|
||||
{
|
||||
"id": 2,
|
||||
"enumValue": "gender",
|
||||
"value": "2",
|
||||
"displayName": "女",
|
||||
"sort": 2,
|
||||
"memo": ""
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
@ -1,9 +1,10 @@
|
|||
export default {
|
||||
// admin
|
||||
'menu.admin': 'Admin管理',
|
||||
'menu.admin': '系统设置',
|
||||
'menu.admin.admin-list': '管理员列表',
|
||||
'menu.admin.resource-list': '资源列表',
|
||||
'menu.admin.role-list': '角色列表',
|
||||
'menu.admin.dictionary-list': '数据字典',
|
||||
'menu.home': '首页',
|
||||
'menu.login': '登录',
|
||||
'menu.register': '注册',
|
||||
|
|
|
|||
|
|
@ -0,0 +1,65 @@
|
|||
import { message } from 'antd';
|
||||
import { addResource, updateResource, deleteResource, dictionaryList } from '../../services/admin';
|
||||
|
||||
export default {
|
||||
namespace: 'dictionaryList',
|
||||
|
||||
state: {
|
||||
list: [],
|
||||
},
|
||||
|
||||
effects: {
|
||||
*add({ payload }, { call, put }) {
|
||||
const { callback, body } = payload;
|
||||
const response = yield call(addResource, body);
|
||||
if (callback) {
|
||||
callback(response);
|
||||
}
|
||||
yield put({
|
||||
type: 'tree',
|
||||
payload: {},
|
||||
});
|
||||
},
|
||||
*update({ payload }, { call, put }) {
|
||||
const { callback, body } = payload;
|
||||
const response = yield call(updateResource, body);
|
||||
if (callback) {
|
||||
callback(response);
|
||||
}
|
||||
yield put({
|
||||
type: 'tree',
|
||||
payload: {},
|
||||
});
|
||||
},
|
||||
*delete({ payload }, { call, put }) {
|
||||
const response = yield call(deleteResource, payload);
|
||||
message.info('删除成功!');
|
||||
yield put({
|
||||
type: 'treeSuccess',
|
||||
payload: {
|
||||
list: response.data,
|
||||
},
|
||||
});
|
||||
},
|
||||
*tree({ payload }, { call, put }) {
|
||||
const { queryParams } = payload;
|
||||
const response = yield call(dictionaryList, queryParams);
|
||||
message.info('查询成功!');
|
||||
yield put({
|
||||
type: 'treeSuccess',
|
||||
payload: {
|
||||
list: response.data,
|
||||
},
|
||||
});
|
||||
},
|
||||
},
|
||||
|
||||
reducers: {
|
||||
treeSuccess(state, { payload }) {
|
||||
return {
|
||||
...state,
|
||||
...payload,
|
||||
};
|
||||
},
|
||||
},
|
||||
};
|
||||
|
|
@ -0,0 +1,247 @@
|
|||
/* eslint-disable */
|
||||
|
||||
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 PageHeaderWrapper from '@/components/PageHeaderWrapper';
|
||||
|
||||
import styles from './DictionaryList.less';
|
||||
|
||||
const FormItem = Form.Item;
|
||||
const { Option } = Select;
|
||||
const types = ['未知', '菜单', '链接'];
|
||||
|
||||
// 添加 form 表单
|
||||
const CreateForm = Form.create()(props => {
|
||||
const { modalVisible, form, handleAdd, handleModalVisible, modalType, initValues } = props;
|
||||
|
||||
const okHandle = () => {
|
||||
form.validateFields((err, fieldsValue) => {
|
||||
if (err) return;
|
||||
form.resetFields();
|
||||
handleAdd({
|
||||
fields: fieldsValue,
|
||||
modalType,
|
||||
initValues,
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
const selectStyle = {
|
||||
width: 200,
|
||||
};
|
||||
|
||||
const title = modalType === 'add' ? '添加一个数据字典' : '更新一个数据字典';
|
||||
const okText = modalType === 'add' ? '添加' : '更新';
|
||||
return (
|
||||
<Modal
|
||||
destroyOnClose
|
||||
title={title}
|
||||
visible={modalVisible}
|
||||
onOk={okHandle}
|
||||
okText={okText}
|
||||
onCancel={() => handleModalVisible()}
|
||||
>
|
||||
<FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="菜单展示名">
|
||||
{form.getFieldDecorator('displayName', {
|
||||
rules: [{ required: true, message: '请输入菜单展示名字！', min: 2 }],
|
||||
initialValue: initValues.displayName,
|
||||
})(<Input placeholder="请输入" />)}
|
||||
</FormItem>
|
||||
<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: '请输入菜单排序！' }],
|
||||
initialValue: initValues.sort,
|
||||
})(<Input placeholder="请输入" />)}
|
||||
</FormItem>
|
||||
<FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="资源类型">
|
||||
{form.getFieldDecorator('type', {
|
||||
rules: [{ required: true, message: '请选择资源类型！' }],
|
||||
initialValue: 1,
|
||||
})(
|
||||
<Select showSearch style={selectStyle} placeholder="请选择">
|
||||
<Option value={1}>菜单</Option>
|
||||
<Option value={2}>Url</Option>
|
||||
</Select>
|
||||
)}
|
||||
</FormItem>
|
||||
</Modal>
|
||||
);
|
||||
});
|
||||
|
||||
@connect(({ dictionaryList, loading }) => ({
|
||||
dictionaryList,
|
||||
list: dictionaryList.list,
|
||||
loading: loading.models.dictionaryList,
|
||||
}))
|
||||
|
||||
@Form.create()
|
||||
class DictionaryList extends PureComponent {
|
||||
state = {
|
||||
modalVisible: false,
|
||||
modalType: 'add', //add update
|
||||
initValues: {},
|
||||
};
|
||||
|
||||
componentDidMount() {
|
||||
const { dispatch } = this.props;
|
||||
dispatch({
|
||||
type: 'dictionaryList/tree',
|
||||
payload: {},
|
||||
});
|
||||
}
|
||||
|
||||
handleModalVisible = (flag, modalType, initValues) => {
|
||||
this.setState({
|
||||
modalVisible: !!flag,
|
||||
initValues: initValues || {},
|
||||
modalType: modalType || 'add',
|
||||
});
|
||||
};
|
||||
|
||||
handleAdd = ({ fields, modalType, initValues }) => {
|
||||
const { dispatch } = this.props;
|
||||
if (modalType === 'add') {
|
||||
dispatch({
|
||||
type: 'dictionaryList/add',
|
||||
payload: {
|
||||
body: {
|
||||
...fields,
|
||||
},
|
||||
callback: () => {
|
||||
message.success('添加成功');
|
||||
this.handleModalVisible();
|
||||
},
|
||||
},
|
||||
});
|
||||
} else {
|
||||
dispatch({
|
||||
type: 'dictionaryList/update',
|
||||
payload: {
|
||||
body: {
|
||||
...initValues,
|
||||
...fields,
|
||||
},
|
||||
callback: () => {
|
||||
message.success('更新成功');
|
||||
this.handleModalVisible();
|
||||
},
|
||||
},
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
handleDelete(row) {
|
||||
const { dispatch } = this.props;
|
||||
Modal.confirm({
|
||||
title: `确认删除?`,
|
||||
content: `${row.displayName}`,
|
||||
onOk() {
|
||||
dispatch({
|
||||
type: 'dictionaryList/delete',
|
||||
payload: {
|
||||
id: row.id,
|
||||
},
|
||||
});
|
||||
},
|
||||
onCancel() {},
|
||||
});
|
||||
}
|
||||
|
||||
render() {
|
||||
const { list } = this.props;
|
||||
const { modalVisible, modalType, initValues } = this.state;
|
||||
const parentMethods = {
|
||||
handleAdd: this.handleAdd,
|
||||
handleModalVisible: this.handleModalVisible,
|
||||
modalType,
|
||||
initValues,
|
||||
};
|
||||
|
||||
const columns = [
|
||||
{
|
||||
title: '枚举值',
|
||||
dataIndex: 'enumValue'
|
||||
},
|
||||
{
|
||||
title: '编号',
|
||||
dataIndex: 'id',
|
||||
},
|
||||
{
|
||||
title: '小类数值',
|
||||
dataIndex: 'value'
|
||||
},
|
||||
{
|
||||
title: '展示名',
|
||||
dataIndex: 'displayName'
|
||||
},
|
||||
{
|
||||
title: '排序值',
|
||||
dataIndex: 'sort'
|
||||
},
|
||||
{
|
||||
title: '备注',
|
||||
dataIndex: 'memo'
|
||||
},
|
||||
{
|
||||
title: '创建时间',
|
||||
dataIndex: 'createTime',
|
||||
sorter: true,
|
||||
render: val => <span>{moment(val).format('YYYY-MM-DD')}</span>,
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
render: (text, record) => (
|
||||
<Fragment>
|
||||
<a onClick={() => this.handleModalVisible(true, 'update', record)}>更新</a>
|
||||
<Divider type="vertical" />
|
||||
<a className={styles.tableDelete} onClick={() => this.handleDelete(record)}>
|
||||
删除
|
||||
</a>
|
||||
</Fragment>
|
||||
),
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<PageHeaderWrapper>
|
||||
<Card bordered={false}>
|
||||
<div className={styles.tableList}>
|
||||
<div className={styles.tableListOperator}>
|
||||
<Button
|
||||
icon="plus"
|
||||
type="primary"
|
||||
onClick={() => this.handleModalVisible(true, 'add', {})}
|
||||
>
|
||||
新建
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
<Table defaultExpandAllRows={true} columns={columns} dataSource={list} rowKey="enumValue" />
|
||||
</Card>
|
||||
<CreateForm {...parentMethods} modalVisible={modalVisible} />
|
||||
</PageHeaderWrapper>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default DictionaryList;
|
||||
|
|
@ -0,0 +1,15 @@
|
|||
@import '~antd/lib/style/themes/default.less';
|
||||
@import '~@/utils/utils.less';
|
||||
|
||||
.tableList {
|
||||
.tableListOperator {
|
||||
margin-bottom: 16px;
|
||||
button {
|
||||
margin-right: 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tableDelete {
|
||||
color: red;
|
||||
}
|
||||
|
|
@ -122,3 +122,11 @@ export async function roleAssignResource(params) {
|
|||
},
|
||||
});
|
||||
}
|
||||
|
||||
// dictionary
|
||||
|
||||
export async function dictionaryList(params) {
|
||||
return request(`/admin-api/admins/data_dict/list?${stringify(params)}`, {
|
||||
method: 'GET',
|
||||
});
|
||||
}
|
||||
Loading…
Reference in New Issue