mark-web/src/features/student/studentTrack/StudentTrack.vue

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

<script setup lang="ts">
import { onMounted } from "vue";
import { store } from "./store";
import MarkHeader from "./MarkHeader.vue";
import { useRoute } from "vue-router";
import MarkBody from "./MarkBody.vue";
import type { Task } from "@/types";
import { message } from "ant-design-vue";
import { getSingleStudentTask } from "@/api/studentTrackPage";

const route = useRoute();
let studentId = route.query.studentId;

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.sliceUrls) {
    store.setting.fileServer = res.data.fileServer;
    store.setting.uiSetting = {
      "answer.paper.scale": 1,
      "score.board.collapse": false,
    };

    let task = {} as Task;
    task.examNumber = res.data.examNumber;

    task.sliceUrls = res.data.sliceUrls.map(
      (s: string) => store.setting.fileServer + s
    );
    // 目前api并没有区分score和tag
    task.questionList = [
      // @ts-ignore
      // { trackList: res.data.tagList.filter((q) => !q.tagName) },
    ];
    // @ts-ignore
    task.specialTagList = res.data.tagList.filter((q) => q.tagName);

    store.currentTask = task;
    if (store.currentTask) store.setting.subject = store.currentTask.subject;
  } else {
    store.message = res.data.message;
  }
}

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

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

async function getSingleStuTask() {
  return getSingleStudentTask(studentId as string);
}

const renderError = () => {
  store.currentTask = undefined;
  store.message = "加载失败，请重新加载。";
};
</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>