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

import React from 'react';
import { Link } from 'react-router-dom';
import { Form, Input, Button, Row, Col, InputNumber, Upload, Card, Icon, Tabs, Spin } from 'antd';
import './index.less';
import Editor from '@src/components/Editor';
import Page from '@src/containers/Page';
import Block from '@src/components/Block';
// import FileUpload from '@src/components/FileUpload';
import { formatFormError } from '@src/services/Tools';
import { asyncSMessage } from '@src/services/AsyncTools';
import { CourseVsType } from '../../../../Constant';
import { Course } from '../../../stores/course';
import { System } from '../../../stores/system';

export default class extends Page {
  init() {
    this.state.tab = CourseVsType[0].value;
  }

  initData() {
    this.changeCourse(this.state.tab);
  }

  changeCourse(key) {
    this.setState({ tab: key, loading: true });
    Course.list({ courseModule: 'vs' })
      .then(result => {
        const { form } = this.props;
        const list = result.list.filter(row => row.vsType === key);
        let row = {};
        if (list.length > 0) {
          ([row] = list);
          Course.get({ id: row.id }).then(r => {
            form.setFieldsValue(r);
            this.setState({ data: r, loading: false });
            this.refreshTeacher(row.id);
          });
        } else {
          form.resetFields();
          this.setState({ data: { expireDays: 7 }, loading: false, teacher: false });
        }
      });
  }

  refreshTeacher(id) {
    Course.listTeacher({ courseId: id }).then(result => {
      this.setState({ teachers: result.list, total: result.total, teacher: true });
    });
  }

  changeTeacher(field, index, value) {
    const { teachers } = this.state;
    teachers[index] = teachers[index] || {};
    teachers[index][field] = value;
    this.setState({ teachers });
  }

  addLength(key, data) {
    this.state[key] = this.state[key] || [];
    this.state[key].push(data);
    this.setState({ [key]: this.state[key] });
  }

  deleteLength(key, start) {
    this.state[key] = this.state[key] || [];
    this.state[key].splice(start, 1);
    this.setState({ [key]: this.state[key] });
  }

  submit() {
    const { form } = this.props;
    form.validateFields((err) => {
      if (!err) {
        const data = form.getFieldsValue();
        data.vsType = this.state.tab;
        data.parentStructId = 0;
        data.structId = 0;
        data.extend = '';
        data.courseModule = 'vs';
        let handler;
        if (data.id) {
          handler = Course.edit(data);
        } else {
          handler = Course.add(data);
        }
        handler.then(() => {
          asyncSMessage('保存成功');
          if (!data.id) {
            this.setState({ teacher: true, teachers: [] });
          }
        }).catch((e) => {
          if (e.result) form.setFields(formatFormError(data, e.result));
        });
      }
    });
  }

