123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128 |
- import React from 'react';
- import moment from 'moment';
- import { Modal, Button } from 'antd';
- import { StandardTableList } from '../../../components/AXList';
- import AXVideoPlayer from '../../../components/AXVideoPlayer';
- import Ellipsis from '../../../components/Ellipsis';
- import { resourceQuality } from '../../../utils/utils';
- function VideoTableList({
- UIParams, dataSource, loading, totalSize, pageSize, pageNo, modalDestroy, currentItem,
- onCreateClick, onUpdateClick, onFilterClick, onBatchClick, onModalCreate,
- onModalDestroy,
- }) {
- const pagination = {
- pageNo,
- pageSize,
- totalSize,
- };
- const batchActions = [{
- key: 'delete',
- name: '批量删除',
- }, {
- key: 'edit',
- name: '批量编辑',
- }];
- const basicSearch = {
- keys: [{
- name: '视频名称',
- field: 'name',
- }, {
- name: '视频编号',
- field: 'code',
- }],
- };
- const columns = [{
- title: '视频编号',
- key: 1,
- dataIndex: 'code',
- width: '15%',
- render: text => (
- <Ellipsis tooltip lines={1}>{text}</Ellipsis>
- ),
- }, {
- title: '视频名称',
- key: 2,
- dataIndex: 'name',
- width: '30%',
- render: text => (
- <Ellipsis tooltip lines={1}>{text}</Ellipsis>
- ),
- }, {
- title: '视频格式',
- key: 3,
- dataIndex: 'format',
- width: '10%',
- }, {
- title: '质量',
- key: 4,
- dataIndex: 'quality',
- render: text => resourceQuality[text],
- width: '10%',
- }, {
- title: '修改时间',
- key: 5,
- dataIndex: 'gmtModified',
- render: text => moment(text).format('YYYY-MM-DD HH:mm:ss'),
- width: '15%',
- }, {
- title: '操作',
- key: 6,
- dataIndex: 'operation',
- render: (_, record) => renderActions(record),
- width: '20%',
- align: 'right',
- }];
- const renderActions = (item) => {
- return (
- <div>
- <Button
- size="small"
- type="primary"
- className="editBtn"
- onClick={() => onUpdateClick(item)}
- >编辑
- </Button>
- <Button
- size="small"
- type="primary"
- className="playBtn"
- onClick={() => onModalCreate(item)}
- >播放
- </Button>
- </div>
- );
- };
- return (
- <div>
- <StandardTableList
- columns={columns}
- loading={loading}
- dataSource={dataSource}
- keepUIState={{ ...UIParams }}
- header={{ basicSearch, onFilterClick, onCreateClick }}
- footer={{ pagination, batchActions, onBatchClick }}
- showStatusSelect={false}
- />
- {!modalDestroy && (
- <Modal
- title={currentItem.name}
- visible
- footer={null}
- onCancel={onModalDestroy}
- maskClosable={false}
- width={800}
- >
- <AXVideoPlayer
- width="100%"
- height="100%"
- url={currentItem.url}
- isM3U8={currentItem.format === 'm3u8'}
- />
- </Modal>
- )}
- </div>
- );
- }
- export default VideoTableList;
|