Hotax/src/routes/Resource/PictureList.js

import React, { Component } from 'react';
import { connect } from 'dva';
import { routerRedux } from 'dva/router';
import { Card, Modal, Button, message } from 'antd';
import PictureCardList from './PictureCardList';
import PictureTableList from './PictureTableList';

const Message = message;

@connect(({ resource, loading }) => ({
  resource,
  loading: loading.models.resource,
}))
export default class PictureListPage extends Component {
  constructor(props) {
    super(props);
    const { state } = props.location;
    this.state = {
      UIParams: (state || {}).UIParams, // 组件的状态参数
      Queryers: (state || {}).Queryers, // 查询的条件参数
      isCard: true,
    };
  }
  componentDidMount() {
    this.props.dispatch({
      type: 'resource/fetchImageList',
      payload: { ...this.state.Queryers },
    });
  }
  handleShowTypeChange = () => {
    this.setState({ isCard: !!!this.state.isCard });
  }
  // 增加
  handleCreateOperation = () => {
    // 页面跳转把这些参数传递过去，返回的时候再传回来，来保证组件等状态不变
    const { Queryers, UIParams } = this.state;
    this.props.dispatch(
      routerRedux.push({
        pathname: '/resource/imageCreate/single',
        state: {
          Queryers,
          UIParams,
        },
      })
    );
  }
  // 删除
  handleDeleteOperation = (item) => {
    Modal.confirm({
      okText: '确定',
      cancelText: '取消',
      title: '你确定要删除这张图片吗?',
      content: '删除后所有与之关联的课件将不再显示该图片',
      onOk: () => {
        this.props.dispatch({
          type: 'resource/deleteImage',
          payload: { id: item.id },
        });
      },
    });
  }
  // 修改
  handleEditOperation = () => {

  }
  // 查询
  handleFilterOperation = (params, states) => {
    this.props.dispatch({
      type: 'resource/fetchImageList',
      payload: params,
    });
    this.setState({
      UIParams: states,
      Queryers: params,
    });
  }
  // 批量
  handleBatchOperation = () => {
    Message.info('暂不支持批量操作!');
  }

  render() {
    const { resource, loading } = this.props;
    const { list, totalSize, pageSize, pageNo } = resource;
    const publicProps = {
      loading,
      pageNo,
      pageSize,
      totalSize,
      dataSource: list,
      onCreateClick: this.handleCreateOperation,
      onDeleteClick: this.handleDeleteOperation,
      onEditClick: this.handleEditOperation,
      onFilterClick: this.handleFilterOperation,
      onBatchClick: this.handleBatchOperation,
    };
    return (
      <Card bordered={false}>
        <Button.Group style={{marginBottom: 16}}>
          <Button
            style={{width: 50}}
            onClick={this.handleShowTypeChange}
            icon="appstore-o"
            type={this.state.isCard ? 'primary' : null}
          />
          <Button
            style={{width: 50}}
            onClick={this.handleShowTypeChange}
            icon="table"
            type={this.state.isCard ? null : 'primary'}
          />
        </Button.Group>
        {this.state.isCard ?
          <PictureCardList {...publicProps} /> :
          <PictureTableList {...publicProps} />
        }
      </Card>
    );
  }
}