chore(考试store):简化数据获取

ZhangXianQiang

2024-06-19 1a20a2c7a9e1ba9a0ffb83fb3d09ee7215d260c4

chore(考试store):简化数据获取

 src/api/index.js

@@ -1,6 +1,8 @@
import axios from "axios";
import { useRoute } from "vue-router";

const route = useRoute();

axios.defaults.headers["Content-Type"] = "application/json;charset=utf-8";

const service = axios.create({

 src/store/modules/exam.js

@@ -1,4 +1,4 @@
import { ref,computed } from 'vue';
import { ref, computed } from 'vue';
import { defineStore } from 'pinia';
export const useExamStore = defineStore('exam', () => {
  const examInfo = ref({
@@ -47,7 +47,7 @@
            }
          ],
          "analyze": "问小朋友",
          "correct": "B",
          "correct": "",
          "score": "",
          "difficult": 5
        },
@@ -76,7 +76,7 @@
            }
          ],
          "analyze": "问小朋友",
          "correct": "B",
          "correct": "",
          "score": "",
          "difficult": 5
        }
@@ -110,7 +110,7 @@
            }
          ],
          "analyze": "问小朋友",
          "correct": "B",
          "correct": "",
          "score": "",
          "difficult": 5
        },
@@ -139,7 +139,7 @@
            }
          ],
          "analyze": "问小朋友",
          "correct": "B",
          "correct": "",
          "score": "",
          "difficult": 5
        }
@@ -148,6 +148,14 @@
  ]);

  const activeQuestion = ref(null);


  const getActiveQuestion = computed(() => {
    const temp = examDetail.value.find(item => item.questionType === currentType.value);
    if(temp) {
      return temp.questionList[currentIndex.value];
    }
  })

  const setExamInfo = (info) => {
    examInfo.value = info;
@@ -161,6 +169,14 @@
    activeQuestion.value = detail;
  };

  const setQuestionAnswer = (type, index, answer) => {
    const temp = examDetail.value.find(item => item.questionType === type);
    if(temp) {
      temp.questionList[index].correct = answer;
    }
  };


  return {
    examInfo,
    examDetail,
@@ -168,8 +184,10 @@
    activeQuestion,
    currentType,
    currentIndex,
    getActiveQuestion,
    setExamInfo,
    setExamDetail,
    setActiveQuestion
    setActiveQuestion,
    setQuestionAnswer
  };
});

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

@@ -23,7 +23,10 @@

const examStore = useExamStore();

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

const activeQuestion = ref(examStore.getActiveQuestion);

const answerClick = (item) => {
  if(item) {
    // resetAnswer();

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

@@ -16,19 +16,21 @@
</template>

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

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

const activeQuestion = ref(examStore.getActiveQuestion);

const answerClick = (item) => {
  if(item) {
    resetAnswer();
    item.isActive = true;

    examStore.setQuestionAnswer(currentType.value, currentIndex.value, item.prefix);
  }
};

@@ -42,9 +44,6 @@
  activeQuestion.value.items.forEach(item => item.isActive = false);
}

const filterExam = () => {
  
}

</script>


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

@@ -5,7 +5,7 @@
        <template v-for="item in examDetail">
          <el-collapse-item :title="examType[item.questionType]" :name="item.questionType">
            <div class="sheet-list grid grid-cols-5 gap-4 justify-items-center">
              <div class="sheet-item cursor-pointer flex justify-center items-center" v-for="question,index in item.questionList" @click="sheetClick(item.questionType,index,question)" :class="itemClass(item,item.questionType, index)">
              <div class="sheet-item cursor-pointer flex justify-center items-center" v-for="question,index in item.questionList" @click="sheetClick(item.questionType,index)" :class="itemClass(item,item.questionType, index)">
                {{ index + 1 }}
              </div>
            </div>
@@ -33,10 +33,9 @@

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

const sheetClick = (type,index,question) => {
const sheetClick = (type,index) => {
  currentType.value = type;
  currentIndex.value = index;
  examStore.setActiveQuestion(question);
}
</script>

@@ -55,4 +54,9 @@
.active {
  border-color: #3680fa;
}
.answer {
  border-color: #3680fa !important;
  background-color: #3680fa !important;
  color: #fff !important;
}
</style>

 src/views/exam/index.vue

@@ -82,7 +82,7 @@
    <el-dialog v-model="dialogVisible" title="注意" width="500">
      <div class="dialog-container">
        <p>请确认是否退出当前考试</p>
        <p>当前考试试卷会自动提交,后续无法继续作答</p>
        <p>当前考试试卷会自动提交,后续将无法继续作答</p>
      </div>
      <template #footer>
        <div class="dialog-footer">
@@ -112,13 +112,12 @@
const router = useRouter();

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

const typeComponent = {
  1: AnswerSingle,
  2: AnswerMultiple,
};
examStore.setActiveQuestion(examDetail.value[0].questionList[0]);

const dialogVisible = ref(false);

@@ -163,7 +162,7 @@
        currentIndex.value = 0;
      }
    }
    findQuestion(currentType.value, currentIndex.value);
    // findQuestion(currentType.value, currentIndex.value);
  }

};