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 v-model="item.content" placeholder="请输入" :inline="true" :height="32" />
            </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="`${j}-${item.mark}`">
              {{ computeOptionMethods[data.property.serial_number_type_list[j]](i) }}
            </span>
            <el-select v-else :key="`${j}-${item.mark}`" v-model="item.mark" placeholder="请选择">
              <el-option
                v-for="answer in answerList[j - 1]"
                :key="answer.value"
                :label="answer.label"
                :value="answer.value"
              />
            </el-select>
          </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,
    };
  },
  computed: {
    answerList() {
      let list = Array.from({ length: this.data.property.column_num - 1 }, () => []);
      for (let i = 0; i < this.data.option_list.length; i++) {
        for (let j = 1; j < this.data.option_list[i].length; j++) {
          list[j - 1].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': {
      handler({ view_pinyin }) {
        if (!this.isEnable(view_pinyin)) return;
        this.data.option_list.forEach((item, i) => {
          item.forEach((option, j) => {
            const text = option.content.replace(/<[^>]+>/g, '');
            if (!text) return;
            option.paragraph_list_parameter.text = text;
            this.crateParsedTextInfoPinyin(text, i, j);
          });
        });
      },
      deep: true,
    },
  },
  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.multilingualVisible = true;
    },
    handleMultilingualTranslation(translations) {
      this.$set(this.data.option_list[this.curSelectRow][this.curSelectColumn], 'multilingual', translations);
      this.curSelectColumn = -1;
      this.curSelectRow = -1;
    },
  },
};
</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;

    span:first-child {
      width: 70px;
      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>