stmms-web/src/features/library/libraryTrack/LibraryTrack.vue

<template>
  <div class="my-container">
    <mark-header />
    <div class="tw-flex tw-gap-1">
      <mark-body />
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, onMounted } from "vue";
import { store } from "@/features/mark/store";
import MarkHeader from "./MarkHeader.vue";
import { useRoute } from "vue-router";
import MarkBody from "./MarkBody.vue";
import { MarkStore, Task } from "@/types";
import { message } from "ant-design-vue";
import { getSingleLibraryTask } from "@/api/libraryTrackPage";

export default defineComponent({
  name: "LibraryTrack",
  components: {
    MarkHeader,
    MarkBody,
  },
  setup: () => {
    const route = useRoute();
    let libraryId = route.query.libraryId;

    async function updateTask() {
      // const mkey = "fetch_task_key";
      message.info({ content: "获取任务中...", duration: 2 });
      let res = await getSingleStuTask();
      // message.success({ content: "获取成功", key: mkey });

      if (res.data.task) {
        store.setting.fileServer = res.data.fileServer;
        store.setting.splitConfig = res.data.splitConfig;
        store.setting.groupNumber = res.data.groupNumber;
        store.setting.uiSetting = {
          "answer.paper.scale": 1,
          "score.board.collapse": false,
        } as MarkStore["setting"]["uiSetting"];

        let task = res.data.task as Task;

        task.sliceUrls = task.sliceUrls.map(
          (s: string) => store.setting.fileServer + s
        );

        store.currentTask = task;
        if (store.currentTask)
          store.setting.subject = store.currentTask
            .subject as MarkStore["setting"]["subject"];
      } else {
        store.message = res.data.message;
      }
    }

    async function fetchTask() {
      await updateTask();
    }

    onMounted(async () => {
      await fetchTask();
    });

    async function getSingleStuTask() {
      return getSingleLibraryTask(libraryId as string);
    }

    return {
      store,
      fetchTask,
    };
  },
});
</script>

<style scoped>
.my-container {
  width: 100%;
}
a {
  color: #42b983;
}

label {
  margin: 0 0.5em;
  font-weight: bold;
}

code {
  background-color: #eee;
  padding: 2px 4px;
  border-radius: 4px;
  color: #304455;
}
</style>