判断题和填空题答题优化

src/features/OnlineExam/Examing/BooleanQuestionView.vue

@@ -2,33 +2,30 @@
   <div class="question-view">
     <question-body :questionBody="question.body" :examQuestionId="examQuestion.id"></question-body>
     <div class="ops">
-      <div class="stu-answer"> {{stuAnswer}}</div>
+      <div class="stu-answer">{{stuAnswer}}</div>
       <div class="score">({{question.questionScore}}分)</div>
     </div>
-    <div @click="answerQuestion(examQuestion.id, '正确')">
+    <div @click="() => answerQuestion(examQuestion.id, '正确')">
       <input type="radio" name="question" value="正确" :checked="stuAnswer === '正确'" />
       <span class="question-options">正确</span>
     </div>
-    <div @click="answerQuestion(examQuestion.id, '错误')">
+    <div @click="() => answerQuestion(examQuestion.id, '错误')">
       <input type="radio" name="question" value="错误" :checked="stuAnswer === '错误'" />
       <span class="question-options">错误</span>
     </div>
     <div class="reset">
-      <i-button type="warning" size="large" @click="resetQuestion(examQuestion.id)">重置答案</i-button>
+      <i-button type="warning" size="large" @click="() => answerQuestion(examQuestion.id, null)">重置答案</i-button>
     </div>
   </div>
 </template>
 
 <script>
 import QuestionBody from "./QuestionBody";
