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

import React from 'react';
import { Form, Button, Row, Col, Icon, Input, InputNumber, Upload } from 'antd';
import './index.less';
import Editor from '@src/components/Editor';
import Page from '@src/containers/Page';
import Block from '@src/components/Block';
import Radio from '@src/components/Radio';
import TreeSelect from '@src/components/TreeSelect';
import EditTableCell from '@src/components/EditTableCell';
// import ActionLayout from '@src/layouts/ActionLayout';
// import TableLayout from '@src/layouts/TableLayout';
import { formatFormError, formatTreeData, getMap, formatDate } from '@src/services/Tools';
import { asyncSMessage } from '@src/services/AsyncTools';
import { SwitchSelect, DataType } from '../../../../Constant';
// import { User } from '../../../stores/user';
import { Exercise } from '../../../stores/exercise';
import { Course } from '../../../stores/course';
import { System } from '../../../stores/system';

export default class extends Page {
  initState() {
    return { history: false };
  }

  init() {
    this.exerciseMap = {};
    this.actionList = [{
      key: 'addHistory',
      type: 'primary',
      name: '新增版本',
    }];
    this.itemList = [{
      key: 'id',
      type: 'hidden',
    }, {
      key: 'time',
      type: 'date',
      name: '更新时间',
    }, {
      key: 'position',
      type: 'input',
      name: '更新位置',
    }, {
      key: 'originContent',
      type: 'input',
      name: '原内容',
    }, {
      key: 'content',
      type: 'input',
      name: '更改为',
    }, {
      key: 'version',
      type: 'input',
      name: '更新至',
    }];
    this.columns = [{
      title: '更新时间',
      dataIndex: 'time',
      render: (text) => {
        return formatDate(text);
      },
    }, {
      title: '版本名称',
      dataIndex: 'version',
      render: (text, record) => {
        return <EditTableCell value={text} onChange={(v) => {
          this.changeHistory('version', record.id, v);
        }} />;
      },
    }, {
      title: '位置',
      dataIndex: 'position',
    }, {
      title: '原内容',
      dataIndex: 'originContent',
    }, {
      title: '更正为',
      dataIndex: 'content',
    }, {
      title: '更新至',
      dataIndex: 'version',
    }, {
      title: '操作',
      dataIndex: 'handler',
      render: (text, record) => {
        return <div className="table-button">
          {(
            <a onClick={() => {
              this.changeHistory(record);
            }}>编辑</a>
          )}
          {(
            <a onClick={() => {
              this.deleteHistory(record);
            }}>删除</a>
          )}
        </div>;
      },
    }];
    Exercise.dataStruct().then((result) => {
      const list = result.map(row => { row.title = `${row.titleZh}`; row.value = row.id; return row; });
      const tree = formatTreeData(list, 'id', 'title', 'parentId');
      this.exerciseMap = getMap(result.map(row => {
        row.title = `${row.titleZh}`;
        row.value = row.id;
        return row;
      }), 'id');

      this.setState({ exercise: tree });
    });
  }

  initData() {
    const { id } = this.params;
    let handler;
    if (id) {
      handler = Course.getData({ id });
    } else {
      handler = Promise.resolve({ structId: 0 });
    }
    handler
      .then(result => {
        const { setFieldsValue } = this.props.form;
        result.structId = `${result.structId || ' '}`;
        setFieldsValue(result);
        this.setState({ data: result });
      });
  }

  submit() {
    const { form } = this.props;
    form.validateFields((err) => {
      if (!err) {
        const data = form.getFieldsValue();
        data.parentStructId = this.exerciseMap[data.structId] ? this.exerciseMap[data.structId].parentId : 0;
        data.isSentence = this.exerciseMap[data.structId] ? (this.exerciseMap[data.structId].extend === 'sentence' ? 1 : 0) : 0;
        Course.editData(data).then(() => {
          asyncSMessage('保存成功');
        }).catch((e) => {
          if (e.result) form.setFields(formatFormError(data, e.result));
        });
      }
    });
  }

