基于Ant Design Pro的查询页模版

基于Ant Design Pro开发业务页面时,通用的查询页模版,发布出来方便以后复用。

import React, { PureComponent } from 'react';
import { connect } from 'dva';
import { Card, Divider, Form, Table } from 'antd';

import PageHeaderLayout from '../../layouts/PageHeaderLayout';

@connect(({ loading }) => ({
  loading: loading.models.label,
}))
@Form.create()
export default class List extends PureComponent {
  state = {
    expandForm: false, // 是否展开高级的查询表单
  }

  /* 默认的简单的查询表单 */
  renderSimpleForm = () => {
    return (
      <div>Simple</div>
    );
  }

  /* 高级的查询表单 */
  renderAdvancedForm = () => {
    return (
       <div>Advanced</div>
    );
  }

  /* 渲染查询表单 */
  renderForm = () => {
    const { expandForm } = this.state;
    return expandForm ? this.renderAdvancedForm() : this.renderSimpleForm();
  }

  /* 渲染查询后的结果 */
  renderResult = () => {
    const { loading } = this.props;

    const dataSource = [];
    const columns = [];
    const currentPage = 1;
    const pageSize = 20;
    const total = 0;

    return (
       <Table
        dataSource={dataSource}
        columns={columns}
        loading={loading}
        pagination={{
          current: currentPage,
          pageSize,
          total,
          showTotal: t => `总 ${t} 条`,
          showSizeChanger: true,
          onChange: this.handleChange,
          onShowSizeChange: this.handleChange,
        }}
      />
    );
  }

  /* 查询时的逻辑处理 */
  handleSearch = () => {

  }

  /* 页码、每页最大条数改变时的逻辑处理 */
  handleChange = () => {

  }

  /* 界面布部 */
  render() {
    return (
       <PageHeaderLayout>
         <Card>
           <div style={{ marginTop: 30 }}>
            {this.renderForm()}
           </div>
           <Divider />
          {this.renderResult()}
         </Card>
       </PageHeaderLayout>
    );
  }
}

render函数侧重于界面的布部。
render*函数侧重于单元组件的渲染。
handleSearch函数是提交查询时的处理,例如参数处理,并发起异步请求。
handleChange函数是表格页码或者最大条数发生改变时,触发的处理逻辑。

You Might Also Like
发表评论