forked from nsjcy/frontEnd/nsjcy

Mr Ke
2020-05-27 58ae2ba21efcd85df331cf996a94038a77302b51
SunshineIns/src/view/QuestionnairEditor/index.js
@@ -19,7 +19,12 @@
    this.temp = '';
    this.otherOptionInput = '';
    this.answer = {};
    this.answer = {
      radio: {
        optionIndex: "0",
        optionValue: "大于10小于50"
      }
    };
  }
  // static defaultProps = {
@@ -121,13 +126,13 @@
        hasScore: [...hasScore]
      });
      let scoresTemp = scores.concat();
      scoresTemp[index] = value;
      scoresTemp[index] = value.replace(/\D/g, ''); //替换掉非数字部分
      value = scoresTemp;
    }
    if (key == 'warnFlag') {
      let { warnFlag } = this.state.editor;
      let warnFlagTemp = warnFlag.concat();
      console.log('warnFlagTemp', warnFlagTemp)
      console.log('warnFlagTemp', warnFlagTemp);
      warnFlagTemp[index] = checked;
      value = warnFlagTemp;
    }
@@ -222,7 +227,8 @@
    this.setState(prevState => ({
      editor: {
        ...prevState.editor,
        options: [...prevState.editor.options, '']
        options: [...prevState.editor.options, ''],
        warnFlag: [...prevState.editor.warnFlag, false]
      }
    }));
  };
