GCLS_Page_Exercise/src/views/exercise_questions/create/components/exercises/SelectQuestion.vue

<!-- 选择题 -->
<template>
  <QuestionBase>
    <template #content>
      <div class="stem">
        <RichText v-model="data.stem" :font-size="18" placeholder="输入题干" />

        <RichText
          v-if="isEnable(data.property.is_enable_description)"
          v-model="data.description"
          placeholder="输入提示"
        />
      </div>

      <div class="content">
        <ul>
          <li v-for="(item, i) in data.option_list" :key="i" class="content-item">
            <span class="question-number" title="双击切换序号类型" @dblclick="changeOptionType(data)">
              {{ computedQuestionNumber(i, data.option_number_show_mode) }}
            </span>
            <div v-if="isEnable(data.property.is_option_subdivision)" class="option-list">
              <div v-for="li in item.data_list" :key="li.mark" class="option-content">
                <span
                  v-if="data.property.select_type === selectTypeList[0].value"
                  :class="['selectionbox', { active: isAnswer(li.mark, item.mark) }]"
                  @click="selectAnswer(li.mark, item.mark)"
                ></span>
                <span
                  v-else
                  :class="['checkbox', { active: isAnswer(li.mark, item.mark) }]"
                  @click="selectAnswer(li.mark, item.mark)"
                >
                  <SvgIcon icon-class="check-mark" width="10" height="7" />
                </span>
                <RichText v-model="li.content" placeholder="输入内容" :inline="true" />
              </div>
            </div>

            <div v-else class="option-content">
              <span
                v-if="data.property.select_type === selectTypeList[0].value"
                :class="['selectionbox', { active: isAnswer(item.mark) }]"
                @click="selectAnswer(item.mark)"
              ></span>
              <span v-else :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" />
            </div>
            <SvgIcon icon-class="delete" class="delete pointer" @click="deleteOption(i)" />
          </li>
        </ul>
      </div>

      <div class="footer">
        <span class="add-option" @click="addOption">
          <SvgIcon icon-class="add-circle" size="14" /> <span>增加选项</span>
        </span>
      </div>
    </template>

    <template #property>
      <el-form :model="data.property" label-width="72px" label-position="left">
        <el-form-item label="题号">
          <el-input v-model="data.property.question_number" />
        </el-form-item>
        <el-form-item>
          <el-radio
            v-for="{ value, label } in questionNumberTypeList"
            :key="value"
            v-model="data.other.question_number_type"
            :label="value"
          >
            {{ label }}
          </el-radio>
        </el-form-item>
        <el-form-item label="题干题号">
          <el-select v-model="data.property.stem_question_number_font_size">
            <el-option v-for="item in fontSizeList" :key="item" :label="item" :value="item" />
          </el-select>
        </el-form-item>
        <el-form-item label="选项题号">
          <el-select v-model="data.property.option_question_number_font_size">
            <el-option v-for="item in fontSizeList" :key="item" :label="item" :value="item" />
          </el-select>
        </el-form-item>
        <el-form-item label="提示">
          <el-radio
            v-for="{ value, label } in switchOption"
            :key="value"
            v-model="data.property.is_enable_description"
            :label="value"
          >
            {{ label }}
          </el-radio>
        </el-form-item>
        <el-form-item label="选项">
          <el-radio
            v-for="{ value, label } in selectTypeList"
            :key="value"
            v-model="data.property.select_type"
            :label="value"
            @input="changeSelectType"
          >
            {{ label }}
          </el-radio>
        </el-form-item>
        <el-form-item label="选项细分">
          <el-radio
            v-for="{ value, label } in switchOption"
            :key="value"
            v-model="data.property.is_option_subdivision"
            :label="value"
            @input="changeOptionSubdivision"
          >
            {{ label }}
          </el-radio>
        </el-form-item>
        <el-form-item>
          <el-input-number
            v-model="data.property.option_number"
            :min="2"
            :max="5"
            :step="1"
            :disabled="!isEnable(data.property.is_option_subdivision)"
            @change="changeOptionNumber"
          />
        </el-form-item>
        <el-form-item label="分值">
          <el-radio
            v-for="{ value, label } in scoreTypeList"
            :key="value"
            v-model="data.property.score_type"
            :label="value"
            :disabled="true"
          >
            {{ label }}
          </el-radio>
        </el-form-item>
        <el-form-item>
          <el-input-number
            v-model="data.property.score"
            :min="0"
            :step="data.property.score_type === scoreTypeList[0].value ? 1 : 0.1"
          />
        </el-form-item>
      </el-form>
    </template>
  </QuestionBase>
</template>

<script>
import QuestionMixin from '../common/QuestionMixin.js';

import { selectTypeList, scoreTypeList, changeOptionType, isEnable } from '@/views/exercise_questions/data/common';
import { getSelectData, getOption, getSubdivisionOption } from '@/views/exercise_questions/data/select';

