待考列表 已结束考试

src/features/OnlineExam/OnlineExamList.vue

@@ -1,166 +1,165 @@
 <template>
   <div class="list">
-    <Tabs
-      type="card"
-      :style="{ overflow: overFlowStyle ? 'visible' : 'hidden' }"
-    >
-      <TabPane label="待考列表" style="z-index: -1">
-        <table>
-          <tbody class="list-row">
-            <tr class="list-header qm-primary-strong-text">
-              <td>课程</td>
-              <td v-if="!isEpcc" key="cc">层次</td>
-              <td v-if="!isEpcc" key="zy">专业</td>
-              <td>考试进入时间</td>
-              <td>考试时间周期</td>
-              <td>剩余考试次数</td>
-              <td style="max-width: 200px">操作</td>
-            </tr>
+    <div style="display: flex; margin-bottom: 10px">
+      <i-button
+        class="qm-primary-button"
+        :class="selectExamState != 'EXAMING' && 'disable-button'"
+        style="margin-right: 20px"
+        @click="selectExamState = 'EXAMING'"
+      >
+        待考列表
+      </i-button>
+      <i-button
+        v-if="examType === 'ONLINE'"
+        class="qm-primary-button"
+        :class="selectExamState != 'EXAM_END' && 'disable-button'"
+        @click="selectExamState = 'EXAM_END'"
+      >
+        已结束考试
+      </i-button>
+    </div>
+
+    <table v-if="selectExamState == 'EXAMING'">
+      <tbody class="list-row">
+        <tr class="list-header qm-primary-strong-text">
+          <td>课程</td>
+          <td v-if="!isEpcc" key="cc">层次</td>
+          <td v-if="!isEpcc" key="zy">专业</td>
+          <td>考试进入时间</td>
+          <td>考试时间周期</td>
+          <td>剩余考试次数</td>
+          <td style="max-width: 200px">操作</td>
+        </tr>
 
-            <tr
-              v-for="course in courses"
-              :key="course.examId + course.courseId"
+        <tr v-for="course in courses" :key="course.examId + course.courseId">
+          <td>{{ course.courseName }}</td>
+          <td v-if="!isEpcc" key="cc">{{ course.courseLevel }}</td>
+          <td v-if="!isEpcc" key="zy">{{ course.specialtyName }}</td>
+          <td>
+            {{ course.startTime }} <br />
+            ~ <br />
+            {{ course.endTime }}
+          </td>
+          <td>
+            <span v-html="cycleDesc(course)" />
+          </td>
+          <td>{{ course.allowExamCount }}</td>
+          <td style="min-width: 180px">
+            <div
+              style="
+                display: grid;
+                grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
+                grid-gap: 10px;
+              "
             >
-              <td>{{ course.courseName }}</td>
-              <td v-if="!isEpcc" key="cc">{{ course.courseLevel }}</td>
-              <td v-if="!isEpcc" key="zy">{{ course.specialtyName }}</td>
-              <td>
-                {{ course.startTime }} <br />
-                ~ <br />
-                {{ course.endTime }}
-              </td>
-              <td>
-                <span v-html="cycleDesc(course)" />
-              </td>
-              <td>{{ course.allowExamCount }}</td>
-              <td style="min-width: 180px">
-                <div
-                  style="
-                    display: grid;
-                    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
-                    grid-gap: 10px;
-                  "
+              <i-button
+                class="qm-primary-button qm-primary-button-padding-fix"
+                :disabled="
+                  disableTheCourse(course) || spinShow || enterButtonClicked
+                "
+                :title="disableTheCourse(course) ? disableReason(course) : ''"
+                @click="raceEnter(course)"
+              >
+                进入考试{{ countdown > 0 ? `(${countdown})` : "" }}
+              </i-button>
+              <i-poptip
+                v-if="!isEpcc"
+                :trigger="course.isObjScoreView ? 'hover' : 'click'"
+                placement="left"
+                class="online-exam-list-override-poptip"
+                @on-popper-show="
+                  overFlowStyle = true;
+                  cid = course.courseId;
+                "
+                @on-popper-hide="
+                  overFlowStyle = false;
+                  cid = null;
+                "
+              >
+                <i-button
+                  class="qm-primary-button qm-primary-button-padding-fix"
+                  style="width: 100%"
+                  :disabled="!course.isObjScoreView"
                 >
