sourcecode/front/project/admin/routes/course/previewDetail/page.js

import React from 'react';
import { Form, Input, Button, Row, Col } from 'antd';
import './index.less';
import Page from '@src/containers/Page';
import Block from '@src/components/Block';
import Select from '@src/components/Select';
import { formatFormError, bindSearch, formatDate, generateSearch } from '@src/services/Tools';
import { asyncSMessage, asyncForm } from '@src/services/AsyncTools';
import { QuestionType } from '../../../../Constant';
import Association from '../../../components/Association';
import { Preview } from '../../../stores/preview';
import { Course } from '../../../stores/course';
import { User } from '../../../stores/user';

export default class extends Page {
  initState() {
    return {
      questionType: QuestionType,
    };
  }

  init() {
    this.onlineList = [{
      key: 'courseTime',
      type: 'select',
      select: [],
      name: '时间段',
      required: true,
    }, {
      key: 'time',
      type: 'daterange',
      name: '完成时间',
    }];

    this.vsList = [{
      key: 'userId',
      type: 'select',
      select: [],
      name: '学生',
      required: true,
    }, {
      key: 'time',
      type: 'daterange',
      name: '完成时间',
    }, {
      key: 'title',
      type: 'input',
      name: '作业标题',
      required: true,
    }];
  }

  initData() {
    const { id } = this.params;
    const { form } = this.props;
    const { module } = this.state.search;
    let handler;
    if (id) {
      handler = Preview.get({ id });
    } else {
      handler = Promise.resolve({ questionNoIds: [], courseModule: module });
    }
    handler
      .then(result => {
        const { questionNoIds } = result;
        generateSearch('courseId', {}, this, (search) => {
          return Course.list(Object.assign({ courseModule: result.courseModule }, search));
        }, (row) => {
          return {
            title: row.title,
            value: row.id,
          };
        }, result.courseId, null);
        form.getFieldDecorator('courseNo');
        form.setFieldsValue(result);
        this.setState({ module: result.courseModule, data: result, questionNoIds });
        this.refresh();
        if (result.courseId) this.refreshCourse(result.courseId);
      });
  }

  refresh() {
    const { data } = this.state;
    switch (data.courseModule) {
      case 'video':
        this.refreshNo(data.courseId);
        break;
      case 'online':
        bindSearch(this.onlineList, 'courseTime', this, (search) => {
          return Course.listTime(Object.assign({ courseId: data.courseId }, search));
        }, (row) => {
          return {
            title: `${formatDate(row.startTime, 'YYYY-MM-DD')}~${formatDate(row.endTime, 'YYYY-MM-DD')}`,
            value: row.id,
          };
        }, null, null);
        break;
      case 'vs':
        bindSearch(this.vsList, 'userId', this, (search) => {
          return User.list(search);
        }, (row) => {
          return {
            title: `${row.nickname}(${row.mobile})`,
            value: row.id,
          };
        }, null, null);
        break;
      default:
    }
  }

  refreshCourse(id) {
    if (!id) return;
    Course.get({ id }).then((info) => {
      const { data } = this.state;
      // 设置长难句paperModule信息
      data.paperModule = info.extend === 'sentence' ? 'sentence' : 'exercise';
      data.courseId = id;
      this.setState({ data });
      if (data.courseModule === 'video') {
        this.refreshNo(id);
      }
      this.refreshType(info.extend);
    });
  }

  refreshNo(id) {
    if (!id) return;
    Course.allNo({ courseId: id }).then(result => {
      this.setState({
        courseNo: result.map((row) => {
          return {
            title: `${row.title}(${row.no})`,
            value: row.id,
          };
        }),
      });
    });
  }

  refreshType(questionType) {
    if (questionType) {
      const { setFieldsValue } = this.props.form;
      setFieldsValue({ questionType });
      this.setState({ questionType: QuestionType.filter(row => row.value === questionType) });
    } else {
      this.setState({ questionType: QuestionType });
    }
  }

  onRefreshType(questionType) {
    this.setState({ currentQuestionType: questionType });
  }

  submit() {
    const { form } = this.props;
    form.validateFields((err) => {
      if (!err) {
        const data = form.getFieldsValue();
        let handler;
        data.questionNoIds = this.state.questionNoIds;
        data.paperModule = this.state.data.paperModule;
        data.courseModule = this.state.data.courseModule;
        if (!data.id) {
          handler = Preview.add(data);
        } else {
          handler = Preview.edit(data);
        }
        handler.then((result) => {
          asyncSMessage('保存成功');
          if (data.id) {
            linkTo(`/course/preview/detail/${data.id}`);
          } else {
            linkTo(`/course/preview/detail/${result.id}`);
          }
        }).catch((e) => {
          if (e.result) {
            form.setFields(formatFormError(data, e.result));
          } else {
            asyncSMessage(e.message, 'error');
          }
        });
      }
    });
  }

