前端：重构管理员模块~

2019-03-20 23:23:43 +08:00 · 2019-03-20 23:23:43 +08:00 · f2125e49cf
commit f2125e49cf
parent b384179610
6 changed files with 276 additions and 153 deletions
--- a/admin-web/helpers/PaginationHelper.js
+++ b/admin-web/helpers/PaginationHelper.js
@ -0,0 +1,57 @@
+const DEFAULT_PAGE_NO = 1;
+const DEFAULT_PAGE_SIZE = 10;
+
+class PaginationHelper {
+
+  static defaultPaginationConfig = {
+    defaultCurrent: DEFAULT_PAGE_NO,
+    defaultPageSize: DEFAULT_PAGE_SIZE,
+    current: DEFAULT_PAGE_NO,
+    total: 0,
+    pageSize: DEFAULT_PAGE_SIZE,
+    showSizeChanger: true,
+    showQuickJumper: true,
+    showTotal: total => `共 ${total} 条`
+  };
+
+  static formatPagination(data) {
+    return {
+      defaultCurrent: DEFAULT_PAGE_NO,
+      defaultPageSize: DEFAULT_PAGE_SIZE,
+      current: data.current,
+      total: data.total,
+      pageSize: data.size,
+      showSizeChanger: true,
+      showQuickJumper: true,
+      showTotal: total => `共 ${total} 条`,
+    };
+  };
+
+  /**
+   * data.total 数据总数
+   * payload.pageNo 页码
+   * payload.pageSize 每页总数
+   */
+  static formatPagination(data, payload) {
+    return {
+      defaultCurrent: DEFAULT_PAGE_NO,
+      defaultPageSize: DEFAULT_PAGE_SIZE,
+      current: payload.pageNo,
+      pageSize: payload.pageSize,
+      total: data.total,
+      showSizeChanger: true,
+      showQuickJumper: true,
+      showTotal: total => `共 ${total} 条`,
+    };
+  };
+
+  //获取初始页码
+  static defaultPayload = {
+    pageNo: DEFAULT_PAGE_NO,
+    pageSize: DEFAULT_PAGE_SIZE
+  }
+
+}
+
+export default PaginationHelper;
+export {PaginationHelper};
--- a/admin-web/src/models/admin/adminList.js
+++ b/admin-web/src/models/admin/adminList.js
@ -2,23 +2,27 @@ import { message } from 'antd';
 import {buildTreeNode, findCheckedKeys} from '../../utils/tree.utils';
 import {
  addAdmin,
-  updateAdmin,
-  updateAdminStatus,
+  adminRoleAssign,
  deleteAdmin,
  queryAdmin,
  queryAdminRoleList,
-  adminRoleAssign,
+  updateAdmin,
+  updateAdminStatus,
 } from '../../services/admin';
 import {arrayToStringParams} from '../../utils/request.qs';
