efunbox-admin-cms/src/routes/Product/CourseList.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
} from 'antd';

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

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

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

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

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

  componentDidMount() {
    this.tableListRefresh();
    this.props.dispatch({
      type: 'cp/getCPList',
      payload: {},
    });
  }

  tableListRefresh(params = {}) {
    const { dispatch } = this.props;
    dispatch({
      type: 'course/getCourseList',
      payload: params,
    });
  }

  handleSearch = (e) => {
    e.preventDefault();

    const { form } = this.props;

    form.validateFields((err, fieldsValue) => {
      if (err) return;
      const values = {
        ...fieldsValue,
      };
      this.tableListRefresh(values);
    });
  }

  handleReset = (e) => {
    e.preventDefault();

    const { form } = this.props;

    form.resetFields();

    this.tableListRefresh();
  }

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

  // handleItemAdd = () => {
  //   const { dispatch } = this.props;
  //   dispatch(routerRedux.push('/product/lesson/add'));
  // }
  //
  // handleItemEdit = (record) => {
  //   const { dispatch } = this.props;
  //   dispatch(routerRedux.push({
  //     pathname: '/product/lesson/edit',
  //     state: { code: record.code },
  //   }));
  // }
  //
  // handleItemDel = (record) => {
  //   const { dispatch } = this.props;
  //   dispatch({
  //     type: 'lesson/delLessonItem',
  //     payload: { code: record.code },
  //   });
  //   dispatch({
  //     type: 'lesson/getLessonList',
  //     payload: {},
  //   });
  // }
  //
  //配置分页器
  handleStandardTableChange = (pagination, filterArgs, sorter) => {
    const { formValues } = this.state;

    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}`;
    }

    this.tableListRefresh(params);
  }

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

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

    const { getFieldDecorator } = this.props.form;

    const columns = [{
      title: '课程编号',
      dataIndex: 'code',
    },{
      title: '课程名称',
      dataIndex: 'name',
    },{
      title: '供应商名称',
      dataIndex: 'cpName',
      filters: cpList.map(item => ({
        text: item.cpName,
        value: item.cpId,
      })),
    },{
      title: '使用状态',
      dataIndex: 'status',
      filters: config.COURSE_STATE.map(item => ({
        text: item.name,
        value: item.value,
      })),
      render: (text, record) => (
        <p>
          {(config.COURSE_STATE.filter(item => item.value === record.status)[0] || { name: '未知' }).name}
        </p>
      ),
    },{
      title: '修改时间',
      dataIndex: 'gmtModified',
    },{
      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: course.data.list,
      pagination: course.data.pagination,
      loading: course.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>
    );
  }
}