  renderBase() {
    const { exercise, data } = this.state;
    const { getFieldDecorator } = this.props.form;
    return <Block>
      <h1>基本信息</h1>
      <Form>
        {getFieldDecorator('id')(<input hidden />)}
        {exercise && data.structId && <Form.Item labelCol={{ span: 5 }} wrapperCol={{ span: 16 }} label='学科'>
          {getFieldDecorator('structId', {
            rules: [{
              required: true, message: '请选择学科',
            }],
            initialValue: data.structId,
          })(
            <TreeSelect treeData={exercise} />,
          )}
        </Form.Item>}
        <Form.Item labelCol={{ span: 5 }} wrapperCol={{ span: 16 }} label='资料形式'>
          {getFieldDecorator('dataType', {
            rules: [{
              required: true, message: '请选择类型',
            }],
          })(
            <Radio select={DataType} onChange={(e) => {
              if (e.target.value === 'electron') {
                this.refreshHistory();
              } else {
                this.setState({ history: false });
              }
            }} />,
          )}
        </Form.Item>
        <Form.Item labelCol={{ span: 5 }} wrapperCol={{ span: 16 }} label='适合新手'>
          {getFieldDecorator('isNovice', {
            rules: [{
              required: true, message: '请选择',
            }],
          })(
            <Radio select={SwitchSelect} />,
          )}
        </Form.Item>
        <Form.Item labelCol={{ span: 5 }} wrapperCol={{ span: 16 }} label='原创资料'>
          {getFieldDecorator('isOriginal', {
            rules: [{
              required: true, message: '请选择',
            }],
          })(
            <Radio select={SwitchSelect} />,
          )}
        </Form.Item>
        <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('pages', {
            rules: [{
              required: true, message: '请输入页数',
            }],
          })(
            <InputNumber placeholder='请输入' />,
          )}
        </Form.Item>
        <Form.Item labelCol={{ span: 5 }} wrapperCol={{ span: 16 }} label='链接地址'>
          {getFieldDecorator('link', {
            rules: [{
              required: true, message: '请输入地址',
            }],
          })(
            <Input placeholder='请输入' />,
          )}
        </Form.Item>
      </Form>
    </Block>;
  }

  renderInfo() {
    const { getFieldDecorator, setFieldsValue, getFieldValue } = this.props.form;
    const cover = getFieldValue('cover');
    return <Block>
      <h1>宣传信息</h1>
      <Form>
        <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.Item labelCol={{ span: 5 }} wrapperCol={{ span: 16 }} label='摘要介绍'>
          {getFieldDecorator('description', {
            rules: [{
              required: true, message: '请输入摘要',
            }],
          })(
            <Input placeholder='请输入' />,
          )}
        </Form.Item>
        <Form.Item labelCol={{ span: 5 }} wrapperCol={{ span: 16 }} label='试用页码'>
          <Row>
            <Col span={3}>
              <Form.Item>
                {getFieldDecorator('trailStart')(
                  <InputNumber min={1} precision={0} formatter={(v) => parseInt(v, 10) || 1} />,
                )}
              </Form.Item>
            </Col>
            <Col span={1}>至</Col>
            <Col span={3}>
              <Form.Item>
                {getFieldDecorator('trailEnd')(
                  <InputNumber min={1} precision={0} formatter={(v) => parseInt(v, 10) || 1} />,
                )}
              </Form.Item>
            </Col>
          </Row>
        </Form.Item>
      </Form>
    </Block>;
  }

  renderFile() {
    const { getFieldDecorator, setFieldsValue, getFieldValue } = this.props.form;
    const resource = getFieldValue('resource');
    const trailResource = getFieldValue('trailResource');
    return <Block>
      <h1>资料文件</h1>
      <Form.Item labelCol={{ span: 5 }} wrapperCol={{ span: 16 }} label='正式版本'>
        {resource && <a href={resource} target="_blank">访问</a>}
        {getFieldDecorator('resource', {
          rules: [
            { required: true, message: '上传文件' },
          ],
        })(
          <Upload
            showUploadList={false}
            beforeUpload={(file) => System.uploadImage(file).then((result) => {
              setFieldsValue({ resource: result.url });
              return Promise.reject();
            })}
          >
            <Button>上传文件</Button>
          </Upload>,
        )}
      </Form.Item>
      <Form.Item labelCol={{ span: 5 }} wrapperCol={{ span: 16 }} label='试用版本'>
        {trailResource && <a href={trailResource} target="_blank">访问</a>}
        {getFieldDecorator('trailResource', {
          rules: [
            { required: true, message: '上传文件' },
          ],
        })(
          <Upload
            showUploadList={false}
            beforeUpload={(file) => System.uploadImage(file).then((result) => {
              setFieldsValue({ trailResource: result.url });
              return Promise.reject();
            })}
          >
            <Button>上传文件</Button>
          </Upload>,
        )}
      </Form.Item>
    </Block>;
  }

  renderContent() {
    const { getFieldDecorator } = this.props.form;
    return <Block flex>
      <Form>
        <Form.Item label='资料介绍'>
          {getFieldDecorator('content', {
          })(
            <Editor placeholder='输入内容' />,
          )}
        </Form.Item>
      </Form>
    </Block>;
  }

  renderAuthor() {
    const { getFieldDecorator } = this.props.form;
    return <Block flex>
      <Form>
        <Form.Item label='作者介绍'>
          {getFieldDecorator('authorContent', {
          })(
            <Editor placeholder='输入内容' />,
          )}
        </Form.Item>
      </Form>
    </Block>;
  }

  renderMethod() {
    const { getFieldDecorator } = this.props.form;
    return <Block flex>
      <Form>
        <Form.Item label='获取方式'>
          {getFieldDecorator('methodContent', {
          })(
            <Editor placeholder='输入内容' />,
          )}
        </Form.Item>
      </Form>
    </Block>;
  }

  renderView() {
    return <div flex>
      {this.renderBase()}
      {this.renderInfo()}
      {this.renderFile()}
      {this.renderContent()}
      {this.renderAuthor()}
      {this.renderMethod()}

      <Row type="flex" justify="center">
        <Col>
          <Button type="primary" onClick={() => {
            this.submit();
          }}>保存</Button>
        </Col>
      </Row>
    </div>;
  }
}