增加题目索引

src/features/OnlineExam/Examing/ExamingHome.vue

@@ -133,6 +133,7 @@ export default {
   // },
   methods: {
     ...mapMutations([
+      "updateCurrentQuestionInfo",
       "updateExamState",
       "toggleSnapNow",
       "updateExamResult",
@@ -164,6 +165,35 @@ export default {
         }
         return eq;
       });
+
+      let groupOrder = 1;
+      let mainNumber = 0;
+      examQuestionList = examQuestionList.map((eq, index) => {
+        if (mainNumber == eq.mainNumber) {
+          eq.groupOrder = groupOrder++;
+        } else {
+          mainNumber = eq.mainNumber;
+          groupOrder = 1;
+          eq.groupOrder = groupOrder++;
+        }
+
+        const questionWrapperList =
+          paperStruct.defaultPaper.questionGroupList[eq.mainNumber - 1]
+            .questionWrapperList;
+        const groupName =
+          paperStruct.defaultPaper.questionGroupList[eq.mainNumber - 1]
+            .groupName;
+        const groupTotal = questionWrapperList.reduce(
+          (accumulator, questionWrapper) =>
+            accumulator + questionWrapper.questionUnitWrapperList.length,
+          0
+        );
+
+        eq.groupName = groupName;
+        eq.groupTotal = groupTotal;
+        return eq;
+      });
+
       examQuestionList = examQuestionList.map(eq => {
         const paperStructQuestion = paperStruct.defaultPaper.questionGroupList[
           eq.mainNumber - 1
@@ -224,9 +254,10 @@ export default {
       const unanswered = this.examQuestionList.filter(
         q => q.studentAnswer === null
       ).length;
+      const signed = this.examQuestionList.filter(q => q.isSign).length;
       this.$Modal.confirm({
         title: "确认交卷",
-        content: `<p>已答题目：${answered}</p><p>未答题目：${unanswered}</p>`,
+        content: `<p>已答题目：${answered}</p><p>未答题目：${unanswered}</p><p>标记题目：${signed}</p>`,
         onOk: this.realSubmitPaper
       });
     },

src/features/OnlineExam/Examing/QuestionBody.vue

@@ -2,7 +2,7 @@
   <div v-if="questionDetail" class="question-body" :key="examQuestion.order">
     <div v-html="questionDetail.text"></div>
     <!-- <div v-html="questionDetail.audio"></div> -->
-    <div v-for="(ad, index) in questionDetail.audio" :key="ad">
+    <div v-for="(ad, index) in questionDetail.audio" :key="ad" class="audio-div">
       <audio controls controlsList='nodownload' :src="ad" @play="($event) => played(index, $event)"></audio>
       <span>（剩余播放次数：{{examQuestion.limitedPlayTimes -
         audioPlayTimes[index]}}）</span><br />
@@ -150,6 +150,10 @@ export default {
 </script>
 
 <style >
+.audio-div {
+  display: flex;
+  align-items: center;
+}
 .question-body audio {
   width: 180px;
 }

src/features/OnlineExam/Examing/QuestionIndex.vue

@@ -0,0 +1,24 @@
+<template>
+  <div class="container">
+    {{examQuestion.groupName}}（{{examQuestion.groupOrder}} / {{examQuestion.groupTotal}}）
+  </div>
+</template>
+
+<script>
+import { createNamespacedHelpers } from "vuex";
+const { mapState } = createNamespacedHelpers("examingHomeModule");
+
+export default {
+  name: "QuestionIndex",
+  props: {
+    examQuestion: Object
+  }
+};
+</script>
+
+<style scoped>
+.container {
+  font-size: 28px;
+  padding-left: 10px;
+}
+</style>

src/features/OnlineExam/Examing/QuestionNavView.vue

@@ -2,13 +2,13 @@
   <div>
     <div class="container">
       <template v-if="paperStruct && examQuestionList">
-        <div v-for="(struct, index1) in paperStruct.defaultPaper.questionGroupList" :key="index1" class="section">
+        <div v-for="(struct, section) in paperStruct.defaultPaper.questionGroupList" :key="section" 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}/examRecordData/${$route.params.examRecordDataId}/order/${getQuestionNum(index1, index2).order}`}">{{index2+1}}</router-link>
+            <template v-for="(_, index2) in sectionQuestions(section)">
+              <template v-if="isSelectedQuestion(section, index2)">
+                <div :key="index2" :class="itemClass(section, index2)">
+                  <router-link :to="{ path: `/online-exam/exam/${$route.params.examId}/examRecordData/${$route.params.examRecordDataId}/order/${getQuestionNum(section, index2).order}`}">{{index2+1}}</router-link>
                 </div>
               </template>
             </template>
@@ -22,7 +22,7 @@
 
 <script>
 import { createNamespacedHelpers } from "vuex";
-const { mapState } = createNamespacedHelpers("examingHomeModule");
+const { mapState, mapMutations } = createNamespacedHelpers("examingHomeModule");
 
 export default {
   name: "QuestionNavView",
@@ -32,7 +32,9 @@ export default {
   props: {
     paperStruct: Object
   },
+  mounted() {},
   methods: {
+    ...mapMutations(["updateCurrentQuestionInfo"]),
     getQuestionNum: function(section, index) {
       if (
         !this.paperStruct ||
@@ -62,8 +64,8 @@ export default {
       // console.log(section, index, total + index);
       return this.examQuestionList[total + index];
     },
-    isSelectedQuestion(index1, index2) {
-      let q = this.getQuestionNum(index1, index2);
+    isSelectedQuestion(section, index2) {
+      let q = this.getQuestionNum(section, index2);
 
       if (this.questionFilterType === "ALL") return true;
       else if (
@@ -81,15 +83,15 @@ export default {
       }
       return false;
     },
-    itemClass(index1, index2) {
+    itemClass(section, index2) {
       const isCurrentQuestion =
-        this.$route.params.order == this.getQuestionNum(index1, index2).order; // 故意用的 ==
+        this.$route.params.order == this.getQuestionNum(section, index2).order; // 故意用的 ==
       return {
         item: true,
         "current-question": isCurrentQuestion,
-        "star-question": this.getQuestionNum(index1, index2).isSign,
+        "star-question": this.getQuestionNum(section, index2).isSign,
         "is-answered":
-          this.getQuestionNum(index1, index2).studentAnswer !== null
+          this.getQuestionNum(section, index2).studentAnswer !== null
       };
     },
     sectionQuestions(section) {

src/features/OnlineExam/Examing/QuestionView.vue

@@ -1,7 +1,10 @@
 <template>
   <div v-if="question && examQuestion" class="question-view">
-    <div class="sign-button">
+    <div class="question-header">
       <Icon :type="examQuestion.isSign ? 'ios-star':'ios-star-outline'" :style="{color: '#ffcc00'}" class="star" @click="toggleSign" />
+      <template>
+        <question-index :examQuestion="examQuestion" />
+      </template>
     </div>
     <div v-if="parentQuestionBody" class="question-view">
       <question-body :questionBody="parentQuestionBody" :examQuestion="examQuestion" style="margin-bottom: 20px" :key="examQuestion.order"></question-body>
@@ -26,6 +29,7 @@
 </template>
 
 <script>
+import QuestionIndex from "./QuestionIndex";
 import QuestionBody from "./QuestionBody";
 import SingleQuestionView from "./SingleQuestionView";
 import MultipleQuestionView from "./MultipleQuestionView";
@@ -149,6 +153,7 @@ export default {
     }
   },
   components: {
+    QuestionIndex,
     QuestionBody,
     SingleQuestionView,
     MultipleQuestionView,
@@ -166,6 +171,12 @@ export default {
   font-size: 16px;
   text-align: left;
 }
+
+.question-header {
+  display: flex;
+  align-items: center;
+}
+
 .star {
   font-size: 36px;
 }

src/store.js

@@ -25,6 +25,7 @@ const examingHomeModule = {
     exam: null,
     paperStruct: null,
     examQuestionList: null,
+    currentQuestionInfo: null,
     questionFilterType: "ALL",
     snapNow: false,
     shouldSubmitPaper: false
@@ -36,6 +37,9 @@ const examingHomeModule = {
     updateExamState(state, payload) {
       state = Object.assign(state, payload);
     },
+    updateCurrentQuestionInfo(state, payload) {
+      state = Object.assign(state, { currentQuestionInfo: payload });
+    },
     updateExamResult(state, payload) {
       state = Object.assign(state, { examResult: payload });
     },