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: 'add',
      type: 'primary',
      name: '上传pdf文件',
      render: (item) => {
        return <Upload
          showUploadList={false}
          beforeUpload={(file) => System.uploadImage(file).then((result) => {
            return Course.addDataHistory({ resource: result.url });
          }).then(() => {
            this.refreshHistory();
          })}
        >
          <Button>{item.name}</Button>
        </Upload>;
      },
    }];
    this.columns = [{
      title: '上传时间',
      dataIndex: 'createTime',
      render: (text) => {
        return formatDate(text);
      },
    }, {
      title: '文件地址',
      dataIndex: 'resource',
      render: (text) => {
        return <a href={text} target='_blank'>下载</a>;
      },
    }, {
      title: '版本名称',
      dataIndex: 'version',
      render: (text, record) => {
        return <EditTableCell value={text} onChange={(v) => {
          this.changeHistory('version', record.id, v);
        }} />;
      },
    }, {
      title: '变更页数',
      dataIndex: 'changePage',
      render: (text, record) => {
        return <EditTableCell value={text} onChange={(v) => {
          this.changeHistory('changePage', record.id, v);
        }} />;
      },
    }, {
      title: '原文',
      dataIndex: 'originContent',
      render: (text, record) => {
        return <EditTableCell value={text} onChange={(v) => {
          this.changeHistory('originContent', record.id, v);
        }} />;
      },
    }, {
      title: '更正为',
      dataIndex: 'content',
      render: (text, record) => {
        return <EditTableCell value={text} onChange={(v) => {
          this.changeHistory('content', record.id, v);
        }} />;
      },
    }];
    Exercise.courseStruct().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}`;
        // getFieldDecorator('id');
        // getFieldDecorator('structId');
        // getFieldDecorator('dataType');
        // getFieldDecorator('isNovice');
        // getFieldDecorator('isOriginal');
        // getFieldDecorator('title');
        // getFieldDecorator('price');
        // getFieldDecorator('pages');
        // getFieldDecorator('content');
        // getFieldDecorator('content');
        // getFieldDecorator('authorContent');
        // getFieldDecorator('methondContent');
        setFieldsValue(result);
        this.setState({ data: result });
        if (result.dataType === 'electron') {
          this.refreshHistory();
        }
      });
  }

  refreshHistory() {
    const { id } = this.params;
    Course.listDataHistory({ dataId: id }).then(result => {
      this.setState({ list: result.list, total: result.total, history: true });
    });
  }

  changeHistory(field, id, value) {
    Course.editDataHistory({ id, [field]: value }).then(() => {
      this.refreshHistory();
    });
  }

  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;
        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>
    </Block>;
  }

  renderHistory() {
    return <Block>
      <h1>资料版本</h1>
      <ActionLayout
        itemList={this.actionList}
        selectedKeys={this.state.selectedKeys}
        onAction={key => this.onAction(key)}
      />
      <TableLayout
        columns={this.columns}
        list={this.state.list}
        pagination={false}
        loading={this.props.core.loading}
        onChange={(pagination, filters, sorter) => this.tableChange(pagination, filters, sorter)}
        onSelect={(keys, rows) => this.tableSelect(keys, rows)}
        selectedKeys={this.state.selectedKeys}
      />
    </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() {
    const { history } = this.state;
    return <div flex>
      {this.renderBase()}
      {this.renderInfo()}
      {history && this.renderHistory()}
      {this.renderContent()}
      {this.renderAuthor()}
      {this.renderMethod()}

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