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, 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: '视频大小(B)', dataIndex: 'size', key: 'size', },{ title: '状态', dataIndex: 'status', key: 'status', render: (text, record) => { const statusMap = {[Codes.CODE_NORMAL]: 'success', [Codes.CODE_DELETE]: 'error'}; return (); }, filters: Object.keys(statuses).map(key => ({ text: statuses[key], value: key })), filterMultiple: false, filteredValue: [curStatus], },{ title: '添加时间', dataIndex: 'gmtCreated', key: 'gmtCreated', render: (text, record) => (
{moment(text).format('YYYY-MM-DD')}
) },{ title: '操作', dataIndex: 'operation', key: 'operation', render: (text, record) => (
onPlayVideo(record)}>播放 this.handleDeleteItem(record)}>{record.status === Codes.CODE_NORMAL ? '删除' : '恢复'}
) }]; // 数据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) => (); return ( record.id} getBodyWrapper={getBodyWrapper} /> ); } }