复核历史

src/components/inspect/Inspect.vue

@@ -2,7 +2,7 @@
   <div class="my-container">
     <mark-header />
     <div class="tw-flex tw-gap-1">
-      <!-- <mark-history /> -->
+      <mark-history @reload="fetchTask" />
       <mark-body />
       <!-- <mark-board-track v-if="showMarkBoardTrack" @submit="saveTaskToServer" /> -->
     </div>
@@ -22,14 +22,14 @@ import { store } from "./store";
 import MarkHeader from "./MarkHeader.vue";
 import { useRoute } from "vue-router";
 import MarkBody from "./MarkBody.vue";
-// import MarkHistory from "./MarkHistory.vue";
+import MarkHistory from "./MarkHistory.vue";
 
 export default defineComponent({
   name: "Inspect",
   components: {
     MarkHeader,
     MarkBody,
-    // MarkHistory,
+    MarkHistory,
   },
   setup: () => {
     const route = useRoute();
@@ -91,12 +91,16 @@ export default defineComponent({
       if (store.currentTask) store.setting.subject = store.currentTask.subject;
     }
 
+    async function fetchTask() {
+      !isSingleStudent && (await updateStatus());
+      await updateTask();
+    }
+
     onMounted(async () => {
       await updateClearTask();
 
       updateSetting();
-      updateStatus();
-      updateTask();
+      // fetchTask(); // mark-header 会调用 (watchEffect)
     });
 
     async function getSingleStuTask() {
@@ -117,6 +121,7 @@ export default defineComponent({
     return {
       store,
       // saveTaskToServer,
+      fetchTask,
     };
   },
 });

src/components/inspect/MarkBody.vue

@@ -47,7 +47,6 @@ export default defineComponent({
 
       const images = [];
       for (const url of store.currentTask.sliceUrls) {
-        console.log(url);
         const image = await loadImage(
           filters.toCompleteUrlWithFileServer(store.setting.fileServer, url)
         );

src/components/inspect/MarkHeader.vue

@@ -13,7 +13,7 @@
         }}</span>
       </div>
     </div>
-    <ul class="tw-flex tw-gap-2 tw-mb-0">
+    <ul v-if="!isSingleStudent" class="tw-flex tw-gap-2 tw-mb-0">
       <li>
         待复核<span class="highlight-text">{{ store.status.totalCount }}</span>
       </li>
@@ -39,7 +39,12 @@
         <FullscreenOutlined class="icon-font-size-20" />
       </li>
     </ul>
-    <div @click="toggleHistory" class="line-height-20" title="回看">
+    <div
+      @click="toggleHistory"
+      v-if="!isSingleStudent"
+      class="line-height-20"
+      title="回看"
+    >
       <HistoryOutlined class="icon-font-size-20" />
     </div>
     <div class="tw-flex tw-place-items-center">
@@ -53,7 +58,7 @@
 
 <script lang="ts">
 import { getInspectedHistory } from "@/api/inspectPage";
-import { computed, defineComponent } from "vue";
+import { computed, defineComponent, reactive, ref } from "vue";
 import { store } from "./store";
 import {
   PlusCircleOutlined,
@@ -65,7 +70,6 @@ import {
   ClockCircleOutlined,
   QuestionCircleOutlined,
 } from "@ant-design/icons-vue";
-import { ModeEnum } from "@/types";
 import { useRoute } from "vue-router";
 
 export default defineComponent({
@@ -82,7 +86,8 @@ export default defineComponent({
   },
   setup() {
     const route = useRoute();
-    let isSingleStudent = !!route.params.studentId;
+    let isSingleStudent = ref(false);
+    isSingleStudent.value = !!route.query.studentId;
     const {
       studentId,
       subjectCode,
@@ -145,6 +150,7 @@ export default defineComponent({
 
     return {
       store,
+      isSingleStudent,
       upScale,
       downScale,
       normalScale,

src/components/inspect/MarkHistory.vue

@@ -0,0 +1,111 @@
+<template>
+  <div
+    :style="{ display: store.historyOpen ? 'block' : 'none' }"
+    class="history-container"
+  >
+    <div class="tw-flex tw-justify-between tw-mt-1 tw-mb-1">
+      <div>编号</div>
+      <div>时间</div>
+      <div>分数</div>
+    </div>
+    <div v-for="(task, index) of store.historyTasks" :key="index">
+      <div @click="replaceCurrentTask(task)" class="tw-flex tw-justify-between">
+        <div>{{ task.secretNumber }}</div>
+        <div>
+          {{ $filters.datetimeFilter(task.markTime) }}
+        </div>
+        <div style="width: 30px; text-align: center">
+          {{ task.markerScore }}
+        </div>
+      </div>
+    </div>
+    <div class="tw-flex tw-justify-between">
+      <div @click="previousPage">上一页</div>
+      <div>第{{ currentPage }}页</div>
+      <div @click="nextPage">下一页</div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { getInspectedHistory } from "@/api/inspectPage";
+import { Task } from "@/types";
+import { defineComponent, reactive, ref, watchEffect } from "vue";
+import { useRoute } from "vue-router";
+import { store } from "./store";
+
+export default defineComponent({
+  name: "MarkHistory",
+  emits: ["reload"],
+  setup(props, { emit }) {
+    const route = useRoute();
+    const { subjectCode } = route.query as {
+      subjectCode: string;
+    };
+
+    watchEffect(async () => {
+      if (store.historyOpen) {
+        await updateHistoryTask({});
+      } else {
+        emit("reload");
+      }
+    });
+
+    const secretNumberInput = ref(null);
+    const loading = ref(false);
+    const currentPage = ref(1);
+
+    async function updateHistoryTask({
+      pageNumber = 1,
+      pageSize = 10,
+    }: {
+      pageNumber?: number; // 从1开始
+      pageSize?: number;
+    }) {
+      loading.value = true;
+      const res = await getInspectedHistory({
+        pageNumber,
+        pageSize,
+        subjectCode,
+      });
+      loading.value = false;
+      if (res.data) {
+        store.historyTasks = res.data;
+      }
+    }
+
+    function replaceCurrentTask(task: Task) {
+      store.currentTask = task;
+    }
+
+    function previousPage() {
+      if (currentPage.value > 1) {
+        currentPage.value -= 1;
+        updateHistoryTask({ pageNumber: currentPage.value });
+      }
+    }
+    function nextPage() {
+      currentPage.value += 1;
+      updateHistoryTask({ pageNumber: currentPage.value });
+    }
+
+    return {
+      store,
+      loading,
+      secretNumberInput,
+      updateHistoryTask,
+      replaceCurrentTask,
+      currentPage,
+      previousPage,
+      nextPage,
+    };
+  },
+});
+</script>
+
+<style scoped>
+.history-container {
+  min-width: 250px;
+  border-right: 1px solid grey;
+}
+</style>