Hotax/src/routes/Product/Courseware/CoursewareCreate.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, Radio, Switch } from 'antd';
import RBVideoPlayer from '../../../components/RBVideoPlayer/index';
import RBDragSortTable from '../../../components/RBDragSortTable/index';
import Selector from '../../../components/RBTableSelector/Selector';
import FooterToolbar from '../../../components/FooterToolbar/index';
import { RESOURCE_VIDEO } from '../../../utils/config';
import {
  genAbsolutePicUrl,
  renderStatus,
  statusToBool,
  boolToStatus,
} from '../../../utils/utils';
import styles from './CoursewareCreate.less';

const fieldLabels = {
  code: '课件编号',
  title: '课件名称',
  category: '环节名称',
  digest: '课件简述',
  resourceList: '资源列表',
  status: '课件状态',
};
const formItemLayout = {
  labelCol: {
    xs: { span: 24 },
    sm: { span: 2 },
  },
  wrapperCol: {
    xs: { span: 24 },
    sm: { span: 14 },
    md: { span: 12 },
  },
};

@connect(({ loading, courseware, resource }) => ({
  resource,
  courseware,
  loading: loading.models.resource,
  submitting: loading.models.courseware,
}))
@Form.create()
export default class CoursewareCreatePage extends Component {
  state = {
    modalSelectorDestroy: true,
    resourceType: 'Picture',
  };
  componentWillMount() {
    // 进入页面前清空下model中state内容，防止上次内容造成干扰
    const match = pathToRegexp('/product/courseware/create').exec(this.props.location.pathname);
    if (match) {
      this.cleanPageState();
    }
  }
  componentDidMount() {
    // 组件挂载完成，检查是否是编辑操作，决定是否加载该课件数据
    const matchId = this.isEdit();
    if (matchId) {
      this.props.dispatch({
        type: 'courseware/fetchCoursewareItem',
        payload: { id: matchId },
      });
    }
  }
  isEdit = () => {
    const { location } = this.props;
    const match = pathToRegexp('/product/courseware/edit/:id').exec(location.pathname);
    if (match) {
      return match[1];
    }
    return false;
  }
  cleanPageState = () => {
    this.props.dispatch({
      type: 'courseware/cleanItemState',
      payload: {},
    });
  }
  selectorDataFetcher = (params) => {
    const { resourceType } = this.state;
    if (resourceType === 'Picture') {
      this.props.dispatch({
        type: 'resource/fetchImageList',
        payload: params,
      });
    }
    if (resourceType === 'Video') {
      this.props.dispatch({
        type: 'resource/fetchVideoList',
        payload: params,
      });
    }
  }
  handleSelectorModalShow = () => {
    this.setState({
      modalSelectorDestroy: false,
    });
    this.selectorDataFetcher();
  }
  handleSelectorCancel = () => {
    this.setState({
      modalSelectorDestroy: true,
    });
  }
  handleSelectorFinish = (rows) => {
    this.setState({
      modalSelectorDestroy: true,
    });
    this.props.dispatch({
      type: 'courseware/fixResourceList',
      payload: rows,
    });
  }
  handleSelectorChange = (params) => {
    this.selectorDataFetcher(params);
  }
  handleRadioChange = (e) => {
    this.setState({
      resourceType: e.target.value,
    }, () => this.selectorDataFetcher());
  }
  handleDragSortTableChange = (rows) => {
    this.props.dispatch({
      type: 'courseware/fixResourceList',
      payload: rows,
    });
  }
  handlePageBack = () => {
    this.props.dispatch(routerRedux.push({
      pathname: '/product/courseware',
      state: this.props.location.state,
    }));
  }
  handlePageSubmit = (e) => {
    e.preventDefault();
    this.props.form.validateFieldsAndScroll((err, values) => {
      if (!err) {
        const { status, ...rest } = values;
        values = { status: boolToStatus(status), ...rest };
        const { courseware } = this.props;
        const { currentItem } = courseware;
        const { resourceList } = currentItem;

        let resourceIdList;
        if (resourceIdList) {
          resourceIdList = resourceList.map(item => item.id);
        }

        const matchId = this.isEdit();
        if (matchId) {
          const params = {
            id: matchId,
            resourceList: resourceIdList,
            ...values,
          };
          this.props.dispatch({
            type: 'courseware/updateCoursewareItem',
            payload: params,
            states: this.props.location.state,
          });
        } else {
          const params = {
            resourceList: resourceIdList,
            ...values,
          };
          this.props.dispatch({
            type: 'courseware/createCoursewareItem',
            payload: params,
            states: this.props.location.state,
          });
        }
      }
    });
  }

