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">
            <el-input v-if="isEnable(isEnableManualModify)" v-model="item.custom_number" class="manual-modify" />
            <span v-else 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 class="option-subdivision-top">
                <!-- <el-input v-model="item.custom_number" /> -->
                <RichText v-model="item.stem" placeholder="输入小题干" :inline="true" />
              </div>
              <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>

      <div v-if="isEnable(data.property.is_enable_analysis)" class="analysis">
        <div class="analysis-title">解析：</div>
        <RichText v-model="data.analysis" :is-border="true" :font-size="14" placeholder="输入解析" />
      </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 switchOption"
            :key="value"
            v-model="data.property.is_enable_analysis"
            :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,
  analysisRecognitionSelectData,
} from '@/views/exercise_questions/data/select';

export default {
  name: 'SelectQuestion',
  mixins: [QuestionMixin],
  props: {
    isEnableManualModify: {
      type: String,
      default: 'false',
    },
  },
  data() {
    return {
      selectTypeList,
      changeOptionType,
      data: getSelectData(),
    };
  },
  watch: {
    'data.property.is_option_subdivision': {
      handler(val) {
        this.data.answer.is_option_subdivision = val;
      },
      immediate: true,
    },
    isEnableManualModify: {
      handler(val) {
        if (val === 'false') return;
        this.data.option_list = this.data.option_list.map((item, i) => {
          return { ...item, custom_number: `${i + 1}` };
        });
      },
    },
  },
  methods: {
    /**
     * 智能识别
     * @param {String} text 识别数据
     */
    recognition(text) {
      let arr = this.recognitionCommon(text);
      let obj = analysisRecognitionSelectData(arr);
      this.data.property.is_option_subdivision = 'false';
      this.changeOptionSubdivision('false');
      this.recognitionCommonSetObj(obj);
      this.data.answer.answer_list = [];
    },
    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 }, (el, i) => {
          return getSubdivisionOption(this.data.property.option_number, i);
        });
      } else {
        this.data.answer.answer_list = [];
        this.data.option_list = Array.from({ length: this.data.option_list.length }, (el, i) => getOption('', true, i));
      }
    },
    /**
     * 修改选项细分数量，并尽量保留以前的数据
     * @param {Number} val
     */
    changeOptionNumber(val) {
      this.data.answer.answer_list = [];
      this.data.option_list = this.data.option_list.map(({ data_list, mark, ...item }) => {
        if (data_list.length < val) {
          return {
            mark,
            data_list: [...data_list, ...Array.from({ length: val - data_list.length }, getOption)],
            ...item,
          };
        }
        return { mark, data_list: data_list.slice(0, val), ...item };
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.content {
  &-item {
    .manual-modify {
      width: 55px;

      :deep .el-input__inner {
        height: 36px;
      }
    }
  }

  .option-list {
    display: flex;
    flex: 1;
    flex-flow: wrap;
    gap: 4px 4px;

    .option-subdivision-top {
      width: 100%;

      .rich-wrapper {
        flex: 1;
        min-height: 32px;
        padding-left: 16px;
        background-color: $fill-color;

        :deep .rich-text {
          &.mce-content-body {
            padding-top: 4px;
          }

          &:not(.mce-edit-focus) {
            p {
              margin: 0;
            }
          }

          &.mce-content-body[data-mce-placeholder]:not(.mce-visualblocks)::before {
            top: 6px;
          }
        }
      }
    }
  }

  .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>