修复证书导入模板识别与文件重选

frontend/src/views/AdminImports.vue

@@ -28,19 +28,22 @@
     </div>
 
     <el-upload
+      ref="uploadRef"
       class="upload"
       drag
       :auto-upload="false"
       :show-file-list="true"
       :limit="1"
+      :disabled="!selectedTemplate"
       accept=".xlsx"
       @change="pickFile"
-      @remove="selectedFile = null"
+      @remove="clearSelectedFile"
+      @exceed="replaceFile"
     >
       <el-icon class="upload-icon"><UploadFilled /></el-icon>
-      <div>把 Excel 文件拖到这里，或点击选择文件</div>
+      <div>{{ selectedTemplate ? "把 Excel 文件拖到这里，或点击选择文件" : "请先选择证书模板" }}</div>
     </el-upload>
-    <el-button type="primary" :disabled="!selectedFile" :loading="uploading" @click="uploadFile">上传并校验</el-button>
+    <el-button type="primary" :disabled="!selectedFile || !selectedTemplate" :loading="uploading" @click="uploadFile">上传并校验</el-button>
 
     <el-card class="panel" shadow="never">
       <el-table :data="batches" border>
@@ -111,7 +114,14 @@
 
 <script setup lang="ts">
 import { UploadFilled } from "@element-plus/icons-vue";
-import { ElMessage, ElMessageBox, type UploadFile } from "element-plus";
+import {
+  ElMessage,
+  ElMessageBox,
+  genFileId,
+  type UploadFile,
+  type UploadInstance,
+  type UploadRawFile,
+} from "element-plus";
 import { computed, onMounted, onUnmounted, ref } from "vue";
 
 import { http, type CertificateTemplate, type ImportBatch, type PdfPregenerationJob } from "../api";
@@ -119,8 +129,9 @@ import { apiErrorMessage, downloadFile } from "../download";
 
 const batches = ref<ImportBatch[]>([]);
 const templates = ref<CertificateTemplate[]>([]);
-const templateCode = ref("classic");
+const templateCode = ref("");
 const selectedFile = ref<File | null>(null);
+const uploadRef = ref<UploadInstance>();
 const uploading = ref(false);
 const confirmingId = ref<number | null>(null);
 const preGeneratingId = ref<number | null>(null);
@@ -155,6 +166,23 @@ function pickFile(file: UploadFile) {
   selectedFile.value = file.raw || null;
 }
 
+function clearSelectedFile() {
+  selectedFile.value = null;
+}
+
+function resetUpload() {
+  selectedFile.value = null;
+  uploadRef.value?.clearFiles();
+}
+
+function replaceFile(files: File[]) {
+  const file = files[0] as UploadRawFile | undefined;
+  if (!file) return;
+  uploadRef.value?.clearFiles();
+  file.uid = genFileId();
+  uploadRef.value?.handleStart(file);
+}
+
 function downloadTemplate() {
   if (!selectedTemplate.value) return;
   downloadFile(
@@ -180,10 +208,16 @@ async function uploadFile() {
     const body = new FormData();
     body.append("file", selectedFile.value);
     body.append("template_code", templateCode.value);
-    await http.post("/admin/import-batches", body);
-    ElMessage.success("文件已上传并完成校验，请检查结果后点击确认导入");
-    selectedFile.value = null;
+    const { data } = await http.post<ImportBatch>("/admin/import-batches", body);
+    if (data.failed_rows) {
+      ElMessage.warning(`校验完成：${data.valid_rows} 行可导入，${data.failed_rows} 行失败，请下载错误报告查看原因`);
+    } else {
+      ElMessage.success(`校验通过，共 ${data.valid_rows} 行可导入`);
+    }
+    resetUpload();
     await loadBatches();
+  } catch (error: any) {
+    ElMessage.error(await apiErrorMessage(error, "上传校验失败"));
   } finally {
     uploading.value = false;
   }