  render() {
    const { submitting, courseware, form, loading, resource } = this.props;
    const { modalSelectorDestroy, resourceType } = this.state;
    const { getFieldDecorator } = form;
    const { currentItem } = courseware;
    const { code, title, digest, category, status, resourceList = [] } = currentItem;

    const imageColumns = [{
      title: '图片',
      dataIndex: 'path',
      key: 1,
      render: text => (
        <div className={styles.picture}>
          <img src={genAbsolutePicUrl(text)} alt="" />
        </div>
      ),
      width: '10%',
    }, {
      title: '编号',
      dataIndex: 'code',
      key: 2,
      width: '20%',
    }, {
      title: '名称',
      dataIndex: 'name',
      key: 3,
      width: '30%',
    }, {
      title: '格式',
      dataIndex: 'format',
      key: 4,
    }, {
      title: '状态',
      dataIndex: 'status',
      key: 5,
      render: text => renderStatus(text),
    }];

    const renderCardName = () => {
      return (
        <div className={styles.cardName}>
          <span>
            <a onClick={this.handleSelectorModalShow}>资源列表</a>
          </span>
        </div>
      );
    };
    const renderModalTitle = () => {
      return (
        <Radio.Group
          value={resourceType}
          onChange={this.handleRadioChange}
          className={styles.radio}
        >
          <Radio.Button value="Picture">图片</Radio.Button>
          <Radio.Button value="Video">视频</Radio.Button>
        </Radio.Group>
      );
    };
    // 根据选定的资源列表类型决定渲染样式
    const renderResourceList = () => {
      if (!resourceList.length) {
        return (
          <h3 style={{ color: 'red' }}>你还未选择任何资源,请点击上方"资源列表"进行选择!</h3>
        );
      } else if (resourceList[0].type === RESOURCE_VIDEO) {
        const videoItem = resourceList[0];
        return (
          <div className={styles.video}>
            <RBVideoPlayer
              width="100%"
              height="100%"
              url={videoItem.url}
              isM3U8={videoItem.format === 'm3u8'}
            />
          </div>
        );
      } else {
        return (
          <RBDragSortTable
            columns={imageColumns}
            data={resourceList}
            onChange={this.handleDragSortTableChange}
          />
        );
      }
    };
    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="请输入(课件一旦创建完成,编号不可修改)"
                  disabled={!!this.isEdit()}
                />
              )}
            </Form.Item>
            <Form.Item hasFeedback label={fieldLabels.title} {...formItemLayout}>
              {getFieldDecorator('title', {
                rules: [{ required: true, message: '请填写课件名称' }],
                initialValue: title,
              })(
                <Input placeholder="请输入" />
              )}
            </Form.Item>
            <Form.Item hasFeedback label={fieldLabels.category} {...formItemLayout}>
              {getFieldDecorator('category', {
                initialValue: category,
              })(
                <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 }}>
          {renderResourceList()}
          {!modalSelectorDestroy && (
            <Modal
              visible
              width={1100}
              footer={null}
              title={renderModalTitle()}
              maskClosable={false}
              onCancel={this.handleSelectorCancel}
            >
              <Selector
                multiple={resourceType === 'Picture'}
                loading={loading}
                selectorName={resourceType}
                list={resource.list}
                pageNo={resource.pageNo}
                pageSize={resource.pageSize}
                totalSize={resource.totalSize}
                onCancel={this.handleSelectorCancel}
                onChange={this.handleSelectorChange}
                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>
    );
  }
}