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

<template>
  <div class="boolean-question">
    <el-form
      ref="modalFormComp"
      :model="modalForm"
      :rules="rules"
      label-width="100px"
    >
      <el-form-item prop="quesBody" label="题干">
        <v-editor
          v-model="modalForm.quesBody"
          @change="quesBodyChange"
        ></v-editor>
      </el-form-item>
      <el-form-item prop="quesAnswer" label="答案">
        <el-radio-group v-model="modalForm.quesAnswer" @change="answerChange">
          <el-radio
            v-for="option in answerOptions"
            :key="option.value"
            :label="option.value"
          >
            {{ option.label }}
          </el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="答案解析">
        <v-editor v-model="modalForm.comment"></v-editor>
      </el-form-item>
    </el-form>
    <question-info-edit
      ref="QuestionInfoEdit"
      :question="modalForm"
      @change="questionInfoChange"
    ></question-info-edit>
  </div>
</template>

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

export default {
  name: "BooleanQuestion",
  components: { QuestionInfoEdit },
  props: {
    question: {
      type: Object,
      default() {
        return {};
      },
    },
  },
  data() {
    return {
      modalForm: {},
      answerOptions: [
        {
          value: "false",
          label: "错误",
        },
        {
          value: "true",
          label: "正确",
        },
      ],
      rules: {
        quesBody: [
          {
            validator: (rule, value, callback) => {
              if (!value || isAnEmptyRichText(value)) {
                return callback(new Error(`请输入题干`));
              }
              callback();
            },
            trigger: "change",
          },
        ],
        quesAnswer: [
          {
            required: true,
            message: "请设置答案",
            trigger: "change",
          },
        ],
      },
    };
  },
  created() {
    this.initData();
  },
  methods: {
    initData() {
      this.modalForm = this.$objAssign(
        getInitQuestionModel("BOOL_ANSWER_QUESTION"),
        this.question
      );
    },
    quesBodyChange() {
      this.$refs.modalFormComp.validateField(`quesBody`, () => {});
    },
    answerChange() {
      this.$refs.modalFormComp.validateField(`quesAnswer`, () => {});
    },
    questionInfoChange(questionInfo) {
      this.modalForm = Object.assign({}, this.modalForm, questionInfo);
    },
    validate() {
      return this.$refs.modalFormComp.validate();
    },
    getData() {
      let data = { ...this.modalForm };
      return data;
    },
  },
};
</script>