添加角色管理
This commit is contained in:
parent
3b3dec6ab2
commit
d7be2bfb33
@ -46,6 +46,11 @@ export default [
|
|||||||
name: 'resource-list',
|
name: 'resource-list',
|
||||||
component: './Admin/ResourceList',
|
component: './Admin/ResourceList',
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
path: '/admin/role-list',
|
||||||
|
name: 'role-list',
|
||||||
|
component: './Admin/RoleList',
|
||||||
|
},
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
|
@ -2,6 +2,7 @@ import adminMenu from './geographic/admin-menu.json';
|
|||||||
import adminMenuAll from './geographic/admin-menu-all.json';
|
import adminMenuAll from './geographic/admin-menu-all.json';
|
||||||
import adminUrls from './geographic/admin-urls';
|
import adminUrls from './geographic/admin-urls';
|
||||||
import resourceTree from './geographic/resource-tree.json';
|
import resourceTree from './geographic/resource-tree.json';
|
||||||
|
import roleQuery from './geographic/role-query.json';
|
||||||
|
|
||||||
/* eslint-disable */
|
/* eslint-disable */
|
||||||
function getAdminMenu(req, res) {
|
function getAdminMenu(req, res) {
|
||||||
@ -20,8 +21,13 @@ function getResourceTree(req, res) {
|
|||||||
return res.json(resourceTree);
|
return res.json(resourceTree);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function getQueryRole(req, res) {
|
||||||
|
return res.json(roleQuery);
|
||||||
|
}
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
'GET /admin-api/admin/resource/admin_menu_tree': getAdminMenuAll,
|
'GET /admin-api/admin/resource/admin_menu_tree': getAdminMenuAll,
|
||||||
'GET /admin-api/admin/resource/admin_url_list': getAdminUrls,
|
'GET /admin-api/admin/resource/admin_url_list': getAdminUrls,
|
||||||
'GET /admin-api/admin/resource/tree': getResourceTree,
|
'GET /admin-api/admin/resource/tree': getResourceTree,
|
||||||
|
'GET /admin-api/admin/role/page': getQueryRole,
|
||||||
};
|
};
|
||||||
|
19
admin-web/mock/geographic/role-query.json
Normal file
19
admin-web/mock/geographic/role-query.json
Normal file
@ -0,0 +1,19 @@
|
|||||||
|
{
|
||||||
|
"code": 0,
|
||||||
|
"data": {
|
||||||
|
"count": 2,
|
||||||
|
"roles": [
|
||||||
|
{
|
||||||
|
"id": 1,
|
||||||
|
"name": "系统管理员",
|
||||||
|
"createTime": 1551332076000
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": 2,
|
||||||
|
"name": "系统管理员",
|
||||||
|
"createTime": 1551332076000
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
"message": "string"
|
||||||
|
}
|
@ -3,6 +3,7 @@ export default {
|
|||||||
'menu.admin': 'Admin管理',
|
'menu.admin': 'Admin管理',
|
||||||
'menu.admin.admin-list': '管理员列表',
|
'menu.admin.admin-list': '管理员列表',
|
||||||
'menu.admin.resource-list': '资源列表',
|
'menu.admin.resource-list': '资源列表',
|
||||||
|
'menu.admin.role-list': '角色列表',
|
||||||
'menu.home': '首页',
|
'menu.home': '首页',
|
||||||
'menu.login': '登录',
|
'menu.login': '登录',
|
||||||
'menu.register': '注册',
|
'menu.register': '注册',
|
||||||
|
@ -1,5 +1,5 @@
|
|||||||
import { message } from 'antd';
|
import { message } from 'antd';
|
||||||
import { addResource, updateResource, deleteResource, resourceTree } from '@/services/resource';
|
import { addResource, updateResource, deleteResource, resourceTree } from '../../services/admin';
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
namespace: 'resourceList',
|
namespace: 'resourceList',
|
74
admin-web/src/models/admin/roleList.js
Normal file
74
admin-web/src/models/admin/roleList.js
Normal file
@ -0,0 +1,74 @@
|
|||||||
|
import { message } from 'antd';
|
||||||
|
import { addRole, updateRole, deleteRole, queryRole } from '../../services/admin';
|
||||||
|
|
||||||
|
export default {
|
||||||
|
namespace: 'roleList',
|
||||||
|
|
||||||
|
state: {
|
||||||
|
list: [],
|
||||||
|
count: 0,
|
||||||
|
pageNo: 0,
|
||||||
|
pageSize: 10,
|
||||||
|
},
|
||||||
|
|
||||||
|
effects: {
|
||||||
|
*add({ payload }, { call, put }) {
|
||||||
|
const { callback, body, queryParams } = payload;
|
||||||
|
const response = yield call(addRole, body);
|
||||||
|
if (callback) {
|
||||||
|
callback(response);
|
||||||
|
}
|
||||||
|
yield put({
|
||||||
|
type: 'query',
|
||||||
|
payload: {
|
||||||
|
...queryParams,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
},
|
||||||
|
*update({ payload }, { call, put }) {
|
||||||
|
const { callback, body, queryParams } = payload;
|
||||||
|
const response = yield call(updateRole, body);
|
||||||
|
if (callback) {
|
||||||
|
callback(response);
|
||||||
|
}
|
||||||
|
yield put({
|
||||||
|
type: 'query',
|
||||||
|
payload: {
|
||||||
|
...queryParams,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
},
|
||||||
|
*delete({ payload }, { call, put }) {
|
||||||
|
const { queryParams, body } = payload;
|
||||||
|
yield call(deleteRole, body);
|
||||||
|
message.info('删除成功!');
|
||||||
|
yield put({
|
||||||
|
type: 'query',
|
||||||
|
payload: {
|
||||||
|
...queryParams,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
},
|
||||||
|
*query({ payload }, { call, put }) {
|
||||||
|
const response = yield call(queryRole, payload);
|
||||||
|
message.info('查询成功!');
|
||||||
|
const { count, roles } = response.data;
|
||||||
|
yield put({
|
||||||
|
type: 'querySuccess',
|
||||||
|
payload: {
|
||||||
|
list: roles,
|
||||||
|
count,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
},
|
||||||
|
},
|
||||||
|
|
||||||
|
reducers: {
|
||||||
|
querySuccess(state, { payload }) {
|
||||||
|
return {
|
||||||
|
...state,
|
||||||
|
...payload,
|
||||||
|
};
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
@ -89,6 +89,7 @@ const CreateForm = Form.create()(props => {
|
|||||||
|
|
||||||
@connect(({ resourceList, loading }) => ({
|
@connect(({ resourceList, loading }) => ({
|
||||||
resourceList,
|
resourceList,
|
||||||
|
list: resourceList.list,
|
||||||
loading: loading.models.resourceList,
|
loading: loading.models.resourceList,
|
||||||
}))
|
}))
|
||||||
@Form.create()
|
@Form.create()
|
||||||
@ -103,7 +104,7 @@ class ResourceList extends PureComponent {
|
|||||||
componentDidMount() {
|
componentDidMount() {
|
||||||
const { dispatch } = this.props;
|
const { dispatch } = this.props;
|
||||||
dispatch({
|
dispatch({
|
||||||
type: 'resourceList/tree',
|
type: 'roleList/tree',
|
||||||
payload: {},
|
payload: {},
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
@ -172,9 +173,7 @@ class ResourceList extends PureComponent {
|
|||||||
}
|
}
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
const {
|
const { list } = this.props;
|
||||||
resourceList: { list },
|
|
||||||
} = this.props;
|
|
||||||
const { modalVisible, modalType, initValues, defaultExpandAllRows } = this.state;
|
const { modalVisible, modalType, initValues, defaultExpandAllRows } = this.state;
|
||||||
const parentMethods = {
|
const parentMethods = {
|
||||||
handleAdd: this.handleAdd,
|
handleAdd: this.handleAdd,
|
||||||
@ -253,6 +252,7 @@ class ResourceList extends PureComponent {
|
|||||||
<Button type="normal" onClick={() => this.changeExpandAll()}>
|
<Button type="normal" onClick={() => this.changeExpandAll()}>
|
||||||
展开所有行
|
展开所有行
|
||||||
</Button>
|
</Button>
|
||||||
|
TODO 展开没效果,需要研究下
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<Table
|
<Table
|
||||||
|
218
admin-web/src/pages/Admin/RoleList.js
Normal file
218
admin-web/src/pages/Admin/RoleList.js
Normal file
@ -0,0 +1,218 @@
|
|||||||
|
/* 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 './ResourceList.less';
|
||||||
|
|
||||||
|
const FormItem = Form.Item;
|
||||||
|
const { Option } = Select;
|
||||||
|
|
||||||
|
// 添加 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' ? '添加一个 Role' : '更新一个 Role';
|
||||||
|
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('name', {
|
||||||
|
rules: [{ required: true, message: '请输入角色名!', min: 2 }],
|
||||||
|
initialValue: initValues.name,
|
||||||
|
})(<Input placeholder="请输入" />)}
|
||||||
|
</FormItem>
|
||||||
|
</Modal>
|
||||||
|
);
|
||||||
|
});
|
||||||
|
|
||||||
|
@connect(({ roleList, loading }) => ({
|
||||||
|
roleList,
|
||||||
|
list: roleList.list,
|
||||||
|
data: roleList,
|
||||||
|
loading: loading.models.resourceList,
|
||||||
|
}))
|
||||||
|
@Form.create()
|
||||||
|
class RoleList extends PureComponent {
|
||||||
|
state = {
|
||||||
|
modalVisible: false,
|
||||||
|
modalType: 'add', //add update
|
||||||
|
initValues: {},
|
||||||
|
};
|
||||||
|
|
||||||
|
componentDidMount() {
|
||||||
|
const { dispatch } = this.props;
|
||||||
|
dispatch({
|
||||||
|
type: 'roleList/query',
|
||||||
|
payload: {
|
||||||
|
name: '',
|
||||||
|
pageNo: 0,
|
||||||
|
pageSize: 10,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
handleModalVisible = (flag, modalType, initValues) => {
|
||||||
|
this.setState({
|
||||||
|
modalVisible: !!flag,
|
||||||
|
initValues: initValues || {},
|
||||||
|
modalType: modalType || 'add',
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
handleAdd = ({ fields, modalType, initValues }) => {
|
||||||
|
const { dispatch, data } = this.props;
|
||||||
|
const queryParams = {
|
||||||
|
pageNo: data.pageNo,
|
||||||
|
pageSize: data.pageSize,
|
||||||
|
};
|
||||||
|
if (modalType === 'add') {
|
||||||
|
dispatch({
|
||||||
|
type: 'roleList/add',
|
||||||
|
payload: {
|
||||||
|
body: {
|
||||||
|
...fields,
|
||||||
|
},
|
||||||
|
queryParams,
|
||||||
|
callback: () => {
|
||||||
|
message.success('添加成功');
|
||||||
|
this.handleModalVisible();
|
||||||
|
},
|
||||||
|
},
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
dispatch({
|
||||||
|
type: 'roleList/update',
|
||||||
|
payload: {
|
||||||
|
body: {
|
||||||
|
...initValues,
|
||||||
|
...fields,
|
||||||
|
},
|
||||||
|
queryParams,
|
||||||
|
callback: () => {
|
||||||
|
message.success('更新成功');
|
||||||
|
this.handleModalVisible();
|
||||||
|
},
|
||||||
|
},
|
||||||
|
});
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
handleDelete(row) {
|
||||||
|
const { dispatch, data } = this.props;
|
||||||
|
const queryParams = {
|
||||||
|
pageNo: data.pageNo,
|
||||||
|
pageSize: data.pageSize,
|
||||||
|
};
|
||||||
|
Modal.confirm({
|
||||||
|
title: `确认删除?`,
|
||||||
|
content: `${row.name}`,
|
||||||
|
onOk() {
|
||||||
|
dispatch({
|
||||||
|
type: 'roleList/delete',
|
||||||
|
payload: {
|
||||||
|
body: {
|
||||||
|
id: row.id,
|
||||||
|
},
|
||||||
|
queryParams,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
},
|
||||||
|
onCancel() {},
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
render() {
|
||||||
|
const { list, data } = this.props;
|
||||||
|
const { modalVisible, modalType, initValues, defaultExpandAllRows } = this.state;
|
||||||
|
const parentMethods = {
|
||||||
|
handleAdd: this.handleAdd,
|
||||||
|
handleModalVisible: this.handleModalVisible,
|
||||||
|
modalType,
|
||||||
|
initValues,
|
||||||
|
};
|
||||||
|
|
||||||
|
const columns = [
|
||||||
|
{
|
||||||
|
title: 'id',
|
||||||
|
dataIndex: 'id',
|
||||||
|
render: text => <strong>{text}</strong>,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '名称',
|
||||||
|
dataIndex: 'name',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
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>
|
||||||
|
),
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
const paginationProps = {
|
||||||
|
current: data.pageNo,
|
||||||
|
pageSize: data.pageSize,
|
||||||
|
total: data.count,
|
||||||
|
};
|
||||||
|
return (
|
||||||
|
<PageHeaderWrapper title="查询表格">
|
||||||
|
<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 columns={columns} dataSource={list} rowKey="id" />
|
||||||
|
</Card>
|
||||||
|
<CreateForm {...parentMethods} modalVisible={modalVisible} />
|
||||||
|
</PageHeaderWrapper>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export default RoleList;
|
15
admin-web/src/pages/Admin/RoleList.less
Normal file
15
admin-web/src/pages/Admin/RoleList.less
Normal file
@ -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;
|
||||||
|
}
|
Loading…
Reference in New Issue
Block a user