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

<template>
  <div class="fill-blank-question">
    <el-form
      ref="modalFormComp"
      :model="modalForm"
      :rules="rules"
      label-width="100px"
    >
      <el-form-item prop="quesBody" label="题干">
        <v-editor
          v-model="modalForm.quesBody"
          enable-answer-point
          @answer-point-changed="answerPointsChange"
          @change="quesBodyChange"
        ></v-editor>
      </el-form-item>
      <el-form-item label="答案"></el-form-item>
      <el-form-item
        v-for="(answer, oindex) in modalForm.quesAnswer"
        :key="oindex"
        :rules="answerRule"
      >
        <!-- :prop="`quesAnswer.${oindex}.body`" -->
        <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
      v-if="canEditQuestionInfo"
      ref="QuestionInfoEdit"
      :question="modalForm"
      @change="questionInfoChange"
    ></question-info-edit>
  </div>
</template>

<script>
import { isAnEmptyRichText } from "@/utils/utils";
import { getInitQuestionModel } from "./questionModel";
import QuestionInfoEdit from "../QuestionInfoEdit.vue";

export default {
  name: "FillBlankQuestion",
  components: { QuestionInfoEdit },
  props: {
    question: {
      type: Object,
      default() {
        return {};
      },
    },
    canEditQuestionInfo: {
      type: Boolean,
      default: true,
    },
  },
  data() {
    return {
      modalForm: {},
      rules: {
        quesBody: [
          {
            validator: (rule, value, callback) => {
              if (!value || isAnEmptyRichText(value)) {
                return callback(new Error(`请输入题干`));
              }
              if (!this.modalForm.quesAnswer.length) {
                return callback(new Error(`请插入答题点`));
              }
              callback();
            },
            trigger: "change",
          },
        ],
      },
      answerRule: {
        validator: (rule, value, callback) => {
          if (!value || isAnEmptyRichText(value)) {
            return callback(new Error(`请输入答案内容`));
          }
          callback();
        },
        trigger: "change",
      },
    };
  },
  created() {
    this.initData();
  },
  methods: {
    initData() {
      this.modalForm = this.$objAssign(
        getInitQuestionModel("FILL_BLANK_QUESTION"),
        this.question
      );
      this.modalForm.quesAnswer = this.question.quesAnswer
        ? JSON.parse(this.question.quesAnswer)
        : [];
      this.modalForm.quesAnswer = this.modalForm.quesAnswer.map((item) => {
        return {
          body: item,
        };
      });
    },
    answerPointsChange(answerPointsChanged) {
      // console.log(answerPointsChanged);
      let quesAnswer = [];
      answerPointsChanged.forEach((item) => {
        const order = Number(item);
        if (order === 0) {
          quesAnswer.push({
            body: null,
          });
        } else {
          quesAnswer.push(this.modalForm.quesAnswer[order - 1]);
        }
      });
      this.modalForm.quesAnswer = quesAnswer;
    },
    quesBodyChange() {
      this.$refs.modalFormComp.validateField(`quesBody`, () => {});
    },
    answerBodyChange(oindex) {
      this.$refs.modalFormComp.validateField(
        `quesAnswer.${oindex}.body`,
        () => {}
      );
    },
    questionInfoChange(questionInfo) {
      this.modalForm = Object.assign({}, this.modalForm, questionInfo);
    },
    validate() {
      return this.$refs.modalFormComp.validate();
    },
    getData() {
      let data = { ...this.modalForm };
      data.quesAnswer = this.modalForm.quesAnswer.map((item, index) => {
        return {
          ...item.body,
          index,
        };
      });
      data.quesAnswer = JSON.stringify(data.quesAnswer);
      return data;
    },
  },
};
</script>