160 lines
		
	
	
		
			4.3 KiB
		
	
	
	
		
			Plaintext
		
	
	
			
		
		
	
	
			160 lines
		
	
	
		
			4.3 KiB
		
	
	
	
		
			Plaintext
		
	
	
<template>
 | 
						|
  <div>
 | 
						|
    <!-- <div
 | 
						|
      v-if="!!question.GroupName && (questionForm[question.ParentId] === question.ParentTriggerValue) || question.ParentId===''||question.ParentId===null"
 | 
						|
      style="font-weight: bold;font-size: 16px;margin: 5px 0px;"
 | 
						|
    >
 | 
						|
      {{ question.GroupName }}
 | 
						|
    </div> -->
 | 
						|
    <div
 | 
						|
      v-if="!!question.GroupName && question.Type==='group'"
 | 
						|
      style="font-weight: bold;font-size: 16px;margin: 5px 0px;"
 | 
						|
    >
 | 
						|
      {{ question.GroupName }}
 | 
						|
    </div>
 | 
						|
    <template>
 | 
						|
      <el-form-item
 | 
						|
        v-if="(questionForm[question.ParentId] === question.ParentTriggerValue) || question.ParentId===''||question.ParentId===null"
 | 
						|
        :label="`${question.QuestionName}`"
 | 
						|
        :prop="question.ReadingQuestionTrialId"
 | 
						|
        :rules="[
 | 
						|
          { required: question.IsRequired && question.Type!=='group' && question.Type!=='summary',
 | 
						|
            message: '请注明', trigger: ['blur', 'change']},
 | 
						|
        ]"
 | 
						|
        :class="[question.Type==='group'?'mb':'']"
 | 
						|
      >
 | 
						|
 | 
						|
        <!-- 输入框 -->
 | 
						|
        <el-input
 | 
						|
          v-if="question.Type==='input'"
 | 
						|
          v-model="questionForm[question.ReadingQuestionTrialId]"
 | 
						|
          :disabled="readingTaskState >= 2"
 | 
						|
        />
 | 
						|
        <!-- 多行文本输入框 -->
 | 
						|
        <el-input
 | 
						|
          v-if="question.Type==='textarea'"
 | 
						|
          v-model="questionForm[question.ReadingQuestionTrialId]"
 | 
						|
          type="textarea"
 | 
						|
          :autosize="{ minRows: 2, maxRows: 4}"
 | 
						|
          :disabled="readingTaskState >= 2"
 | 
						|
        />
 | 
						|
        <!-- 下拉框 -->
 | 
						|
        <el-select
 | 
						|
          v-if="question.Type==='select'"
 | 
						|
          v-model="questionForm[question.ReadingQuestionTrialId]"
 | 
						|
          :disabled="readingTaskState >= 2"
 | 
						|
          clearable
 | 
						|
          @change="((val)=>{formItemChange(val, question)})"
 | 
						|
        >
 | 
						|
          <el-option
 | 
						|
            v-for="val in question.TypeValue.split('|')"
 | 
						|
            :key="val"
 | 
						|
            :label="val"
 | 
						|
            :value="val"
 | 
						|
          />
 | 
						|
        </el-select>
 | 
						|
        <!-- 单选 -->
 | 
						|
        <el-radio-group
 | 
						|
          v-if="question.Type==='radio'"
 | 
						|
          v-model="questionForm[question.ReadingQuestionTrialId]"
 | 
						|
          :disabled="readingTaskState >= 2"
 | 
						|
          @change="((val)=>{formItemChange(val, question)})"
 | 
						|
        >
 | 
						|
          <el-radio
 | 
						|
            v-for="val in question.TypeValue.split('|')"
 | 
						|
            :key="val"
 | 
						|
            :label="val"
 | 
						|
          >
 | 
						|
            {{ val }}
 | 
						|
          </el-radio>
 | 
						|
        </el-radio-group>
 | 
						|
        <!-- 复选框 -->
 | 
						|
        <el-checkbox-group
 | 
						|
          v-if="question.Type==='checkbox'"
 | 
						|
          v-model="questionForm[question.ReadingQuestionTrialId]"
 | 
						|
          :disabled="readingTaskState >= 2"
 | 
						|
        >
 | 
						|
          <el-checkbox
 | 
						|
            v-for="val in question.TypeValue.split('|')"
 | 
						|
            :key="val"
 | 
						|
            :label="val"
 | 
						|
          >
 | 
						|
            {{ val }}
 | 
						|
          </el-checkbox>
 | 
						|
        </el-checkbox-group>
 | 
						|
      </el-form-item>
 | 
						|
    </template>
 | 
						|
 | 
						|
    <FormItem
 | 
						|
      v-for="(item) in question.Childrens"
 | 
						|
      :key="item.ReadingQuestionTrialId"
 | 
						|
      :question="item"
 | 
						|
      :reading-task-state="readingTaskState"
 | 
						|
      :question-form="questionForm"
 | 
						|
      @resetFormItemData="resetFormItemData"
 | 
						|
    />
 | 
						|
  </div>
 | 
						|
</template>
 | 
						|
<script>
 | 
						|
export default {
 | 
						|
  name: 'FormItem',
 | 
						|
  props: {
 | 
						|
    questionForm: {
 | 
						|
      type: Object,
 | 
						|
      default() {
 | 
						|
        return {}
 | 
						|
      }
 | 
						|
    },
 | 
						|
    question: {
 | 
						|
      type: Object,
 | 
						|
      default() {
 | 
						|
        return []
 | 
						|
      }
 | 
						|
    },
 | 
						|
    readingTaskState: {
 | 
						|
      type: Number,
 | 
						|
      required: true
 | 
						|
    }
 | 
						|
  },
 | 
						|
  data() {
 | 
						|
    return {
 | 
						|
 | 
						|
    }
 | 
						|
  },
 | 
						|
  watch: {
 | 
						|
    questionForm: {
 | 
						|
      deep: true,
 | 
						|
      immediate: true,
 | 
						|
      handler(v) {
 | 
						|
        // console.log(v)
 | 
						|
      }
 | 
						|
    }
 | 
						|
  },
 | 
						|
  mounted() {
 | 
						|
  },
 | 
						|
  methods: {
 | 
						|
    formItemChange(v, question) {
 | 
						|
      if (question.Childrens.length > 0) {
 | 
						|
        this.resetChild(question.Childrens)
 | 
						|
      }
 | 
						|
    },
 | 
						|
    resetChild(obj) {
 | 
						|
      obj.forEach(i => {
 | 
						|
        this.$emit('resetFormItemData', i.ReadingQuestionTrialId)
 | 
						|
        if (i.Childrens && i.Childrens.length > 0) {
 | 
						|
          this.resetChild(i.Childrens)
 | 
						|
        }
 | 
						|
      })
 | 
						|
    },
 | 
						|
    resetFormItemData(v) {
 | 
						|
      this.$emit('resetFormItemData', v)
 | 
						|
    }
 | 
						|
  }
 | 
						|
}
 | 
						|
</script>
 | 
						|
<style lang="scss" scoped>
 | 
						|
.mb{
 | 
						|
  margin-bottom: 0px;
 | 
						|
}
 | 
						|
</style>
 |