发布问卷做问卷总分值100的最大限制

Mr Ke

2020-05-15 e36d04fc335547bc293078a77924c94a31e99cdc

 SunshineIns/src/page/Newly.jsx

@@ -1,33 +1,243 @@
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() {
    const { id } = this.props.match.params;
    document.title = id == 'new' ? '新建问卷' : '编辑问卷';
    this.setState({
      loading: true
    });
    Fetch.questionFindById(id).then(res => {
      res.questionDtos = res.questionDtos && res.questionDtos.length ? res.questionDtos.map((item) => ({
        ...item,
        remark: true
      })) : [];
      this.setState({
        loading: false,
        initData: res
      })
    })
  }

  submitQuestionTemp = (questionDtos, extraData) => {
    const { initData } = this.state;
    console.log('questionDtos', questionDtos);
    console.log('initData', initData);
    if (!extraData.questionnairTitle) {
      return message.error('请填写问卷标题');
    }
    if (!extraData.questionnairBusinessType) {
      return message.error('请选择业务类型');
    }
    let sum = questionDtos.reduce((p, n) => {
      if (n.type == 'radio') {
        return p.concat(Math.max.apply(null, n.scores))
      } else {
        return p.concat(n.scores)
      }
    }, []).reduce(function (prev, curr, idx, arr) {
      return Number(prev) + Number(curr);
    });
    console.log('总分值', sum);
    if (sum > 100) {
      return message.error('分值超过最大值，请重新设定分值');
    }

    componentDidMount() {
    questionDtos = questionDtos.map(({ type, title, required, remarkText, options, scores, warnFlag }) => ({
      type, title, required, remarkText, options, scores, warnFlag
    }));

        document.title = '新建问卷';
        // this.getData();
    }
    this.setState({
      btnLoading: true
    })
    console.log('questionDtos', questionDtos);

    getData = () => {
        
    }
   
    render() {
        
        const { data, loading, resetKey } = this.state;
        return (
            <div className="app-page">
                qwe
            </div>
        );
    }
    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('问卷提交成功');
        this.props.history.push('/questionnaire/newlyList');
      }
    })
  }

  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>
    );
  }

}