-                  <i-button
-                    class="qm-primary-button qm-primary-button-padding-fix"
-                    :disabled="
-                      disableTheCourse(course) || spinShow || enterButtonClicked
-                    "
-                    :title="
-                      disableTheCourse(course) ? disableReason(course) : ''
-                    "
-                    @click="raceEnter(course)"
-                  >
-                    进入考试{{ countdown > 0 ? `(${countdown})` : "" }}
-                  </i-button>
-                  <i-poptip
-                    v-if="!isEpcc"
-                    :trigger="course.isObjScoreView ? 'hover' : 'click'"
-                    placement="left"
-                    class="online-exam-list-override-poptip"
-                    @on-popper-show="
-                      overFlowStyle = true;
-                      cid = course.courseId;
-                    "
-                    @on-popper-hide="
-                      overFlowStyle = false;
-                      cid = null;
-                    "
-                  >
-                    <i-button
-                      class="qm-primary-button qm-primary-button-padding-fix"
-                      style="width: 100%"
-                      :disabled="!course.isObjScoreView"
-                    >
-                      客观分
-                    </i-button>
-                    <ecs-online-exam-result-list
-                      slot="content"
-                      :popper-show="cid === course.courseId"
-                      :exam-student-id="course.examStudentId"
-                    ></ecs-online-exam-result-list>
-                  </i-poptip>
-                </div>
-              </td>
-            </tr>
-          </tbody>
-        </table>
-      </TabPane>
-      <TabPane
-        v-if="examType === 'ONLINE'"
-        label="已结束考试"
-        style="z-index: -1"
-      >
-        <table>
-          <tbody class="list-row">
-            <tr class="list-header qm-primary-strong-text">
-              <td>课程</td>
-              <td v-if="!isEpcc" key="cc">层次</td>
-              <td v-if="!isEpcc" key="zy">专业</td>
-              <td>考试进入时间</td>
-              <td>考试时间周期</td>
-              <td>剩余考试次数</td>
-              <td style="max-width: 200px">操作</td>
-            </tr>
+                  客观分
+                </i-button>
+                <ecs-online-exam-result-list
+                  slot="content"
+                  :popper-show="cid === course.courseId"
+                  :exam-student-id="course.examStudentId"
+                ></ecs-online-exam-result-list>
+              </i-poptip>
+            </div>
+          </td>
+        </tr>
+      </tbody>
+    </table>
 
-            <tr
-              v-for="course in endCourses"
-              :key="course.examId + course.courseId"
+    <table v-if="examType === 'ONLINE' && selectExamState === 'EXAM_END'">
+      <tbody class="list-row">
+        <tr class="list-header qm-primary-strong-text">
+          <td>课程</td>
+          <td v-if="!isEpcc" key="cc">层次</td>
+          <td v-if="!isEpcc" key="zy">专业</td>
+          <td>考试进入时间</td>
+          <td>考试时间周期</td>
+          <td>剩余考试次数</td>
+          <td style="max-width: 200px">操作</td>
+        </tr>
+
+        <tr v-for="course in endCourses" :key="course.examId + course.courseId">
+          <td>{{ course.courseName }}</td>
+          <td v-if="!isEpcc" key="cc">{{ course.courseLevel }}</td>
+          <td v-if="!isEpcc" key="zy">{{ course.specialtyName }}</td>
+          <td>
+            {{ course.startTime }} <br />
+            ~ <br />
+            {{ course.endTime }}
+          </td>
+          <td>
+            <span v-html="cycleDesc(course)" />
+          </td>
+          <td>{{ course.allowExamCount }}</td>
+          <td style="min-width: 180px">
+            <div
+              style="
+                display: grid;
+                grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
+                grid-gap: 10px;
+              "
             >
