集中作答

src/features/OnlineExam/Examing/BooleanQuestionView.vue

@@ -26,9 +26,9 @@ const { mapMutations } = createNamespacedHelpers("examingHomeModule");
 
 export default {
   name: "BooleanQuestionView",
-  data() {
-    return { studentAnswer: this.examQuestion.studentAnswer };
-  },
+  // data() {
+  //   // return { studentAnswer: this.examQuestion.studentAnswer };
+  // },
   props: {
     question: Object,
     examQuestion: Object
@@ -61,15 +61,6 @@ export default {
     },
     async answerQuestion(studentAnswer) {
       if (studentAnswer !== this.examQuestion.studentAnswer) {
-        await this.$http.post(
-          "/api/ecs_oe_student/examQuestion/submitQuestionAnswer",
-          [
-            {
-              order: this.examQuestion.order,
-              studentAnswer: studentAnswer
-            }
-          ]
-        );
         this.updateExamQuestion({
           order: this.$route.params.order,
           studentAnswer
@@ -78,12 +69,15 @@ export default {
     }
   },
   watch: {
-    examQuestion: function(examQuestion) {
-      this.studentAnswer = examQuestion.studentAnswer;
-    },
-    question(question) {
-      this.questionBody = question.body;
-    }
+    // examQuestion: function() {
+    //   this.studentAnswer = this.examQuestion.studentAnswer;
+    // },
+    // question(question) {
+    //   this.questionBody = question.body;
+    // }
+  },
+  computed: {
+    studentAnswer: vm => vm.examQuestion.studentAnswer
   },
   components: {
     QuestionBody

src/features/OnlineExam/Examing/ExamingHome.vue

@@ -64,6 +64,8 @@ export default {
       .catch(reason => {
         this.$Message.error(reason);
       });
+
+    setInterval(() => this.answerAllQuestions(), 1 * 60 * 1000);
   },
   // beforeRouteUpdate(to, from, next) {
   //   this.updateQuestion(next);
@@ -117,8 +119,23 @@ export default {
       next && next();
       if (!this.exam) return;
     },
+    async answerAllQuestions() {
+      // TODO: reset dirty
+      const answers = this.examQuestionList.filter(eq => eq.dirty).map(eq => {
+        return { order: eq.order, studentAnswer: eq.studentAnswer };
+      });
+      await this.$http.post(
+        "/api/ecs_oe_student/examQuestion/submitQuestionAnswer",
+        answers
+      );
+      // this.updateExamQuestion({
+      //   order: this.$route.params.order,
+      //   studentAnswer
+      // });
+    },
     async submitPaper() {
       //FIXME: submit precondition
+      await this.answerAllQuestions();
 
       const answered = this.examQuestionList.filter(
         q => q.studentAnswer !== null

src/features/OnlineExam/Examing/FillBlankQuestionView.vue

@@ -6,10 +6,10 @@
     </div>
     <div v-for="(option, index) in studentAnswer.split('##')" :key="examQuestion.id + index" class="option">
       <span class="question-options">{{index+1}}. </span>
-      <input type="text" name="question" class="input-answer" :value="option" @input="inputAnswer" @blur="submitAnswer" />
+      <input type="text" name="question" class="input-answer" :value="option" @input="inputAnswer" />
     </div>
       <div class="reset">
-        <i-button type="warning" size="large" @click="() => answerQuestion(null)">重置答案</i-button>
+        <i-button type="warning" size="large" @click="resetAnswer">重置答案</i-button>
       </div>
     </div>
 </template>
@@ -41,15 +41,12 @@ export default {
     examQuestion: Object
   },
   created() {
+    console.log("created");
     this.prepareData();
   },
-  // beforeUpdate() {
-  //   this.prepareData();
-  // const realAnswer = this.studentAnswer.replace(/##/g, "").trim() || null;
-  // if (realAnswer !== this.examQuestion.studentAnswer) {
-  //   this.answerQuestion(this.examQuestion.id, realAnswer);
-  // }
-  // },
+  beforeDestroy() {
+    console.log("before destory");
+  },
   methods: {
     ...mapMutations(["updateExamQuestion"]),
     prepareData() {
@@ -67,21 +64,6 @@ export default {
           "</span>"
       );
     },
-    async answerQuestion(studentAnswer) {
-      await this.$http.post(
-        "/api/ecs_oe_student/examQuestion/submitQuestionAnswer",
-        [
-          {
-            order: this.examQuestion.order,
-            studentAnswer: studentAnswer
-          }
-        ]
-      );
-      this.updateExamQuestion({
-        order: this.$route.params.order,
-        studentAnswer
-      });
-    },
     inputAnswer: function() {
       const questionNumber = this.question.body.split(/_{5,}/).length - 1;
       let ans = "";
@@ -98,25 +80,36 @@ export default {
           "</span>"
       );
     },
-    submitAnswer() {
+    resetAnswer() {
+      this.updateExamQuestion({
+        order: this.examQuestion.order,
+        studentAnswer: null
+      });
+      this.examQuestion.studentAnswer = null;
+      this.prepareData();
+    }
+  },
+  watch: {
+    // examQuestion: function() {
+    //   this.prepareData();
+    // },
+    // question(question) {
+    //   this.questionBody = question.body;
+    // },
+    studentAnswer() {
       let realAnswer = null;
-      if (this.studentAnswer.replace(/##/g, "").trim()) {
+      if (this.studentAnswer && this.studentAnswer.replace(/##/g, "").trim()) {
         // 如果有实际内容
         realAnswer = this.studentAnswer;
       }
       if (realAnswer !== this.examQuestion.studentAnswer) {
-        this.answerQuestion(realAnswer);
+        this.updateExamQuestion({
+          order: this.examQuestion.order,
+          studentAnswer: realAnswer
+        });
       }
     }
   },
-  watch: {
-    examQuestion: function() {
-      this.prepareData();
-    },
-    question(question) {
-      this.questionBody = question.body;
-    }
-  },
   components: {
     QuestionBody
   }

src/features/OnlineExam/Examing/MultipleQuestionView.vue

@@ -90,15 +90,15 @@ export default {
         realAnswer = null;
       }
       if (realAnswer !== this.examQuestion.studentAnswer) {
-        await this.$http.post(
-          "/api/ecs_oe_student/examQuestion/submitQuestionAnswer",
-          [
-            {
-              order: this.examQuestion.order,
-              studentAnswer: realAnswer
-            }
-          ]
-        );
+        // await this.$http.post(
+        //   "/api/ecs_oe_student/examQuestion/submitQuestionAnswer",
+        //   [
+        //     {
+        //       order: this.examQuestion.order,
+        //       studentAnswer: realAnswer
+        //     }
+        //   ]
+        // );
         this.updateExamQuestion({
           order: this.$route.params.order,
           studentAnswer: realAnswer

src/features/OnlineExam/Examing/QuestionView.vue

@@ -4,23 +4,23 @@
       <Icon :type="examQuestion.isSign ? 'ios-star':'ios-star-outline'" :style="{color: '#ffcc00'}" class="star" @click="toggleSign" />
     </div>
     <div v-if="parentQuestionBody" class="question-view">
-      <question-body :questionBody="parentQuestionBody" :examQuestionId="examQuestion.id" style="margin-bottom: 20px"></question-body>
+      <question-body :questionBody="parentQuestionBody" :examQuestionId="examQuestion.id" style="margin-bottom: 20px" :key="this.examQuestion.order"></question-body>
       <div class="hr" />
     </div>
     <template v-if="question.questionType === 'SINGLE_CHOICE'">
-      <single-question-view :question="question" :examQuestion="examQuestion" />
+      <single-question-view :question="question" :examQuestion="examQuestion" :key="this.examQuestion.order" />
     </template>
     <template v-if="question.questionType === 'MULTIPLE_CHOICE'">
-      <multiple-question-view :question="question" :examQuestion="examQuestion" />
+      <multiple-question-view :question="question" :examQuestion="examQuestion" :key="this.examQuestion.order" />
     </template>
     <template v-if="question.questionType === 'TRUE_OR_FALSE'">
-      <boolean-question-view :question="question" :examQuestion="examQuestion" />
+      <boolean-question-view :question="question" :examQuestion="examQuestion" :key="this.examQuestion.order" />
     </template>
     <template v-if="question.questionType === 'FILL_UP'">
-      <fill-blank-question-view :question="question" :examQuestion="examQuestion" />
+      <fill-blank-question-view :question="question" :examQuestion="examQuestion" :key="this.examQuestion.order" />
     </template>
     <template v-if="question.questionType === 'ESSAY'">
-      <text-question-view :question="question" :examQuestion="examQuestion" />
+      <text-question-view :question="question" :examQuestion="examQuestion" :key="this.examQuestion.order" />
     </template>
   </div>
 </template>

src/features/OnlineExam/Examing/SingleQuestionView.vue

@@ -65,15 +65,15 @@ export default {
     },
     async answerQuestion(studentAnswer) {
       if (studentAnswer !== this.examQuestion.studentAnswer) {
-        await this.$http.post(
-          "/api/ecs_oe_student/examQuestion/submitQuestionAnswer",
-          [
-            {
-              order: this.examQuestion.order,
-              studentAnswer: studentAnswer
-            }
-          ]
-        );
+        // await this.$http.post(
+        //   "/api/ecs_oe_student/examQuestion/submitQuestionAnswer",
+        //   [
+        //     {
+        //       order: this.examQuestion.order,
+        //       studentAnswer: studentAnswer
+        //     }
+        //   ]
+        // );
         this.updateExamQuestion({
           order: this.$route.params.order,
           studentAnswer

src/features/OnlineExam/Examing/TextQuestionView.vue

@@ -5,10 +5,10 @@
       <div class="score">({{examQuestion.questionScore}}分)</div>
     </div>
     <div class="option">
-      <textarea v-model="studentAnswer" class="stu-answer" @blur="answerQuestion" type="text" />
+      <textarea v-model="studentAnswer" class="stu-answer" type="text" />
       </div>
     <div class="reset">
-      <i-button type="warning" size="large" @click="() => this.answerQuestion(null)">重置答案</i-button>
+      <i-button type="warning" size="large" @click="studentAnswer=null">重置答案</i-button>
     </div>
   </div>
 </template>
@@ -30,31 +30,25 @@ export default {
     examQuestion: Object
   },
   methods: {
-    ...mapMutations(["updateExamQuestion"]),
-    async answerQuestion(reset) {
-      if (reset === null) {
-        this.studentAnswer = null;
-      }
-      const order = this.examQuestion.order;
-      const studentAnswer = this.studentAnswer;
-      await this.$http.post(
-        "/api/ecs_oe_student/examQuestion/submitQuestionAnswer",
-        [
-          {
-            order: order,
-            studentAnswer: studentAnswer
-          }
-        ]
-      );
-      this.updateExamQuestion({
-        order: order,
-        studentAnswer: studentAnswer
-      });
-    }
+    ...mapMutations(["updateExamQuestion"])
   },
   watch: {
-    examQuestion(cur, prev) {
+    examQuestion() {
+      // console.log(this.examQuestion.studentAnswer);
       this.studentAnswer = this.examQuestion.studentAnswer;
+    },
+    studentAnswer() {
+      let realAnswer = null;
+      if (this.studentAnswer || this.studentAnswer.trim()) {
+        // 如果有实际内容
+        realAnswer = this.studentAnswer;
+      }
+      if (realAnswer !== this.examQuestion.studentAnswer) {
+        this.updateExamQuestion({
+          order: this.$route.params.order,
+          studentAnswer: realAnswer
+        });
+      }
     }
   },
   components: {

src/store.js

@@ -46,6 +46,7 @@ const examingHomeModule = {
           return Object.assign(
             {},
             eq,
+            { dirty: true },
             studentAnswer !== undefined && { studentAnswer },
             isSign !== undefined && { isSign }
           );