From ed26110a7feefafd79aea0c66942803da2afc7c6 Mon Sep 17 00:00:00 2001 From: YunaiV <> Date: Fri, 22 Mar 2019 16:00:28 +0800 Subject: [PATCH] =?UTF-8?q?=E5=89=8D=E7=AB=AF=EF=BC=9A=E7=AE=A1=E7=90=86?= =?UTF-8?q?=E5=91=98=E6=A8=A1=E5=9D=97=E9=87=8D=E6=9E=84=E5=88=9D=E6=AD=A5?= =?UTF-8?q?=E5=AE=8C=E6=88=90?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- admin-web/src/models/admin/adminList.js | 188 +++++++++++----- admin-web/src/pages/Admin/AdminList.js | 278 +++++++++++------------- admin-web/src/utils/tree.utils.js | 3 +- 3 files changed, 267 insertions(+), 202 deletions(-) diff --git a/admin-web/src/models/admin/adminList.js b/admin-web/src/models/admin/adminList.js index dc302ec82..a5cd18ce3 100644 --- a/admin-web/src/models/admin/adminList.js +++ b/admin-web/src/models/admin/adminList.js @@ -22,26 +22,37 @@ export default { state: { // 分页列表相关 list: [], - searchParams: SEARCH_PARAMS_DEFAULT, + listLoading: false, pagination: PaginationHelper.defaultPaginationConfig, + searchParams: SEARCH_PARAMS_DEFAULT, // 添加 or 修改表单相关 modalVisible: false, modalType: undefined, // 'add' or 'update' 表单 formVals: {}, // 当前表单值 + modalLoading: false, // 分配角色表单相关 roleList: [], - roleCheckedKeys: [], + roleModalVisible: false, + roleCheckedKeys: [], // 此处的 Key ，就是角色编号 roleAssignLoading: false, }, effects: { // 查询列表 * query({ payload }, { call, put }) { - const response = yield call(queryAdmin, payload); + // 显示加载中 yield put({ - type: 'querySuccess', + type: 'changeListLoading', + payload: true, + }); + + // 请求 + const response = yield call(queryAdmin, payload); + // 响应 + yield put({ + type: 'setAll', payload: { list: response.data.list, pagination: PaginationHelper.formatPagination(response.data, payload), @@ -50,10 +61,24 @@ export default { } }, }); + + // 隐藏加载中 + yield put({ + type: 'changeListLoading', + payload: false, + }); }, * add({ payload }, { call, put }) { const { callback, body } = payload; + // 显示加载中 + yield put({ + type: 'changeModalLoading', + payload: true, + }); + + // 请求 const response = yield call(addAdmin, body); + // 响应 if (response.code === 0) { if (callback) { callback(response); @@ -66,10 +91,24 @@ export default { }, }); } + + // 隐藏加载中 + yield put({ + type: 'changeModalLoading', + payload: false, + }); }, * update({ payload }, { call, put }) { const { callback, body } = payload; + // 显示加载中 + yield put({ + type: 'changeModalLoading', + payload: true, + }); + + // 请求 const response = yield call(updateAdmin, body); + // 响应 if (response.code === 0) { if (callback) { callback(response); @@ -82,91 +121,132 @@ export default { }, }); } - }, - *updateStatus({ payload }, { call, put }) { - const { body, queryParams } = payload; - yield call(updateAdminStatus, body); - message.info('更新成功!'); + + // 隐藏加载中 yield put({ - type: 'query', - payload: { - ...queryParams, - }, - }); - }, - *delete({ payload }, { call, put }) { - const { queryParams, body } = payload; - yield call(deleteAdmin, body); - message.info('删除成功!'); - yield put({ - type: 'query', - payload: { - ...queryParams, - }, + type: 'changeModalLoading', + payload: false, }); }, - *queryRoleList({ payload }, { call, put }) { + * updateStatus({ payload }, { call, put }) { + // 请求 + const response = yield call(updateAdminStatus, payload); + // 响应 + if (response.code === 0) { + message.info('更新状态成功!'); + // 刷新列表 + yield put({ + type: 'query', + payload: { + ...PaginationHelper.defaultPayload + }, + }); + } + }, + + * delete({ payload }, { call, put }) { + // 请求 + const response = yield call(deleteAdmin, payload); + // 响应 + if (response.code === 0) { + message.info('删除成功!'); + // 刷新列表 + yield put({ + type: 'query', + payload: { + ...PaginationHelper.defaultPayload + }, + }); + } + }, + + * queryRoleList({ payload }, { call, put }) { + // 显示加载中 yield put({ type: 'changeRoleAssignLoading', payload: true, }); + // 请求 const response = yield call(queryAdminRoleList, payload); - const roleList = response.data; - const roleTreeData = buildTreeNode(roleList, 'name', 'id'); - const roleCheckedKeys = findCheckedKeys(roleList); - - yield put({ - type: 'querySuccess', - payload: { - roleList: roleTreeData, - roleCheckedKeys, - }, - }); + // 响应 + if (response.code === 0) { + const roleList = response.data; + const roleTreeData = buildTreeNode(roleList, 'name', 'id'); + const roleCheckedKeys = findCheckedKeys(roleList); + yield put({ + type: 'setAll', + payload: { + roleList: roleTreeData, + roleCheckedKeys, + }, + }); + } + // 隐藏加载中 yield put({ type: 'changeRoleAssignLoading', payload: false, }); }, - *roleAssign({ payload }, { call }) { - const params = { - id: payload.id, - roleIds: arrayToStringParams(payload.roleIds), - }; - const response = yield call(adminRoleAssign, params); + + * roleAssign({ payload }, { call, put }) { + const { callback, body } = payload; + // 显示加载中 + yield put({ + type: 'changeRoleAssignLoading', + payload: true, + }); + + // 请求 + const response = yield call(adminRoleAssign, { + id: body.id, + roleIds: arrayToStringParams(body.roleIds), + }); + // 响应 if (response.code === 0) { - message.info('操作成功!'); + if (callback) { + callback(response); + } } + + // 隐藏加载中 + yield put({ + type: 'changeRoleAssignLoading', + payload: false, + }); }, }, reducers: { - querySuccess(state, { payload }) { - return { - ...state, - ...payload, - }; - }, changeRoleCheckedKeys(state, { payload }) { return { ...state, roleCheckedKeys: payload, }; }, + // 修改加载中的状态 changeRoleAssignLoading(state, { payload }) { return { ...state, roleAssignLoading: payload, }; }, - setAll(state, { payload }) { - console.log('setAll'); - console.log({ + changeModalLoading(state, { payload }) { + return { ...state, - ...payload, - }); + modalLoading: payload, + }; + }, + changeListLoading(state, { payload }) { + return { + ...state, + listLoading: payload, + }; + }, + // 设置所有属性 + setAll(state, { payload }) { return { ...state, ...payload, diff --git a/admin-web/src/pages/Admin/AdminList.js b/admin-web/src/pages/Admin/AdminList.js index 99a0a93b4..59f821553 100644 --- a/admin-web/src/pages/Admin/AdminList.js +++ b/admin-web/src/pages/Admin/AdminList.js @@ -15,7 +15,54 @@ const { TreeNode } = Tree; const status = ['未知', '正常', '禁用']; // 列表 -function List ({ dataSource, pagination, searchParams, dispatch, handleModalVisible }) { +function List ({ dataSource, loading, pagination, searchParams, dispatch, + handleModalVisible, handleRoleAssignModalVisible}) { + + function handleRoleAssign(record) { + // 显示 Modal + handleRoleAssignModalVisible(true, record); + // 查询角色列表 + dispatch({ + type: 'adminList/queryRoleList', + payload: { + id: record.id, + }, + }); + } + + function handleStatus(record) { + Modal.confirm({ + title: record.status === 1 ? '确认禁用' : '取消禁用', + content: `${record.username}`, + onOk() { + dispatch({ + type: 'adminList/updateStatus', + payload: { + id: record.id, + status: record.status === 1 ? 2 : 1, + }, + }); + }, + onCancel() {}, + }); + } + + function handleDelete(record) { + Modal.confirm({ + title: `确认删除?`, + content: `${record.username}`, + onOk() { + dispatch({ + type: 'adminList/delete', + payload: { + id: record.id, + }, + }); + }, + onCancel() {}, + }); + } + const columns = [ { title: '用户名', @@ -41,27 +88,32 @@ function List ({ dataSource, pagination, searchParams, dispatch, handleModalVisi title: '操作', width: 360, render: (text, record) => { - const statusText = record.status === 1 ? '禁用' : '禁用'; + const statusText = record.status === 1 ? '禁用' : '开启'; // TODO 芋艿，此处要改 return ( handleModalVisible(true, 'update', record)}>编辑 - this.handleRoleAssign(record)}>角色分配 + handleRoleAssign(record)}>角色分配 - this.handleStatus(record)}> + handleStatus(record)}> {statusText} - - this.handleDelete(record)}> - 删除 - + { + record.status === 2 ? + + + handleDelete(record)}> + 删除 + + : '' + } ); }, }, ]; - function onPageChange(page) { + function onPageChange(page) { // 翻页 dispatch({ type: 'adminList/query', payload: { @@ -70,19 +122,14 @@ function List ({ dataSource, pagination, searchParams, dispatch, handleModalVisi ...searchParams } }) - }; + } return ( @@ -178,7 +225,7 @@ const AddOrUpdateForm = Form.create()(props => { type: 'adminList/update', payload: { body: { - ...formVals, + id: formVals.id, ...fields, }, callback: () => { @@ -232,22 +279,34 @@ const AddOrUpdateForm = Form.create()(props => { ); }); -// 角色分配 +// 角色分配 Modal const RoleAssignModal = Form.create()(props => { const { modalVisible, form, - handleOk, handleModalVisible, treeData, checkedKeys, loading, - handleCheckBoxClick, + formVals, + dispatch, } = props; + const handleCheckBoxClick = checkedKeys => { + // 获得新选择 + const newCheckedKeys = checkedKeys.map(item => { + return parseInt(item); + }); + // 设置到 model 中 + dispatch({ + type: 'adminList/changeRoleCheckedKeys', + payload: newCheckedKeys, + }); + }; + const renderTreeNodes = data => { return data.map(item => { - if (item.children) { + if (item.children) { // 递归拼接节点 return ( {renderTreeNodes(item.children)} @@ -284,9 +343,23 @@ const RoleAssignModal = Form.create()(props => { const okHandle = () => { form.validateFields((err, fieldsValue) => { if (err) return; - form.resetFields(); - handleOk({ - fields: fieldsValue, + // debugger; + dispatch({ + type: 'adminList/roleAssign', + payload: { + body: { + id: formVals.id, + roleIds: checkedKeys, + }, + callback: () => { + // 清空表单 + form.resetFields(); + // 提示 + message.success('分配角色成功'); + // 关闭弹窗 + handleModalVisible(false); + }, + }, }); }); }; @@ -299,7 +372,9 @@ const RoleAssignModal = Form.create()(props => { onOk={okHandle} onCancel={() => handleModalVisible()} > - {renderModalContent(treeData)} + + {renderModalContent(treeData)} + ); }); @@ -308,14 +383,12 @@ const RoleAssignModal = Form.create()(props => { // list: adminList.list, // pagination: adminList.pagination, ...adminList, - data: adminList, loading: loading.models.resourceList, })) @Form.create() class AdminList extends PureComponent { state = { - // 分配角色弹窗 modalRoleVisible: false, modalRoleRow: {}, @@ -331,130 +404,36 @@ class AdminList extends PureComponent { }); } - handleModalVisible = (modalVisible, modalType, formVals) => { - // debugger; + handleModalVisible = (modalVisible, modalType, record) => { const { dispatch } = this.props; dispatch({ type: 'adminList/setAll', payload: { modalVisible, modalType, - formVals: formVals || {} + formVals: record || {} }, }); }; - handleStatus(row) { - const { dispatch, data } = this.props; - const queryParams = { - pageNo: data.pageNo, - pageSize: data.pageSize, - }; - - const title = row.status === 1 ? '确认禁用' : '取消禁用'; - const updateStatus = row.status === 1 ? 2 : 1; - - Modal.confirm({ - title: `${title}?`, - content: `${row.username}`, - onOk() { - dispatch({ - type: 'adminList/updateStatus', - payload: { - body: { - id: row.id, - status: updateStatus, - }, - queryParams, - }, - }); - }, - onCancel() {}, - }); - } - - handleDelete(row) { - const { dispatch, data } = this.props; - const queryParams = { - pageNo: data.pageNo, - pageSize: data.pageSize, - }; - - Modal.confirm({ - title: `确认删除?`, - content: `${row.username}`, - onOk() { - dispatch({ - type: 'adminList/delete', - payload: { - body: { - id: row.id, - }, - queryParams, - }, - }); - }, - onCancel() {}, - }); - } - - handleRoleAssign = row => { + handleRoleAssignModalVisible = (roleModalVisible, record) => { const { dispatch } = this.props; - this.setState({ - modalRoleVisible: !!true, - modalRoleRow: row, - }); - dispatch({ - type: 'adminList/queryRoleList', + type: 'adminList/setAll', payload: { - id: row.id, + roleModalVisible: roleModalVisible, + formVals: record || {} }, }); }; - handleRoleAssignCheckBoxClick = checkedKeys => { - const { dispatch } = this.props; - const newCheckedKeys = checkedKeys.map(item => { - return parseInt(item); - }); - dispatch({ - type: 'adminList/changeRoleCheckedKeys', - payload: newCheckedKeys, - }); - }; - - handleRoleAssignOK = () => { - const { dispatch, data } = this.props; - const { modalRoleRow } = this.state; - dispatch({ - type: 'adminList/roleAssign', - payload: { - id: modalRoleRow.id, - roleIds: data.roleCheckedKeys, - }, - }); - this.handleRoleAssignModalVisibleClose(false); - }; - - handleRoleAssignModalVisibleClose = fag => { - this.setState({ - modalRoleVisible: !!fag, - }); - }; - render() { // let that = this; - const { dispatch, list, searchParams, pagination, modalVisible, data, modalType, formVals } = this.props; - const { roleList, roleCheckedKeys, roleAssignLoading } = data; - // const { - // // modalVisible, - // // modalType, - // formVals, - // modalRoleVisible, - // } = this.state; - const modalRoleVisible = false; - + const { dispatch, + list, listLoading, searchParams, pagination, + modalVisible, modalType, formVals, + confirmLoading, + roleList, roleModalVisible, roleAssignLoading, roleCheckedKeys } = this.props; // 列表属性 const listProps = { @@ -462,7 +441,10 @@ class AdminList extends PureComponent { pagination, searchParams, dispatch, + loading: listLoading, + confirmLoading, handleModalVisible: this.handleModalVisible, // Function + handleRoleAssignModalVisible: this.handleRoleAssignModalVisible, // Function }; // 搜索表单属性 @@ -470,14 +452,24 @@ class AdminList extends PureComponent { dispatch, }; - // 添加 - const addFormProps = { + // 添加 or 更新表单属性 + const addOrUpdateFormProps = { modalVisible, - modalType: modalType, - formVals: formVals, + modalType, + formVals, dispatch, handleModalVisible: this.handleModalVisible, // Function }; + // 分配角色 Modal 属性 + const roleAssignModal = { + loading: roleAssignLoading, + treeData: roleList, + formVals, + checkedKeys: roleCheckedKeys, + modalVisible: roleModalVisible, + dispatch, + handleModalVisible: this.handleRoleAssignModalVisible, // Function + }; return ( @@ -497,19 +489,11 @@ class AdminList extends PureComponent { - - - this.handleRoleAssignModalVisibleClose(false)} - /> + + + ); } diff --git a/admin-web/src/utils/tree.utils.js b/admin-web/src/utils/tree.utils.js index 90e5a3601..179e2f5f3 100644 --- a/admin-web/src/utils/tree.utils.js +++ b/admin-web/src/utils/tree.utils.js @@ -6,7 +6,8 @@ export function buildTreeNode(nodes, titleKey, nodeKey) { if (item.children) { res.children = buildTreeNode(item.children, titleKey, nodeKey); } - res.title = `${item.id}-${item[titleKey]}`; + // res.title = `${item.id}-${item[titleKey]}`; + res.title = `${item[titleKey]}`; res.key = item[nodeKey]; return res; });