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>
            <el-input v-model="item.content" placeholder="请输入" />
          </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>
    </template>
  </ModuleBase>
</template>

<script>
import ModuleMixin from '../../common/ModuleMixin';

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

export default {
  name: 'MatchingPage',
  mixins: [ModuleMixin],
  data() {
    return {
      data: getMatchingData(),
      computeOptionMethods,
      serialNumberTypeList,
    };
  },
  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);
          });
        }
      },
    },
    '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(this.data.property.column_num).fill(''));
          // 将答案列表最后一项的第一个元素设置进答案列表第一项
          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);
        }
      },
    },
  },
  methods: {},
};
</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);
      }
    }
  }
}

.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;
    }
  }
}
</style>