table.js 1.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869
  1. import React, { PureComponent } from 'react';
  2. import moment from 'moment';
  3. import { Table, Badge } from 'antd';
  4. import { itemStatuses, Codes, productType } from '../../../utils/config';
  5. export default class TableList extends PureComponent {
  6. render() {
  7. const {
  8. onViewItem,
  9. pagination,
  10. ...tableProps
  11. } = this.props;
  12. const columns = [{
  13. title: '产品编号',
  14. dataIndex: 'code',
  15. key: 'code',
  16. width: '25%',
  17. }, {
  18. title: '产品名称',
  19. dataIndex: 'name',
  20. key: 'name',
  21. width: '30%',
  22. }, {
  23. title: '产品类型',
  24. dataIndex: 'type',
  25. key: 'type',
  26. render: (text, record) => productType[record.type],
  27. width: '10%',
  28. }, {
  29. title: '状态',
  30. dataIndex: 'status',
  31. key: 'status',
  32. render: (text, record) => {
  33. const statusMap = { [Codes.CODE_NORMAL]: 'success', [Codes.CODE_DELETE]: 'error' };
  34. return (<Badge status={statusMap[record.status]} text={itemStatuses[record.status]} />);
  35. },
  36. width: '10%',
  37. }, {
  38. title: '修改时间',
  39. dataIndex: 'gmtModified',
  40. key: 'gmtModified',
  41. render: text => (
  42. <div>{moment(text).format('YYYY-MM-DD HH:mm:ss')}</div>
  43. ),
  44. width: '20%',
  45. }, {
  46. title: '操作',
  47. dataIndex: 'operation',
  48. key: 'operation',
  49. render: (text, record) => (
  50. <a onClick={() => onViewItem(record)}>查看</a>
  51. ),
  52. width: '5%',
  53. }];
  54. // 配置分页
  55. tableProps.pagination = !!pagination && { ...pagination, showSizeChanger: true, showQuickJumper: true, showTotal: total => `共 ${total} 条` };
  56. return (
  57. <Table
  58. simple
  59. bordered
  60. {...tableProps}
  61. columns={columns}
  62. rowKey={record => record.id}
  63. />
  64. );
  65. }
  66. }