前端：管理员模块添加功能重构
前端：管理员模块修改功能重构
This commit is contained in:
YunaiV
parent
e3a14c2abb
commit
b29844f0d0
@ -5,7 +5,7 @@ export default class DictionaryText extends PureComponent {
|
||||
componentDidMount() {}
|
||||
|
||||
render() {
|
||||
debugger;
|
||||
// debugger;
|
||||
const { dicKey, dicValue } = this.props;
|
||||
return (
|
||||
<DictionaryContext.Consumer>
|
||||
|
||||
@ -20,10 +20,17 @@ export default {
|
||||
namespace: 'adminList',
|
||||
|
||||
state: {
|
||||
// 分页列表相关
|
||||
list: [],
|
||||
searchParams: SEARCH_PARAMS_DEFAULT,
|
||||
pagination: PaginationHelper.defaultPaginationConfig,
|
||||
|
||||
// 添加 or 修改表单相关
|
||||
modalVisible: false,
|
||||
modalType: undefined, // 'add' or 'update' 表单
|
||||
formVals: {}, // 当前表单值
|
||||
|
||||
// 分配角色表单相关
|
||||
roleList: [],
|
||||
roleCheckedKeys: [],
|
||||
roleAssignLoading: false,
|
||||
@ -44,31 +51,37 @@ export default {
|
||||
},
|
||||
});
|
||||
},
|
||||
*add({ payload }, { call, put }) {
|
||||
const { callback, body, queryParams } = payload;
|
||||
* add({ payload }, { call, put }) {
|
||||
const { callback, body } = payload;
|
||||
const response = yield call(addAdmin, body);
|
||||
if (callback) {
|
||||
callback(response);
|
||||
if (response.code === 0) {
|
||||
if (callback) {
|
||||
callback(response);
|
||||
}
|
||||
// 刷新列表
|
||||
yield put({
|
||||
type: 'query',
|
||||
payload: {
|
||||
...PaginationHelper.defaultPayload
|
||||
},
|
||||
});
|
||||
}
|
||||
yield put({
|
||||
type: 'query',
|
||||
payload: {
|
||||
...queryParams,
|
||||
},
|
||||
});
|
||||
},
|
||||
*update({ payload }, { call, put }) {
|
||||
const { callback, body, queryParams } = payload;
|
||||
* update({ payload }, { call, put }) {
|
||||
const { callback, body } = payload;
|
||||
const response = yield call(updateAdmin, body);
|
||||
if (callback) {
|
||||
callback(response);
|
||||
if (response.code === 0) {
|
||||
if (callback) {
|
||||
callback(response);
|
||||
}
|
||||
// 刷新列表
|
||||
yield put({
|
||||
type: 'query',
|
||||
payload: {
|
||||
...PaginationHelper.defaultPayload
|
||||
},
|
||||
});
|
||||
}
|
||||
yield put({
|
||||
type: 'query',
|
||||
payload: {
|
||||
...queryParams,
|
||||
},
|
||||
});
|
||||
},
|
||||
*updateStatus({ payload }, { call, put }) {
|
||||
const { body, queryParams } = payload;
|
||||
@ -148,5 +161,16 @@ export default {
|
||||
roleAssignLoading: payload,
|
||||
};
|
||||
},
|
||||
setAll(state, { payload }) {
|
||||
console.log('setAll');
|
||||
console.log({
|
||||
...state,
|
||||
...payload,
|
||||
});
|
||||
return {
|
||||
...state,
|
||||
...payload,
|
||||
};
|
||||
}
|
||||
},
|
||||
};
|
||||
|
||||
@ -15,7 +15,7 @@ const { TreeNode } = Tree;
|
||||
const status = ['未知', '正常', '禁用'];
|
||||
|
||||
// 列表
|
||||
function List ({ dataSource, pagination, searchParams, dispatch }) {
|
||||
function List ({ dataSource, pagination, searchParams, dispatch, handleModalVisible }) {
|
||||
const columns = [
|
||||
{
|
||||
title: '用户名',
|
||||
@ -44,7 +44,7 @@ function List ({ dataSource, pagination, searchParams, dispatch }) {
|
||||
const statusText = record.status === 1 ? '禁用' : '禁用';
|
||||
return (
|
||||
<Fragment>
|
||||
<a onClick={() => this.handleModalVisible(true, 'update', record)}>编辑</a>
|
||||
<a onClick={() => handleModalVisible(true, 'update', record)}>编辑</a>
|
||||
<Divider type="vertical" />
|
||||
<a onClick={() => this.handleRoleAssign(record)}>角色分配</a>
|
||||
<Divider type="vertical" />
|
||||
@ -147,19 +147,51 @@ const SearchForm = Form.create()(props => {
|
||||
);
|
||||
});
|
||||
|
||||
// 添加 form 表单
|
||||
// 添加 or 修改 Form 表单
|
||||
const AddOrUpdateForm = Form.create()(props => {
|
||||
const { modalVisible, form, handleAdd, handleModalVisible, modalType, initValues } = props;
|
||||
const { dispatch, modalVisible, form, handleModalVisible, modalType, formVals } = props;
|
||||
|
||||
const okHandle = () => {
|
||||
form.validateFields((err, fieldsValue) => {
|
||||
form.validateFields((err, fields) => {
|
||||
if (err) return;
|
||||
form.resetFields();
|
||||
handleAdd({
|
||||
fields: fieldsValue,
|
||||
modalType,
|
||||
initValues,
|
||||
});
|
||||
// 添加表单
|
||||
if (modalType === 'add') {
|
||||
dispatch({
|
||||
type: 'adminList/add',
|
||||
payload: {
|
||||
body: {
|
||||
...fields,
|
||||
},
|
||||
callback: () => {
|
||||
// 清空表单
|
||||
form.resetFields();
|
||||
// 提示
|
||||
message.success('添加成功');
|
||||
// 关闭弹窗
|
||||
handleModalVisible();
|
||||
},
|
||||
},
|
||||
});
|
||||
// 修改表单
|
||||
} else {
|
||||
dispatch({
|
||||
type: 'adminList/update',
|
||||
payload: {
|
||||
body: {
|
||||
...formVals,
|
||||
...fields,
|
||||
},
|
||||
callback: () => {
|
||||
// 清空表单
|
||||
form.resetFields();
|
||||
// 提示
|
||||
message.success('更新成功');
|
||||
// 关闭弹窗
|
||||
handleModalVisible();
|
||||
},
|
||||
},
|
||||
});
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
@ -176,24 +208,24 @@ const AddOrUpdateForm = Form.create()(props => {
|
||||
<FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="用户名">
|
||||
{form.getFieldDecorator('username', {
|
||||
rules: [{ required: true, message: '请输入用户名！'},
|
||||
{max: 16, min:6, message: '长度为6-16位'},
|
||||
{max: 16, min:6, message: '长度为 6-16 位'},
|
||||
{ validator: (rule, value, callback) => checkTypeWithEnglishAndNumbers(rule, value, callback, '数字以及字母')}
|
||||
],
|
||||
initialValue: initValues.username,
|
||||
initialValue: formVals.username,
|
||||
})(<Input placeholder="请输入" />)}
|
||||
</FormItem>
|
||||
<FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="昵称">
|
||||
{form.getFieldDecorator('nickname', {
|
||||
rules: [{ required: true, message: '请输入昵称！'},
|
||||
{max: 10, message: '姓名最大长度为10'}],
|
||||
initialValue: initValues.nickname,
|
||||
{max: 10, message: '姓名最大长度为 10'}],
|
||||
initialValue: formVals.nickname,
|
||||
})(<Input placeholder="请输入" />)}
|
||||
</FormItem>
|
||||
<FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="密码">
|
||||
{form.getFieldDecorator('password', {
|
||||
rules: [{ required: modalType === 'add', message: '请填写密码'}, // 添加时，必须输入密码
|
||||
{max: 16, min: 6, message: '长度为6-18位'}],
|
||||
initialValue: initValues.password,
|
||||
{max: 16, min: 6, message: '长度为 6-18 位'}],
|
||||
initialValue: formVals.password,
|
||||
})(<Input placeholder="请输入" type="password" />)}
|
||||
</FormItem>
|
||||
</Modal>
|
||||
@ -281,13 +313,8 @@ const RoleAssignModal = Form.create()(props => {
|
||||
}))
|
||||
|
||||
@Form.create()
|
||||
class ResourceList extends PureComponent {
|
||||
class AdminList extends PureComponent {
|
||||
state = {
|
||||
// 添加 or 修改弹窗
|
||||
modalVisible: false,
|
||||
modalType: undefined, // 'add' or 'update'
|
||||
|
||||
initValues: {},
|
||||
|
||||
// 分配角色弹窗
|
||||
modalRoleVisible: false,
|
||||
@ -304,52 +331,19 @@ class ResourceList extends PureComponent {
|
||||
});
|
||||
}
|
||||
|
||||
handleModalVisible = (flag, modalType, initValues) => {
|
||||
this.setState({
|
||||
modalVisible: !!flag,
|
||||
initValues: initValues || {},
|
||||
modalType: modalType || 'add',
|
||||
handleModalVisible = (modalVisible, modalType, formVals) => {
|
||||
// debugger;
|
||||
const { dispatch } = this.props;
|
||||
dispatch({
|
||||
type: 'adminList/setAll',
|
||||
payload: {
|
||||
modalVisible,
|
||||
modalType,
|
||||
formVals: formVals || {}
|
||||
},
|
||||
});
|
||||
};
|
||||
|
||||
handleAdd = ({ fields, modalType, initValues }) => {
|
||||
const { dispatch, data } = this.props;
|
||||
const queryParams = {
|
||||
pageNo: data.pageNo,
|
||||
pageSize: data.pageSize,
|
||||
};
|
||||
if (modalType === 'add') {
|
||||
dispatch({
|
||||
type: 'adminList/add',
|
||||
payload: {
|
||||
body: {
|
||||
...fields,
|
||||
},
|
||||
queryParams,
|
||||
callback: () => {
|
||||
message.success('添加成功');
|
||||
this.handleModalVisible();
|
||||
},
|
||||
},
|
||||
});
|
||||
} else {
|
||||
dispatch({
|
||||
type: 'adminList/update',
|
||||
payload: {
|
||||
body: {
|
||||
...initValues,
|
||||
...fields,
|
||||
},
|
||||
queryParams,
|
||||
callback: () => {
|
||||
message.success('更新成功');
|
||||
this.handleModalVisible();
|
||||
},
|
||||
},
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
handleStatus(row) {
|
||||
const { dispatch, data } = this.props;
|
||||
const queryParams = {
|
||||
@ -450,29 +444,25 @@ class ResourceList extends PureComponent {
|
||||
};
|
||||
|
||||
render() {
|
||||
let that = this;
|
||||
const { dispatch, list, searchParams, pagination, data } = this.props;
|
||||
// let that = this;
|
||||
const { dispatch, list, searchParams, pagination, modalVisible, data, modalType, formVals } = this.props;
|
||||
const { roleList, roleCheckedKeys, roleAssignLoading } = data;
|
||||
const {
|
||||
modalVisible,
|
||||
modalType,
|
||||
initValues,
|
||||
modalRoleVisible,
|
||||
} = this.state;
|
||||
// const {
|
||||
// // modalVisible,
|
||||
// // modalType,
|
||||
// formVals,
|
||||
// modalRoleVisible,
|
||||
// } = this.state;
|
||||
const modalRoleVisible = false;
|
||||
|
||||
const parentMethods = {
|
||||
handleAdd: this.handleAdd,
|
||||
handleModalVisible: this.handleModalVisible,
|
||||
modalType,
|
||||
initValues,
|
||||
};
|
||||
|
||||
// 列表属性
|
||||
const listProps = {
|
||||
dataSource: list,
|
||||
pagination,
|
||||
searchParams,
|
||||
dispatch
|
||||
dispatch,
|
||||
handleModalVisible: this.handleModalVisible, // Function
|
||||
};
|
||||
|
||||
// 搜索表单属性
|
||||
@ -481,6 +471,13 @@ class ResourceList extends PureComponent {
|
||||
};
|
||||
|
||||
// 添加
|
||||
const addFormProps = {
|
||||
modalVisible,
|
||||
modalType: modalType,
|
||||
formVals: formVals,
|
||||
dispatch,
|
||||
handleModalVisible: this.handleModalVisible, // Function
|
||||
};
|
||||
|
||||
return (
|
||||
<PageHeaderWrapper>
|
||||
@ -502,7 +499,7 @@ class ResourceList extends PureComponent {
|
||||
<List {...listProps} />
|
||||
|
||||
</Card>
|
||||
<AddOrUpdateForm {...parentMethods} modalVisible={modalVisible} />
|
||||
<AddOrUpdateForm {...addFormProps} />
|
||||
|
||||
<RoleAssignModal
|
||||
loading={roleAssignLoading}
|
||||
@ -518,4 +515,4 @@ class ResourceList extends PureComponent {
|
||||
}
|
||||
}
|
||||
|
||||
export default ResourceList;
|
||||
export default AdminList;
|
||||
|
||||
@ -1,6 +1,9 @@
|
||||
package cn.iocoder.mall.admin.api.dto;
|
||||
|
||||
import org.hibernate.validator.constraints.Length;
|
||||
|
||||
import javax.validation.constraints.NotEmpty;
|
||||
import javax.validation.constraints.Pattern;
|
||||
|
||||
/**
|
||||
* 管理员添加 DTO
|
||||
@ -11,16 +14,20 @@ public class AdminAddDTO {
|
||||
* 登陆账号
|
||||
*/
|
||||
@NotEmpty(message = "登陆账号不能为空")
|
||||
@Length(min = 6, max = 16, message = "账号长度为 6-16 位")
|
||||
@Pattern(regexp = "^[A-Za-z0-9]+$", message = "账号格式为数字以及字母")
|
||||
private String username;
|
||||
/**
|
||||
* 昵称
|
||||
*/
|
||||
@NotEmpty(message = "昵称不能为空")
|
||||
@Length(max = 10, message = "昵称长度最大为 10 位")
|
||||
private String nickname;
|
||||
/**
|
||||
* 密码
|
||||
*/
|
||||
@NotEmpty(message = "密码不能为空")
|
||||
@Length(min = 6, max = 16, message = "密码长度为 6-16 位")
|
||||
private String password;
|
||||
|
||||
public String getUsername() {
|
||||
|
||||
@ -1,7 +1,10 @@
|
||||
package cn.iocoder.mall.admin.api.dto;
|
||||
|
||||
import org.hibernate.validator.constraints.Length;
|
||||
|
||||
import javax.validation.constraints.NotEmpty;
|
||||
import javax.validation.constraints.NotNull;
|
||||
import javax.validation.constraints.Pattern;
|
||||
|
||||
/**
|
||||
* 管理员更新 DTO
|
||||
@ -17,16 +20,19 @@ public class AdminUpdateDTO {
|
||||
* 登陆账号
|
||||
*/
|
||||
@NotEmpty(message = "登陆账号不能为空")
|
||||
@Length(min = 6, max = 16, message = "账号长度为 6-16 位")
|
||||
@Pattern(regexp = "^[A-Za-z0-9]+$", message = "账号格式为数字以及字母")
|
||||
private String username;
|
||||
/**
|
||||
* 昵称
|
||||
*/
|
||||
@NotEmpty(message = "昵称不能为空")
|
||||
@Length(max = 10, message = "昵称长度最大为 10 位")
|
||||
private String nickname;
|
||||
/**
|
||||
* 密码
|
||||
*/
|
||||
@NotEmpty(message = "密码不能为空")
|
||||
@Length(min = 6, max = 16, message = "密码长度为 6-16 位")
|
||||
private String password;
|
||||
|
||||
public String getUsername() {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user