前端：管理员模块添加功能重构

前端：管理员模块修改功能重构

admin-web/src/components/Dictionary/DictionaryText.js

@@ -5,7 +5,7 @@ export default class DictionaryText extends PureComponent {
   componentDidMount() {}
 
   render() {
-    debugger;
+    // debugger;
     const { dicKey, dicValue } = this.props;
     return (
       <DictionaryContext.Consumer>

admin-web/src/models/admin/adminList.js

@@ -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 }) {
+    * add({ payload }, { call, put }) {
-      const { callback, body, queryParams } = payload;
+      const { callback, body } = payload;
       const response = yield call(addAdmin, body);
-      if (callback) {
+      if (response.code === 0) {
-        callback(response);
+        if (callback) {
+          callback(response);
+        }
+        // 刷新列表
+        yield put({
+          type: 'query',
+          payload: {
+            ...PaginationHelper.defaultPayload
+          },
+        });
       }
-      yield put({
-        type: 'query',
-        payload: {
-          ...queryParams,
-        },
-      });
     },
-    *update({ payload }, { call, put }) {
+    * update({ payload }, { call, put }) {
-      const { callback, body, queryParams } = payload;
+      const { callback, body } = payload;
       const response = yield call(updateAdmin, body);
-      if (callback) {
+      if (response.code === 0) {
-        callback(response);
+        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,
+      };
+    }
   },
 };

admin-web/src/pages/Admin/AdminList.js

@@ -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({
+      if (modalType === 'add') {
-        fields: fieldsValue,
+        dispatch({
-        modalType,
+          type: 'adminList/add',
-        initValues,
+          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'}],
+            {max: 10, message: '姓名最大长度为 10'}],
-          initialValue: initValues.nickname,
+          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位'}],
+            {max: 16, min: 6, message: '长度为 6-18 位'}],
-          initialValue: initValues.password,
+          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) => {
+  handleModalVisible = (modalVisible, modalType, formVals) => {
-    this.setState({
+    // debugger;
-      modalVisible: !!flag,
+    const { dispatch } = this.props;
-      initValues: initValues || {},
+    dispatch({
-      modalType: modalType || 'add',
+      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;
+    // let that = this;
-    const { dispatch, list, searchParams, pagination,  data } = this.props;
+    const { dispatch, list, searchParams, pagination, modalVisible, data, modalType, formVals } = this.props;
     const { roleList, roleCheckedKeys, roleAssignLoading } = data;
-    const {
+    // const {
-      modalVisible,
+    //   // modalVisible,
-      modalType,
+    //   // modalType,
-      initValues,
+    //   formVals,
-      modalRoleVisible,
+    //   modalRoleVisible,
-    } = this.state;
+    // } = 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;

admin/admin-service-api/src/main/java/cn/iocoder/mall/admin/api/dto/AdminAddDTO.java

@@ -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() {

admin/admin-service-api/src/main/java/cn/iocoder/mall/admin/api/dto/AdminUpdateDTO.java

@@ -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() {