eep_page/src/views/book/courseware/create/components/question/matching/Matching.vue

<template>
  <ModuleBase :type="data.type">
    <template #content>
      <ul class="option-list">
        <li v-for="(li, i) in data.option_list" :key="i" class="option-item">
          <div v-for="(item, j) in li" :key="item.mark" class="option">
            <span class="serial-number">{{ computeOptionMethods[data.property.serial_number_type_list[j]](i) }}</span>
            <span class="option-content">
              <RichText
                ref="richText"
                v-model="item.content"
                placeholder="请输入"
                :inline="true"
                :height="32"
                :font-size="data?.unified_attrib?.font_size"
                :font-family="data?.unified_attrib?.font"
                :is-view-pinyin="isEnable(data.property.view_pinyin)"
                @createParsedTextInfoPinyin="handleParsedTextPinyin($event, i, j)"
              />
            </span>
            <span class="multilingual" @click="openMultilingual(i, j)">
              <SvgIcon icon-class="multilingual" class-name="multilingual" width="12" height="12" />
            </span>
          </div>
        </li>
      </ul>
      <div class="answer-tips">答案：</div>
      <ul class="answer-list">
        <li v-for="(li, i) in data.answer.answer_list" :key="i" class="answer-item">
          <template v-for="(item, j) in li">
            <span v-if="j === 0" :key="`zero-${j}-${item.mark}`">{{ answerList[j][i].label }}</span>
            <el-select v-if="j === 1 || j === 2" :key="`select-${j}`" v-model="item.mark" multiple placeholder="请选择">
              <el-option
                v-for="answer in answerList[j]"
                :key="answer.value"
                :label="answer.label"
                :value="answer.value"
              />
            </el-select>
            <span v-if="j === 1 && data.property.column_num === 3" :key="`one-${j}-${item.mark}`">
              {{ answerList[j][i].label }}
            </span>
          </template>
        </li>
      </ul>

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

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

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

import { getMatchingData, getOption, getOptionItem } from '@/views/book/courseware/data/matching';
import { computeOptionMethods, serialNumberTypeList } from '@/views/book/courseware/data/common';

export default {
  name: 'MatchingPage',
  components: {
    PinyinText,
  },
  mixins: [ModuleMixin],
  data() {
    return {
      data: getMatchingData(),
      computeOptionMethods,
      serialNumberTypeList,
      curSelectRow: -1,
      curSelectColumn: -1,
      // 用于记录 data.option_list 中 content 的签名
      optionContentSignature: '',
    };
  },
  computed: {
    answerList() {
      let list = Array.from({ length: this.data.property.column_num }, () => []);
      for (let i = 0; i < this.data.option_list.length; i++) {
        for (let j = 0; j < this.data.option_list[i].length; j++) {
          list[j].push({
            label: computeOptionMethods[this.data.property.serial_number_type_list[j]](i),
            value: this.data.option_list[i][j].mark,
          });
        }
      }
      return list;
    },
  },
  watch: {
    'data.property.column_num': [
      {
        handler(val) {
          let optionNum = this.data.option_list[0].length;
          if (val > optionNum) {
            // 修改序号类型列表
            this.data.property.serial_number_type_list.push(
              serialNumberTypeList[val]?.value || serialNumberTypeList[0].value,
            );
            // 增加选项
            for (let i = 0; i < this.data.option_list.length; i++) {
              this.data.option_list[i].push(getOptionItem());
            }
            // 修改答案列表
            this.data.answer.answer_list.forEach((li) => {
              li.push({ mark: [] });
            });
            return;
          }
          if (val < optionNum) {
            this.data.property.serial_number_type_list.splice(-1, 1);
            this.data.option_list.forEach((li) => {
              li.splice(-1, 1);
            });
            // 修改答案列表
            this.data.answer.answer_list.forEach((li) => {
              li.splice(-1, 1);
            });
          }
        },
      },
      'handlerMindMap',
    ],
    'data.property.row_num': [
      {
        handler(val) {
          let optionNum = this.data.option_list.length;
          if (val > optionNum) {
            for (let i = 0; i < val - optionNum; i++) {
              this.data.option_list.push(getOption(this.data.property.column_num));
            }
            // 增加答案列表
            this.data.answer.answer_list.push(
              Array.from({ length: this.data.property.column_num }, () => ({ mark: [] })),
            );
            // 将答案列表最后一项的第一个元素设置进答案列表第一项
            this.data.answer.answer_list[this.data.answer.answer_list.length - 1][0] = {
              mark: this.data.option_list[this.data.option_list.length - 1][0].mark,
            };
            return;
          }
          if (val < optionNum) {
            this.data.option_list.splice(val);
            this.data.answer.answer_list.splice(val);
          }
        },
      },
      'handlerMindMap',
    ],
    'data.property.view_pinyin': {
      handler(val) {
        if (!this.isEnable(val)) {
          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) => {
          item.forEach((option, j) => {
            const text = option.content.replace(/<[^>]+>/g, '').replace(/&nbsp;/g, ' ');
            if (!text) return;
            option.paragraph_list_parameter.text = text;
            this.createParsedTextInfoPinyin(text, i, j);
          });
        });
      },
    },
  },
  methods: {
    /**
     * @description 处理思维导图
     */
    handlerMindMap() {
      this.data.mind_map.node_list = [
        { name: `${this.data.property.row_num}行${this.data.property.column_num}列连线组件` },
      ];
    },
    openMultilingual(i, j) {
      this.curSelectRow = i;
      this.curSelectColumn = j;
      this.$nextTick(() => {
        this.multilingualVisible = true;
      });
    },
    handleMultilingualTranslation(translations) {
      this.$set(this.data.option_list[this.curSelectRow][this.curSelectColumn], 'multilingual', translations);
      this.curSelectColumn = -1;
      this.curSelectRow = -1;
    },
    handleParsedTextPinyin(text, i, j) {
      if (!this.isEnable(this.data.property.view_pinyin)) return;
      if (this.data.option_list?.length > 0 && this.data.option_list[0].paragraph_list?.length > 0) return;
      if (!text) return;
      this.data.option_list[i][j].paragraph_list_parameter.text = text.replace(/<[^>]+>/g, '').replace(/&nbsp;/g, ' ');
      this.createParsedTextInfoPinyin(text, i, j);
    },
  },
};
</script>

<style lang="scss" scoped>
@use '@/styles/mixin.scss' as *;

.option-list {
  display: flex;
  flex-direction: column;
  row-gap: 16px;

  .option-item {
    display: flex;
    column-gap: 16px;

    .option {
      display: flex;
      flex: 1;
      column-gap: 4px;
      align-items: center;

      .serial-number {
        @include serial-number(32px);
      }

      .option-content {
        flex: 1;
        padding: 0 4px;
        margin-left: 4px;
        background-color: $fill-color;
      }

      .multilingual {
        margin-left: 2px;
        line-height: 12px;
        cursor: pointer;
      }
    }
  }
}

.answer-tips {
  margin: 16px 0;
}

.answer-list {
  display: flex;
  flex-direction: column;
  row-gap: 16px;

  .answer-item {
    display: flex;
    column-gap: 16px;
    align-items: center;

    span {
      display: inline-block;
      height: 32px;
      padding: 4px 8px;
      color: #c9cdd4;
      background-color: $fill-color;
    }

    .el-select {
      flex: 1;
    }
  }
}

.pinyin-text-list {
  display: flex;
  column-gap: 24px;
  align-items: center;

  + .pinyin-text-list {
    margin-top: 4px;
  }
}
</style>