123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869 |
- 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}
- />
- );
- }
- }
|