@@ -380,7 +386,7 @@
    }
  };
  render() {
    const { index, curMoveItem, drag, acitveAnswer } = this.props;
    const { index, curMoveItem, drag, acitveAnswer, disabled } = this.props;
    const {
      toggleMutiOption,
      editor,
@@ -415,9 +421,9 @@
      answer,
      warnFlag
    } = editor;
    this.answer = answer ? JSON.parse(JSON.stringify(answer)) : {};
    this.otherOptionValue = answer ? this.answer[type].otherOptionValue : [];
    console.log(this.answer)
    // this.answer = answer ? JSON.parse(JSON.stringify(answer)) : {};
    // this.otherOptionValue = answer ? this.answer[type].otherOptionValue : [];
    /*
     *
     * 以下元素为编辑状态下的元素
@@ -476,6 +482,7 @@
          <div style={{ flex: '1', display: 'flex', alignItems: 'center' }}>
            <ShakeTransition shake={scoreShake[index]}>
              <Input
                type="number"
                index={index}
                placeholder="分值"
                name={'scores'}
@@ -643,12 +650,17 @@
          return (
            <label
              className="wowjoy-radio"
              style={{ width: `${100 / parseInt(rows)}%`, marginBottom: 8, marginRight: 30 }}
              style={{
                width: `${100 / parseInt(rows)}%`,
                marginBottom: 8,
                marginRight: 30
              }}
              key={uuid()}
            >
              <input
                type="radio"
                name="radio"
                disabled={disabled || false}
                data-index={index}
                value={data}
                defaultChecked={
@@ -675,8 +687,8 @@
                    <span>{otherOptionBackwards}</span>
                  </div>
                ) : (
                  data
                )}
                    data
                  )}
              </span>
            </label>
          );
@@ -690,16 +702,21 @@
            <label
              className="wowjoy-checkbox"
              key={uuid()}
              style={{ width: `${100 / parseInt(rows)}%`, marginBottom: 8 }}
              style={{
                width: `${100 / parseInt(rows)}%`,
                marginBottom: 8,
                marginRight: 30
              }}
            >
              <input
                type="checkbox"
                name="checkbox"
                disabled={disabled || false}
                value={data}
                data-index={index}
                defaultChecked={
                  answer &&
                  this.answer.checkbox !== '' &&
                  this.answer.checkbox &&
                  this.answer.checkbox.optionIndex.includes(index + '')
                }
                onChange={this.handleAnswerChange}
@@ -723,8 +740,8 @@
                    <span>{otherOptionBackwards}</span>
                  </div>
                ) : (
                  data
                )}
                    data
                  )}
              </span>
            </label>
          );
@@ -750,8 +767,8 @@
      type === 'dropdown'
        ? subDropdownEl
        : type === 'radio'
        ? subRadioEl
        : subCheckboxEl;
          ? subRadioEl
          : subCheckboxEl;
    //填写状态下的单行文本、多行文本
    const subTextEl = (
      <input
@@ -909,64 +926,69 @@
            </div>
          </ShakeTransition>
        ) : (
          <div
            className="questionnair-subject"
            style={{
              background: drag ? '' : hover ? '#F5F5F5' : '#fff',
              borderTopColor: drag && index === 0 ? '#dbdbdb' : '',
              borderBottomColor: drag ? '#dbdbdb' : '',
              cursor: acitveAnswer ? '' : 'move',
              display: 'flex',
              justifyContent: 'center'
            }}
            onMouseEnter={this.mouseEnter}
            onMouseLeave={this.mouseLeave}
          >
            <div
              className="questionnair-subject-inner"
              style={{ margin: acitveAnswer ? '' : '0 auto' }}
              className="questionnair-subject"
              style={{
                background: drag ? '' : hover ? '#F5F5F5' : '#fff',
                borderTopColor: drag && index === 0 ? '#dbdbdb' : '',
                borderBottomColor: drag ? '#dbdbdb' : '',
                cursor: acitveAnswer ? '' : 'move',
                display: 'flex',
                justifyContent: 'center'
              }}
              onMouseEnter={this.mouseEnter}
              onMouseLeave={this.mouseLeave}
            >
              <div className="subject-row">
                <span>{index + 1}.</span>
                {'input' === type ? subCompletionEl : <span>{title}</span>}
                {required && <span className="subject-title-require">*</span>}
              </div>
              {remark && (
                <div className="subject-row subject-remarks">{remarkText}</div>
              )}
              <div className="subject-row">
                {['radio', 'dropdown', 'checkbox'].includes(type) && optionsEl}
                {type === 'text' && subTextEl}
                {type === 'textarea' && subTextareaEl}
              </div>
            </div>
            {!acitveAnswer && (
              <div
                className="subject-control-mask"
                style={{
                  background:
                    curMoveItem === index ? 'rgba(245,245,245,0.3)' : ''
                }}
              ></div>
            )}
            <div
              className="subject-control-bar"
              style={{ transform: drag ? '' : hover ? 'translateX(0)' : '' }}
            >
              <div className="control-bar-inner">
                <div className="control-bar-button" onClick={this.edit}>
                  <i className="iconfont icon-grey_bianji"></i>
                className="questionnair-subject-inner"
                style={{ margin: acitveAnswer ? '' : '0 auto' }}
              >
                <div className="subject-row">
                  <span>{index + 1}.</span>
                  {'input' === type ? subCompletionEl : <span>{title}</span>}
                  {required == 'true' && (
                    <span className="subject-title-require">*</span>
                  )}
                  {type == 'checkbox' && <span>(多选题)</span>}
                  {type == 'radio' && <span>(单选题)</span>}
                </div>
                <div className="control-bar-button" onClick={this.copy}>
                  <i className="iconfont icon-grey_fuzhi"></i>
                {remark && (
                  <div className="subject-row subject-remarks">{remarkText}</div>
                )}
                <div className="subject-row">
                  {['radio', 'dropdown', 'checkbox'].includes(type) && optionsEl}
                  {type === 'text' && subTextEl}
                  {type === 'textarea' && subTextareaEl}
                </div>
                <div className="control-bar-button" onClick={this.remove}>
                  <i className="iconfont icon-grey_shanchu"></i>
              </div>
              {!acitveAnswer && (
                <div
                  className="subject-control-mask"
                  style={{
                    background:
                      curMoveItem === index ? 'rgba(245,245,245,0.3)' : ''
                  }}
                ></div>
              )}
              <div
                className="subject-control-bar"
                style={{ transform: drag ? '' : hover ? 'translateX(0)' : '' }}
              >
                <div className="control-bar-inner">
                  <div className="control-bar-button" onClick={this.edit}>
                    <i className="iconfont icon-grey_bianji"></i>
                  </div>
                  <div className="control-bar-button" onClick={this.copy}>
                    <i className="iconfont icon-grey_fuzhi"></i>
                  </div>
                  <div className="control-bar-button" onClick={this.remove}>
                    <i className="iconfont icon-grey_shanchu"></i>
                  </div>
                </div>
              </div>
            </div>
          </div>
        )}
          )}
      </div>
    );
  }