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

import React, { PureComponent } from 'react';
import moment from 'moment';
import { Table, Badge } from 'antd';
import { itemStatuses, Codes, productType } from '../../../utils/config';

export default class TableList extends PureComponent {
  render() {
    const {
      onViewItem,
      pagination,
      ...tableProps
    } = this.props;
    const columns = [{
      title: '产品编号',
      dataIndex: 'code',
      key: 'code',
      width: '25%',
    }, {
      title: '产品名称',
      dataIndex: 'name',
      key: 'name',
      width: '30%',
    }, {
      title: '产品类型',
      dataIndex: 'type',
      key: 'type',
      render: (text, record) => productType[record.type],
      width: '10%',
    }, {
      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={itemStatuses[record.status]} />);
      },
      width: '10%',
    }, {
      title: '修改时间',
      dataIndex: 'gmtModified',
      key: 'gmtModified',
      render: text => (
        <div>{moment(text).format('YYYY-MM-DD HH:mm:ss')}</div>
      ),
      width: '20%',
    }, {
      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}
      />
    );
  }
}