+import { createNamespacedHelpers } from "vuex";
+const { mapState, mapMutations } = createNamespacedHelpers("examingHomeModule");
 
 export default {
   name: "BooleanQuestionView",
-  data() {
-    return {
-      stuAnswer: this.examQuestion.stuAnswer
-    };
-  },
   props: {
     question: Object,
     examQuestion: Object
@@ -40,6 +37,7 @@ export default {
     window.removeEventListener("keyup", this.keyup);
   },
   methods: {
+    ...mapMutations(["updateExamQuestionAnswer"]),
     keyup(e) {
       // console.log(e);
       // console.log(document.activeElement.type);
@@ -59,15 +57,18 @@ export default {
         this.answerQuestion(this.examQuestion.id, this.stuAnswer);
       }
     },
-    answerQuestion: function(examQuestionId, stuAnswer) {
-      this.stuAnswer = stuAnswer;
-      this.$http.put("/api/exam_question/" + examQuestionId, { stuAnswer });
-    },
-    resetQuestion: function(examQuestionId) {
-      this.stuAnswer = null;
-      this.$http.put("/api/exam_question/" + examQuestionId, {
-        stuAnswer: null
-      });
+    async answerQuestion(examQuestionId, stuAnswer) {
+      if (stuAnswer !== this.examQuestion.stuAnswer) {
+        await this.$http.put("/api/exam_question/" + examQuestionId, {
+          stuAnswer
+        });
+        this.updateExamQuestionAnswer({ examQuestionId, stuAnswer });
+      }
+    }
+  },
+  computed: {
+    stuAnswer() {
+      return this.examQuestion.stuAnswer;
     }
   },
   components: {

src/features/OnlineExam/Examing/ExamingHome.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="container">
+  <div v-if="exam" class="container">
     <div class="header">
       <RemainTime></RemainTime>
       <OverallProgress :exam-question-list="validQuestions"></OverallProgress>
@@ -29,75 +29,58 @@ import QuestionView from "./QuestionView.vue";
 import ArrowNavView from "./ArrowNavView.vue";
 import QuestionNavView from "./QuestionNavView.vue";
 import FaceRecognition from "../../../components/FaceRecognition/FaceRecognition";
+import { createNamespacedHelpers } from "vuex";
+const { mapState, mapMutations } = createNamespacedHelpers("examingHomeModule");
 
 export default {
   name: "ExamingHome",
   data() {
     return {
-      exam: null,
-      paperStruct: null,
-      validQuestions: [],
-      examQuestionList: [],
       preExamQuestion: null,
       nextExamQuestion: null,
       examQuestion: null
     };
   },
-  async mounted() {
+  async created() {
+    await this.initData();
     if (!this.$route.query.examQuestionId) {
-      const exam = await this.$http.get(
-        "/api/ecs_exam_work/exam/" + this.$route.params.examId
-      );
-      this.exam = exam.data;
-
-      const paperStruct = await this.$http.get(
-        "/api/exam_question/paper_struct/?exam_record_id=" +
-          this.$route.query.examRecordId
-      );
-      this.paperStruct = paperStruct.data;
-
-      // FIXME: global API processing. mock or not
-      const examQuestionList = await this.$http.get(
-        "/api/exam_question/?exam_record_id=" + this.$route.query.examRecordId
-      );
-      this.examQuestionList = examQuestionList.data;
-      this.validQuestions = this.examQuestionList.filter(
-        q => q.nestedQuestion === false
-      );
       this.$router.push(
         this.$route.fullPath + "&examQuestionId=" + this.examQuestionList[0].id
       );
       return;
     }
-    this.init();
+    this.updateQuestion();
   },
   beforeRouteUpdate(to, from, next) {
-    this.init(next);
+    this.updateQuestion(next);
   },
   methods: {
-    init: async function(next) {
+    ...mapMutations(["updateExamState"]),
+    async initData() {
       const exam = await this.$http.get(
         "/api/ecs_exam_work/exam/" + this.$route.params.examId
       );
-      this.exam = exam.data;
 
-      if (!this.paperStruct || this.paperStruct.length == 0) {
-        const paperStruct = await this.$http.get(
-          "/api/exam_question/paper_struct/?exam_record_id=" +
-            this.$route.query.examRecordId
-        );
-        this.paperStruct = paperStruct.data;
-      }
+      const paperStruct = await this.$http.get(
+        "/api/exam_question/paper_struct/?exam_record_id=" +
+          this.$route.query.examRecordId
+      );
 
-      // FIXME: global API processing. mock or not
       const examQuestionList = await this.$http.get(
         "/api/exam_question/?exam_record_id=" + this.$route.query.examRecordId
       );
-      this.examQuestionList = examQuestionList.data;
-      this.validQuestions = this.examQuestionList.filter(
+      const validQuestions = examQuestionList.data.filter(
         q => q.nestedQuestion === false
       );
 
+      this.updateExamState({
+        exam: exam.data,
+        paperStruct: paperStruct.data,
+        examQuestionList: examQuestionList.data,
+        validQuestions
+      });
+    },
+    updateQuestion: async function(next) {
       // 初始化套题的答案，为回填部分选项做准备
       // for (let q of this.examQuestionList) {
       //   if (q.subQuestionList.length > 0) {
@@ -109,6 +92,7 @@ export default {
       // }
 
       next && next();
+      if (!this.exam) return;
       this.examQuestion = this.examQuestionList.find(
         eq => eq.id == this.$route.query.examQuestionId // number == string
       );
@@ -121,6 +105,9 @@ export default {
       this.$router.push("/");
     }
   },
+  computed: {
+    ...mapState(["exam", "paperStruct", "examQuestionList", "validQuestions"])
+  },
   components: {
     RemainTime,
     OverallProgress,
@@ -135,8 +122,6 @@ export default {
 
 <style scoped>
 .container {
-  /* display: flex;
-  flex-direction: row; */
   display: grid;
   grid-template-areas:
     "header header"
@@ -149,33 +134,24 @@ export default {
 }
 
 .header {
-  /* display: flex;
-  flex-direction: row; */
   display: grid;
   place-items: center;
   grid-template-columns: 200px 1fr 300px 100px;
-
   grid-area: header;
-
   height: 80px;
   background-color: #f5f5f5;
 }
 
 .main {
   display: grid;
-
   grid-area: main;
-
   grid-template-rows: 1fr 50px;
 }
 
 .side {
   display: grid;
-
   grid-area: side;
-
   grid-template-rows: 1fr 300px;
-
   background-color: #f5f5f5;
 }
 

src/features/OnlineExam/Examing/FillBlankQuestionView.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="score">({{question.questionScore}}分)</div>
     </div>
@@ -9,21 +9,22 @@
       <input type="text" name="question" class="input-answer" :value="option" @input="inputAnswer" />
     </div>
     <div class="reset">
-      <i-button type="warning" size="large" @click="resetQuestion(examQuestion.id)">重置答案</i-button>
+      <i-button type="warning" size="large" @click="() => answerQuestion(examQuestion.id, null)">重置答案</i-button>
     </div>
   </div>
 </template>
 
 <script>
 import QuestionBody from "./QuestionBody";
+import { createNamespacedHelpers } from "vuex";
+const { mapState, mapMutations } = createNamespacedHelpers("examingHomeModule");
 
 export default {
   name: "FillBlankQuestionView",
   data() {
     return {
-      questionNumber: 0,
-      questionBody: "",
-      stuAnswer: ""
+      stuAnswer: "",
+      questionBody: ""
     };
   },
   props: {
@@ -31,35 +32,37 @@ export default {
     examQuestion: Object
   },
   created() {
-    const questionNumber = this.question.body.split(/_{5,}/).length - 1;
-
-    const answers = this.examQuestion.stuAnswer
-      ? this.examQuestion.stuAnswer.split("##")
-      : "##".repeat(questionNumber - 1).split("##");
-    let questionBody = this.question.body.replace(
-      /_{5,}/g,
-      () =>
-        "<span style='display: inline-block; min-width: 80px; border-bottom: 1px solid black; text-align: center'>" +
-        (answers.shift() || questionNumber - answers.length) +
-        "</span>"
-    );
-    this.stuAnswer =
-      this.examQuestion.stuAnswer || "##".repeat(questionNumber - 1);
-
-    this.questionNumber = questionNumber;
-    this.questionBody = questionBody;
+    this.prepareData();
+  },
+  beforeUpdate() {
+    this.prepareData();
+    const realAnswer = this.stuAnswer.replace(/##/g, "").trim() || null;
+    if (realAnswer !== this.examQuestion.stuAnswer) {
+      this.answerQuestion(this.examQuestion.id, realAnswer);
+    }
   },
   methods: {
-    answerQuestion: function(examQuestionId, stuAnswer) {
-      this.stuAnswer = stuAnswer;
-      this.$http.put("/api/exam_question/" + examQuestionId, { stuAnswer });
+    ...mapMutations(["updateExamQuestionAnswer"]),
+    prepareData() {
+      const questionNumber = this.question.body.split(/_{5,}/).length - 1;
+
+      this.stuAnswer =
+        this.examQuestion.stuAnswer || "##".repeat(questionNumber - 1);
+
+      const answers = this.stuAnswer.split("##");
+      this.questionBody = this.question.body.replace(
+        /_{5,}/g,
+        () =>
+          "<span style='display: inline-block; min-width: 80px; border-bottom: 1px solid black; text-align: center'>" +
+          (answers.shift() || questionNumber - answers.length) +
+          "</span>"
+      );
     },
-    resetQuestion: function(examQuestionId) {
-      this.stuAnswer = "##".repeat(this.questionNumber - 1);
-      setTimeout(this.inputAnswer, 100);
-      this.$http.put("/api/exam_question/" + examQuestionId, {
-        stuAnswer: null
+    async answerQuestion(examQuestionId, stuAnswer) {
+      await this.$http.put("/api/exam_question/" + examQuestionId, {
+        stuAnswer
       });
+      this.updateExamQuestionAnswer({ examQuestionId, stuAnswer });
     },
     inputAnswer: function() {
       const questionNumber = this.question.body.split(/_{5,}/).length - 1;
@@ -67,7 +70,6 @@ export default {
       document
         .querySelectorAll(".option input")
         .forEach(e => (ans += e.value + "##"));
-      // console.log(ans);
       this.stuAnswer = ans.slice(0, -2);
       const answers = this.stuAnswer.split("##");
       this.questionBody = this.question.body.replace(
@@ -79,11 +81,6 @@ export default {
       );
     }
   },
-  watch: {
-    examQuestion: function() {
-      this.stuAnswer = this.examQuestion.stuAnswer || "";
-    }
-  },
   components: {
     QuestionBody
   }

src/features/OnlineExam/Examing/OverallProgress.vue

@@ -20,14 +20,14 @@ export default {
     progressNum() {
       return (
         100 *
-        this.examQuestionList.filter(q => q.stuAnswer).length /
-        this.examQuestionList.length
+        (this.examQuestionList.filter(q => q.stuAnswer !== null).length /
+          this.examQuestionList.length)
       );
     },
     progress: function() {
-      return `${this.examQuestionList.filter(q => q.stuAnswer).length} / ${
-        this.examQuestionList.length
-      }`;
+      return `${
+        this.examQuestionList.filter(q => q.stuAnswer !== null).length
+      } / ${this.examQuestionList.length}`;
     }
   }
 };

src/features/OnlineExam/Examing/QuestionFilters.vue

@@ -9,7 +9,7 @@
 
 <script>
 import { createNamespacedHelpers } from "vuex";
-const { mapState, mapMutations } = createNamespacedHelpers("examHomeModule");
+const { mapState, mapMutations } = createNamespacedHelpers("examingHomeModule");
 
 export default {
   name: "QuestionFilters",
@@ -29,13 +29,13 @@ export default {
       return this.examQuestionList.length;
     },
     answered: function() {
-      return this.examQuestionList.filter(q => q.stuAnswer).length;
+      return this.examQuestionList.filter(q => q.stuAnswer !== null).length;
     },
     signed: function() {
       return this.examQuestionList.filter(q => q.isSign).length;
     },
     unanswered: function() {
-      return this.examQuestionList.filter(q => !q.stuAnswer).length;
+      return this.examQuestionList.filter(q => q.stuAnswer === null).length;
     }
   }
 };

src/features/OnlineExam/Examing/QuestionNavView.vue

@@ -22,7 +22,7 @@
 
 <script>
 import { createNamespacedHelpers } from "vuex";
-const { mapState, mapMutations } = createNamespacedHelpers("examHomeModule");
+const { mapState, mapMutations } = createNamespacedHelpers("examingHomeModule");
 
 export default {
   name: "QuestionNavView",
@@ -53,11 +53,14 @@ export default {
       let q = this.getQuestionNum(index1, index2);
 
       if (this.questionFilterType === "ALL") return true;
-      else if (this.questionFilterType === "ANSWERED" && q.stuAnswer) {
+      else if (this.questionFilterType === "ANSWERED" && q.stuAnswer !== null) {
         return true;
       } else if (this.questionFilterType === "SIGNED" && q.isSign) {
         return true;
-      } else if (this.questionFilterType === "UNANSWERED" && !q.stuAnswer) {
+      } else if (
+        this.questionFilterType === "UNANSWERED" &&
+        q.stuAnswer === null
+      ) {
         return true;
       }
       return false;
@@ -70,7 +73,7 @@ export default {
         item: true,
         "current-question": isCurrentQuestion,
         "star-question": this.getQuestionNum(index1, index2).isSign,
-        "is-answered": this.getQuestionNum(index1, index2).stuAnswer != null
+        "is-answered": this.getQuestionNum(index1, index2).stuAnswer !== null
       };
     }
   },

src/features/OnlineExam/Examing/SingleQuestionView.vue

@@ -5,7 +5,7 @@
       <div class="stu-answer">{{stuAnswer}}</div>
       <div class="score">({{question.questionScore}}分)</div>
     </div>
-    <div v-for="(option, index) in question.options" :key="option.id" class="option" @click="answerQuestion(examQuestion.id, optionName[index])">
+    <div v-for="(option, index) in question.options" :key="option.id" class="option" @click="() => answerQuestion(examQuestion.id, optionName[index])">
       <input type="radio" name="question" value="optionName[index]" :checked="stuAnswer === optionName[index]" />
       <span style="padding: 0 10px;">{{optionName[index]}}: </span>
       <span class="question-options" v-html="option.content"></span>

src/store.js

@@ -5,7 +5,7 @@ Vue.use(Vuex);
 
 const examHomeModule = {
   namespaced: true,
-  state: { faceCheckModalOpen: false, questionFilterType: "ALL" },
+  state: { faceCheckModalOpen: false },
   mutations: {
     toggleFaceCheckModal(state, open) {
       if (open === undefined) {
@@ -13,9 +13,34 @@ const examHomeModule = {
       } else {
         state.faceCheckModalOpen = open;
       }
+    }
+  },
+  actions: {},
+  getters: {}
+};
+
+const examingHomeModule = {
+  namespaced: true,
+  state: {
+    exam: null,
+    paperStruct: null,
+    examQuestionList: null,
+    validQuestions: null,
+    questionFilterType: "ALL"
+  },
+  mutations: {
+    updateExamState(state, payload) {
+      state = Object.assign(state, payload);
     },
     updateQuestionFilter(state, type) {
       state.questionFilterType = type;
+    },
+    updateExamQuestionAnswer(state, { examQuestionId, stuAnswer }) {
+      state.validQuestions.forEach(eq => {
+        if (eq.id == examQuestionId) {
+          eq.stuAnswer = stuAnswer;
+        }
+      });
     }
   },
   actions: {},
@@ -35,6 +60,7 @@ export default new Vuex.Store({
   mutations: {},
   actions: {},
   modules: {
-    examHomeModule: examHomeModule
+    examHomeModule,
+    examingHomeModule
   }
 });

src/utils/axios.js

@@ -90,6 +90,7 @@ qmInstance.defaults.headers.common["X-Requested-With"] = "XMLHttpRequest"; //标
 
 qmInstance.get = cachingGet(qmInstance.get, [
   /\/api\/exam_question\/question\/\?question_id/,
+  /\/api\/exam_question\/paper_struct\/\?exam_record_id=/,
   /\/api\/ecs_exam_work\/exam\/\d+$/
 ]);
 loadProgressBar(qmInstance);