2BContentCmsBrowser/src/routes/Product/List/table.js

import React, { PureComponent } from 'react';
import moment from 'moment';
import queryString from 'query-string';
import { Modal, Table, Badge } from 'antd';
import { statuses, productType, Codes } from '../../../utils/config';

export default class TableList extends PureComponent {
  render() {
    const { onViewItem, pagination, ...tableProps } = this.props;

    const columns = [{
      title: '产品编号',
      dataIndex: 'code',
      key: 'code',
      width: '30%',
    }, {
      title: '产品名称',
      dataIndex: 'name',
      key: 'name',
      width: '35%',
    }, {
      title: '产品类型',
      dataIndex: 'type',
      key: 'type',
      render: text => productType[text],
      width: '25%',
    }, {
      title: '产品状态',
      dataIndex: 'status',
      key: 'status',
      render: (text, record) => {
        const statusMap = {[Codes.CODE_NORMAL]: 'success', [Codes.CODE_DELETE]: 'error'};
        return (<Badge status={statusMap[record.status]} text={statuses[record.status]} />);
      },
      width: '15%',
    // }, {
    //   title: '操作',
    //   dataIndex: 'operation',
    //   key: 'operation',
    //   render: (text, record) => <a onClick={() => onViewItem(record)}>查看</a>,
    //   width: '5%',
    }];

    // 配置分页
    tableProps.pagination = !!pagination && { ...pagination, showSizeChanger: true, showQuickJumper: true, showTotal: total => `共 ${total} 条`};

    return (
      <Table
        simple
        bordered
        { ...tableProps }
        columns={columns}
        rowKey={record => record.id}
      />
    );
  }
}