持久化客观题答题状态

src/store/index.ts

@@ -1,6 +1,6 @@
 import Vue from 'vue'
 import Vuex, { GetterTree, MutationTree } from 'vuex'
-import { UserSerializer } from '@/api/types'
+import { ID, Record, UserSerializer } from '@/api/types'
 import createPersistedState from 'vuex-persistedstate'
 
 Vue.use(Vuex)
@@ -8,23 +8,31 @@ Vue.use(Vuex)
 export type RootState = {
   user: UserSerializer
   token?: string
+  examAnswers?: Object
+  examId?: ID
 }
 
 export const state = (): RootState => ({
   user: (null as unknown) as UserSerializer,
-  token: ''
+  token: '',
+  examAnswers: (null as unknown) as Object,
+  examId: (null as unknown) as ID
 })
 
 export const mutations: MutationTree<RootState> = {
   setToken: (state, token) => (state.token = token),
-  setUser: (state, user) => (state.user = user)
+  setUser: (state, user) => (state.user = user),
+  setExamAnswers: (state, answers) => (state.examAnswers = answers),
+  setExamId: (state, examId) => (state.examId = examId)
 }
 
 export const getters: GetterTree<RootState, RootState> = {
   isStudent: (state) => state.user.role === 'STUDENT',
   isTeacher: (state) => state.user.role === 'TEACHER',
   getId: (state) => state.user.id,
-  isLogin: (state) => Boolean(state.token)
+  isLogin: (state) => Boolean(state.token),
+  getExamAnswers: (state) => state.examAnswers,
+  getExamId: (state) => state.examId
 }
 
 export default new Vuex.Store({

src/views/exam/ExamPane.vue

@@ -214,6 +214,9 @@
       提交失败，请重试
     </v-snackbar>
     <v-snackbar v-model="endTimeChanged" absolute>评测已延长</v-snackbar>
+    <v-snackbar v-model="resetLast" absolute color="info" top
+      >已恢复到上次答题状态</v-snackbar
+    >
   </div>
 </template>
 
@@ -224,20 +227,21 @@ import ChoicePane from '@/views/exam/components/ChoicePane.vue'
 import CountDown from '@/views/exam/components/CountDown.vue'
 import BlankPane from '@/views/exam/components/BlankPane.vue'
 import {
+  CodeQuestionSerializer,
   ExamQuestionSerializer,
   ExamSerializer,
-  CodeQuestionSerializer,
+  ID,
+  LocalDateTime,
   QuestionSerializer,
   QuestionType,
-  Record,
-  LocalDateTime,
-  ID
+  Record
 } from '@/api/types'
-import { getExamById, getExamQuestions, getExamCodeQuestions } from '@/api/exam'
+import { getExamById, getExamCodeQuestions, getExamQuestions } from '@/api/exam'
 import { getQuestionStem } from '@/api/question'
 import { objectiveJudge } from '@/api/judge'
 import dayjs from 'dayjs'
 import { TIME_FORMAT } from '@/utils/common'
+import { mapGetters, mapMutations } from 'vuex'
 
 export default Vue.extend({
   name: 'ExamPane',
@@ -259,7 +263,7 @@ export default Vue.extend({
       examQuestions: (null as unknown) as ExamQuestionSerializer,
       currentQuestion: (null as unknown) as QuestionSerializer,
       currentQuestionIndex: -1,
-      objectiveAnswers: {} as Map<ID, Record>,
+      objectiveAnswers: {},
       questionIds: [] as Array<string>,
       questionStartTime: dayjs().format(TIME_FORMAT) as LocalDateTime,
       examId: 0 as ID,
@@ -274,7 +278,8 @@ export default Vue.extend({
       objectiveQuestionNum: 0,
       codeQuestionNum: 0,
       codeQuestionsReady: false,
-      endTimeChanged: false
+      endTimeChanged: false,
+      resetLast: false
     }
   },
   computed: {
@@ -286,6 +291,8 @@ export default Vue.extend({
     }
   },
   methods: {
+    ...mapGetters(['getExamAnswers', 'getExamId']),
+    ...mapMutations(['setExamAnswers', 'setExamId']),
     questionType(): QuestionType {
       return this.currentQuestion.type
     },
@@ -314,31 +321,26 @@ export default Vue.extend({
     // },
     saveObjectiveAnswer(answer: string) {
       let questionEndTime = dayjs().format(TIME_FORMAT)
-      this.objectiveAnswers.set(this.questionIds[this.currentQuestionIndex], {
+
+      this.objectiveAnswers[this.questionIds[this.currentQuestionIndex]] = {
         answer,
         startAt: this.questionStartTime,
         endAt: questionEndTime
-      })
+      }
+
+      this.setExamAnswers(this.objectiveAnswers)
     },
     leaveExam() {
       this.exitDialog = false
       this.$router.back()
     },
     submitAnswer() {
-      //TODO code
       this.submitDialog = false
       this.submitting = true
       console.log(this.objectiveAnswers)
       console.log(this.questionIds)
 
-      let mapObj = Object.create(null)
-      for (let [k, v] of this.objectiveAnswers) {
-        if (v.answer) {
-          mapObj[k] = v
-        }
-      }
-
-      objectiveJudge(this.examId, mapObj)
+      objectiveJudge(this.examId, this.objectiveAnswers)
         .then(() => {
           setTimeout(() => {
             this.$router.push({
@@ -371,9 +373,7 @@ export default Vue.extend({
 
       if (this.currentQuestionIndex < this.totalQuestionNum - 1) {
         if (
-          !this.objectiveAnswers.get(
-            this.questionIds[this.currentQuestionIndex]
-          )
+          !this.objectiveAnswers[this.questionIds[this.currentQuestionIndex]]
         ) {
           //TODO 是否需要提示未作答?
         }
@@ -425,12 +425,24 @@ export default Vue.extend({
               })
               this.codeQuestionsReady = true
 
-              this.currentQuestionIndex = 0
-              this.fetchQuestionStem(0)
+              if (this.getExamId() != this.examId) {
+                // 新参加的考试，将vuex状态清空
+                this.setExamAnswers({})
+                this.setExamId(this.examId)
+                this.currentQuestionIndex = 0
+                this.fetchQuestionStem(0)
+              } else {
+                this.objectiveAnswers = this.getExamAnswers()
+                this.currentQuestionIndex =
+                  Object.keys(this.objectiveAnswers).length - 1
+
+                if (this.currentQuestionIndex < this.objectiveQuestionNum) {
+                  this.fetchQuestionStem(this.currentQuestionIndex)
+                }
+                this.resetLast = true
+              }
             })
           })
-
-          this.objectiveAnswers = new Map<ID, Record>()
         })
       })
     }