  addOnlineAction() {
    const { data } = this.state;
    asyncForm('添加', this.onlineList, {}, info => {
      if (info.time && info.time.length > 0) {
        info.startTime = info.time[0].format('YYYY-MM-DD');
        info.endTime = info.time[1].format('YYYY-MM-DD');
      }
      return Preview.addAssign(Object.assign({ paperModule: data.paperModule, paperId: data.id, courseModule: data.courseModule }, info)).then(() => {
        asyncSMessage('添加成功!');
        this.refresh();
      });
    }).catch(err => {
      console.log(err);
    });
  }

  addVsAction() {
    const { data } = this.state;
    asyncForm('添加', this.vsList, {}, info => {
      if (info.time && info.time.length > 0) {
        info.startTime = info.time[0].format('YYYY-MM-DD');
        info.endTime = info.time[1].format('YYYY-MM-DD');
      }
      return User.listCourseAppointment({ courseId: data.courseId, userId: info.userId, startTime: info.startTime, endTime: info.endTime }).then(result => {
        if (result.total === 0) {
          return Promise.reject(new Error('没有找到相关的预约记录'));
        } if (result.total > 1) {
          return Promise.reject(new Error('时间段内存在多条预约记录'));
        }
        return Preview.addAssign(Object.assign({ paperModule: data.paperModule, paperId: data.id, courseModule: data.courseModule }, info)).then(() => {
          asyncSMessage('添加成功!');
          this.refresh();
        });
      });
    }).catch(err => {
      console.log(err);
    });
  }


  renderBase() {
    const { data = {}, questionNoIds, questionType, currentQuestionType } = this.state;
    const { getFieldDecorator } = this.props.form;
    return <Block>
      <Form>
        {getFieldDecorator('id')(<input hidden />)}
        <Form.Item labelCol={{ span: 5 }} wrapperCol={{ span: 16 }} label='选择课程'>
          {getFieldDecorator('courseId', {
            rules: [
              { required: true, message: '请选择课程' },
            ],
          })(
            <Select {...this.state.courseId} disabled={data.id} placeholder='请选择课程' onChange={(v) => {
              this.refreshCourse(v);
            }} />,
          )}
        </Form.Item>
        {data.courseModule === 'video' && <Form.Item labelCol={{ span: 5 }} wrapperCol={{ span: 16 }} label='选择课时'>
          {getFieldDecorator('courseNo', {
            rules: [
              { required: true, message: '请选择课时' },
            ],
          })(
            <Select select={this.state.courseNo} disabled={data.id || !data.courseId} placeholder='请选择课时' />,
          )}
        </Form.Item>}
        <Form.Item labelCol={{ span: 5 }} wrapperCol={{ span: 16 }} label='题型'>
          {getFieldDecorator('questionType', {
            rules: [
              { required: true, message: '请选择题型' },
            ],
          })(
            <Select select={questionType} placeholder='请选择题型' onChange={(v) => {
              this.onRefreshType(v);
            }} />,
          )}
        </Form.Item>
        <Form.Item labelCol={{ span: 5 }} wrapperCol={{ span: 16 }} label='作业标题'>
          {getFieldDecorator('title', {
            rules: [
              { required: true, message: '请输入作业标题' },
            ],
          })(
            <Input placeholder='请输入作业标题' />,
          )}
        </Form.Item>
      </Form>
      {data.paperModule && <Association title='选择题目' ids={questionNoIds} field={'questionNoIds'} questionType={currentQuestionType} module={data.paperModule} modal={false} onConfirm={(info) => {
        this.setState({ questionNoIds: info.questionNoIds });
        return Promise.resolve();
      }} />}
    </Block>;
  }

  renderOnline() {
    return <Block>
      <h1><Button onClick={() => {
        this.addOnlineAction();
      }}>添加指定做题人</Button></h1>
    </Block>;
  }

  renderVs() {
    return <Block>
      <h1><Button onClick={() => {
        this.addVsAction();
      }}>添加指定做题人</Button></h1>
    </Block>;
  }

  renderContent() {
    const { data } = this.state;
    switch (data.courseModule) {
      case 'video':
        return [];
      case 'online':
        return [this.renderOnline()];
      case 'vs':
        return [this.renderVs()];
      default:
        return <div />;
    }
  }

  renderView() {
    const { data = {} } = this.state;
    return <div flex>
      {this.renderBase()}
      <Row type="flex" justify="center">
        <Col>
          <Button type="primary" onClick={() => {
            this.submit();
          }}>保存</Button>
        </Col>
      </Row>
      {data.id > 0 && this.renderContent()}
    </div>;
  }
}