+import PaginationHelper from '../../../helpers/PaginationHelper';
+
+const SEARCH_PARAMS_DEFAULT = {
+  nickname: '',
+};

 export default {
  namespace: 'adminList',

  state: {
    list: [],
-    count: 0,
-    pageNo: 0,
-    pageSize: 10,
+    searchParams: SEARCH_PARAMS_DEFAULT,
+    pagination: PaginationHelper.defaultPaginationConfig,

    roleList: [],
    roleCheckedKeys: [],
@ -26,6 +30,20 @@ export default {
  },

  effects: {
+    // 查询列表
+    * query({ payload }, { call, put }) {
+      const response = yield call(queryAdmin, payload);
+      yield put({
+        type: 'querySuccess',
+        payload: {
+          list: response.data.list,
+          pagination: PaginationHelper.formatPagination(response.data, payload),
+          searchParams: {
+            nickname: payload.nickname || ''
+          }
+        },
+      });
+    },
    *add({ payload }, { call, put }) {
      const { callback, body, queryParams } = payload;
      const response = yield call(addAdmin, body);
@ -74,18 +92,7 @@ export default {
        },
      });
    },
-    *query({ payload }, { call, put }) {
-      const response = yield call(queryAdmin, payload);
-      const { count, admins } = response.data;
-      yield put({
-        type: 'querySuccess',
-        payload: {
-          list: admins,
-          count,
-          pageNo: payload.pageNo + 1
-        },
-      });
-    },
+
    *queryRoleList({ payload }, { call, put }) {
      yield put({
        type: 'changeRoleAssignLoading',
--- a/admin-web/src/pages/Admin/AdminList.js
+++ b/admin-web/src/pages/Admin/AdminList.js
@ -8,14 +8,147 @@ import PageHeaderWrapper from '@/components/PageHeaderWrapper';

 import styles from './AdminList.less';
 import moment from "moment";
-import Pagination from "antd/es/pagination";
+import PaginationHelper from "../../../helpers/PaginationHelper";

 const FormItem = Form.Item;
 const { TreeNode } = Tree;
 const status = ['未知', '正常', '禁用'];

+// 列表
+function List ({ dataSource, pagination, searchParams, dispatch }) {
+  const columns = [
+    {
+      title: '用户名',
+      dataIndex: 'username'
+    },
+    {
+      title: '昵称',
+      dataIndex: 'nickname',
+    },
+    {
+      title: '状态',
+      dataIndex: 'status',
+      render(val) {
+        return <span>{status[val]}</span>; // TODO 芋艿，此处要改
+      },
+    },
+    {
+      title: '创建时间',
+      dataIndex: 'createTime',
+      render: val => <span>{moment(val).format('YYYY-MM-DD HH:mm')}</span>,
+    },
+    {
+      title: '操作',
+      width: 360,
+      render: (text, record) => {
+        const statusText = record.status === 1 ? '禁用' : '禁用';
+        return (
+          <Fragment>
+            <a onClick={() => this.handleModalVisible(true, 'update', record)}>编辑</a>
+            <Divider type="vertical" />
+            <a onClick={() => this.handleRoleAssign(record)}>角色分配</a>
+            <Divider type="vertical" />
+            <a className={styles.tableDelete} onClick={() => this.handleStatus(record)}>
+              {statusText}
+            </a>
+            <Divider type="vertical" />
+            <a className={styles.tableDelete} onClick={() => this.handleDelete(record)}>
+              删除
+            </a>
+          </Fragment>
+        );
+      },
+    },
+  ];
+
+  function onPageChange(page) {
+    dispatch({
+      type: 'adminList/query',
+      payload: {
+        pageNo: page.current,
+        pageSize: page.pageSize,
+        ...searchParams
+      }
+    })
+  };
+
+  return (
+    <Table
+      columns={columns}
+      dataSource={dataSource}
+      rowKey="id"
+      // pagination={{
+      //   current: pageNo,
+      //   pageSize: pageSize,
+      //   total: count,
+      //   onChange: this.onPageChange
+      // }}
+      pagination={pagination}
+      onChange={onPageChange}
+    />
+  )
+}
+
+// 搜索表单
+// TODO 芋艿，有没办法换成上面那种写法
+const SearchForm = Form.create()(props => {
+  const {
+    form,
+    form: { getFieldDecorator },
+    dispatch
+  } = props;
+
+  function search() {
+    dispatch({
+      type: 'adminList/query',
+      payload: {
+        ...PaginationHelper.defaultPayload,
+        ...form.getFieldsValue()
+      }
+    })
+  }
+
+  // 提交搜索
+  function handleSubmit(e) {
+    // 阻止默认事件
+    e.preventDefault();
+    // 提交搜索
+    search();
+  }
+
+  // 重置搜索
+  function handleReset() {
+    // 重置表单
+    form.resetFields();
+    // 执行搜索
+    search();
+  }
+
+  return (
+    <Form onSubmit={handleSubmit} layout="inline">
+      <Row gutter={{ md: 8, lg: 24, xl: 48 }}>
+        <Col md={8} sm={24}>
+          <FormItem label="昵称">
+            {getFieldDecorator('nickname')(<Input placeholder="请输入" />)}
+          </FormItem>
+        </Col>
+        <Col md={8} sm={24}>
+            <span className={styles.submitButtons}>
+              <Button type="primary" htmlType="submit">
+                查询
+              </Button>
+              <Button style={{ marginLeft: 8 }} onClick={handleReset}>
+                重置
+              </Button>
+            </span>
+        </Col>
+      </Row>
+    </Form>
+  );
+});
+
 // 添加 form 表单
-const CreateForm = Form.create()(props => {
+const AddOrUpdateForm = Form.create()(props => {
  const { modalVisible, form, handleAdd, handleModalVisible, modalType, initValues } = props;

  const okHandle = () => {
@ -30,10 +163,6 @@ const CreateForm = Form.create()(props => {
    });
  };

-  const selectStyle = {
-    width: 200,
-  };
-
  const title = modalType === 'add' ? '新建管理员' : '更新管理员';
  return (
    <Modal
@ -144,17 +273,23 @@ const RoleAssignModal = Form.create()(props => {
 });

@connect(({ adminList, loading }) => ({
-  list: adminList.list,
+  // list: adminList.list,
+  // pagination: adminList.pagination,
+  ...adminList,
  data: adminList,
  loading: loading.models.resourceList,
 }))
+
@Form.create()
 class ResourceList extends PureComponent {
  state = {
+    // 添加 or 修改弹窗
    modalVisible: false,
-    modalType: 'add', //add update
+    modalType: undefined, // 'add' or 'update'
+
    initValues: {},

+    // 分配角色弹窗
    modalRoleVisible: false,
    modalRoleRow: {},
  };
@ -163,7 +298,9 @@ class ResourceList extends PureComponent {
    const { dispatch } = this.props;
    dispatch({
      type: 'adminList/query',
-      payload: {},
+      payload: {
+        ...PaginationHelper.defaultPayload
+      },
    });
  }

@ -312,54 +449,14 @@ class ResourceList extends PureComponent {
    });
  };

-  onPageChange = (page = {}) => {
-    const { dispatch } = this.props;
-    // debugger;
-    dispatch({
-      type: 'adminList/query',
-      payload: {
-        pageNo: page - 1,
-        pageSize: 10,
-      }
-    });
-  }
-
-  renderSimpleForm() { // TODO 芋艿，搜索功能未完成
-    const {
-      form: { getFieldDecorator },
-    } = this.props;
-    return (
-      <Form onSubmit={this.handleSearch} layout="inline">
-        <Row gutter={{ md: 8, lg: 24, xl: 48 }}>
-          <Col md={8} sm={24}>
-            <FormItem label="昵称">
-              {getFieldDecorator('name')(<Input placeholder="请输入" />)}
-            </FormItem>
-          </Col>
-          <Col md={8} sm={24}>
-            <span className={styles.submitButtons}>
-              <Button type="primary" htmlType="submit">
-                查询
-              </Button>
-              <Button style={{ marginLeft: 8 }} onClick={this.handleFormReset}>
-                重置
-              </Button>
-            </span>
-          </Col>
-        </Row>
-      </Form>
-    );
-  }
-
  render() {
    let that = this;
-    const { list,  data } = this.props;
-    const { count, pageNo, pageSize, roleList, roleCheckedKeys, roleAssignLoading } = data;
+    const { dispatch, list, searchParams, pagination,  data } = this.props;
+    const { roleList, roleCheckedKeys, roleAssignLoading } = data;
    const {
      modalVisible,
      modalType,
      initValues,
-      defaultExpandAllRows,
      modalRoleVisible,
    } = this.state;

@ -370,56 +467,28 @@ class ResourceList extends PureComponent {
      initValues,
    };

-    const columns = [
-      {
-        title: '用户名',
-        dataIndex: 'username'
-      },
-      {
-        title: '昵称',
-        dataIndex: 'nickname',
-      },
-      {
-        title: '状态',
-        dataIndex: 'status',
-        render(val) {
-          return <span>{status[val]}</span>; // TODO 芋艿，此处要改
-        },
-      },
-      {
-        title: '创建时间',
-        dataIndex: 'createTime',
-        render: val => <span>{moment(val).format('YYYY-MM-DD HH:mm')}</span>,
-      },
-      {
-        title: '操作',
-        width: 360,
-        render: (text, record) => {
-          const statusText = record.status === 1 ? '禁用' : '禁用';
-          return (
-            <Fragment>
-              <a onClick={() => this.handleModalVisible(true, 'update', record)}>编辑</a>
-              <Divider type="vertical" />
-              <a onClick={() => this.handleRoleAssign(record)}>角色分配</a>
-              <Divider type="vertical" />
-              <a className={styles.tableDelete} onClick={() => this.handleStatus(record)}>
-                {statusText}
-              </a>
-              <Divider type="vertical" />
-              <a className={styles.tableDelete} onClick={() => this.handleDelete(record)}>
-                删除
-              </a>
-            </Fragment>
-          );
-        },
-      },
-    ];
+    // 列表属性
+    const listProps = {
+      dataSource: list,
+      pagination,
+      searchParams,
+      dispatch
+    };
+
+    // 搜索表单属性
+    const searchFormProps = {
+      dispatch,
+    };
+
+    // 添加

    return (
      <PageHeaderWrapper>
        <Card bordered={false}>
          <div className={styles.tableList}>
-            <div className={styles.tableListForm}>{that.renderSimpleForm()}</div>
+            <div className={styles.tableListForm}>
+              <SearchForm {...searchFormProps} />
+            </div>
            <div className={styles.tableListOperator}>
              <Button
                icon="plus"
@ -430,20 +499,10 @@ class ResourceList extends PureComponent {
              </Button>
            </div>
          </div>
-          <Table
-            defaultExpandAllRows={defaultExpandAllRows}
-            columns={columns}
-            dataSource={list}
-            rowKey="id"
-            pagination={{
-              current: pageNo,
-              pageSize: pageSize,
-              total: count,
-              onChange: this.onPageChange
-            }}
-          />
+          <List {...listProps} />
+
        </Card>
-        <CreateForm {...parentMethods} modalVisible={modalVisible} />
+        <AddOrUpdateForm {...parentMethods} modalVisible={modalVisible} />

        <RoleAssignModal
          loading={roleAssignLoading}
--- a/admin/admin-application/src/main/java/cn/iocoder/mall/admin/application/vo/AdminPageVO.java
+++ b/admin/admin-application/src/main/java/cn/iocoder/mall/admin/application/vo/AdminPageVO.java
@ -9,25 +9,25 @@ import java.util.List;
 public class AdminPageVO {

    @ApiModelProperty(value = "管理员数组")
-    private List<AdminVO> admins;
+    private List<AdminVO> list;
    @ApiModelProperty(value = "管理员总数")
-    private Integer count;
+    private Integer total;

-    public List<AdminVO> getAdmins() {
-        return admins;
+    public List<AdminVO> getList() {
+        return list;
    }

-    public AdminPageVO setAdmins(List<AdminVO> admins) {
-        this.admins = admins;
+    public AdminPageVO setList(List<AdminVO> list) {
+        this.list = list;
        return this;
    }

-    public Integer getCount() {
-        return count;
+    public Integer getTotal() {
+        return total;
    }

-    public AdminPageVO setCount(Integer count) {
-        this.count = count;
+    public AdminPageVO setTotal(Integer total) {
+        this.total = total;
        return this;
    }

--- a/admin/admin-service-api/src/main/java/cn/iocoder/mall/admin/api/bo/AdminPageBO.java
+++ b/admin/admin-service-api/src/main/java/cn/iocoder/mall/admin/api/bo/AdminPageBO.java
@ -7,27 +7,27 @@ public class AdminPageBO {
    /**
     * 管理员数组
     */
-    private List<AdminBO> admins;
+    private List<AdminBO> list;
    /**
     * 总量
     */
-    private Integer count;
+    private Integer total;

-    public List<AdminBO> getAdmins() {
-        return admins;
+    public List<AdminBO> getList() {
+        return list;
    }

-    public AdminPageBO setAdmins(List<AdminBO> admins) {
-        this.admins = admins;
+    public AdminPageBO setList(List<AdminBO> list) {
+        this.list = list;
        return this;
    }

-    public Integer getCount() {
-        return count;
+    public Integer getTotal() {
+        return total;
    }

-    public AdminPageBO setCount(Integer count) {
-        this.count = count;
+    public AdminPageBO setTotal(Integer total) {
+        this.total = total;
        return this;
    }

--- a/admin/admin-service-impl/src/main/java/cn/iocoder/mall/admin/service/AdminServiceImpl.java
+++ b/admin/admin-service-impl/src/main/java/cn/iocoder/mall/admin/service/AdminServiceImpl.java
@ -70,11 +70,11 @@ public class AdminServiceImpl implements AdminService {
    public CommonResult<AdminPageBO> getAdminPage(AdminPageDTO adminPageDTO) {
        AdminPageBO adminPage = new AdminPageBO();
        // 查询分页数据
-        int offset = adminPageDTO.getPageNo() * adminPageDTO.getPageSize();
-        adminPage.setAdmins(AdminConvert.INSTANCE.convert(adminMapper.selectListByNicknameLike(adminPageDTO.getNickname(),
+        int offset = (adminPageDTO.getPageNo() - 1) * adminPageDTO.getPageSize();
+        adminPage.setList(AdminConvert.INSTANCE.convert(adminMapper.selectListByNicknameLike(adminPageDTO.getNickname(),
                offset, adminPageDTO.getPageSize())));
        // 查询分页总数
-        adminPage.setCount(adminMapper.selectCountByNicknameLike(adminPageDTO.getNickname()));
+        adminPage.setTotal(adminMapper.selectCountByNicknameLike(adminPageDTO.getNickname()));
        return CommonResult.success(adminPage);
    }