2BCmsBrowser/src/routes/Resource/video/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 { Popover, Modal, Table, Menu, Icon, Badge } from 'antd';
import AnimTableBody from '../../../components/Animation/AnimTableBody';
import { statuses, quality, Codes } from '../../../utils/config'
import styles from './table.less';

const confirm = Modal.confirm;

export default class TableList extends PureComponent {
  static propTypes = {
    location: PropTypes.object,
    onChange: PropTypes.func.isRequired,
    onDeleteItem: PropTypes.func.isRequired,
    onPlayVideo: PropTypes.func.isRequired,
  };

  handleDeleteItem = (record) => {
    const { onDeleteItem } = this.props;
    confirm({
      title: `您确定要${record.status === Codes.CODE_NORMAL ? '删除' : '恢复'}该视频?`,
      onOk () {
        onDeleteItem(record.id);
      },
    })
  }

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

    const columns = [{
      title: '视频编号',
      dataIndex: 'code',
      key: 'code',
    },{
      title: '视频名称',
      dataIndex: 'name',
      key: 'name',
    },{
      title: '视频格式',
      dataIndex: 'format',
      key: 'format',
    },{
      title: '视频质量',
      dataIndex: 'quality',
      key: 'quality',
      render: (text, record) => quality[text],
    },{
      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: 'gmtCreated',
      key: 'gmtCreated',
      render: (text, record) => (
        <div>{moment(text).format('YYYY-MM-DD')}</div>
      )
    },{
      title: '操作',
      dataIndex: 'operation',
      key: 'operation',
      render: (text, record) => (
        <div>
          <a onClick={() => onPlayVideo(record)}>播放</a>
          <span className={styles.splitLine} />
          <a onClick={() => this.handleDeleteItem(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 getBodyWrapperProps = {
      page: location.query.page,
      current: tableProps.pagination.current,
    };
    const getBodyWrapper = (body) => (<AnimTableBody {...getBodyWrapperProps} body={body} />);

    // 视频返回的数据量每页不固定，会出现分页bug，这里截取与pageSize相等
    const pageSize = tableProps.pagination.pageSize;
    const newSource = tableProps.dataSource.slice(0, pageSize);

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