union-question-web/src/modules/question/components/import-edit/FillBlankQuestion.vue

<template>
  <div class="fill-blank-question">
    <div class="ep-question-title">
      <rich-text :text-json="question.body"></rich-text>
    </div>
    <div class="ep-question-props">
      <el-form ref="modalFormComp" :model="modalForm" label-width="100px">
        <el-form-item label="答案"></el-form-item>
        <el-form-item
          v-for="(answer, oindex) in modalForm.answer"
          :key="oindex"
        >
          <div class="question-edit-option">
            <div class="option-check">（{{ oindex + 1 }}）</div>
            <div class="option-body">
              <v-editor
                v-model="answer.body"
                :enable-audio="false"
                @change="() => answerBodyChange(oindex)"
              ></v-editor>
            </div>
          </div>
        </el-form-item>
        <el-form-item label="答案解析">
          <v-editor
            v-model="modalForm.answerAnalysis"
            :enable-audio="false"
          ></v-editor>
        </el-form-item>
      </el-form>
      <question-info-edit
        ref="QuestionInfoEdit"
        :question="modalForm"
        @change="questionInfoChange"
      ></question-info-edit>
    </div>
  </div>
</template>

<script>
import { getInitQuestionModel } from "../model/questionModel";
import QuestionInfoEdit from "../QuestionInfoEdit.vue";

export default {
  name: "FillBlankQuestion",
  components: { QuestionInfoEdit },
  props: {
    question: {
      type: Object,
      default() {
        return {};
      },
    },
  },
  data() {
    return {
      modalForm: {},
    };
  },
  created() {
    this.initData();
  },
  methods: {
    initData() {
      this.modalForm = this.$objAssign(getInitQuestionModel(), this.question);
      this.modalForm.answer = [];
      if (!this.question.body || !this.question.body.sections) return;
      this.question.body.sections.forEach((section) => {
        section.blocks.forEach((block) => {
          if (block.type === "cloze")
            this.modalForm.answer.push({ body: { sections: [] } });
        });
      });
    },
    questionInfoChange(questionInfo) {
      this.modalForm = Object.assign({}, this.modalForm, questionInfo);
    },
    validate() {
      return Promise.resolve(true);
    },
    getData() {
      let data = Object.assign({}, this.question, this.modalForm);
      data.answer = data.answer.map((item, index) => {
        return {
          ...item.body,
          index,
        };
      });
      data.answer = JSON.stringify(data.answer);
      return data;
    },
  },
};
</script>