efunbox-admin-cms/src/routes/Product/WareList.js

import React, { PureComponent } from 'react';
import { connect } from 'dva';
import { Link, routerRedux } from 'dva/router';
import { Popconfirm, Progress, notification, Badge, message, Card, Icon, Button,
  Modal, Input, Select, Form, Row, Col, Tooltip } from 'antd';
import moment from 'moment';

import PageHeaderLayout from '../../layouts/PageHeaderLayout';
import StandardTable from '../../components/StandardTable';
import styles from './WareList.less';
import config from '../../utils/config';
import Logger from '../../utils/logger';

const logger = Logger.getLogger('WareList');

const { Option } = Select;
const FormItem = Form.Item;
const ButtonGroup = Button.Group;

const getValue = obj => Object.keys(obj).map(key => obj[key]).join(',');

@connect(state => ({
  ware: state.ware,
  cp: state.cp,
}))
@Form.create()
export default class WareList extends PureComponent {
  state = {
    modalVisible: false,
    selectedRows: [],
    formValues: {},
  }

  componentDidMount() {
    const { dispatch, ware: { data } } = this.props
    dispatch({
      type: 'cp/getCPList',
      payload: {},
    });
    dispatch({
      type: 'ware/getWareList',
      payload: {},
    })
  }

  handleSearch = (e) => {
    e.preventDefault();
    const { dispatch, form } = this.props;
    form.validateFields((err, fieldsValue) => {
      if (err) return;
      const values = {
        ...fieldsValue,
      }
      logger.info('【Search Values】: %o', values);
      dispatch({
        type: 'ware/getWareList',
        payload: values,
      });
    });
  }

  handleReset = (e) => {
    e.preventDefault();
    const { dispatch, form } = this.props;
    form.resetFields();
    dispatch({
      type: 'ware/getWareList',
      payload: {},
    });
  }

  handleSelectRows = (rows) => {
    this.setState({
      selectedRows: rows,
    });
  }

  handleItemAdd = () => {
    const { dispatch } = this.props;
    dispatch(routerRedux.push('/product/ware/save'));
  }

  handleItemEdit = (record) => {
    const { dispatch } = this.props;
    dispatch({
      type: 'ware/saveItemData',
      payload: record,
    });
    dispatch(routerRedux.push('/product/ware/save'));
  }

  handleItemDel = (record) => {
    const { dispatch } = this.props;
    dispatch({
      type: 'ware/delWareItem',
      payload: { code: record.code },
    });
    dispatch({
      type: 'ware/getWareList',
      payload: {},
    });
  }

  handleModalVisible = (flag) => {
    this.setState({
      modalVisible: !!flag,
    });
  }

  //配置分页器
  handleStandardTableChange = (pagination, filterArgs, sorter) => {
    const { dispatch } = this.props;
    const { formValues } = this.state;

    logger.info('【TableChangePagination】: %o', pagination);
    const filters = Object.keys(filterArgs).reduce((obj, key) => {
      const newObj = {...obj};
      newObj[key] = getValue(filterArgs[key]);
      return newObj;
    }, {});

    const params = {
      pageNo: pagination.current,
      pageSize: pagination.pageSize,
      ...formValues,
      ...filters,
    };
    if (sorter.field) {
      params.sorter = `${sorter.field}_${sorter.order}`;
    }

    dispatch({
      type: 'ware/getWareList',
      payload: params,
    })
  }

  render() {
    const { selectedRows, modalVisible } = this.state;

    const { dispatch, ware, cp: { cpList } } = this.props;

    const { getFieldDecorator } = this.props.form;

    const columns = [{
      title: '课件编号',
      dataIndex: 'code',
      sorter: true,
    },{
      title: '课件名称',
      dataIndex: 'name',
      sorter: true,
    },{
      title: '课件类型',
      dataIndex: 'type',
      filters: config.WARE_TYPE.map((item) => ({
        text: item.name,
        value: item.value,
      })),
      render: (text, record) => (
        <p>
          {(config.WARE_TYPE.filter(item => item.value === record.type)[0] || { name: '未知' }).name}
        </p>
      ),
    },{
      title: '使用状态',
      dataIndex: 'state',
      filters: config.WARE_STATE.map((item) => ({
        text: item.name,
        value: item.value,
      })),
      render: (text, record) => (
        <p>
          {(config.WARE_STATE.filter(item => item.value === record.state)[0] || { name: '未知' }).name}
        </p>
      ),
    },{
      title: '内容提供商',
      dataIndex: 'cpName',
      filters: cpList.map((item) => ({
        text: item.cpName,
        value: item.cpId,
      }))
    },{
      title: '修改时间',
      dataIndex: 'gmtModified',
      sorter: true,
    },{
      title: '操作类型',
      render: (record) => (
        <p>
          <Button size="small" shape="circle" icon="edit" onClick={() => this.handleItemEdit(record)}></Button>
          <span className={styles.splitLine} />
          <Popconfirm
            placement="top"
            okText="删除"
            cancelText="取消"
            title={`确定删除${record.name}?`}
            onConfirm={() => this.handleItemDel(record)}
          >
            <Button size="small" shape="circle" icon="delete"></Button>
          </Popconfirm>
        </p>
      ),
    }];

    const standardTableProps = {
      dataSource: ware.data.list,
      pagination: ware.data.pagination,
      loading: ware.loading,
      columns: columns,
      rowKeyName: 'code',
      selectedRows: selectedRows,
    };

    const pageHeaderSearch = (
      <Form layout="inline" onSubmit={this.handleSearch}>
        <Row gutter={24}>
          <Col md={9} sm={24}>
            <FormItem label="课件编号">
              {getFieldDecorator('code')(
                <Input placeholder="请输入课件编号" />
              )}
            </FormItem>
          </Col>
          <Col md={10} sm={24}>
            <FormItem label="课件名称">
              {getFieldDecorator('name')(
                <Input placeholder="请输入课件名称" />
              )}
            </FormItem>
          </Col>
          <Col md={5} sm={24} push={1}>
            <FormItem>
              <ButtonGroup>
                <Button icon="search" type="primary" htmlType="submit">搜索</Button>
                <Button icon="reload" type="danger" onClick={this.handleReset}>重置</Button>
              </ButtonGroup>
            </FormItem>
          </Col>
        </Row>
      </Form>
    );

    return (
      <PageHeaderLayout
        content={pageHeaderSearch}
      >
        <div className={styles.content}>
          <div className={styles.newButton}>
            <Button type="primary" icon="plus" onClick={() => {this.handleItemAdd()}}>新建课件</Button>
          </div>
          <StandardTable
            {...standardTableProps}
            onChange={this.handleStandardTableChange}
            onSelectRow={this.handleSelectRows}
          />
        </div>
      </PageHeaderLayout>
    );
  }
}