163 lines
		
	
	
		
			5.3 KiB
		
	
	
	
		
			Plaintext
		
	
	
			
		
		
	
	
			163 lines
		
	
	
		
			5.3 KiB
		
	
	
	
		
			Plaintext
		
	
	
<template>
 | 
						|
  <el-form
 | 
						|
    v-if="isRender"
 | 
						|
    ref="questionForm"
 | 
						|
    :model="questionForm"
 | 
						|
    size="small"
 | 
						|
    style="width:600px;"
 | 
						|
  >
 | 
						|
    <template v-for="item in answers">
 | 
						|
      <el-form-item
 | 
						|
        v-if="item.IsShow"
 | 
						|
        :key="item.TrialQCQuestionConfigureId"
 | 
						|
        :label="`${item.QuestionName}`"
 | 
						|
        :prop="item.TrialQCQuestionConfigureId"
 | 
						|
        :rules="{required: item.IsRequired, message: $t('common:ruleMessage:specify')}"
 | 
						|
      >
 | 
						|
        <!-- 输入框 -->
 | 
						|
        <el-input
 | 
						|
          v-if="item.Type==='input'"
 | 
						|
          v-model="questionForm[item.TrialQCQuestionConfigureId]"
 | 
						|
          :disabled="!item.IsEnable || isAudit"
 | 
						|
          style="width:500px"
 | 
						|
        />
 | 
						|
        <!-- 多行文本输入框 -->
 | 
						|
        <el-input
 | 
						|
          v-if="item.Type==='textarea'"
 | 
						|
          v-model="questionForm[item.TrialQCQuestionConfigureId]"
 | 
						|
          type="textarea"
 | 
						|
          :autosize="{ minRows: 2, maxRows: 4}"
 | 
						|
          :disabled="!item.IsEnable || isAudit"
 | 
						|
          style="width:500px"
 | 
						|
        />
 | 
						|
        <!-- 下拉框 -->
 | 
						|
        <el-select
 | 
						|
          v-if="item.Type==='select'"
 | 
						|
          v-model="questionForm[item.TrialQCQuestionConfigureId]"
 | 
						|
          :disabled="!item.IsEnable || isAudit"
 | 
						|
          @change="((val)=>{formItemChange(val, item)})"
 | 
						|
        >
 | 
						|
          <el-option
 | 
						|
            v-for="val in item.TypeValue.split('|')"
 | 
						|
            :key="val"
 | 
						|
            :label="val"
 | 
						|
            :value="val"
 | 
						|
          />
 | 
						|
        </el-select>
 | 
						|
        <!-- 单选 -->
 | 
						|
        <el-radio-group
 | 
						|
          v-if="item.Type==='radio'"
 | 
						|
          v-model="questionForm[item.TrialQCQuestionConfigureId]"
 | 
						|
          :disabled="!item.IsEnable || isAudit"
 | 
						|
          @change="((val)=>{formItemChange(val, item)})"
 | 
						|
        >
 | 
						|
          <el-radio v-for="val in item.TypeValue.split('|')" :key="val" :label="val">{{ val }}</el-radio>
 | 
						|
        </el-radio-group>
 | 
						|
        <!-- 复选框 -->
 | 
						|
        <el-checkbox-group
 | 
						|
          v-if="item.Type==='checkbox'"
 | 
						|
          v-model="questionForm[item.TrialQCQuestionConfigureId]"
 | 
						|
          :disabled="!item.IsEnable || isAudit"
 | 
						|
          @change="((val)=>{formItemChange(val, item)})"
 | 
						|
        >
 | 
						|
          <el-checkbox v-for="val in item.TypeValue.split('|')" :key="val" :label="val">{{ val }}</el-checkbox>
 | 
						|
        </el-checkbox-group>
 | 
						|
      </el-form-item>
 | 
						|
    </template>
 | 
						|
  </el-form>
 | 
						|
</template>
 | 
						|
<script>
 | 
						|
