1

liuwh

2020-03-23 ed96dab91fbac7159525fe557af2ecdd135c791d

 SunshineIns/src/page/Newly.jsx

@@ -1,33 +1,226 @@
import React from 'react';
import { Input, Button, DatePicker, Divider, message, Popconfirm, Select, Badge } from 'antd';
import { Input, Button, DatePicker, Divider, message, Popconfirm, Select, Badge, Spin, Breadcrumb } from 'antd';
import Questionnair from '../page/Questionnair'
import Fetch from '../fetch'

export default class Newly extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            data: [],
           
        };
    }
  constructor(props) {
    super(props);
    this.state = {
      loading: false,
      data: [
        {
          questionId: 'afaa9e6d672c56418199a8a62a4152c2d74f',
          type: 'radio',
          title: '单选题',
          required: true,
          remark: true,
          remarkText: '（此题关于一个很有深度的问题）',
          options: ['选项1', '选项2'],
          rows: 1,
          textareaHeight: 3,
          maxLength: 50,
          otherOption: true,
          otherOptionForwards: '其他',
          otherOptionBackwards: '22222',
          completionForwards: '题目：',
          completionBackwards: '',
          isEditor: false,
          isFirst: false,
          editorShake: ''
        },
        {
          questionId: '347a22645aa32d4f4a5a231fc98027e0b3c5',
          type: 'dropdown',
          title: '下拉',
          required: true,
          remark: false,
          remarkText: '',
          options: ['选项1', '选项2'],
          rows: 1,
          textareaHeight: 3,
          maxLength: 50,
          otherOption: false,
          otherOptionForwards: '其他',
          otherOptionBackwards: '',
          completionForwards: '题目：',
          completionBackwards: '',
          isEditor: false,
          isFirst: false,
          editorShake: ''
        },
        {
          questionId: '400eabd41ad9d846eca91abaf0a853670d38',
          type: 'checkbox',
          title: '多选题',
          required: true,
          remark: false,
          remarkText: '',
          options: ['选项1', '选项2'],
          rows: 1,
          textareaHeight: 3,
          maxLength: 50,
          otherOption: false,
          otherOptionForwards: '其他',
          otherOptionBackwards: '',
          completionForwards: '题目：',
          completionBackwards: '',
          isEditor: false,
          isFirst: false,
          editorShake: ''
        },
        {
          questionId: 'ea99f8009dc5c841504aaad62aab2ea2a7ee',
          type: 'text',
          title: '单行文本',
          required: true,
          remark: false,
          remarkText: '',
          options: ['选项', '选项'],
          rows: 1,
          textareaHeight: 3,
          maxLength: 50,
          otherOption: false,
          otherOptionForwards: '其他',
          otherOptionBackwards: '',
          completionForwards: '题目：',
          completionBackwards: '',
          isEditor: false,
          isFirst: false,
          editorShake: ''
        },
        {
          questionId: 'f0ca471ce2918043d5bad6f5b13b991bc5a6',
          type: 'textarea',
          title: '多行文本',
          required: true,
          remark: false,
          remarkText: '',
          options: ['选项', '选项'],
          rows: 1,
          textareaHeight: 3,
          maxLength: 50,
          otherOption: false,
          otherOptionForwards: '其他',
          otherOptionBackwards: '',
          completionForwards: '题目：',
          completionBackwards: '',
          isEditor: false,
          isFirst: false,
          editorShake: ''
        },
        {
          questionId: '0d0529163a79e749587888375a95a5045a0d',
          type: 'input',
          title: '',
          required: true,
          remark: false,
          remarkText: '',
          options: ['选项', '选项'],
          rows: 1,
          textareaHeight: 3,
          maxLength: 50,
          otherOption: false,
          otherOptionForwards: '其他',
          otherOptionBackwards: '',
          completionForwards: '题目：',
          completionBackwards: '下个路口见',
          isEditor: false,
          isFirst: false,
          editorShake: ''
        }
      ],
      initData: null,
      btnLoading: false

    componentDidMount() {
    };
  }

        document.title = '新建问卷';
        // this.getData();
    }
  componentDidMount() {
    const { id } = this.props.match.params;
    document.title = id == 'new' ? '新建问卷' : '编辑问卷';
    this.setState({
      loading: true
    });
    Fetch.questionFindById(id).then(res => {
      console.log('res', res);
      res.questionDtos = res.questionDtos && res.questionDtos.length ? res.questionDtos.map((item) => ({
        ...item,
        remark: true
      })) : [];
      this.setState({
        loading: false,
        initData: res
      })
    })
  }

    getData = () => {
        
  submitQuestionTemp = (questionDtos, extraData) => {
    const { initData } = this.state;
    console.log('questionDtos', questionDtos);
    console.log('initData', initData);
    if (!extraData.questionnairTitle) {
      return message.error('请填写问卷标题');
    }
   
    render() {
        
        const { data, loading, resetKey } = this.state;
        return (
            <div className="app-page">
                qwe
            </div>
        );
    if (!extraData.questionnairBusinessType) {
      return message.error('请选择业务类型');
    }
    questionDtos = questionDtos.map(({ type, title, required, remarkText, options, scores, warnFlag }) => ({
      type, title, required, remarkText, options, scores, warnFlag
    }));
    this.setState({
      btnLoading: true
    })
    Fetch.saveQuestionTemp({
      ...initData,
      title: extraData.questionnairTitle,
      content: extraData.questionnairDescription,
      businessType: extraData.questionnairBusinessType,
      questionDtos
    }).then(res => {
      console.log('res', res);
      this.setState({
        btnLoading: false
      })
      if (res.code == 0) {
        message.success('问卷提交成功');
      }
    })
  }

  getData = () => {

  }

  render() {

    const { data, loading, resetKey, initData, btnLoading } = this.state;
    const { id } = this.props.match.params;
    return (
      <div className="app-page">
        <div style={{
          margin: '10px 0 0 10px'
        }}>
          <Breadcrumb>
            <Breadcrumb.Item>
              <a onClick={()=>{
                this.props.history.goBack();
              }}>问卷管理</a>
            </Breadcrumb.Item>
            <Breadcrumb.Item>
              {id == 'new' ? '新建问卷' : '编辑问卷'}
            </Breadcrumb.Item>
          </Breadcrumb>
        </div>
        {
          loading ?
            <div style={{ height: 200, width: '100%', display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
              <Spin spinning={loading} />
            </div> :
            initData && <Questionnair submitQuestionTemp={this.submitQuestionTemp} btnLoading={btnLoading} initData={initData} editors={initData.questionDtos || []} />
        }
      </div>
    );
  }

}