-              <td>{{ course.courseName }}</td>
-              <td v-if="!isEpcc" key="cc">{{ course.courseLevel }}</td>
-              <td v-if="!isEpcc" key="zy">{{ course.specialtyName }}</td>
-              <td>
-                {{ course.startTime }} <br />
-                ~ <br />
-                {{ course.endTime }}
-              </td>
-              <td>
-                <span v-html="cycleDesc(course)" />
-              </td>
-              <td>{{ course.allowExamCount }}</td>
-              <td style="min-width: 180px">
-                <div
-                  style="
-                    display: grid;
-                    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
-                    grid-gap: 10px;
-                  "
+              <i-poptip
+                v-if="!isEpcc"
+                :trigger="course.isObjScoreView ? 'hover' : 'click'"
+                placement="left"
+                class="online-exam-list-override-poptip"
+                @on-popper-show="
+                  overFlowStyle = true;
+                  cid = course.courseId;
+                "
+                @on-popper-hide="
+                  overFlowStyle = false;
+                  cid = null;
+                "
+              >
+                <i-button
+                  class="qm-primary-button qm-primary-button-padding-fix"
+                  style="width: 100%"
+                  :disabled="!course.isObjScoreView"
                 >
-                  <i-poptip
-                    v-if="!isEpcc"
-                    :trigger="course.isObjScoreView ? 'hover' : 'click'"
-                    placement="left"
-                    class="online-exam-list-override-poptip"
-                    @on-popper-show="
-                      overFlowStyle = true;
-                      cid = course.courseId;
-                    "
-                    @on-popper-hide="
-                      overFlowStyle = false;
-                      cid = null;
-                    "
-                  >
-                    <i-button
-                      class="qm-primary-button qm-primary-button-padding-fix"
-                      style="width: 100%"
-                      :disabled="!course.isObjScoreView"
-                    >
-                      客观分
-                    </i-button>
-                    <ecs-online-exam-result-list
-                      slot="content"
-                      :popper-show="cid === course.courseId"
-                      :exam-student-id="course.examStudentId"
-                    ></ecs-online-exam-result-list>
-                  </i-poptip>
-                </div>
-              </td>
-            </tr>
-          </tbody>
-        </table>
-      </TabPane>
-    </Tabs>
+                  客观分
+                </i-button>
+                <ecs-online-exam-result-list
+                  slot="content"
+                  :popper-show="cid === course.courseId"
+                  :exam-student-id="course.examStudentId"
+                ></ecs-online-exam-result-list>
+              </i-poptip>
+            </div>
+          </td>
+        </tr>
+      </tbody>
+    </table>
 
     <Spin v-if="spinShow" size="large" fix>{{ processingMessage }}</Spin>
     <OnlineExamFaceCheckModal
@@ -234,6 +233,7 @@ export default {
       countdown: 0,
       enterButtonClicked: false,
       overFlowStyle: false,
+      selectExamState: "EXAMING",
     };
   },
   computed: {
@@ -586,21 +586,6 @@ export default {
       this.enterExam(this.selectedCourse, true);
     },
   },
-  // watch: {
-  //   courses(value) {
-  //     if (value.length > 0) {
-  //       let courseId = sessionStorage.getItem("computer_env_ok_save_course_id");
-  //       if (courseId !== null) {
-  //         courseId = +courseId; // 转为数字
-  //         const course = value.find(v => v.courseId === courseId);
-  //         if (course) {
-  //           this.enterExam(course, true);
-  //           sessionStorage.removeItem("computer_env_ok_save_course_id");
-  //         }
-  //       }
-  //     }
-  //   },
-  // },
 };
 </script>
 
@@ -622,6 +607,10 @@ export default {
   border-collapse: separate !important;
   padding: 10px;
 }
+.disable-button {
+  color: #9e9f9e;
+  background-color: white;
+}
 </style>
 
 <style>