stmms-web/src/features/library/quality/MarkHistory.vue

<template>
  <div class="history-container tw-px-1">
    <div class="tw-p-1 tw-flex tw-justify-between tw-place-items-center">
      <div class="tw-text-xl">给分记录</div>
    </div>
    <div class="tw-mt-1 tw-mb-1 tw-flex"></div>
    <div class="tw-flex tw-justify-between">
      <div>编号</div>
      <div>时间</div>
      <div>分数</div>
    </div>
    <a-spin :spinning="loading" size="large" tip="Loading...">
      <div v-for="(task, index) of store.historyTasks" :key="index">
        <div
          @click="replaceCurrentTask(task)"
          class="
            tw-flex
            tw-justify-between
            tw-place-items-center
            tw-rounded
            tw-cursor-pointer
          "
          :class="store.currentTask === task && 'current-task'"
        >
          <div class="tw-break-words tw-w-1/3" :title="task.secretNumber">
            {{ task.secretNumber }}
          </div>
          <div>
            {{ task.markTime && $filters.datetimeFilter(task.markTime) }}
          </div>
          <div style="width: 30px; text-align: center">
            {{ task.markerScore }}
          </div>
        </div>
      </div>
    </a-spin>
    <div class="tw-flex tw-justify-between tw-place-content-center tw-mt-2">
      <a-button @click="previousPage">上一页</a-button>
      <div style="line-height: 30px">第{{ currentPage }}页</div>
      <a-button @click="nextPage">下一页</a-button>
    </div>
  </div>
</template>

<script setup lang="ts">
import type { Task } from "@/types";
import { ref, watchEffect } from "vue";
import { useRoute } from "vue-router";
import { store } from "@/features/mark/store";
import { cloneDeep } from "lodash";
import { getQualityHistory } from "@/api/qualityPage";

const emit = defineEmits(["reload"]);
const route = useRoute();
const { markerId, markerScore } = route.query as {
  markerId: string;
  markerScore: string;
};

watchEffect(async () => {
  if (store.historyOpen) {
    replaceCurrentTask(undefined);
    await updateHistoryTask({});
    replaceCurrentTask(store.historyTasks[0]);
  } else {
    emit("reload");
  }
});

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 getQualityHistory({
    markerId,
    markerScore,
    pageNumber,
    pageSize,
  });
  loading.value = false;
  if (res.data) {
    let data = cloneDeep(res.data) as Array<Task>;
    data = data.map((t) => {
      t.sliceUrls = t.sliceUrls?.map((s) => store.setting.fileServer + s);
      t.sheetUrls = t.sheetUrls?.map((s) => store.setting.fileServer + s);
      t.jsonUrl = store.setting.fileServer + t.jsonUrl;

      return t;
    });
    store.historyTasks = data;
    replaceCurrentTask(store.historyTasks[0]);
  }
}

function replaceCurrentTask(task: Task | undefined) {
  store.currentTask = task;
}

function previousPage() {
  if (currentPage.value > 1) {
    currentPage.value -= 1;
    updateHistoryTask({ pageNumber: currentPage.value });
  }
}
function nextPage() {
  if (store.historyTasks.length >= 10) {
    currentPage.value += 1;
    updateHistoryTask({ pageNumber: currentPage.value });
  }
}
</script>

<style scoped>
.history-container {
  min-width: 250px;
  border-right: 1px solid grey;
}
.current-task {
  background-color: aqua;
}
</style>