RealBull/src/routes/Shelves/Course/CourseList.js

import React, { Component } from 'react';
import moment from 'moment';
import { connect } from 'dva';
import { routerRedux } from 'dva/router';
import { Card, Modal, Button, message } from 'antd';
import { StandardTableList } from '../../../components/AXList';
import Ellipsis from '../../../components/Ellipsis';
import { renderStatus, addRowKey } from '../../../utils/utils';

const Message = message;

@connect(({ loading, shelves }) => ({
  shelves,
  loading: loading.models.shelves,
}))
export default class CourseListPage extends Component {
  constructor(props) {
    super(props);
    const { state } = props.location;
    this.state = {
      UIParams: (state || {}).UIParams, // 组件的状态参数
      Queryers: (state || {}).Queryers, // 查询的条件参数
    };
  }
  componentDidMount() {
    this.props.dispatch({
      type: 'shelves/fetchCourseItemList',
      payload: { ...this.state.Queryers },
    });
  }
  handleCreateOperation = () => {
    this.props.dispatch(routerRedux.push({
      pathname: '/shelves/course/create',
      state: this.state,
    }));
  }
  handleDeleteOperation = (item) => {
    Modal.confirm({
      okText: '确定',
      cancelText: '取消',
      title: '你确定要下架该课程吗?',
      content: '下架后该课程将不在对应平台上展现',
      onOk: () => {
        this.props.dispatch({
          type: 'shelves/deleteItem',
          payload: { id: item.id },
          states: this.state,
        });
      },
    });
  }
  handleEditOperation = (item) => {
    this.props.dispatch(routerRedux.push({
      pathname: '/shelves/course/edit',
      state: {
        pid: item.pid,
        merchantId: item.merchantId,
        ...this.state,
      },
    }));
  }
  handleFilterOperation = (params, states) => {
    this.props.dispatch({
      type: 'shelves/fetchCourseItemList',
      payload: params,
    });
    this.setState({
      UIParams: states,
      Queryers: params,
    });
  }
  handleBatchOperation = () => {
    Message.info('暂不支持批量操作!');
  }

  render() {
    const { loading, shelves } = this.props;
    const { list, totalSize, pageSize, pageNo } = shelves;

    const renderOperation = (item) => {
      return (
        <div>
          <Button
            size="small"
            className="editBtn"
            onClick={() => this.handleEditOperation(item)}
          >编辑
          </Button>
          <Button
            size="small"
            className="delBtn"
            onClick={() => this.handleDeleteOperation(item)}
          >下架
          </Button>
        </div>
      );
    };

    const batchActions = [{
      key: 'delete',
      name: '批量删除',
    }, {
      key: 'recovery',
      name: '批量恢复',
    }];
    const basicSearch = {
      keys: [{
        name: '课程编号',
        field: 'code',
      }, {
        name: '课程名称',
        field: 'name',
      }],
    };
    const pagination = {
      pageNo,
      pageSize,
      totalSize,
    };
    const columns = [{
      title: '课程编号',
      key: 1,
      dataIndex: 'code',
      width: '15%',
    }, {
      title: '课程名称',
      key: 2,
      dataIndex: 'name',
      render: text => (
        <Ellipsis tooltip lines={1}>{text}</Ellipsis>
      ),
      width: '30%',
    }, {
      title: '上架渠道',
      key: 3,
      dataIndex: 'merchantName',
      width: '14%',
    }, {
      title: '上架状态',
      key: 4,
      dataIndex: 'status',
      render: text => renderStatus(text, '已下架', '已上架'),
      width: '10%',
    }, {
      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) => renderOperation(record),
      width: '13%',
      align: 'right',
    }];
    return (
      <Card>
        <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 }}
        />
      </Card>
    );
  }
}