前端：管理员模块重构初步完成
YunaiV
parent
b29844f0d0
commit
ed26110a7f
|
|
@ -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,
|
||||
});
|
||||
},
|
||||
|
||||
* 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);
|
||||
// 响应
|
||||
if (response.code === 0) {
|
||||
const roleList = response.data;
|
||||
const roleTreeData = buildTreeNode(roleList, 'name', 'id');
|
||||
const roleCheckedKeys = findCheckedKeys(roleList);
|
||||
|
||||
yield put({
|
||||
type: 'querySuccess',
|
||||
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,
|
||||
|
|
|
|||
|
|
@ -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 (
|
||||
<Fragment>
|
||||
<a onClick={() => handleModalVisible(true, 'update', record)}>编辑</a>
|
||||
<Divider type="vertical" />
|
||||
<a onClick={() => this.handleRoleAssign(record)}>角色分配</a>
|
||||
<a onClick={() => handleRoleAssign(record)}>角色分配</a>
|
||||
<Divider type="vertical" />
|
||||
<a className={styles.tableDelete} onClick={() => this.handleStatus(record)}>
|
||||
<a className={styles.tableDelete} onClick={() => handleStatus(record)}>
|
||||
{statusText}
|
||||
</a>
|
||||
{
|
||||
record.status === 2 ?
|
||||
<span>
|
||||
<Divider type="vertical" />
|
||||
<a className={styles.tableDelete} onClick={() => this.handleDelete(record)}>
|
||||
<a className={styles.tableDelete} onClick={() => handleDelete(record)}>
|
||||
删除
|
||||
</a>
|
||||
</span> : ''
|
||||
}
|
||||
</Fragment>
|
||||
);
|
||||
},
|
||||
},
|
||||
];
|
||||
|
||||
function onPageChange(page) {
|
||||
function onPageChange(page) { // 翻页
|
||||
dispatch({
|
||||
type: 'adminList/query',
|
||||
payload: {
|
||||
|
|
@ -70,19 +122,14 @@ function List ({ dataSource, pagination, searchParams, dispatch, handleModalVisi
|
|||
...searchParams
|
||||
}
|
||||
})
|
||||
};
|
||||
}
|
||||
|
||||
return (
|
||||
<Table
|
||||
columns={columns}
|
||||
dataSource={dataSource}
|
||||
loading={loading}
|
||||
rowKey="id"
|
||||
// pagination={{
|
||||
// current: pageNo,
|
||||
// pageSize: pageSize,
|
||||
// total: count,
|
||||
// onChange: this.onPageChange
|
||||
// }}
|
||||
pagination={pagination}
|
||||
onChange={onPageChange}
|
||||
/>
|
||||
|
|
@ -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 (
|
||||
<TreeNode title={item.title} key={item.key} dataRef={item}>
|
||||
{renderTreeNodes(item.children)}
|
||||
|
|
@ -284,9 +343,23 @@ const RoleAssignModal = Form.create()(props => {
|
|||
const okHandle = () => {
|
||||
form.validateFields((err, fieldsValue) => {
|
||||
if (err) return;
|
||||
// debugger;
|
||||
dispatch({
|
||||
type: 'adminList/roleAssign',
|
||||
payload: {
|
||||
body: {
|
||||
id: formVals.id,
|
||||
roleIds: checkedKeys,
|
||||
},
|
||||
callback: () => {
|
||||
// 清空表单
|
||||
form.resetFields();
|
||||
handleOk({
|
||||
fields: fieldsValue,
|
||||
// 提示
|
||||
message.success('分配角色成功');
|
||||
// 关闭弹窗
|
||||
handleModalVisible(false);
|
||||
},
|
||||
},
|
||||
});
|
||||
});
|
||||
};
|
||||
|
|
@ -299,7 +372,9 @@ const RoleAssignModal = Form.create()(props => {
|
|||
onOk={okHandle}
|
||||
onCancel={() => handleModalVisible()}
|
||||
>
|
||||
<Spin spinning={loading}>{renderModalContent(treeData)}</Spin>
|
||||
<Spin spinning={loading}>
|
||||
{renderModalContent(treeData)}
|
||||
</Spin>
|
||||
</Modal>
|
||||
);
|
||||
});
|
||||
|
|
@ -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 (
|
||||
<PageHeaderWrapper>
|
||||
|
|
@ -497,19 +489,11 @@ class AdminList extends PureComponent {
|
|||
</div>
|
||||
</div>
|
||||
<List {...listProps} />
|
||||
|
||||
</Card>
|
||||
<AddOrUpdateForm {...addFormProps} />
|
||||
|
||||
<RoleAssignModal
|
||||
loading={roleAssignLoading}
|
||||
treeData={roleList}
|
||||
checkedKeys={roleCheckedKeys}
|
||||
handleOk={this.handleRoleAssignOK}
|
||||
modalVisible={modalRoleVisible}
|
||||
handleCheckBoxClick={this.handleRoleAssignCheckBoxClick}
|
||||
handleModalVisible={() => this.handleRoleAssignModalVisibleClose(false)}
|
||||
/>
|
||||
<AddOrUpdateForm {...addOrUpdateFormProps} />
|
||||
|
||||
<RoleAssignModal {...roleAssignModal} />
|
||||
</PageHeaderWrapper>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
});
|
||||
|
|
|
|||
Loading…
Reference in New Issue