  renderVs() {
    const { getFieldDecorator, getFieldValue, setFieldsValue } = this.props.form;
    const cover = getFieldValue('cover');
    return <Block>
      <Form>
        {getFieldDecorator('id')(<input hidden />)}
        <Form.Item labelCol={{ span: 5 }} wrapperCol={{ span: 16 }} label='课程名称'>
          {getFieldDecorator('title', {
            rules: [
              { required: true, message: '请输入课程名称' },
            ],
          })(
            <Input placeholder='请输入课程名称' />,
          )}
        </Form.Item>

        <Form.Item labelCol={{ span: 5 }} wrapperCol={{ span: 16 }} label='定价'>
          {getFieldDecorator('price', {
            rules: [
              { required: true, message: '请输入价格' },
            ],
          })(
            <InputNumber placeholder='请输入' />,
          )}
        </Form.Item>
        <Form.Item labelCol={{ span: 5 }} wrapperCol={{ span: 16 }} label='最小购买数量'>
          {getFieldDecorator('minNumber', {
            rules: [
              { required: true, message: '请输入最小购买数量' },
            ],
          })(
            <InputNumber placeholder='请输入' />,
          )}
        </Form.Item>
        <Form.Item labelCol={{ span: 5 }} wrapperCol={{ span: 16 }} label='最大购买数量'>
          {getFieldDecorator('maxNumber', {
            rules: [
              { required: true, message: '请输入最大购买数量' },
            ],
          })(
            <InputNumber placeholder='请输入' />,
          )}
        </Form.Item>
        <Form.Item labelCol={{ span: 5 }} wrapperCol={{ span: 16 }} label='有效期'>
          {getFieldDecorator('expirePreDays', {
            rules: [
              { required: true, message: '请输入有效期' },
            ],
          })(
            <InputNumber placeholder='天/10课时' />,
          )}
        </Form.Item>
        <Form.Item labelCol={{ span: 5 }} wrapperCol={{ span: 16 }} label='开通有效期'>
          {getFieldDecorator('expireDays', {
            rules: [
              { required: true, message: '请输入有效期' },
            ],
          })(
            <InputNumber placeholder='天' />,
          )}
        </Form.Item>
        <Form.Item labelCol={{ span: 5 }} wrapperCol={{ span: 16 }} label='简短描述'>
          {getFieldDecorator('comment', {
            rules: [
              { required: true, message: '请输入描述' },
            ],
          })(
            <Input placeholder='请输入简短描述' />,
          )}
        </Form.Item>
        <Form.Item labelCol={{ span: 5 }} wrapperCol={{ span: 16 }} label='课程封面'>
          {getFieldDecorator('cover', {
            rules: [
              { required: true, message: '上传图片' },
            ],
          })(
            <Upload
              listType="picture-card"
              showUploadList={false}
              beforeUpload={(file) => System.uploadImage(file).then((result) => {
                setFieldsValue({ cover: result.url });
                return Promise.reject();
              })}
            >
              {cover ? <img src={cover} alt="avatar" /> : <div>
                <Icon type={this.state.loading ? 'loading' : 'plus'} />
                <div className="ant-upload-text">Upload</div>
              </div>}
            </Upload>,
          )}
        </Form.Item>
      </Form>
    </Block>;
  }

  renderInfoVs() {
    const { getFieldDecorator, setFieldsValue, getFieldValue } = this.props.form;
    const image = getFieldValue('wechatAvatar') || null;
    return <Block flex>
      <h1>课程介绍</h1>
      <Form>
        <Form.Item label='服务介绍'>
          {getFieldDecorator('serviceContent', {
          })(
            <Editor placeholder='输入内容' />,
          )}
        </Form.Item>
        <Form.Item label='适合人群'>
          {getFieldDecorator('crowdContent', {
          })(
            <Editor placeholder='输入内容' />,
          )}
        </Form.Item>
        <Form.Item label='课时数'>
          {getFieldDecorator('courseNoContent', {
          })(
            <Editor placeholder='输入内容' />,
          )}
        </Form.Item>
        <Form.Item label='授课流程'>
          {getFieldDecorator('processContent', {
          })(
            <Editor placeholder='输入内容' />,
          )}
        </Form.Item>
        <Form.Item label='推广语'>
          {getFieldDecorator('messageContent', {
          })(
            <Editor placeholder='输入内容' />,
          )}
        </Form.Item>
        <Form.Item labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label='微信头像'>
          {getFieldDecorator('wechatAvatar')(
            <Upload
              listType="picture-card"
              showUploadList={false}
              beforeUpload={(file) => System.uploadImage(file).then((result) => {
                setFieldsValue({ wechatAvatar: result.url });
                return Promise.reject();
              })}
            >
              {image ? <img src={image} alt="avatar" /> : <div>
                <Icon type={this.state.loading ? 'loading' : 'plus'} />
                <div className="ant-upload-text">Upload</div>
              </div>}
            </Upload>,
          )}
        </Form.Item>
      </Form>
    </Block>;
  }

