更改答题route, 提交选择题答案

src/features/OnlineExam/Examing/ArrowNavView.vue

@@ -1,8 +1,8 @@
 <template>
   <div class="arrow-container">
     <div class="prev">
-      <template v-if="previousExamQuestion">
-        <router-link class="qm-primary-button" :to="{ path: '/online-exam/exam/' + this.$route.params.examId, query: { 'examRecordDataId': this.$route.query.examRecordDataId, 'examQuestionId': previousExamQuestion.id }}">上一题</router-link>
+      <template v-if="previousQuestionOrder">
+        <router-link class="qm-primary-button" :to="{ path: `/online-exam/exam/${$route.params.examId}/examRecordData/${$route.params.examRecordDataId}/order/${previousQuestionOrder}`}">上一题</router-link>
       </template>
 
       <template v-else>
@@ -13,8 +13,8 @@
       方向键 → 下一题。方向键 ← 上一题。<br>A、B、C、D来勾选选项。Y、N来勾选判断题。
     </div>
     <div class="next">
-      <template v-if="nextExamQuestion">
-        <router-link class="qm-primary-button" :to="{ path: '/online-exam/exam/' + this.$route.params.examId, query: { 'examRecordDataId': this.$route.query.examRecordDataId, 'examQuestionId': nextExamQuestion.id }}">下一题</router-link>
+      <template v-if="nextQuestionOrder">
+        <router-link class="qm-primary-button" :to="{ path: `/online-exam/exam/${$route.params.examId}/examRecordData/${$route.params.examRecordDataId}/order/${nextQuestionOrder}`}">下一题</router-link>
       </template>
 
       <template v-else>
