评卷：回评分页

src/components/mark/MarkBody.vue

@@ -324,7 +324,7 @@ export default defineComponent({
 
 <style scoped>
 .mark-body-container {
-  height: calc(100vh - 21px);
+  height: calc(100vh - 41px);
   overflow: scroll;
   background-size: 8px 8px;
   background-image: linear-gradient(to right, #e7e7e7 4px, transparent 4px),

src/components/mark/MarkHistory.vue

@@ -1,7 +1,7 @@
 <template>
   <div
     :style="{ display: store.historyOpen ? 'block' : 'none' }"
-    style="width: 300px; border: 1px solid grey"
+    style="min-width: 250px; border: 1px solid grey"
   >
     <div>
       <input
@@ -12,19 +12,34 @@
         @keyup.enter="updateHistoryTask({ secretNumber: secretNumberInput })"
       />
     </div>
+    <div class="flex justify-between">
+      <div>编号</div>
+      <div>时间</div>
+      <div>分数</div>
+    </div>
     <div v-for="(task, index) of store.historyTasks" :key="index">
-      <div @click="replaceCurrentTask(task)">
-        {{ task.secretNumber }} {{ $filters.datetimeFilter(task.markTime) }}
-        {{ task.markerScore }}
+      <div @click="replaceCurrentTask(task)" class="flex 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="flex justify-between">
+      <div @click="previousPage">上一页</div>
+      <div>第{{ currentPage }}页</div>
+      <div @click="nextPage">下一页</div>
+    </div>
   </div>
 </template>
 
 <script lang="ts">
 import { getHistoryTask } from "@/api/markPage";
 import { Task } from "@/types";
-import { defineComponent, ref, watchEffect } from "vue";
+import { defineComponent, reactive, ref, watchEffect } from "vue";
 import { store } from "./store";
 
 export default defineComponent({
@@ -39,6 +54,9 @@ export default defineComponent({
     });
 
     const secretNumberInput = ref(null);
+    const loading = ref(false);
+    const currentPage = ref(1);
+
     async function updateHistoryTask({
       pageNumber = 1,
       pageSize = 10,
@@ -52,6 +70,7 @@ export default defineComponent({
       sort?: "ASC" | "DESC";
       secretNumber?: string | null;
     }) {
+      loading.value = true;
       const res = await getHistoryTask({
         pageNumber,
         pageSize,
@@ -59,6 +78,7 @@ export default defineComponent({
         sort,
         secretNumber,
       });
+      loading.value = false;
       if (res.data) {
         store.historyTasks = res.data;
       }
@@ -68,11 +88,26 @@ export default defineComponent({
       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,
     };
   },
 });