Hotax/src/routes/Product/Lesson/LessonCreate.js

import React, { Component } from 'react';
import pathToRegexp from 'path-to-regexp';
import { connect } from 'dva';
import { routerRedux } from 'dva/router';
import { Form, Modal, Card, Button, Input, Switch } from 'antd';
import AXDragSortTable from '../../../components/AXDragSortTable';
import Selector from '../../../components/AXTableSelector/Selector';
import FooterToolbar from '../../../components/FooterToolbar';
import { renderStatus, statusToBool, boolToStatus } from '../../../utils/utils';

const fieldLabels = {
  code: '课编号',
  title: '课名称',
  digest: '课简述',
  status: '课状态',
};
const formItemLayout = {
  labelCol: {
    xs: { span: 24 },
    sm: { span: 2 },
  },
  wrapperCol: {
    xs: { span: 24 },
    sm: { span: 14 },
    md: { span: 12 },
  },
};

@connect(({ loading, lesson, courseware }) => ({
  lesson,
  courseware,
  loading: loading.models.courseware,
  submitting: loading.models.lesson,
}))
@Form.create()
export default class LessonCreatePage extends Component {
  state = {
    modalSelectorDestroy: true,
  };
  componentWillMount() {
    const match = pathToRegexp('/product/lesson/create').exec(this.props.location.pathname);
    if (match) {
      this.cleanPageState();
    }
  }
  componentDidMount() {
    const matchId = this.isEdit();
    if (matchId) {
      this.props.dispatch({
        type: 'lesson/fetchLessonItem',
        payload: { id: matchId },
      });
    }
  }
  isEdit = () => {
    const { location } = this.props;
    const match = pathToRegexp('/product/lesson/edit/:id').exec(location.pathname);
    if (match) {
      return match[1];
    }
    return false;
  };
  cleanPageState = () => {
    this.props.dispatch({
      type: 'lesson/cleanItemState',
      payload: {},
    });
  };
  selectorDataFetcher = (params) => {
    this.props.dispatch({
      type: 'courseware/fetchCoursewareList',
      payload: params,
    });
  };
  handleSelectorModalShow = () => {
    this.setState({
      modalSelectorDestroy: false,
    });
    this.selectorDataFetcher();
  };
  handleSelectorCancel = () => {
    this.setState({
      modalSelectorDestroy: true,
    });
  };
  handleSelectorFinish = (rows) => {
    this.setState({
      modalSelectorDestroy: true,
    });
    this.props.dispatch({
      type: 'lesson/fixCoursewareList',
      payload: rows,
    });
  };
  handleSelectorChange = (params) => {
    this.selectorDataFetcher(params);
  };
  handleDragSortTableChange = (rows) => {
    this.props.dispatch({
      type: 'lesson/fixCoursewareList',
      payload: rows,
    });
  };
  handlePageBack = () => {
    this.props.dispatch(routerRedux.push({
      pathname: '/product/lesson/list',
      state: this.props.location.state,
    }));
  };
  handlePageSubmit = (e) => {
    e.preventDefault();
    this.props.form.validateFieldsAndScroll((err, values) => {
      if (!err) {
        // 从表单中提取相关字段
        const { status, ...rest } = values;
        const newVals = { status: boolToStatus(status), ...rest };
        const { lesson } = this.props;
        const { currentItem } = lesson;
        const { wareList } = currentItem;

        // 提取wareIdList
        let wareIdList;
        if (wareList) {
          wareIdList = wareList.map(item => item.id);
        }

        const matchId = this.isEdit();
        if (matchId) {
          const params = {
            id: matchId,
            wareList: wareIdList,
            ...newVals,
          };
          this.props.dispatch({
            type: 'lesson/updateLessonItem',
            payload: params,
            states: this.props.location.state,
          });
        } else {
          const params = {
            wareList: wareIdList,
            ...newVals,
          };
          this.props.dispatch({
            type: 'lesson/createLessonItem',
            payload: params,
            states: this.props.location.state,
          });
        }
      }
    });
  };

