feat:填空题填写

ZhangXianQiang

2024-07-01 15ff2af69bb77dd0b01209ebab77aad1bce6cb43

feat:填空题填写

 src/views/exam/components/answer-main/answer-fill/index.vue

@@ -4,11 +4,16 @@
      <ExamInfo class="mb-5" :questionIndex="currentIndex" :activeQuestion="activeQuestion"></ExamInfo>

      <div class="answer-content">
        <div class="answer-item flex" v-for="item, index in activeQuestion.questionItemList"
          :class="answerState(item)">
        <div class="answer-item flex" v-for="item, index in activeQuestion.questionItemList" :class="answerState(item,index)">
          <div class="answer-icon flex flex-col justify-center items-center flex-shrink-0">{{ item.prefix }}</div>
          <div class="answer-text text-gray-700">
            <el-input v-model="answerList[`answer${index}`]" @focus="answerClick(item)" maxlength="30" placeholder="请输入内容"></el-input>
          <div class="answer-text text-gray-700 grow">
            <el-input v-model="answerList[index]"
            maxlength="30"
            placeholder="请输入内容"
            class="answer-input" 
            @focus="answerFocus(item)" 
            @blur="answerBlur(item)"
            @change="answerChange(index)"></el-input>
          </div>
        </div>
      </div>
@@ -18,55 +23,49 @@
</template>

<script setup>
import { ref,watchEffect } from 'vue';
import { ref, watchEffect } from 'vue';
import { storeToRefs } from 'pinia';
import ExamInfo from '@/components/ExamInfo/index.vue';
import { useExamStore } from '@/store/index.js';
const examStore = useExamStore();

const answerList = ref({});
const answerList = ref([]);


const { currentType, currentIndex } = storeToRefs(examStore);

const activeQuestion = ref(examStore.getActiveQuestion);

const answerClick = (item) => {
  return;
  if (item) {
    if (item.isActive) {
      item.isActive = !item.isActive;
    } else {
      resetAnswer();
      item.isActive = true;
    }
    const answerList = filterAnswer();
    let temp = '';
    if(answerList) {
      temp = answerList.prefix;
    }
    examStore.setQuestionAnswer(currentType.value, currentIndex.value, temp);
  }
const answerFocus = (item) => {
  item.isActive = true;
};

const answerState = (item) => {
const answerBlur = (item) => {
  item.isActive = false;
}

const answerState = (item,index) => {
  if(Array.isArray(activeQuestion.value.answerList) && activeQuestion.value.answerList[index]) {
    item.isActive = true;
  }
  return {
    active: item.isActive
  };
};

const resetAnswer = () => {
  activeQuestion.value.questionItemList.forEach(item => item.isActive = false);
};

const filterAnswer = () => {
  return activeQuestion.value.questionItemList.find(item => item.isActive);
const answerChange = (index) => {
  examStore.setQuestionAnswerList(currentType.value, currentIndex.value, answerList.value);
}


watchEffect(() => {
  activeQuestion.value.questionItemList.forEach((item,index) => {
    answerList[`answer${index}`] = '';
  })
  activeQuestion.value.questionItemList.forEach((item, index) => {
    if(Array.isArray(activeQuestion.value.answerList)) {
      answerList[index] = activeQuestion.value.answerList[index];
    } else {
      answerList[index] = '';
    }
  });
})


@@ -107,4 +106,19 @@
    background-color: #409EFF !important;
  }
}

.answer-input {
  width: 100%;
  border: 0;

  .el-input__wrapper,
  .is-focus {
    box-shadow: none !important;
  }

  .el-input__wrapper:hover {
    box-shadow: none !important;
  }

}
</style>

 src/views/exam/components/answer-sheet/index.vue

@@ -22,13 +22,13 @@
import {useExamStore} from '@/store/index.js';
const examStore = useExamStore();

const {examType, examDetail,currentType,currentIndex} = storeToRefs(examStore);
const {examDetail,currentType,currentIndex} = storeToRefs(examStore);

const activeNames = ref(examDetail.value.map(item => item.questionType));

const itemClass = (question,type,index) => {
  return {
    answer: question.answer || (question.answerList && question.answerList.length),
    answer: question.answer || checkAnswerList(question.answerList),
    active: currentType.value === type && currentIndex.value === index
  }
}
@@ -38,6 +38,11 @@
  currentIndex.value = index;
}


const checkAnswerList = (answerList) => {
  return Array.isArray(answerList) && answerList.length && answerList.every(item => item);
}

</script>

<style lang="scss" scoped>