irc_web/.svn/pristine/a6/a61840ef36807328a0bef0f5f5fb554fc5ade843.svn-base

<template>
  <div>
    <template>
      <el-form-item
        v-if="(questionForm[question.ParentId] === question.ParentTriggerValue) || question.ParentId===''||question.ParentId===null"
        :label="`${question.QuestionName}`"
        :prop="question.Id"
        :rules="[
          { required: question.IsRequired,
            message: '请注明', trigger: ['blur', 'change']},
        ]"
      >

        <!-- 输入框 -->
        <el-input
          v-if="question.Type==='input'"
          v-model="questionForm[question.Id]"
        />
        <!-- 多行文本输入框 -->
        <el-input
          v-if="question.Type==='textarea'"
          v-model="questionForm[question.Id]"
          type="textarea"
          :autosize="{ minRows: 2, maxRows: 4}"
        />
        <!-- 下拉框 -->
        <el-select
          v-if="question.Type==='select'"
          v-model="questionForm[question.Id]"
          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.Id]"
          @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.Id]"
        >
          <el-checkbox
            v-for="val in question.TypeValue.split('|')"
            :key="val"
            :label="val"
          >
            {{ val }}
          </el-checkbox>
        </el-checkbox-group>
        <!-- 数值 -->
        <!-- :precision="2" :step="0.1" :max="10" -->
        <!-- <el-input-number
          v-if="question.Type==='number'"
          v-model="questionForm[question.ReadingQuestionTrialId]"
        /> -->
        <!-- 上传图像
        <el-upload
          v-if="question.Type==='upload'"
          :action="accept"
          :limit="question.ImageCount"
          :on-preview="handlePictureCardPreview"
          :before-upload="handleBeforeUpload"
          :http-request="uploadScreenshot"
          list-type="picture-card"
          :on-remove="handleRemove"
          :file-list="fileList"
          :class="{disabled:(fileList.length >= question.ImageCount) || readingTaskState >= 2}"
          :disabled="readingTaskState >= 2"
        >
          <i slot="default" class="el-icon-plus" />
          <div slot="file" slot-scope="{file}">
            <img
              class="el-upload-list__item-thumbnail"
              :src="file.url"
              alt=""
            >
            <span class="el-upload-list__item-actions">
              <span
                class="el-upload-list__item-preview"
                @click="handlePictureCardPreview(file)"
              >
                <i class="el-icon-zoom-in" />
              </span>

              <span
                v-if="readingTaskState < 2"
                class="el-upload-list__item-delete"
                @click="handleRemove(file)"
              >
                <i class="el-icon-delete" />
              </span>
            </span>
          </div>
        </el-upload>
        <el-dialog
          append-to-body
          :visible.sync="imgVisible"
          width="600px"
        >
          <el-image :src="imageUrl" width="100%">
            <div slot="placeholder" class="image-slot">
              加载中<span class="dot">...</span>
            </div>
          </el-image>
        </el-dialog> -->
      </el-form-item>
    </template>

    <QSFormItem
      v-for="(item) in question.Childrens"
      :key="item.Id"
      :question="item"
      :question-form="questionForm"
      @resetFormItemData="resetFormItemData"
    />
  </div>
</template>
<script>
export default {
  name: 'QSFormItem',
  props: {
    questionForm: {
      type: Object,
      default() {
        return {}
      }
    },
    question: {
      type: Object,
      default() {
        return []
      }
    }
  },
  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.Id)
        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;
}
.disabled{
  /deep/ .el-upload--picture-card {
    display: none;
  }
}
.uploadWrapper{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
</style>