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

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

@Form.create()
@connect(state => ({ snapshot: state.snapshot }))
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 { snapshot } = this.props;
    const { list, listLoading } = snapshot;

    // 表格-列对象
    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}>
          <span>筛选<Icon type="filter" /></span>
          <div>
            <Table
              loading={listLoading}
              bordered
              rowKey={(record) => record.id}
              columns={columns}
              dataSource={list}
              scroll={{ x: 1800 }}
            />
          </div>
        </div>
      </Card>
    );
  }
}