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

<template>
  <div class="select-question">
    <el-form
      ref="modalFormComp"
      :model="modalForm"
      :rules="rules"
      label-width="100px"
    >
      <el-form-item v-if="showQuesBody" prop="quesBody" label="题干">
        <v-editor
          v-model="modalForm.quesBody"
          @change="quesBodyChange"
        ></v-editor>
      </el-form-item>
      <el-form-item
        v-for="(option, oindex) in modalForm.quesOptions"
        :key="option.nmuber"
        :prop="`quesOptions.${oindex}.optionBody`"
        :rules="optionRule"
      >
        <div class="question-edit-option">
          <div class="option-check">
            <el-radio
              v-if="IS_SIMPLE"
              v-model="quesAnswer"
              :label="option.number"
              @change="answerChange"
            >
              {{ (option.number - 1) | optionOrderWordFilter }}
            </el-radio>
            <el-checkbox
              v-else
              v-model="option.isCorrect"
              :label="option.number"
              @change="answerChange"
            >
              {{ (option.number - 1) | optionOrderWordFilter }}
            </el-checkbox>
          </div>
          <div class="option-body">
            <v-editor
              v-model="option.optionBody"
              @change="() => optionBodyChange(oindex)"
            ></v-editor>
          </div>
          <div class="option-delete">
            <el-button
              size="mini"
              circle
              type="primary"
              icon="el-icon-plus"
              title="新增"
              @click.prevent="addQuesOption(oindex)"
            ></el-button>
            <el-button
              size="mini"
              circle
              type="danger"
              icon="el-icon-delete"
              title="删除"
              :disabled="deleleOptionDisabled"
              @click.prevent="removeQuesOption(oindex)"
            ></el-button>
          </div>
        </div>
      </el-form-item>
      <el-form-item prop="quesAnswer" label="答案">
        <span>{{ answer }}</span>
        <!-- <el-radio-group
          v-if="IS_SIMPLE"
          v-model="quesAnswer"
          @change="answerChange"
        >
          <el-radio
            v-for="option in modalForm.quesOptions"
            :key="option.number"
            :label="option.number"
          >
            {{ (option.number - 1) | optionOrderWordFilter }}
          </el-radio>
        </el-radio-group>
        <el-checkbox-group
          v-if="IS_SIMPLE"
          v-model="quesAnswer"
          @change="answerChange"
        >
          <el-checkbox
            v-for="option in modalForm.quesOptions"
            :key="option.number"
            :label="option.number"
          >
            {{ (option.number - 1) | optionOrderWordFilter }}
          </el-checkbox>
        </el-checkbox-group> -->
      </el-form-item>
      <el-form-item
        prop="ignoreOptionRepeat"
        label="允许答案重复"
        v-if="$store.state.checkOptionRepeat"
      >
        <el-switch
          v-model="modalForm.ignoreOptionRepeat"
          active-text="是"
          inactive-text="否"
        >
        </el-switch>
      </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: "SelectQuestion",
  components: { QuestionInfoEdit },
  props: {
    question: {
      type: Object,
      default() {
        return {};
      },
    },
    showQuesBody: {
      type: Boolean,
      default: true,
    },
    quesBodyRequired: {
      type: Boolean,
      default: true,
    },
    canEditQuestionInfo: {
      type: Boolean,
      default: true,
    },
  },
  data() {
    return {
      modalForm: {},
      quesAnswer: null,
      rules: {
        quesBody: [
          {
            validator: (rule, value, callback) => {
              if (
                this.quesBodyRequired &&
                (!value || isAnEmptyRichText(value))
              ) {
                return callback(new Error(`请输入题干`));
              }
              callback();
            },
            trigger: "change",
          },
        ],
        quesAnswer: [
          {
            validator: (rule, value, callback) => {
              if (!value || !value.length) {
                return callback(new Error(`请设置答案`));
              }
              callback();
            },
            trigger: "change",
          },
        ],
      },
      optionRule: {
        validator: (rule, value, callback) => {
          if (!value || isAnEmptyRichText(value)) {
            return callback(new Error(`请输入选项内容`));
          }
          callback();
        },
        trigger: "change",
      },
    };
  },
  computed: {
    IS_SIMPLE() {
      return this.question.questionType === "SINGLE_ANSWER_QUESTION";
    },
    answer() {
      if (!this.quesAnswer) return "";
      const quesAnswer = this.IS_SIMPLE ? [this.quesAnswer] : this.quesAnswer;
      return quesAnswer
        .map((value) => String.fromCharCode(64 + value))
        .join("");
    },
    deleleOptionDisabled() {
      return this.modalForm.quesOptions.length === 1;
    },
  },
  created() {
    this.initData();
  },
  methods: {
    initData() {
      this.modalForm = this.$objAssign(
        getInitQuestionModel("SINGLE_ANSWER_QUESTION"),
        this.question
      );
      this.modalForm.quesAnswer = this.question.quesAnswer
        ? JSON.parse(this.question.quesAnswer)
        : [];
      if (this.IS_SIMPLE) {
        this.quesAnswer = this.modalForm.quesAnswer
          ? this.modalForm.quesAnswer[0]
          : null;
      } else {
        this.quesAnswer = this.modalForm.quesAnswer || [];
        this.modalForm.quesOptions.forEach((item) => {
          item.isCorrect = this.quesAnswer.includes(item.number);
        });
      }
    },
    addQuesOption(index) {
      if (this.modalForm.quesOptions.length >= 20) {
        this.$message.error("选项最多20个");
        return;
      }
      this.modalForm.quesOptions.splice(index + 1, 0, {
        number: 0,
        body: { sections: [] },
      });
      this.resetNumberAndSaveOptions();
    },
    removeQuesOption(index) {
      if (this.deleleOptionDisabled) return;
      this.modalForm.quesOptions.splice(index, 1);
      this.resetNumberAndSaveOptions();
    },
    resetNumberAndSaveOptions() {
      this.modalForm.quesOptions.forEach((option, index) => {
        option.number = index + 1;
      });
      const optionCount = this.modalForm.quesOptions.length;
      if (this.IS_SIMPLE && this.quesAnswer > optionCount) {
        this.quesAnswer = null;
      }
      this.answerChange();
    },
    quesBodyChange() {
      this.$refs.modalFormComp.validateField(`quesBody`, () => {});
    },
    optionBodyChange(oindex) {
      this.$refs.modalFormComp.validateField(
        `quesOptions.${oindex}.optionBody`,
        () => {}
      );
    },
    answerChange() {
      if (this.IS_SIMPLE) {
        this.modalForm.quesAnswer =
          this.quesAnswer || this.quesAnswer === 0 ? [this.quesAnswer] : [];
      } else {
        this.quesAnswer = this.modalForm.quesOptions
          .filter((item) => item.isCorrect)
          .map((item) => item.number);
        this.modalForm.quesAnswer = this.quesAnswer;
      }
      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 };
      data.quesOptions = this.modalForm.quesOptions.map((item) => {
        return {
          number: item.number,
          optionBody: item.optionBody,
        };
      });
      data.quesAnswer = JSON.stringify(this.modalForm.quesAnswer);
      return data;
    },
  },
};
</script>