From d7be2bfb334ea34b2f92a10213165a3c751a2efc Mon Sep 17 00:00:00 2001 From: sin <2943460818@qq.com> Date: Wed, 6 Mar 2019 20:08:39 +0800 Subject: [PATCH] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E8=A7=92=E8=89=B2=E7=AE=A1?= =?UTF-8?q?=E7=90=86?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- admin-web/config/router.config.js | 5 + admin-web/mock/admin.js | 6 + admin-web/mock/geographic/role-query.json | 19 ++ admin-web/src/locales/zh-CN/menu.js | 1 + .../src/models/{ => admin}/resourceList.js | 2 +- admin-web/src/models/admin/roleList.js | 74 ++++++ admin-web/src/pages/Admin/ResourceList.js | 8 +- admin-web/src/pages/Admin/RoleList.js | 218 ++++++++++++++++++ admin-web/src/pages/Admin/RoleList.less | 15 ++ 9 files changed, 343 insertions(+), 5 deletions(-) create mode 100644 admin-web/mock/geographic/role-query.json rename admin-web/src/models/{ => admin}/resourceList.js (97%) create mode 100644 admin-web/src/models/admin/roleList.js create mode 100644 admin-web/src/pages/Admin/RoleList.js create mode 100644 admin-web/src/pages/Admin/RoleList.less diff --git a/admin-web/config/router.config.js b/admin-web/config/router.config.js index 484bb4261..fc9ef3f55 100644 --- a/admin-web/config/router.config.js +++ b/admin-web/config/router.config.js @@ -46,6 +46,11 @@ export default [ name: 'resource-list', component: './Admin/ResourceList', }, + { + path: '/admin/role-list', + name: 'role-list', + component: './Admin/RoleList', + }, ], }, { diff --git a/admin-web/mock/admin.js b/admin-web/mock/admin.js index 1945f0162..f5c359a7c 100644 --- a/admin-web/mock/admin.js +++ b/admin-web/mock/admin.js @@ -2,6 +2,7 @@ import adminMenu from './geographic/admin-menu.json'; import adminMenuAll from './geographic/admin-menu-all.json'; import adminUrls from './geographic/admin-urls'; import resourceTree from './geographic/resource-tree.json'; +import roleQuery from './geographic/role-query.json'; /* eslint-disable */ function getAdminMenu(req, res) { @@ -20,8 +21,13 @@ function getResourceTree(req, res) { return res.json(resourceTree); } +function getQueryRole(req, res) { + return res.json(roleQuery); +} + export default { 'GET /admin-api/admin/resource/admin_menu_tree': getAdminMenuAll, 'GET /admin-api/admin/resource/admin_url_list': getAdminUrls, 'GET /admin-api/admin/resource/tree': getResourceTree, + 'GET /admin-api/admin/role/page': getQueryRole, }; diff --git a/admin-web/mock/geographic/role-query.json b/admin-web/mock/geographic/role-query.json new file mode 100644 index 000000000..2dc6442d4 --- /dev/null +++ b/admin-web/mock/geographic/role-query.json @@ -0,0 +1,19 @@ +{ + "code": 0, + "data": { + "count": 2, + "roles": [ + { + "id": 1, + "name": "系统管理员", + "createTime": 1551332076000 + }, + { + "id": 2, + "name": "系统管理员", + "createTime": 1551332076000 + } + ] + }, + "message": "string" +} diff --git a/admin-web/src/locales/zh-CN/menu.js b/admin-web/src/locales/zh-CN/menu.js index 3e39dade5..1b846e53e 100644 --- a/admin-web/src/locales/zh-CN/menu.js +++ b/admin-web/src/locales/zh-CN/menu.js @@ -3,6 +3,7 @@ export default { 'menu.admin': 'Admin管理', 'menu.admin.admin-list': '管理员列表', 'menu.admin.resource-list': '资源列表', + 'menu.admin.role-list': '角色列表', 'menu.home': '首页', 'menu.login': '登录', 'menu.register': '注册', diff --git a/admin-web/src/models/resourceList.js b/admin-web/src/models/admin/resourceList.js similarity index 97% rename from admin-web/src/models/resourceList.js rename to admin-web/src/models/admin/resourceList.js index 3fc3e4596..ae83e92c0 100644 --- a/admin-web/src/models/resourceList.js +++ b/admin-web/src/models/admin/resourceList.js @@ -1,5 +1,5 @@ import { message } from 'antd'; -import { addResource, updateResource, deleteResource, resourceTree } from '@/services/resource'; +import { addResource, updateResource, deleteResource, resourceTree } from '../../services/admin'; export default { namespace: 'resourceList', diff --git a/admin-web/src/models/admin/roleList.js b/admin-web/src/models/admin/roleList.js new file mode 100644 index 000000000..591a6cf5e --- /dev/null +++ b/admin-web/src/models/admin/roleList.js @@ -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, + }; + }, + }, +}; diff --git a/admin-web/src/pages/Admin/ResourceList.js b/admin-web/src/pages/Admin/ResourceList.js index b44dc3be7..433a54b4a 100644 --- a/admin-web/src/pages/Admin/ResourceList.js +++ b/admin-web/src/pages/Admin/ResourceList.js @@ -89,6 +89,7 @@ const CreateForm = Form.create()(props => { @connect(({ resourceList, loading }) => ({ resourceList, + list: resourceList.list, loading: loading.models.resourceList, })) @Form.create() @@ -103,7 +104,7 @@ class ResourceList extends PureComponent { componentDidMount() { const { dispatch } = this.props; dispatch({ - type: 'resourceList/tree', + type: 'roleList/tree', payload: {}, }); } @@ -172,9 +173,7 @@ class ResourceList extends PureComponent { } render() { - const { - resourceList: { list }, - } = this.props; + const { list } = this.props; const { modalVisible, modalType, initValues, defaultExpandAllRows } = this.state; const parentMethods = { handleAdd: this.handleAdd, @@ -253,6 +252,7 @@ class ResourceList extends PureComponent { + TODO 展开没效果，需要研究下 { + 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 ( + handleModalVisible()} + > + + {form.getFieldDecorator('name', { + rules: [{ required: true, message: '请输入角色名！', min: 2 }], + initialValue: initValues.name, + })()} + + + ); +}); + +@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 => {text}, + }, + { + title: '名称', + dataIndex: 'name', + }, + { + title: '创建时间', + dataIndex: 'createTime', + sorter: true, + render: val => {moment(val).format('YYYY-MM-DD')}, + }, + { + title: '操作', + render: (text, record) => ( + + this.handleModalVisible(true, 'update', record)}>更新 + + this.handleDelete(record)}> + 删除 + + + ), + }, + ]; + + const paginationProps = { + current: data.pageNo, + pageSize: data.pageSize, + total: data.count, + }; + return ( + + +
+
+ +
+
+
+ + + + ); + } +} + +export default RoleList; diff --git a/admin-web/src/pages/Admin/RoleList.less b/admin-web/src/pages/Admin/RoleList.less new file mode 100644 index 000000000..ebb45c292 --- /dev/null +++ b/admin-web/src/pages/Admin/RoleList.less @@ -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; +}