eep_page/src/views/book/courseware/create/components/question/judge/Judge.vue

<template>
  <ModuleBase ref="base" :type="data.type">
    <template #content>
      <ul class="option-list">
        <li v-for="(item, i) in data.option_list" :key="i" class="option-item">
          <span class="serial-number">{{ computedOptionNumber(i) }}.</span>
          <div class="option-content">
            <RichText
              ref="richText"
              v-model="item.content"
              :font-size="data?.unified_attrib?.font_size"
              :font-family="data?.unified_attrib?.font"
              placeholder="输入内容"
              :inline="true"
            />
          </div>

          <div
            v-for="option_type in incertitudeList"
            :key="option_type"
            :class="[
              'option-type-item',
              {
                active: data.answer.answer_list.find((li) => li.mark === item.mark && li.option_type === option_type),
              },
            ]"
            @click="selectOptionAnswer(option_type, item.mark)"
          >
            <SvgIcon v-if="option_type === option_type_list[0].value" icon-class="check-mark" width="10" height="7" />
            <SvgIcon v-if="option_type === option_type_list[1].value" icon-class="cross" size="8" />
            <SvgIcon v-if="option_type === option_type_list[2].value" icon-class="circle" size="10" />
          </div>
          <span v-if="data.option_list.length > 1" class="delete" @click="deleteOption(i)">
            <SvgIcon icon-class="delete-2" width="12" height="12" />
          </span>
        </li>
      </ul>
      <div class="add">
        <SvgIcon icon-class="add-circle" width="14" height="14" />
        <span class="add-button" @click="addOption">增加选项</span>
      </div>

      <el-divider v-if="isEnable(data.property.view_pinyin)" content-position="left">拼音效果</el-divider>
      <PinyinText
        v-for="(item, i) in data.option_list"
        v-show="isEnable(data.property.view_pinyin)"
        :key="i"
        ref="PinyinText"
        :paragraph-list="item.paragraph_list"
        :pinyin-position="data.property.pinyin_position"
        @fillCorrectPinyin="fillCorrectPinyin($event, i)"
      />

      <AnswerAnalysisList
        v-if="data.answer_list?.length > 0 || data.analysis_list?.length > 0"
        :answer-list="data.answer_list"
        :analysis-list="data.analysis_list"
        :unified-attrib="data.unified_attrib"
        @updateAnswerAnalysisFileList="updateAnswerAnalysisFileList"
        @deleteAnswerAnalysis="deleteAnswerAnalysis"
      />
    </template>
  </ModuleBase>
</template>

<script>
import ModuleMixin from '../../common/ModuleMixin';
import PinyinText from '@/components/PinyinText.vue';

import { getJudgeData, getOption, option_type_list, isEnable } from '@/views/book/courseware/data/judge';
import { serialNumberTypeList, computeOptionMethods } from '@/views/book/courseware/data/common';

export default {
  name: 'JudgePage',
  components: {
    PinyinText,
  },
  mixins: [ModuleMixin],
  data() {
    return {
      data: getJudgeData(),
      option_type_list,
      isEnable,
    };
  },
  computed: {
    incertitudeList() {
      let _option_type_list = this.data.property.option_type_list;
      if (isEnable(this.data.property.is_view_incertitude)) {
        return _option_type_list;
      }
      // 返回不包含第三个元素的新数组
      return [..._option_type_list.slice(0, 2), ..._option_type_list.slice(3)];
    },
  },
  watch: {
    'data.option_list': 'handleMindMap',
    'data.property': {
      handler({ view_pinyin }) {
        if (!this.isEnable(view_pinyin)) {
          this.data.option_list.forEach((item) => {
            item.paragraph_list = [];
            item.paragraph_list_parameter = {
              text: '',
              pinyin_proofread_word_list: [],
            };
          });
          return;
        }
        if (this.data.option_list.length > 0 && this.data.option_list[0].paragraph_list.length > 0) return;
        this.data.option_list.forEach((item, i) => {
          const text = item.content.replace(/<[^>]+>/g, '');
          if (!text) return;
          item.paragraph_list_parameter.text = text;
          this.createParsedTextInfoPinyin(text, i);
        });
      },
      deep: true,
    },
  },
  methods: {
    computedOptionNumber(number) {
      let type = serialNumberTypeList.find((item) => item.value === this.data.property.option_serial_type)?.value;
      if (!type) return number + 1;
      return computeOptionMethods[type](number);
    },
    /**
     * 选择选项答案
     * @param {String} option_type 选项类型
     * @param {String} mark 选项标记
     */
    selectOptionAnswer(option_type, mark) {
      const index = this.data.answer.answer_list.findIndex((item) => item.mark === mark);
      if (index === -1) {
        this.data.answer.answer_list.push({ option_type, mark });
      } else {
        this.data.answer.answer_list[index].option_type = option_type;
      }
    },
    /**
     * @description 添加选项
     */
    addOption() {
      this.data.option_list.push(getOption());
    },
    /**
     * @description 删除选项
     * @param {number} index 选项索引
     */
    deleteOption(index) {
      this.data.option_list.splice(index, 1);
    },
    handleMindMap() {
      const optionCount = this.data.option_list.length;
      this.data.mind_map.node_list = [
        {
          name: `${optionCount}选项判断组件`,
        },
      ];
    },
  },
};
</script>
<style lang="scss" scoped>
.option-list {
  display: flex;
  flex-direction: column;
  row-gap: 8px;

  .option-item {
    display: flex;
    column-gap: 8px;
    align-items: center;
    min-height: 36px;

    .serial-number {
      width: 40px;
      height: 36px;
      padding: 4px 8px;
      color: $text-color;
      background-color: $fill-color;
      border-radius: 2px;
    }

    .option-content {
      display: flex;
      flex: 1;
      column-gap: 6px;
      align-items: center;
      padding: 0 12px;
      overflow: hidden;
      background-color: $fill-color;
    }

    .option-type {
      display: flex;
      column-gap: 8px;
      align-items: center;
      height: 32px;
      padding: 8px 16px;
      background-color: $fill-color;

      &-item {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 16px;
        height: 16px;
        color: $font-light-color;
        cursor: pointer;
        background-color: #d7d7d7;
        border-radius: 2px;

        &.active {
          color: #fff;
          background-color: $main-color;
        }
      }
    }

    .delete {
      margin-left: 8px;
      cursor: pointer;
    }
  }
}

.add {
  display: flex;
  column-gap: 6px;
  align-items: center;
  justify-content: center;
  margin-top: 12px;

  .svg-icon {
    cursor: pointer;
  }

  .add-button {
    font-size: 14px;
    color: $main-color;
    cursor: pointer;
  }
}
</style>