export default {
 | 
						|
  props: {
 | 
						|
    answers: {
 | 
						|
      type: Array,
 | 
						|
      default() {
 | 
						|
        return []
 | 
						|
      }
 | 
						|
    },
 | 
						|
    isAudit: {
 | 
						|
      type: Boolean,
 | 
						|
      default: false
 | 
						|
    }
 | 
						|
  },
 | 
						|
  data() {
 | 
						|
    return {
 | 
						|
      questionForm: {},
 | 
						|
      isRender: false
 | 
						|
    }
 | 
						|
  },
 | 
						|
  mounted() {
 | 
						|
    this.formatAnswers()
 | 
						|
  },
 | 
						|
  methods: {
 | 
						|
    formatAnswers() {
 | 
						|
      this.answers.forEach((item, index) => {
 | 
						|
        if (!item.IsChild || (item.IsChild && item.Answer !== '')) {
 | 
						|
          this.$set(this.answers[index], 'IsShow', true)
 | 
						|
          this.$set(this.questionForm, item.TrialQCQuestionConfigureId, item.Answer)
 | 
						|
        } else {
 | 
						|
          this.$set(this.answers[index], 'IsShow', false)
 | 
						|
          this.$set(this.questionForm, item.TrialQCQuestionConfigureId, '')
 | 
						|
        }
 | 
						|
      })
 | 
						|
      this.isRender = true
 | 
						|
    },
 | 
						|
    formItemChange(val, currentFormItem) {
 | 
						|
      // 设置触发项
 | 
						|
      this.answers.forEach((item, index) => {
 | 
						|
        // 显示触发项且重置Answer
 | 
						|
        // 重置未触发项
 | 
						|
        if (item.ParentId === currentFormItem.TrialQCQuestionConfigureId) {
 | 
						|
          if (item.ParentTriggerValue === val) {
 | 
						|
            this.$set(this.answers[index], 'Answer', '')
 | 
						|
            this.$set(this.questionForm, item.TrialQCQuestionConfigureId, '')
 | 
						|
            this.$set(this.answers[index], 'IsShow', true)
 | 
						|
          } else {
 | 
						|
            this.$set(this.answers[index], 'Answer', '')
 | 
						|
            this.$set(this.answers[index], 'IsShow', false)
 | 
						|
            this.$set(this.questionForm, item.TrialQCQuestionConfigureId, '')
 | 
						|
            // 判断是否有子问题如果有则设置为隐藏且清空值
 | 
						|
            const scope = this
 | 
						|
            this.removeChild(item.TrialQCQuestionConfigureId, scope)
 | 
						|
          }
 | 
						|
        }
 | 
						|
      })
 | 
						|
    },
 | 
						|
    removeChild(trialQCQuestionConfigureId, scope) {
 | 
						|
      if (scope.answers.length > 0) {
 | 
						|
        scope.answers.forEach(function(v, i) {
 | 
						|
          if (v.ParentId === trialQCQuestionConfigureId) {
 | 
						|
            scope.$set(scope.answers[i], 'Answer', '')
 | 
						|
            scope.$set(scope.answers[i], 'IsShow', false)
 | 
						|
            scope.$set(scope.questionForm, v.TrialQCQuestionConfigureId, '')
 | 
						|
            scope.removeChild(v.TrialQCQuestionConfigureId, scope)
 | 
						|
          }
 | 
						|
        })
 | 
						|
      }
 | 
						|
    },
 | 
						|
    submit() {
 | 
						|
      return new Promise((resolve, reject) => {
 | 
						|
        this.$refs['questionForm'].validate(valid => {
 | 
						|
          if (!valid) {
 | 
						|
            this.$confirm(this.$t('trials:audit:message:specifyQuestions'), {
 | 
						|
              type: 'warning',
 | 
						|
              showCancelButton: false,
 | 
						|
              callback: action => {}
 | 
						|
            })
 | 
						|
            reject()
 | 
						|
          } else {
 | 
						|
          // 设置当前节点的Answer
 | 
						|
            this.answers.forEach((item, index) => {
 | 
						|
              if (item.IsShow) {
 | 
						|
                this.$set(this.answers[index], 'Answer', this.questionForm[item.TrialQCQuestionConfigureId])
 | 
						|
              }
 | 
						|
            })
 | 
						|
            resolve(this.answers)
 | 
						|
          }
 | 
						|
        })
 | 
						|
      })
 | 
						|
    }
 | 
						|
  }
 | 
						|
}
 | 
						|
</script>
 |