irc_web/src/components/clinicalDataQuestions/components/QuestionTableFormItem.vue

<template>
  <div class="criterion-form-item">

    <el-form-item :label="`${question.QuestionName}`" :prop="question.Id" :rules="[
      {
        required: (question.IsRequired === 0 || (question.IsRequired === 1 && question.RelevanceId && !!~question.RelevanceValueList.indexOf(questionForm[question.RelevanceId]))),
        message: $t('common:ruleMessage:specify'), trigger: ['blur'],
        type: question.ClinicalTableQuestionType === 'checkbox' ? 'array' : ''
      },
    ]"
      :class="[question.ClinicalTableQuestionType === 'group' ? 'mb' : question.ClinicalTableQuestionType === 'upload' ? 'uploadWrapper' : '']">
      <el-input v-if="question.ClinicalTableQuestionType === 'input'" v-model="questionForm[question.Id]"
        :max-length="200" :disabled="question.TableQuestionType === 2" />
      <!-- 多行文本输入框 -->
      <el-input v-if="question.ClinicalTableQuestionType === 'textarea'" v-model="questionForm[question.Id]"
        :max-length="200" type="textarea" :autosize="{ minRows: 2, maxRows: 4 }" />
      <!-- 下拉框 -->
      <el-select v-if="question.ClinicalTableQuestionType === 'select'" v-model="questionForm[question.Id]" clearable
        :disabled="(question.TableQuestionType === 2 || question.QuestionGenre === 2) && !!question.DictionaryCode">
        <template v-if="question.TableQuestionType === 1">
          <el-option v-for="item in organList" :key="item.Id" :label="item[question.DataTableColumn]"
            :value="item[question.DataTableColumn]" />
        </template>
        <template v-else-if="question.TableQuestionType === 3 || question.QuestionGenre === 3">
          <el-option v-for="item of $d[question.DictionaryCode]" :key="item.id" :value="item.value"
            :label="item.label" />
        </template>
        <template
          v-else-if="(question.TableQuestionType === 2 || question.QuestionGenre === 2) && question.DictionaryCode">
          <el-option v-for="item of $d[question.DictionaryCode]" :key="item.id" :value="item.value"
            :label="item.label" />
        </template>
        <template v-else>
          <el-option v-for="val in question.TypeValue.split('|')" :key="val" :label="val" :value="val" />
        </template>

      </el-select>
      <!-- 单选 -->
      <el-date-picker v-if="question.ClinicalTableQuestionType === 'time'" v-model="questionForm[question.Id]"
        format="yyyy-MM-dd" value-format="yyyy-MM-dd" style="width: 200px" align="right" type="date" />
      <!-- 单选 -->
      <el-radio-group v-if="question.ClinicalTableQuestionType === 'radio'" v-model="questionForm[question.Id]"
        @change="((val) => { formItemChange(val, question) })">
        <template v-if="question.DictionaryCode">
          <el-radio v-for="item of $d[question.DictionaryCode]" :key="item.id" :label="item.value">
            {{ item.label }}
          </el-radio>
        </template>
        <template v-if="question.TypeValue">
          <el-radio v-for="val in question.TypeValue.split('|')" :key="val" :label="val">
            {{ val }}
          </el-radio>
        </template>
      </el-radio-group>
      <!-- 复选框 -->
      <el-checkbox-group v-if="question.ClinicalTableQuestionType === 'checkbox'" v-model="questionForm[question.Id]">
        <el-checkbox v-for="val in question.TypeValue.split('|')" :key="val" :label="val">
          {{ val }}
        </el-checkbox>
      </el-checkbox-group>
      <el-input v-if="question.ClinicalTableQuestionType === 'number'" v-model="questionForm[question.Id]" type="number"
        @input="limitInput($event, questionForm, question)" style="width: 200px">
        <template v-if="question.Unit" slot="append">{{ question.Unit }}</template>
      </el-input>
    </el-form-item>
  </div>
</template>
<script>
export default {
  name: 'QuestionFormItem',
  props: {
    questionForm: {
      type: Object,
      default() {
        return {}
      }
    },
    question: {
      type: Object,
      default() {
        return []
      }
    }
  },
  data() {
    return {
      addOrEdit: { visible: false, title: '' },
      fileList: [],
      accept: '.png,.jpg,.jpeg',
      imgVisible: false,
      imageUrl: '',
      urls: [],
      organList: [],
      QuestionsList: [],
      QuestionsForm: {}
    }
  },
  computed: {
    calculationValue: {
      get() {
        return this.questionForm[this.question.Id]
      },
      set() {

      }
    }
  },
  watch: {
    questionForm: {
      deep: true,
      immediate: true,
      handler(v) {

      }
    }
  },
  mounted() {
    console.log('就是这个文件')
    if (this.question.ClinicalTableQuestionType === 'number') {
      this.$set(this.questionForm, this.question.Id, this.questionForm[this.question.Id] ? this.questionForm[this.question.Id] : 0)
    } else if (this.question.ClinicalTableQuestionType === 'time') {
      this.$set(this.questionForm, this.question.Id, this.questionForm[this.question.Id] ? this.questionForm[this.question.Id] : null)
    } else if (this.question.ClinicalTableQuestionType === 'checkbox') {
      this.$set(this.questionForm, this.question.Id, this.questionForm[this.question.Id] ? this.questionForm[this.question.Id] : [])
    } else {
      this.$set(this.questionForm, this.question.Id, this.questionForm[this.question.Id] ? this.questionForm[this.question.Id] : '')
    }
  },
  methods: {
    limitInput(value, form, row) {
      if (value.indexOf('.') > -1) {
        if (value.split('.')[1].length >= row.DigitPlaces) {
          this.$set(form, row.Id, parseFloat(value).toFixed(row.DigitPlaces))
        }
      }
      this.$forceUpdate()
    },
    save() {
    },
    openAddTableCol(row) {
      this.addOrEdit.visible = true
      this.addOrEdit.title = row.QuestionName + this.$t('trials:components:clinicalDataQS:title:tableQs')
      this.QuestionsList = row.TableQuestions.Questions
      this.AnswersList = row.TableQuestions.Answers
      this.questionForm = {}
      console.log(this.questionForm)
    },
    formItemChange(v, question) {
    },
    formItemNumberChange(v, question) {
      this.$emit('formItemTableNumberChange', v, question)
    },
    resetChild(obj) {
      obj.forEach(i => {
        this.$emit('resetFormItemData', i.Id)
        if (i.Childrens && i.Childrens.length > 0) {
          this.resetChild(i.Childrens)
        }
      })
    },
    resetFormItemData(v) {
      this.$emit('resetFormItemData', v)
    },
    setFormItemData(obj) {
      this.$emit('setFormItemData', obj)
    }
  }
}
</script>
<style lang="scss" scoped>
.my_dialog {
  .criterion-form-item {
    ::v-deep .el-form-item__content {
      width: auto;
    }
  }
}

.criterion-form-item {
  .el-form-item {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
  }

  ::v-deep .el-form-item__content {
    width: 500px;
  }

  .el-input {
    width: 100%;
  }

  .mb {
    margin-bottom: 0px;
  }

  .disabled {
    ::v-deep .el-upload--picture-card {
      display: none;
    }
  }

  .uploadWrapper {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }
}
</style>