student-client-v3/src/features/OfflineExam/OfflineExam.vue

<script setup lang="ts">
import { store } from "@/store/store";
import { getAnswersUrlApi } from "@/api/offlineExam";
import OfflineExamList from "./OfflineExamList.vue";
import { onMounted } from "vue";
import { downloadByUrl } from "@/utils/download";

logger({
  cnl: ["local", "server"],
  pgn: "离线考试",
  act: "首次渲染",
});

// 获取答题纸链接
let answerCardUrl: string = $ref("");
async function getAnswersUrl() {
  const res = await getAnswersUrlApi(store.user.rootOrgId);
  answerCardUrl = res.data;
}

// 下载答题纸
let loading = $ref(false);
function toDownloadPaper() {
  logger({
    cnl: ["local", "server"],
    pgn: "离线考试",
    act: "下载答题卡",
  });

  downloadByUrl(answerCardUrl);
  loading = true;
  setTimeout(() => {
    loading = false;
  }, 10 * 1000);
}

onMounted(() => {
  void getAnswersUrl();
});
</script>

<template>
  <div v-if="answerCardUrl" class="off-exam-card">
    <span>答题纸模板：</span>
    <n-button
      type="success"
      size="small"
      :disabled="loading"
      @click="toDownloadPaper"
      >下载</n-button
    >
  </div>
  <OfflineExamList />
</template>

<style scoped>
.off-exam-card {
  height: 30px;
  margin-bottom: 30px;
  text-align: right;
}
</style>