2BCmsBrowser/src/routes/Resource/gallery/table.js

import React, { PureComponent } from 'react';
import PropTypes from 'prop-types';
import moment from 'moment';
import classnames from 'classnames';
import queryString from 'query-string';
import { Divider, Popover, Modal, Table, Menu, Icon, Badge } from 'antd';
import AnimTableBody from '../../../components/Animation/AnimTableBody';
import { statuses, Codes, ossHost } from '../../../utils/config'
import styles from './table.less';

export default class TableList extends PureComponent {

  handleOperateItem = (record) => {
    const { onDeleteItem, onRecoverItem } = this.props;
    Modal.confirm({
      title: `您确定要${record.status === Codes.CODE_NORMAL ? '删除' : '恢复'}该图片?`,
      onOk () {
        if (record.status === Codes.CODE_NORMAL) {
          onDeleteItem({ id: record.id });
        } else if (record.status === Codes.CODE_DELETE) {
          onRecoverItem({ id: record.id, status: Codes.CODE_NORMAL });
        }
      },
    })
  }

  render() {
    const { curStatus, onDeleteItem, onEditItem, location, pagination, ...tableProps } = this.props;

    const columns = [{
      title: '缩略图',
      dataIndex: 'url',
      key: 'url',
      render: (text, record) => (
        <Popover
          content={<img alt="" src={`${ossHost}/${record.path}`} width={250} />}
          title={record.name}
          placement="top"
        >
          <img alt="" src={`${ossHost}/${record.path}`} width={70} />
        </Popover>
      )
    },{
      title: '图片编号',
      dataIndex: 'code',
      key: 'code',
    },{
      title: '图片名称',
      dataIndex: 'name',
      key: 'name',
    },{
      title: '图片大小(B)',
      dataIndex: 'size',
      key: 'size',
    },{
      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]} />);
      },
      filters: Object.keys(statuses).map(key => ({ text: statuses[key], value: key })),
      filterMultiple: false,
      filteredValue: [curStatus],
    },{
      title: '修改时间',
      dataIndex: 'gmtModified',
      key: 'gmtModified',
      render: (text, record) => (
        <div>{moment(text).format('YYYY-MM-DD')}</div>
      )
    },{
      title: '操作',
      dataIndex: 'operation',
      key: 'operation',
      render: (text, record) => (
        <div>
          <a onClick={() => onEditItem(record)}>编辑</a>
          <Divider type="vertical" />
          <a onClick={() => this.handleOperateItem(record)}>{record.status === Codes.CODE_NORMAL ? '删除' : '恢复'}</a>
        </div>
      )
    }];

    // 数据table列表表头的筛选按钮点击重置后status值为空，此时删除该参数
    columns.map(item => {
      item.dataIndex === 'status' && !curStatus ? delete item.filteredValue : null;
    });

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

    // 添加动画
    const AnimationTableBody = (props) => (<AnimTableBody {...props}/>);

    return (
      <Table
        simple
        bordered
        { ...tableProps }
        columns={columns}
        className={classnames({ [styles.table]: true, [styles.motion]: true })}
        rowKey={record => record.id}
        components={{
          body: { wrapper: AnimationTableBody }
        }}
      />
    );
  }
}