Skip to content

Y
yudao-cloud
提交 ed26110a authored 作者: YunaiV's avatar YunaiV
浏览文件
操作

前端：管理员模块重构初步完成

上级 b29844f0
隐藏空白字符变更
内嵌 并排
正在显示 包含 265 行增加 和 200 行删除
admin-web/src/models/admin/adminList.js
浏览文件 @ ed26110a
......@@ -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 }) {
// 显示加载中
yield put({
type: 'changeListLoading',
payload: true,
});
// 请求
const response = yield call(queryAdmin, payload);
// 响应
yield put({
type: 'querySuccess',
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,
},
type: 'changeModalLoading',
payload: false,
});
},
*delete({ payload }, { call, put }) {
const { queryParams, body } = payload;
yield call(deleteAdmin, body);
message.info('删除成功!');
yield put({
type: 'query',
payload: {
...queryParams,
},
});
* 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 }) {
* 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);
// 响应
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: 'querySuccess',
payload: {
roleList: roleTreeData,
roleCheckedKeys,
},
type: 'changeRoleAssignLoading',
payload: false,
});
},
* roleAssign({ payload }, { call, put }) {
const { callback, body } = payload;
// 显示加载中
yield put({
type: 'changeRoleAssignLoading',
payload: false,
payload: true,
});
},
*roleAssign({ payload }, { call }) {
const params = {
id: payload.id,
roleIds: arrayToStringParams(payload.roleIds),
};
const response = yield call(adminRoleAssign, params);
// 请求
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,
......
admin-web/src/pages/Admin/AdminList.js
浏览文件 @ ed26110a
......@@ -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>
<Divider type="vertical" />
<a className={styles.tableDelete} onClick={() => this.handleDelete(record)}>
删除
</a>
{
record.status === 2 ?
<span>
<Divider type="vertical" />
<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;
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()}
>
<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 || {}
},
});
};
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 => {
const { dispatch } = this.props;
this.setState({
modalRoleVisible: !!true,
modalRoleRow: row,
});
dispatch({
type: 'adminList/queryRoleList',
payload: {
id: row.id,
formVals: record || {}
},
});
};
handleRoleAssignCheckBoxClick = checkedKeys => {
handleRoleAssignModalVisible = (roleModalVisible, record) => {
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',
type: 'adminList/setAll',
payload: {
id: modalRoleRow.id,
roleIds: data.roleCheckedKeys,
roleModalVisible: roleModalVisible,
formVals: record || {}
},
});
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>
);
}
......
admin-web/src/utils/tree.utils.js
浏览文件 @ ed26110a
......@@ -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;
});
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论