eep_page/src/views/book/courseware/create/components/question/select/Select.vue

<template>
  <ModuleBase :type="data.type">
    <template #content>
      <ul class="option-list">
        <li v-for="(item, i) in data.option_list" :key="item.mark" class="option-item">
          <span class="serial-number">{{ convertNumberToLetter(i) }}.</span>
          <div class="option-contnet">
            <span :class="['checkbox', { active: isAnswer(item.mark) }]" @click="selectAnswer(item.mark)">
              <SvgIcon icon-class="check-mark" width="10" height="7" />
            </span>
            <RichText v-model="item.content" placeholder="输入内容" :inline="true" :height="32" />
          </div>
          <span class="multilingual" @click="openMultilingual(i)">
            <SvgIcon icon-class="multilingual" class-name="multilingual" width="12" height="12" />
          </span>
          <span class="delete" @click="deleteOption">
            <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)"
      />

      <MultilingualFill
        v-if="curSelectIndex !== -1"
        :visible.sync="multilingualVisible"
        :text="data.option_list[curSelectIndex].content"
        :translations="data.option_list[curSelectIndex].multilingual"
        @SubmitTranslation="handleMultilingualTranslation"
      />
    </template>
  </ModuleBase>
</template>

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

import { getSelectData, getOption, arrangeTypeList } from '@/views/book/courseware/data/select';

export default {
  name: 'SelectPage',
  components: {
    PinyinText,
  },
  mixins: [ModuleMixin],
  data() {
    return {
      data: getSelectData(),
      curSelectIndex: -1,
    };
  },
  watch: {
    'data.property.arrange_type': 'handlerMindMap',
    'data.answer.answer_list': 'handlerMindMap',
    '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: {
    // 将数字转换为小写字母
    convertNumberToLetter(number) {
      return String.fromCharCode(97 + number);
    },
    /**
     * @description 判断是否为答案
     * @param {string} mark 选项标记
     */
    isAnswer(mark) {
      return this.data.answer.answer_list.includes(mark);
    },
    /**
     * @description 选择答案
     * @param {string} mark 选项标记
     */
    selectAnswer(mark) {
      const index = this.data.answer.answer_list.indexOf(mark);
      if (index === -1) {
        this.data.answer.answer_list.push(mark);
      } else {
        this.data.answer.answer_list.splice(index, 1);
      }
    },
    /**
     * @description 添加选项
     */
    addOption() {
      this.data.option_list.push(getOption());
    },
    /**
     * @description 删除选项
     * @param {number} index 选项索引
     */
    deleteOption(index) {
      this.data.option_list.splice(index, 1);
    },
    handlerMindMap() {
      const direction = this.data.property.arrange_type === arrangeTypeList[0].value ? '横排' : '竖排';
      const select = this.data.answer.answer_list.length > 1 ? '多选' : '单选';
      this.data.mind_map.node_list = [{ name: `${direction}${select}选择题` }];
    },
    openMultilingual(i) {
      this.curSelectIndex = i;
      this.multilingualVisible = true;
    },
    handleMultilingualTranslation(translations) {
      this.$set(this.data.option_list[this.curSelectIndex], 'multilingual', translations);
    },
  },
};
</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-contnet {
      display: flex;
      flex: 1;
      column-gap: 6px;
      align-items: center;
      padding: 0 12px;
      overflow: hidden;
      background-color: $fill-color;

      .checkbox {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 16px;
        height: 16px;
        cursor: pointer;
        background-color: #fff;
        border: 1px solid #dcdfe6;
        border-radius: 2px;

        .svg-icon {
          display: none;
        }

        &.active {
          color: #fff;
          background-color: #000;

          .svg-icon {
            display: block;
          }
        }
      }
    }

    .delete,
    .multilingual {
      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>