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

前端：管理员模块修改功能重构
2019-03-21 23:48:58 +08:00 · 2019-03-21 23:48:58 +08:00 · b29844f0d0
parent e3a14c2abb
commit b29844f0d0
5 changed files with 139 additions and 105 deletions
--- a/admin-web/src/components/Dictionary/DictionaryText.js
+++ b/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>
--- a/admin-web/src/models/admin/adminList.js
+++ b/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 }) {
-      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,
+      };
+    }
  },
 };
--- a/admin-web/src/pages/Admin/AdminList.js
+++ b/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({
-        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;
--- a/admin/admin-service-api/src/main/java/cn/iocoder/mall/admin/api/dto/AdminAddDTO.java
+++ b/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() {
--- a/admin/admin-service-api/src/main/java/cn/iocoder/mall/admin/api/dto/AdminUpdateDTO.java
+++ b/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() {