@@ -32,8 +32,8 @@ export default {
     return {};
   },
   props: {
-    previousExamQuestion: Object,
-    nextExamQuestion: Object
+    previousQuestionOrder: Number,
+    nextQuestionOrder: Number
   },
   created: function() {
     window.addEventListener("keyup", this.keyup);
@@ -52,30 +52,26 @@ export default {
         (["INPUT"].includes(document.activeElement.tagName) &&
           ["checkbox", "radio"].includes(document.activeElement.type))
       ) {
-        if (e.code === "ArrowRight" && this.nextExamQuestion) {
+        if (e.code === "ArrowRight" && this.nextQuestionOrder) {
           this.goToNextQuestion();
         }
-        if (e.code === "ArrowLeft" && this.previousExamQuestion) {
+        if (e.code === "ArrowLeft" && this.previousQuestionOrder) {
           this.goToPreviousQuestion();
         }
       }
     },
     goToNextQuestion() {
       this.$router.push({
-        path: "/online-exam/exam/" + this.$route.params.examId,
-        query: {
-          examRecordDataId: this.$route.query.examRecordDataId,
-          examQuestionId: this.nextExamQuestion.id
-        }
+        path: `/online-exam/exam/${this.$route.params.examId}/examRecordData/${
+          this.$route.params.examRecordDataId
+        }/order/${this.nextQuestionOrder}`
       });
     },
     goToPreviousQuestion() {
       this.$router.push({
-        path: "/online-exam/exam/" + this.$route.params.examId,
-        query: {
-          examRecordDataId: this.$route.query.examRecordDataId,
-          examQuestionId: this.previousExamQuestion.id
-        }
+        path: `/online-exam/exam/${this.$route.params.examId}/examRecordData/${
+          this.$route.params.examRecordDataId
+        }/order/${this.previousQuestionOrder}`
       });
     }
   }

src/features/OnlineExam/Examing/ExamingHome.vue

@@ -2,17 +2,17 @@
   <div v-if="exam && examQuestion()" class="container">
     <div class="header">
       <RemainTime></RemainTime>
-      <OverallProgress :exam-question-list="validQuestions"></OverallProgress>
-      <QuestionFilters :exam-question-list="validQuestions"></QuestionFilters>
+      <OverallProgress :exam-question-list="examQuestionList"></OverallProgress>
+      <QuestionFilters :exam-question-list="examQuestionList"></QuestionFilters>
       <Button class="qm-primary-button" @click="submitPaper">交卷</Button>
     </div>
     <div class="main">
       <QuestionView :exam-question="examQuestion()"></QuestionView>
-      <ArrowNavView :previous-exam-question="preExamQuestion" :next-exam-question="nextExamQuestion"></ArrowNavView>
+      <ArrowNavView :previousQuestionOrder="previousQuestionOrder" :nextQuestionOrder="nextQuestionOrder"></ArrowNavView>
     </div>
     <div class="side">
       <div class="question-nav">
-        <QuestionNavView :paperStruct="paperStruct" :validQuestions="validQuestions" />
+        <QuestionNavView :paperStruct="paperStruct" />
       </div>
       <div class="camera">
         <!-- <FaceRecognition width="100%" height="100%" :showRecognizeButton="false" /> -->
@@ -30,17 +30,15 @@ import ArrowNavView from "./ArrowNavView.vue";
 import QuestionNavView from "./QuestionNavView.vue";
 import FaceRecognition from "../../../components/FaceRecognition/FaceRecognition";
 import { createNamespacedHelpers } from "vuex";
-const { mapState, mapMutations, mapGetters } = createNamespacedHelpers(
-  "examingHomeModule"
-);
+const { mapState, mapMutations } = createNamespacedHelpers("examingHomeModule");
 
 export default {
   name: "ExamingHome",
   created() {
     this.initData();
-    if (!this.$route.query.order) {
+    if (!this.$route.params.order) {
       // created can access this.$route?
-      this.$router.push(this.$route.fullPath + "&order=" + 4);
+      this.$router.push(this.$route.fullPath + "/order/1");
       return;
     }
   },
@@ -55,7 +53,7 @@ export default {
       );
       const paperStruct = await this.$http.get(
         "/api/ecs_oe_student/examRecordPaperStruct/getExamRecordPaperStruct?examRecordDataId=" +
-          this.$route.query.examRecordDataId
+          this.$route.params.examRecordDataId
       );
 
       const examQuestionList = await this.$http.get(
@@ -81,11 +79,6 @@ export default {
 
       next && next();
       if (!this.exam) return;
-      // this.examQuestion = this.examQuestionList.find(
-      //   eq => eq.id == this.$route.query.examQuestionId // number == string
-      // );
-      // this.preExamQuestion = this.validQuestions[this.examQuestion.orders - 2];
-      // this.nextExamQuestion = this.validQuestions[this.examQuestion.orders];
     },
     async submitPaper() {
       //FIXME: submit precondition
@@ -96,18 +89,27 @@ export default {
       return (
         this.examQuestionList &&
         this.examQuestionList.find(
-          eq => eq.order == this.$route.query.order // number == string
+          eq => eq.order == this.$route.params.order // number == string
         )
       );
     }
   },
   computed: {
     ...mapState(["exam", "paperStruct", "examQuestionList"]),
-    ...mapGetters(["validQuestions"]),
-    preExamQuestion: vm =>
-      vm.examQuestion && vm.validQuestions[vm.examQuestion.orders - 2],
-    nextExamQuestion: vm =>
-      vm.examQuestion && vm.validQuestions[vm.examQuestion.orders]
+    previousQuestionOrder: vm => {
+      if (vm.examQuestion().order > 1) {
+        return vm.examQuestion().order - 1;
+      } else {
+        return null;
+      }
+    },
+    nextQuestionOrder: vm => {
+      if (vm.examQuestion().order < vm.examQuestionList.length) {
+        return vm.examQuestion().order + 1;
+      } else {
+        return null;
+      }
+    }
   },
   watch: {
     $route: function() {

src/features/OnlineExam/Examing/QuestionBody.vue

@@ -74,7 +74,12 @@ export default {
       this.questionDetail = question;
     }
   },
-  computed: {}
+  computed: {},
+  watch: {
+    $route() {
+      this.parseQuestion();
+    }
+  }
 };
 </script>
 

src/features/OnlineExam/Examing/QuestionNavView.vue

@@ -1,14 +1,14 @@
 <template>
   <div>
     <div class="container">
-      <template v-if="paperStruct && validQuestions">
+      <template v-if="paperStruct && examQuestionList">
         <div v-for="(struct, index1) in paperStruct.defaultPaper.questionGroupList" :key="index1" class="section">
           <div class="title">{{struct.groupName}} ({{struct.groupScore}}分)</div>
           <div class="list">
             <template v-for="(_, index2) in sectionQuestions(index1)">
               <template v-if="isSelectedQuestion(index1, index2)">
                 <div :key="index2" :class="itemClass(index1, index2)">
-                  <router-link :to="{ path: '/online-exam/exam/' + $route.params.examId, query: { 'examRecordDataId': $route.query.examRecordDataId, 'examStudentId': $route.query.examStudentId, 'order': getQuestionNum(index1, index2).order }}">{{index2+1}}</router-link>
+                  <router-link :to="{ path: `/online-exam/exam/${$route.params.examId}/examRecordData/${$route.params.examRecordDataId}/order/${getQuestionNum(index1, index2).order}`}">{{index2+1}}</router-link>
                 </div>
               </template>
             </template>
@@ -30,15 +30,14 @@ export default {
     return {};
   },
   props: {
-    paperStruct: Object,
-    validQuestions: Array
+    paperStruct: Object
   },
   methods: {
     getQuestionNum: function(section, index) {
       if (
         !this.paperStruct ||
-        !this.validQuestions ||
-        this.validQuestions.length === 0
+        !this.examQuestionList ||
+        this.examQuestionList.length === 0
       ) {
         return 0;
       }
@@ -48,7 +47,7 @@ export default {
           .questionWrapperList.length;
       }
       // console.log(section, index, total + index);
-      return this.validQuestions[total + index];
+      return this.examQuestionList[total + index];
     },
     isSelectedQuestion(index1, index2) {
       let q = this.getQuestionNum(index1, index2);
@@ -77,11 +76,11 @@ export default {
       };
     },
     sectionQuestions(section) {
-      return this.validQuestions.filter(q => q.mainNumber === section + 1);
+      return this.examQuestionList.filter(q => q.mainNumber === section + 1);
     }
   },
   computed: {
-    ...mapState(["questionFilterType"])
+    ...mapState(["questionFilterType", "examQuestionList"])
   }
 };
 </script>

src/features/OnlineExam/Examing/SingleQuestionView.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="question-view">
-    <question-body :questionBody="question.body" :examQuestionId="examQuestion.id"></question-body>
+    <question-body :questionBody="questionBody" :examQuestionId="examQuestion.id"></question-body>
     <div class="ops">
       <div class="stu-answer">{{stuAnswer}}</div>
       <div class="score">({{examQuestion.questionScore}}分)</div>
@@ -26,6 +26,7 @@ export default {
   name: "SingleQuestionView",
   data() {
     return {
+      questionBody: this.question.body,
       optionName,
       stuAnswer: this.examQuestion.studentAnswer
     };
@@ -64,9 +65,15 @@ export default {
     },
     async answerQuestion(examQuestionId, stuAnswer) {
       if (stuAnswer !== this.examQuestion.studentAnswer) {
-        await this.$http.put("/api/exam_question/" + examQuestionId, {
-          stuAnswer
-        });
+        await this.$http.post(
+          "/api/ecs_oe_student/examQuestion/submitQuestionAnswer",
+          [
+            {
+              order: this.examQuestion.order,
+              studentAnswer: stuAnswer
+            }
+          ]
+        );
         this.updateExamQuestionAnswer({ examQuestionId, stuAnswer });
       }
     }
@@ -74,6 +81,7 @@ export default {
   watch: {
     examQuestion: function() {
       this.stuAnswer = this.examQuestion.studentAnswer;
+      this.questionBody = this.question.body;
     }
   },
   components: {

src/features/OnlineExam/OnlineExamHome.vue

@@ -33,9 +33,9 @@ export default {
 
     if (examingRes) {
       this.$router.push(
-        `/online-exam/exam/${examingRes.examId}/?examRecordDataId=${
+        `/online-exam/exam/${examingRes.examId}/examRecordData/${
           examingRes.examRecordDataId
-        }&order=1`
+        }/order/1`
       );
       return;
     }

src/features/OnlineExam/OnlineExamOverview.vue

@@ -106,57 +106,6 @@ export default {
     );
     this.paperStruct = paperStruct.data;
 
-    // this.paperStruct = [
-    //   {
-    //     index: 1,
-    //     questionType: null,
-    //     title: "选择题",
-    //     totalScore: 45,
-    //     count: 36,
-    //     questionCount: 36,
-    //     score: null,
-    //     succQuestionNum: 0,
-    //     failQuestionNum: 0,
-    //     notAnsweredCount: 0
-    //   },
-    //   {
-    //     index: 2,
-    //     questionType: null,
-    //     title: "判断题",
-    //     totalScore: 20,
-    //     count: 20,
-    //     questionCount: 20,
-    //     score: null,
-    //     succQuestionNum: 0,
-    //     failQuestionNum: 0,
-    //     notAnsweredCount: 0
-    //   },
-    //   {
-    //     index: 3,
-    //     questionType: null,
-    //     title: "多项选择题",
-    //     totalScore: 10,
-    //     count: 5,
-    //     questionCount: 5,
-    //     score: null,
-    //     succQuestionNum: 0,
-    //     failQuestionNum: 0,
-    //     notAnsweredCount: 0
-    //   },
-    //   {
-    //     index: 4,
-    //     questionType: null,
-    //     title: "简答题",
-    //     totalScore: 25,
-    //     count: 3,
-    //     questionCount: 3,
-    //     score: null,
-    //     succQuestionNum: 0,
-    //     failQuestionNum: 0,
-    //     notAnsweredCount: 0
-    //   }
-    // ];
-
     this.paperTotalScore = this.paperStruct.defaultPaper.questionGroupList
       .map(q => q.groupScore)
       .reduce((p, c) => p + c);
@@ -172,9 +121,9 @@ export default {
   methods: {
     goToPaper: function() {
       this.$router.push(
-        `/online-exam/exam/${this.$route.params.examId}/?examRecordDataId=${
+        `/online-exam/exam/${this.$route.params.examId}/examRecordData/${
           this.examRecordDataId
-        }&examStudentId=${this.$route.query.examStudentId}`
+        }/order/1`
       );
       window.clearInterval(this.intervalId);
     }

src/router.js

@@ -35,7 +35,8 @@ let router = new Router({
       component: OnlineExamOverview
     },
     {
-      path: "/online-exam/exam/:examId/",
+      path:
+        "/online-exam/exam/:examId/examRecordData/:examRecordDataId/order/:order",
       name: "OnlineExamingHome",
       component: ExamingHome
     },