/* eslint-disable no-prototype-builtins,jsx-a11y/media-has-caption */ import React, { Component } from 'react'; import moment from 'moment'; import { connect } from 'dva'; import { routerRedux } from 'dva/router'; import { Card, Button, message } from 'antd'; import Ellipsis from '../../../components/Ellipsis'; import PageHeaderLayout from '../../../layouts/PageHeaderLayout'; import { StandardTableList } from '../../../components/AXList'; import { addRowKey, genAbsolutePicUrl } from '../../../utils/utils'; import styles from './AudioBookList.less'; const Message = message; function deleteBlankKey(obj) { if (!(typeof obj === 'object')) { return; } const newObj = { ...obj }; for (const key in newObj) { if (newObj.hasOwnProperty(key) && !newObj[key]) { delete newObj[key]; } } return newObj; } function genAudioBook(obj = {}) { const { id, code, name, img, audio, status } = obj; return { id, code, name, status, img: img || {}, audio: audio || {}, }; } @connect(({ loading, resource }) => ({ resource, loading: loading.models.resource, })) export default class AudioBookListPage extends Component { constructor(props) { super(props); const { state } = props.location; this.state = { UIParams: (state || {}).UIParams, // 组件的状态参数 Queryers: (state || {}).Queryers, // 查询的条件参数 }; } componentWillMount() { this.props.dispatch({ type: 'resource/clearState', }); } componentDidMount() { this.props.dispatch({ type: 'resource/fetchAudioBookList', payload: { ...this.state.Queryers }, }); } // 创建有声读物(增) handleCreateOperation = () => { const { UIParams, Queryers } = this.state; this.props.dispatch( routerRedux.push({ pathname: '/resource/audiobook-create', state: { UIParams, Queryers }, }) ); }; // 修改有声读物(改) handleUpdateOperation = (item) => { const { UIParams, Queryers } = this.state; this.props.dispatch( routerRedux.push({ pathname: `/resource/audiobook-edit/${item.id}`, state: { UIParams, Queryers, audioBookItem: genAudioBook(item) }, }) ); }; // 查询有声读物(查) handleFilterOperation = (params, states) => { const newParams = deleteBlankKey(params); this.props.dispatch({ type: 'resource/fetchAudioBookList', payload: newParams, }); this.setState({ UIParams: states, Queryers: newParams, }); }; // TODO: 批量操作 handleBatchOperation = () => { Message.info('暂不支持批量操作!'); }; render() { const { loading, resource } = this.props; const { list, totalSize, pageSize, pageNo } = resource; 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: '18%', render: text => ( {text} ), }, { title: '有声读物名称', key: 2, dataIndex: 'name', width: '20%', render: text => ( {text} ), }, { title: '有声读物配图', key: 3, dataIndex: 'img', width: '20%', render: (text) => { const { path } = text || {}; return (
thumb
); }, }, { title: '有声读物音频', key: 4, dataIndex: 'audio', width: '20%', render: (text) => { const { url } = text || {}; return (
); }, }, { title: '修改时间', key: 5, dataIndex: 'gmtModified', render: text => moment(text).format('YYYY-MM-DD HH:mm:ss'), width: '17%', }, { title: '操作', key: 6, dataIndex: 'operation', render: (_, record) => ( ), width: '5%', align: 'right', }]; return ( ); } }