stmms-web/src/features/inspect/MarkHistory.vue

<template>
  <div
    :style="{ display: store.historyOpen ? 'block' : 'none' }"
    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>
      <a-button
        class="tw-content-end"
        shape="circle"
        @click="store.historyOpen = false"
      >
        <template #icon><CloseOutlined /></template>
      </a-button>
    </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-h-6
            tw-place-items-center
            tw-rounded
            tw-cursor-pointer
          "
          :class="store.currentTask === task && 'current-task'"
        >
          <div>{{ task.secretNumber }}</div>
          <div>
            {{ task.inspectTime && $filters.datetimeFilter(task.inspectTime) }}
          </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 lang="ts">
import { getInspectedHistory } from "@/api/inspectPage";
import { Task } from "@/types";
import { defineComponent, ref, watch, watchEffect } from "vue";
import { useRoute } from "vue-router";
import { store } from "./store";
import { CloseOutlined } from "@ant-design/icons-vue";
import { cloneDeep } from "lodash";

export default defineComponent({
  name: "MarkHistory",
  components: { CloseOutlined },
  props: {
    shouldReload: { type: Number, required: true },
  },
  emits: ["reload"],
  setup(props, { emit }) {
    const route = useRoute();
    const { subjectCode } = route.query as {
      subjectCode: string;
    };

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

    watch(
      () => props.shouldReload,
      async () => {
        await updateHistoryTask({ 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,
    }: {
      pageNumber?: number; // 从1开始
      pageSize?: number;
    }) {
      loading.value = true;
      const res = await getInspectedHistory({
        pageNumber,
        pageSize,
        subjectCode,
      });
      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;
      }
    }

    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 });
      }
    }

    return {
      store,
      loading,
      secretNumberInput,
      updateHistoryTask,
      replaceCurrentTask,
      currentPage,
      previousPage,
      nextPage,
    };
  },
});
</script>

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