  render() {
    const { submitting, lesson, form, loading, courseware } = this.props;
    const { list, pageSize, pageNo, totalSize } = courseware;
    const { modalSelectorDestroy } = this.state;
    const { getFieldDecorator } = form;
    const { currentItem } = lesson;
    const { code, title, digest, status, wareList = [] } = currentItem;

    const coursewareColumns = [{
      title: '编号',
      dataIndex: 'code',
      key: 1,
      width: '20%',
      render: (text, record) => (
        <a
          className="a-link"
          target="_blank"
          rel="noopener noreferrer"
          href={`/product/courseware/edit/${record.id}`}
        >
          {text}
        </a>
      ),
    }, {
      title: '名称',
      dataIndex: 'title',
      key: 2,
      width: '30%',
      render: (text, record) => (
        <a
          className="a-link"
          target="_blank"
          rel="noopener noreferrer"
          href={`/product/courseware/edit/${record.id}`}
        >
          {text}
        </a>
      ),
    }, {
      title: '状态',
      dataIndex: 'status',
      key: 3,
      render: text => renderStatus(text),
    }];

    const renderCardName = () => {
      return (
        <Button
          type="primary"
          onClick={this.handleSelectorModalShow}
        >课件列表
        </Button>
      );
    };
    return (
      <div>
        <Card title="基础信息" style={{ marginBottom: 16 }}>
          <Form>
            <Form.Item hasFeedback label={fieldLabels.code} {...formItemLayout}>
              {getFieldDecorator('code', {
                rules: [
                  {
                    required: true, message: '请填写课编号',
                  }, {
                    pattern: /^[a-zA-Z0-9|-]+$/g, message: '编号包含非法字符',
                  },
                ],
                initialValue: code,
              })(
                <Input placeholder="请输入" />
              )}
            </Form.Item>
            <Form.Item hasFeedback label={fieldLabels.title} {...formItemLayout}>
              {getFieldDecorator('title', {
                rules: [{ required: true, message: '请填写课名称' }],
                initialValue: title,
              })(
                <Input placeholder="请输入" />
              )}
            </Form.Item>
            <Form.Item label={fieldLabels.digest} {...formItemLayout}>
              {getFieldDecorator('digest', {
                initialValue: digest,
              })(
                <Input.TextArea rows={4} placeholder="请输入" />
              )}
            </Form.Item>
            <Form.Item label={fieldLabels.status} {...formItemLayout}>
              {getFieldDecorator('status', {
                valuePropName: 'checked',
                initialValue: statusToBool(status),
              })(
                <Switch
                  checkedChildren="正常"
                  unCheckedChildren="删除"
                />
              )}
            </Form.Item>
          </Form>
        </Card>
        <Card title={renderCardName()} style={{ marginBottom: 70 }}>
          <AXDragSortTable
            columns={coursewareColumns}
            data={wareList}
            onChange={this.handleDragSortTableChange}
          />
          {!modalSelectorDestroy && (
            <Modal
              visible
              width={1100}
              footer={null}
              title="课件资源"
              maskClosable={false}
              onCancel={this.handleSelectorCancel}
            >
              <Selector
                multiple
                list={list}
                loading={loading}
                pageNo={pageNo}
                pageSize={pageSize}
                totalSize={totalSize}
                selectorName="Courseware"
                selectedRows={wareList}
                onChange={this.handleSelectorChange}
                onCancel={this.handleSelectorCancel}
                onFinish={this.handleSelectorFinish}
              />
            </Modal>
          )}
        </Card>
        <FooterToolbar style={{ width: '100%' }}>
          <Button
            onClick={this.handlePageBack}
            style={{ marginRight: 10 }}
          >取消
          </Button>
          <Button
            type="primary"
            loading={submitting}
            onClick={this.handlePageSubmit}
          >提交
          </Button>
        </FooterToolbar>
      </div>
    );
  }
}