2BChannelCmsBrowser/src/routes/SoldProduct/index.js

import React, { Component } from 'react';
import { connect } from 'dva';
import {
  Row,
  Col,
  Table,
  Form,
  Card,
  Input,
  Button,
} from 'antd';
import moment from 'moment';
import PageHeaderLayout from '../../layouts/PageHeaderLayout';
import { productType, pageSize } from '../../utils/config';
import styles from './index.less';

@Form.create()
@connect(state => ({ snapshot: state.snapshot }))
export default class SoldProductList extends Component {
  getFormValue = () => {
    const { form } = this.props;
    const { getFieldsValue } = form;
    const filters = getFieldsValue();
    if (filters && filters.time) {
      filters.timeBegin = filters.time[0].format('X');
      filters.timeEnd = filters.time[1].format('X');
      delete filters.time;
    }
    if (filters.orderStatus === 'all') {
      delete filters.orderStatus;
    }
    return filters;
  }

  handleFilterSubmit = (e) => {
    e.preventDefault();
    const filters = this.getFormValue();
    this.props.dispatch({ type: 'snapshot/query', payload: { ...filters, pageSize } });
  }

  handleFilterReset = () => {
    this.props.form.resetFields();
    this.props.dispatch({ type: 'snapshot/query', payload: { pageSize } });
  }

  handleTableChange = (pagination) => {
    const filters = {
      ...this.getFormValue(),
      pageNo: pagination.current,
      pageSize: pagination.pageSize
    };
    this.props.dispatch({ type: 'snapshot/query', payload: { ...filters, pageSize } });
  }

  render() {
    const { snapshot, form } = this.props;
    const { getFieldDecorator } = form;
    const { list, listLoading, pagination } = snapshot;

    const columns = [{
      title: '产品编号',
      dataIndex: 'productCode',
      key: 1,
    }, {
      title: '产品名称',
      dataIndex: 'productName',
      key: 2,
    }, {
      title: '类型',
      dataIndex: 'productType',
      key: 3,
      render: text => productType[text],
    }, {
      title: '终端编号',
      dataIndex: 'userCode',
      key: 4,
    }, {
      title: '终端名称',
      dataIndex: 'userName',
      key: 5,
    }, {
      title: '校区编号',
      dataIndex: 'campusCode',
      key: 6,
    }, {
      title: '校区名称',
      dataIndex: 'campusName',
      key: 7,
    }, {
      title: '渠道价格(¥)',
      dataIndex: 'merchantPrice',
      key: 8,
    }, {
      title: '终端价格(¥)',
      dataIndex: 'terminalPrice',
      key: 9,
    }, {
      title: '数量',
      dataIndex: 'quantity',
      key: 10,
    }, {
      title: '单位',
      dataIndex: 'chargeUnit',
      key: 11,
    }, {
      title: '创建时间',
      dataIndex: 'gmtCreated',
      key: 12,
      render: text => moment(text).format('YYYY-MM-DD HH:mm:ss'),
    }];

    const newPagination = !!pagination && { ...pagination, showSizeChanger: true, showQuickJumper: true, showTotal: total => `共 ${total} 条` };

    return (
      <PageHeaderLayout>
        <Card>
          <Form layout="vertical" className={styles.tableSearchForm} onSubmit={this.handleFilterSubmit}>
            <Row gutter={24}>
              <Col span={6}>
                <Form.Item label="校区名称">
                  {getFieldDecorator('campusName', {
                  })(<Input placeholder="请输入" />)}
                </Form.Item>
              </Col>
              <Col span={6}>
                <Form.Item label="校区编号">
                  {getFieldDecorator('campusCode', {
                  })(<Input placeholder="请输入" />)}
                </Form.Item>
              </Col>
              <Col span={6}>
                <Form.Item label="产品编号">
                  {getFieldDecorator('productCode', {
                  })(<Input placeholder="请输入" />)}
                </Form.Item>
              </Col>
              <Col span={6}>
                <Form.Item label="终端编号">
                  {getFieldDecorator('userCode', {
                  })(<Input placeholder="请输入" />)}
                </Form.Item>
              </Col>
            </Row>
            <Row>
              <Col span={24} style={{ textAlign: 'left' }}>
                <Button type="primary" htmlType="submit">搜索</Button>
                <Button onClick={this.handleFilterReset} style={{ marginLeft: 8 }}>重置</Button>
              </Col>
            </Row>
          </Form>
          <Table
            bordered
            loading={listLoading}
            onChange={this.handleTableChange}
            rowKey={record => record.id}
            columns={columns}
            dataSource={list}
            pagination={newPagination}
            scroll={{ x: 1800 }}
          />
        </Card>
      </PageHeaderLayout>
    );
  }
}