mark-web/src/components/inspect/MarkHistory.vue

<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>