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

import React, { Component } from 'react';
import { Table, Card, Form, Row, Col, Input, Select, DatePicker } from 'antd';
import moment from 'moment';
import { productType } from '../../utils/config';
import styles from './index.less';

@Form.create()
export default class SoldProductList extends Component {
  render() {
    // 模拟数据
    const mockData = [];
    for (let i = 1; i < 2000; i++) {
      mockData.push({
        id: i,
        productCode: 'C-001',
        productName: '小学语文二年级上册',
        productType: 'COURSE',
        userCode: '1500024398001',
        userName: '教室六',
        campusCode: '1500024398',
        campusName: '湖南省-长沙市天水区-育新小学',
        merchantName: '贝尔安亲',
        cpPrice: 1000.85,
        merchantPrice: 20000.890,
        terminalPrice: 21000,
        chargeUnit: '年',
        quantity: 1,
        gmtCreated: 1590000134,
      });
    }

    // 表格-列对象
    const columns = [{
      title: '产品编号',
      dataIndex: 'productCode',
      key: 1, // 设置了dataIndex可忽略这个属性
    }, {
      title: '产品名称',
      dataIndex: 'productName',
      key: 2,
    }, {
      title: '产品类型',
      dataIndex: 'productType',
      key: 3,
      render: (text, record) => productType[text],
    }, {
      title: '终端编号',
      dataIndex: 'userCode',
      key: 4,
    }, {
      title: '终端名称',
      dataIndex: 'userName',
      key: 5,
    }, {
      title: '校区编号',
      dataIndex: 'campusCode',
      key: 6,
    }, {
      title: '校区名称',
      dataIndex: 'campusName',
      key: 7,
    }, {
      title: '渠道名称',
      dataIndex: 'merchantName',
      key: 8,
    }, {
      title: '供应商价格(¥)',
      dataIndex: 'cpPrice',
      key: 9,
    }, {
      title: '渠道价格(¥)',
      dataIndex: 'merchantPrice',
      key: 10,
    }, {
      title: '终端价格(¥)',
      dataIndex: 'terminalPrice',
      key: 11,
    }, {
      title: '数量',
      dataIndex: 'quantity',
      key: 12,
    }, {
      title: '计价单位',
      dataIndex: 'chargeUnit',
      key: 13,
    }, {
      title: '创建时间',
      dataIndex: 'gmtCreated',
      key: 14,
      render: (text, record) => moment(text).format('YYYY-MM-DD HH:mm:ss'),
    }];

    const { getFieldDecorator } = this.props.form;

    return (
      <Card>
        <div className={styles.tableList}>
          <div className={styles.tableListForm}>
            <Form layout="inline">
              <Row gutter={{ md: 8, lg: 24, xl: 48 }}>
                <Col md={8} sm={24}>
                  <Form.Item label="渠道">
                    {getFieldDecorator('merchantId')(
                      <Input placeholder="请选择" />
                    )}
                  </Form.Item>
                </Col>
                <Col md={8} sm={24}>
                  <Form.Item label="校区">
                    {getFieldDecorator('campusId')(
                      <Input placeholder="请选择" />
                    )}
                  </Form.Item>
                </Col>
                <Col md={8} sm={24}>
                  <Form.Item label="终端">
                    {getFieldDecorator('uid')(
                      <Input placeholder="请选择" />
                    )}
                  </Form.Item>
                </Col>
              </Row>
              <Row gutter={{ md: 8, lg: 24, xl: 48 }}>
                <Col md={8} sm={24}>
                  <Form.Item label="产品类型">
                    {getFieldDecorator('productType')(
                      <Input placeholder="请选择" />
                    )}
                  </Form.Item>
                </Col>
                <Col md={8} sm={24}>
                  <Form.Item label="产品名称">
                    {getFieldDecorator('productName')(
                      <Input placeholder="请输入" />
                    )}
                  </Form.Item>
                </Col>
                <Col md={8} sm={24}>
                  <Form.Item label="产品编号">
                    {getFieldDecorator('productCode')(
                      <Input placeholder="请输入" />
                    )}
                  </Form.Item>
                </Col>
              </Row>
              <Row gutter={{ md: 8, lg: 24, xl: 48 }}>
                <Col md={8} sm={24}>
                  <Form.Item label="时间范围">
                    {getFieldDecorator('time')(
                      <DatePicker />
                    )}
                  </Form.Item>
                </Col>
                <Col md={8} sm={24}>
                  <Form.Item label="至">
                    {getFieldDecorator('time')(
                      <DatePicker />
                    )}
                  </Form.Item>
                </Col>
              </Row>
            </Form>
          </div>
          <div>
            <Table
              bordered
              rowKey={record => record.id}
              columns={columns}
              dataSource={mockData}
              scroll={{ x: 1800 }}
            />
          </div>
        </div>
      </Card>
    );
  }
}