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

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

@@ -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',
+        type: 'changeModalLoading',
-        payload: {
+        payload: false,
-          ...queryParams,
-        },
-      });
-    },
-    *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 }) {
+      // 显示加载中
       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 = {
+    * roleAssign({ payload }, { call, put }) {
-        id: payload.id,
+      const { callback, body } = payload;
-        roleIds: arrayToStringParams(payload.roleIds),
+      // 显示加载中
-      };
+      yield put({
-      const response = yield call(adminRoleAssign, params);
+        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 }) {
+    changeModalLoading(state, { payload }) {
-      console.log('setAll');
+      return {
-      console.log({
         ...state,
-        ...payload,
+        modalLoading: payload,
-      });
+      };
+    },
+    changeListLoading(state, { payload }) {
+      return {
+        ...state,
+        listLoading: payload,
+      };
+    },
+    // 设置所有属性
+    setAll(state, { payload }) {
       return {
         ...state,
         ...payload,

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

@@ -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) => {
+  handleModalVisible = (modalVisible, modalType, record) => {
-    // debugger;
     const { dispatch } = this.props;
     dispatch({
       type: 'adminList/setAll',
       payload: {
         modalVisible,
         modalType,
-        formVals: formVals || {}
+        formVals: record || {}
       },
     });
   };
 
-  handleStatus(row) {
+  handleRoleAssignModalVisible = (roleModalVisible, record) => {
-    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',
+      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 { dispatch,
-    const { roleList, roleCheckedKeys, roleAssignLoading } = data;
+      list, listLoading, searchParams, pagination,
-    // const {
+      modalVisible, modalType, formVals,
-    //   // modalVisible,
+      confirmLoading,
-    //   // modalType,
+      roleList, roleModalVisible, roleAssignLoading, roleCheckedKeys  } = this.props;
-    //   formVals,
-    //   modalRoleVisible,
-    // } = this.state;
-    const modalRoleVisible = false;
-
 
     // 列表属性
     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,
     };
 
-    // 添加
+    // 添加 or 更新表单属性
-    const addFormProps = {
+    const addOrUpdateFormProps = {
       modalVisible,
-      modalType: modalType,
+      modalType,
-      formVals: formVals,
+      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
+        <AddOrUpdateForm {...addOrUpdateFormProps} />
-          loading={roleAssignLoading}
+
-          treeData={roleList}
+        <RoleAssignModal {...roleAssignModal} />
-          checkedKeys={roleCheckedKeys}
-          handleOk={this.handleRoleAssignOK}
-          modalVisible={modalRoleVisible}
-          handleCheckBoxClick={this.handleRoleAssignCheckBoxClick}
-          handleModalVisible={() => this.handleRoleAssignModalVisibleClose(false)}
-        />
       </PageHeaderWrapper>
     );
   }

admin-web/src/utils/tree.utils.js

@@ -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;
   });