mark-web/src/features/reject/Reject.vue

<template>
  <div class="mark">
    <div class="mark-header">
      <div v-if="store.currentTask" class="mark-header-part">
        <div class="header-noun">
          <span>课程名称：</span>
          <span>
            {{ store.currentTask.subject.name }}（{{
              store.currentTask.subject.code
            }}）</span
          >
        </div>
        <div class="header-noun">
          <span>试卷编号：</span>
          <span>{{ store.currentTask.paperNumber }}</span>
        </div>
        <div class="header-noun">
          <span>姓名：</span>
          <span>{{ store.currentTask.studentName }}</span>
        </div>
        <div class="header-noun">
          <span>学号：</span>
          <span>{{ store.currentTask.studentCode }}</span>
        </div>
      </div>
      <div class="mark-header-part">
        <div class="header-text-btn header-logout" @click="logout">
          <img class="header-icon" src="@/assets/icons/icon-return.svg" />返回
        </div>
      </div>
    </div>

    <mark-tool :actions="['minimap', 'sizeScale', 'imgScale']" />

    <div class="mark-main">
      <mark-body origImageUrls="sheetUrls" onlyTrack @error="renderError" />
      <reject-board v-if="store.currentTask" />
    </div>
  </div>
</template>

<script setup lang="ts">
import { onMounted } from "vue";
import { store } from "@/store/store";
import MarkTool from "@/features/mark/MarkTool.vue";
import MarkBody from "../student/studentInspect/MarkBody.vue";
import RejectBoard from "./RejectBoard.vue";
import { message } from "ant-design-vue";

import { getMarkTask } from "@/api/markPage";
import vls from "@/utils/storage";
import { doLogout } from "@/api/markPage";

// taskId
const rejectParam = vls.get("reject", {});

function logout() {
  doLogout();
}

async function fetchTask() {
  const mkey = "fetch_task_key";
  void message.info({ content: "获取任务中...", duration: 1.5, key: mkey });

  const res = await getMarkTask(rejectParam.taskId);
  if (!res?.data) {
    store.message = "无数据！";
    return;
  }

  const rawTask = res.data;
  rawTask.subject = {
    code: rejectParam.courseCode,
    name: rejectParam.courseName,
  };
  rawTask.paperNumber = rejectParam.paperNumber;
  rawTask.studentCode = rejectParam.studentCode;
  rawTask.studentName = rejectParam.studentName;
  store.currentTask = rawTask;
}

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

const renderError = () => {
  store.currentTask = undefined;
  store.message = "加载失败，请重新加载。";
};
</script>