评卷端：回评列表排序

src/api/markPage.ts

@@ -1,6 +1,11 @@
 import { store } from "@/features/mark/store";
 import { httpApp } from "@/plugins/axiosApp";
-import { Setting, UISetting } from "@/types";
+import {
+  Setting,
+  UISetting,
+  MarkHistorySortField,
+  MarkHistoryOrderBy,
+} from "@/types";
 
 /** 清除评卷任务（之前锁住的任务之类的） */
 export async function clearMarkTask() {
@@ -49,8 +54,8 @@ export async function getHistoryTask({
 }: {
   pageNumber?: number; // 从1开始
   pageSize?: number;
-  order?: "markerTime" | "markerScore";
-  sort?: "ASC" | "DESC";
+  order?: MarkHistoryOrderBy;
+  sort?: MarkHistorySortField;
   secretNumber?: string | null;
 }) {
   const form = new FormData();

src/features/mark/MarkHistory.vue

@@ -25,6 +25,8 @@
           tw-border-solid
           tw-border-gray-400
           tw-border-2
+          tw-pl-1
+          tw-pr-8
         "
         @keyup.enter="updateHistoryTask({ secretNumber: secretNumberInput })"
       />
@@ -34,9 +36,35 @@
       />
     </div>
     <div class="tw-flex tw-justify-between">
-      <div>编号</div>
-      <div>时间</div>
-      <div>分数</div>
+      <div class="tw-cursor-pointer tw-flex">编号</div>
+      <div
+        @click="toggleOrderBy('markerTime')"
+        class="tw-cursor-pointer tw-flex"
+      >
+        时间
+        <CaretUpOutlined
+          style="font-size: 20px"
+          v-if="order === 'markerTime' && sort === 'ASC'"
+        />
+        <CaretDownOutlined
+          style="font-size: 20px"
+          v-if="order === 'markerTime' && sort === 'DESC'"
+        />
+      </div>
+      <div
+        @click="toggleOrderBy('markerScore')"
+        class="tw-cursor-pointer tw-flex"
+      >
+        分数
+        <CaretUpOutlined
+          style="font-size: 20px"
+          v-if="order === 'markerScore' && sort === 'ASC'"
+        />
+        <CaretDownOutlined
+          style="font-size: 20px"
+          v-if="order === 'markerScore' && sort === 'DESC'"
+        />
+      </div>
     </div>
     <a-spin :spinning="loading" size="large" tip="Loading...">
       <div v-for="(task, index) of store.historyTasks" :key="index">
@@ -72,23 +100,44 @@
 
 <script lang="ts">
 import { getHistoryTask } from "@/api/markPage";
-import { Task } from "@/types";
+import { MarkHistoryOrderBy, MarkHistorySortField, Task } from "@/types";
 import { defineComponent, ref, watch, watchEffect } from "vue";
 import { store } from "./store";
-import { CloseOutlined, SearchOutlined } from "@ant-design/icons-vue";
+import {
+  CloseOutlined,
+  SearchOutlined,
+  CaretDownOutlined,
+  CaretUpOutlined,
+} from "@ant-design/icons-vue";
 import { cloneDeep } from "lodash";
 
 export default defineComponent({
   name: "MarkHistory",
-  components: { CloseOutlined, SearchOutlined },
+  components: {
+    CloseOutlined,
+    SearchOutlined,
+    CaretDownOutlined,
+    CaretUpOutlined,
+  },
   props: {
     shouldReload: { type: Number, required: true },
   },
   setup(props) {
+    const secretNumberInput = ref(null);
+    const loading = ref(false);
+    const currentPage = ref(1);
+    const order = ref("markerTime" as MarkHistoryOrderBy);
+    const sort = ref("DESC" as MarkHistorySortField);
+
     watchEffect(async () => {
       if (store.historyOpen) {
         replaceCurrentTask(undefined);
-        await updateHistoryTask({});
+        await updateHistoryTask({
+          secretNumber: secretNumberInput.value,
+          order: order.value,
+          sort: sort.value,
+          pageNumber: currentPage.value,
+        });
         replaceCurrentTask(store.historyTasks[0]);
       } else {
         replaceCurrentTask(store.tasks[0]);
@@ -99,16 +148,17 @@ export default defineComponent({
     watch(
       () => props.shouldReload,
       async () => {
-        await updateHistoryTask({ pageNumber: currentPage.value });
+        await updateHistoryTask({
+          secretNumber: secretNumberInput.value,
+          order: order.value,
+          sort: sort.value,
+          pageNumber: currentPage.value,
+        });
         // 提交后，渲染第一条
         replaceCurrentTask(store.historyTasks[0]);
       }
     );
 
-    const secretNumberInput = ref(null);
-    const loading = ref(false);
-    const currentPage = ref(1);
-
     async function updateHistoryTask({
       pageNumber = 1,
       pageSize = 10,
@@ -118,8 +168,8 @@ export default defineComponent({
     }: {
       pageNumber?: number; // 从1开始
       pageSize?: number;
-      order?: "markerTime" | "markerScore";
-      sort?: "ASC" | "DESC";
+      order?: MarkHistoryOrderBy;
+      sort?: MarkHistorySortField;
       secretNumber?: string | null;
     }) {
       loading.value = true;
@@ -165,13 +215,29 @@ export default defineComponent({
     function previousPage() {
       if (currentPage.value > 1) {
         currentPage.value -= 1;
-        updateHistoryTask({ pageNumber: currentPage.value });
+        // updateHistoryTask({
+        //   order: order.value,
+        //   sort: sort.value,
+        //   pageNumber: currentPage.value,
+        // });
       }
     }
     function nextPage() {
       if (store.historyTasks.length >= 10) {
         currentPage.value += 1;
-        updateHistoryTask({ pageNumber: currentPage.value });
+        // updateHistoryTask({
+        //   // order: order.value,
+        //   // sort: sort.value,
+        //   pageNumber: currentPage.value,
+        // });
+      }
+    }
+
+    function toggleOrderBy(toOrder: MarkHistoryOrderBy) {
+      if (toOrder === order.value) {
+        sort.value = sort.value === "DESC" ? "ASC" : "DESC";
+      } else {
+        order.value = toOrder;
       }
     }
 
@@ -184,6 +250,9 @@ export default defineComponent({
       currentPage,
       previousPage,
       nextPage,
+      sort,
+      order,
+      toggleOrderBy,
     };
   },
 });

src/types/index.ts

@@ -213,3 +213,10 @@ export interface SliceImage {
   accumTopHeight: number;
   effectiveWidth: number;
 }
+
+export type MarkHistoryOrderBy =
+  | "markerTime"
+  | "markerScore"
+  | "seceretNumber"
+  | undefined;
+export type MarkHistorySortField = "ASC" | "DESC" | undefined;