  renderTeacher() {
    const { teachers, teacher, data } = this.state;
    if (!teacher) return null;
    return <Block>
      <h1>授课老师</h1>
      <Form>
        <Row>
          {teachers.map((row, index) => {
            return <Col span={7} offset={index % 3 ? 1 : 0}><Card>
              <Button className="delete-button" size="small" onClick={() => {
                if (row.id) {
                  Course.delTeacher({ id: row.id }).then(() => {
                    this.deleteLength('teachers', index);
                  });
                } else {
                  this.deleteLength('teachers', index);
                }
              }}>
                <Icon type="delete" />
              </Button>
              <Form.Item labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label='姓名'>
                <Input placeholder='请输入姓名' value={row.realname} onChange={(e) => {
                  this.changeTeacher('realname', index, e.target.value);
                }} />
              </Form.Item>
              <Form.Item labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label='微信'>
                <Input placeholder='请输入微信' value={row.wechat} onChange={(e) => {
                  this.changeTeacher('wechat', index, e.target.value);
                }} />
              </Form.Item>
              <Form.Item labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label='头像'>
                <Upload
                  listType="picture-card"
                  showUploadList={false}
                  beforeUpload={(file) => System.uploadImage(file).then((result) => {
                    this.changeTeacher('avatar', index, result.url);
                    return Promise.reject();
                  })}
                >
                  {row.avatar ? <img src={row.avatar} alt="avatar" /> : <div>
                    <Icon type={this.state.loading ? 'loading' : 'plus'} />
                    <div className="ant-upload-text">Upload</div>
                  </div>}
                </Upload>
              </Form.Item>
              <Form.Item labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label='二维码'>
                <Upload
                  listType="picture-card"
                  showUploadList={false}
                  beforeUpload={(file) => System.uploadImage(file).then((result) => {
                    this.changeTeacher('qr', index, result.url);
                    return Promise.reject();
                  })}
                >
                  {row.qr ? <img src={row.qr} alt="avatar" /> : <div>
                    <Icon type={this.state.loading ? 'loading' : 'plus'} />
                    <div className="ant-upload-text">Upload</div>
                  </div>}
                </Upload>
              </Form.Item>
              <Form.Item labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label='简介'>
                <Input.TextArea placeholder='请输入简介' value={row.description} onChange={(e) => {
                  this.changeTeacher('description', index, e.target.value);
                }} />
              </Form.Item>
              <Button onClick={() => {
                let handler = null;
                if (row.id) {
                  handler = Course.editTeacher(row);
                } else {
                  handler = Course.addTeacher(Object.assign({ courseId: data.id }, row));
                }
                handler.then(() => {
                  this.refreshTeacher(data.id);
                });
              }}>{row.id ? '修改' : '添加'}</Button>
            </Card></Col>;
          })}
          <Col span={7} offset={teachers.length % 3 ? 1 : 0}>
            <Card className="plus" onClick={() => {
              this.addLength('teachers', { realname: '', wechat: '', qr: '' });
            }}>
              <Icon type={'plus'} />
            </Card>
          </Col>
        </Row>
      </Form>
    </Block>;
  }

  renderContent() {
    return [this.renderVs(), this.renderInfoVs(), this.renderTeacher()];
  }

  renderView() {
    const { tab, data } = this.state;
    return <div flex>
      <Tabs activeKey={tab} tabBarExtraContent={data.id > 0 && <Link to={`/course/student/${data.id}`}>查看学员</Link>} onChange={(value) => {
        this.changeCourse(value);
      }}>
        {CourseVsType.map((row) => {
          return <Tabs.TabPane tab={row.label} key={row.value} />;
        })}
      </Tabs>
      <Spin spinning={this.state.loading}>{this.renderContent()}</Spin>
      <Row type="flex" justify="center">
        <Col>
          <Button type="primary" onClick={() => {
            this.submit();
          }}>保存</Button>
        </Col>
      </Row>
    </div>;
  }
}