新增PDF生成并发设置

frontend/src/views/AdminCertificates.vue

@@ -63,7 +63,7 @@
           <template #default="{ row }">
             <div class="table-actions">
               <el-button size="small" @click="previewCertificate(row)">预览</el-button>
-              <el-button size="small" @click="downloadCertificate(row)">下载</el-button>
+              <el-button size="small" :loading="downloadingCertificateId === row.id" @click="downloadCertificate(row)">下载</el-button>
               <el-button size="small" @click="regenerateToken(row)">重置链接</el-button>
               <el-button v-if="row.status === 'valid'" size="small" type="danger" @click="voidCertificate(row)">作废</el-button>
             </div>
@@ -94,11 +94,11 @@
 </template>
 
 <script setup lang="ts">
-import { ElMessage, ElMessageBox } from "element-plus";
+import { ElLoading, ElMessage, ElMessageBox } from "element-plus";
 import { computed, onMounted, reactive, ref } from "vue";
 
 import { http, type AdminCertificate, type ProjectCourse } from "../api";
-import { downloadFile } from "../download";
+import { apiErrorMessage, downloadFile } from "../download";
 
 const certificates = ref<AdminCertificate[]>([]);
 const projects = ref<ProjectCourse[]>([]);
@@ -106,6 +106,7 @@ const keyword = ref("");
 const statusValue = ref("");
 const previewVisible = ref(false);
 const preview = ref<any>(null);
+const downloadingCertificateId = ref<number | null>(null);
 const form = reactive({
   learner_id: undefined as number | undefined,
   project_code: "",
@@ -159,7 +160,20 @@ async function previewCertificate(row: AdminCertificate) {
 }
 
 async function downloadCertificate(row: AdminCertificate) {
-  await downloadFile(`/admin/certificates/${row.id}/download`, `${row.certificate_no}.pdf`);
+  downloadingCertificateId.value = row.id;
+  const loading = ElLoading.service({
+    lock: true,
+    text: "PDF正在排队或生成，请稍候...",
+    background: "rgba(255, 255, 255, 0.72)",
+  });
+  try {
+    await downloadFile(`/admin/certificates/${row.id}/download`, `${row.certificate_no}.pdf`);
+  } catch (error: any) {
+    ElMessage.error(await apiErrorMessage(error, "PDF生成失败，请稍后再试"));
+  } finally {
+    loading.close();
+    downloadingCertificateId.value = null;
+  }
 }
 
 async function voidCertificate(row: AdminCertificate) {