Hotax/src/routes/Resource/AudioBook/AudioBookList.js

/* 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 => (
        <Ellipsis tooltip lines={1}>{text}</Ellipsis>
      ),
    }, {
      title: '有声读物名称',
      key: 2,
      dataIndex: 'name',
      width: '20%',
      render: text => (
        <Ellipsis tooltip lines={1}>{text}</Ellipsis>
      ),
    }, {
      title: '有声读物配图',
      key: 3,
      dataIndex: 'img',
      width: '20%',
      render: (text) => {
        const { path } = text || {};
        return (
          <div className={styles.picWrapper}>
            <img src={genAbsolutePicUrl(path)} alt="thumb" />
          </div>
        );
      },
    }, {
      title: '有声读物音频',
      key: 4,
      dataIndex: 'audio',
      width: '20%',
      render: (text) => {
        const { url } = text || {};
        return (
          <div className={styles.audioWrapper}>
            <audio controls src={url}>浏览器暂不支持播放</audio>
          </div>
        );
      },
    }, {
      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) => (
        <Button
          size="small"
          type="primary"
          className="editBtn"
          onClick={() => this.handleUpdateOperation(record)}
        >编辑
        </Button>
      ),
      width: '5%',
      align: 'right',
    }];
    return (
      <PageHeaderLayout>
        <Card bordered={false}>
          <StandardTableList
            columns={columns}
            loading={loading}
            dataSource={addRowKey(list)}
            header={{
              basicSearch,
              onFilterClick: this.handleFilterOperation,
              onCreateClick: this.handleCreateOperation,
            }}
            footer={{
              pagination,
              batchActions,
              onBatchClick: this.handleBatchOperation,
            }}
            keepUIState={{ ...this.state.UIParams }}
            showStatusSelect={false}
          />
        </Card>
      </PageHeaderLayout>
    );
  }
}