export default {
  name: 'SelectQuestion',
  mixins: [QuestionMixin],
  data() {
    return {
      selectTypeList,
      changeOptionType,
      data: getSelectData(),
    };
  },
  watch: {
    'data.property.is_option_subdivision': {
      handler(val) {
        this.data.answer.is_option_subdivision = val;
      },
      immediate: true,
    },
  },
  methods: {
    /**
     * 智能识别
     * @param {String} text 识别数据
     */
    recognition(text) {
      let arr = text
        .split(/[\r\n]/)
        .map((item) => item.trim())
        .filter((item) => item);

      if (arr.length > 0) {
        let sliceLength = 0;
        if (arr[0].substring(0, 3) === '题干：') {
          this.data.stem = arr[0].substring(3);
          sliceLength += 1;
        }
        if (arr.slice(sliceLength)[0] && arr.slice(sliceLength)[0].substring(0, 3) === '提示：') {
          this.data.description = arr.slice(sliceLength)[0].substring(3);
          this.data.property.is_enable_description = 'true';
          sliceLength += 1;
        } else {
          this.data.description = '';
          this.data.property.is_enable_description = 'false';
        }
        this.data.option_list = arr.slice(sliceLength).map((content) => getOption(content));
      }
    },
    changeSelectType(val) {
      if (val === selectTypeList[0].value && this.data.answer.answer_list.length > 1) {
        if (isEnable(this.data.property.is_option_subdivision)) {
          this.data.answer.answer_list = [];
        } else {
          this.data.answer.answer_list = [this.data.answer.answer_list[0]];
        }
      }
    },
    isAnswer(mark, parent_mark) {
      if (isEnable(this.data.property.is_option_subdivision)) {
        return this.data.answer.answer_list.find((item) => item.mark === parent_mark)?.value_list?.includes(mark);
      }
      return this.data.answer.answer_list.includes(mark);
    },
    selectAnswer(mark, parent_mark) {
      let is_option_subdivision = isEnable(this.data.property.is_option_subdivision);
      let answer_list = this.data.answer.answer_list;
      let index = is_option_subdivision
        ? answer_list.findIndex((item) => item.mark === parent_mark)
        : answer_list.indexOf(mark);

      if (this.data.property.select_type === selectTypeList[0].value) {
        if (is_option_subdivision) {
          if (index === -1) {
            answer_list.push({ mark: parent_mark, value_list: [mark] });
          } else {
            this.$set(this.data.answer.answer_list[index], 'value_list', [mark]);
          }
        } else {
          this.$set(this.data.answer, 'answer_list', [mark]);
        }
      }
      if (this.data.property.select_type === selectTypeList[1].value) {
        if (is_option_subdivision) {
          if (index === -1) {
            answer_list.push({ mark: parent_mark, value_list: [mark] });
          } else {
            let mIndex = answer_list[index].value_list.findIndex((item) => item.mark === mark);
            if (mIndex === -1) {
              answer_list[index].value_list.push(mark);
            } else {
              answer_list[index].value_list.splice(mIndex, 1);
            }
          }
          return;
        }
        if (index === -1) {
          answer_list.push(mark);
        } else {
          answer_list.splice(index, 1);
        }
      }
    },
    addOption() {
      this.data.option_list.push(
        isEnable(this.data.property.is_option_subdivision)
          ? getSubdivisionOption(this.data.property.option_number)
          : getOption(),
      );
    },
    /**
     * 修改是否选项细分
     * @param {'true'|'false'} val
     */
    changeOptionSubdivision(val) {
      // 现在，选项细分开启分值类型为细分，关闭为总分
      this.data.property.score_type = scoreTypeList[isEnable(val) ? 1 : 0].value;
      if (isEnable(val)) {
        // 创建与当前 option_list 相同数量的选项，选项内的细分数量与 property.option_number 数量一样
        this.data.answer.answer_list = [];
        this.data.option_list = Array.from({ length: this.data.option_list.length }, () => {
          return getSubdivisionOption(this.data.property.option_number);
        });
      } else {
        this.data.answer.answer_list = [];
        this.data.option_list = Array.from({ length: this.data.option_list.length }, getOption);
      }
    },
    /**
     * 修改选项细分数量，并尽量保留以前的数据
     * @param {Number} val
     */
    changeOptionNumber(val) {
      this.data.answer.answer_list = [];
      this.data.option_list = this.data.option_list.map(({ data_list, mark }) => {
        if (data_list.length < val) {
          return { mark, data_list: [...data_list, ...Array.from({ length: val - data_list.length }, getOption)] };
        }
        return { mark, data_list: data_list.slice(0, val) };
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.content {
  .option-list {
    display: flex;
    flex: 1;
    column-gap: 4px;
  }

  .option-content {
    .selectionbox {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 16px;
      height: 16px;
      margin-right: 8px;
      cursor: pointer;
      border: 1px solid #333;
      border-radius: 50%;

      &.active {
        &::before {
          display: inline-block;
          width: 6px;
          height: 6px;
          content: '';
          background-color: #333;
          border-radius: 50%;
        }
      }
    }

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

      .svg-icon {
        display: none;
      }

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

        .svg-icon {
          display: block;
        }
      }
    }
  }
}
</style>