ソースを参照

feat: 台账导入页新增模板下载功能

- 各台账卡片「下载模板」按钮接入后端接口,可下载对应单表模板
- 合并导入区新增「下载合并模板」按钮,下载包含全部20个Sheet的合并模板
simonlll 1 ヶ月 前
コミット
eae48951a7
共有2 個のファイルを変更した63 個の追加13 個の削除を含む
  1. 6 0
      src/api/ledger/index.js
  2. 57 13
      src/views/ledger/import/index.vue

+ 6 - 0
src/api/ledger/index.js

@@ -10,6 +10,12 @@ export function clearLedgerByTimeRange(params) {
10 10
   return request({ url: '/ledger/import/clear', method: 'delete', params })
11 11
 }
12 12
 
13
+// ===== 导入模板下载 =====
14
+// type 为空 → 合并模板(全部20个Sheet);type=supervisionProblem 等 → 单台账模板
15
+export function downloadLedgerTemplate(params) {
16
+  return request({ url: '/ledger/template', method: 'get', params, responseType: 'blob' })
17
+}
18
+
13 19
 // ===== 台账一键导入 =====
14 20
 export function importSupervisionProblem(data) {
15 21
   return request({ url: '/ledger/import/supervisionProblem', method: 'post', data })

+ 57 - 13
src/views/ledger/import/index.vue

@@ -15,17 +15,22 @@
15 15
             <div class="combined-desc">上传「旅检三部"三三"数字管理平台.xlsx」,系统将自动识别20个Sheet并分别导入对应台账表</div>
16 16
           </div>
17 17
         </div>
18
-        <el-upload
19
-          :action="''"
20
-          :auto-upload="false"
21
-          :show-file-list="false"
22
-          :on-change="handleCombinedChange"
23
-          accept=".xlsx,.xls"
24
-        >
25
-          <el-button type="primary" size="large" :loading="combinedLoading" class="combined-btn">
26
-            <el-icon><Upload /></el-icon> 选择文件并全量导入
18
+        <div class="combined-btns">
19
+          <el-upload
20
+            :action="''"
21
+            :auto-upload="false"
22
+            :show-file-list="false"
23
+            :on-change="handleCombinedChange"
24
+            accept=".xlsx,.xls"
25
+          >
26
+            <el-button type="primary" size="large" :loading="combinedLoading" class="combined-btn">
27
+              <el-icon><Upload /></el-icon> 选择文件并全量导入
28
+            </el-button>
29
+          </el-upload>
30
+          <el-button size="large" class="combined-tpl-btn" @click="downloadCombinedTemplate">
31
+            <el-icon><Download /></el-icon> 下载合并模板
27 32
           </el-button>
28
-        </el-upload>
33
+        </div>
29 34
       </div>
30 35
       <div v-if="combinedResult" class="combined-result">
31 36
         <div class="result-title">导入结果:</div>
@@ -123,7 +128,7 @@
123 128
 import { ref, reactive } from 'vue'
124 129
 import { ElMessage, ElMessageBox } from 'element-plus'
125 130
 import { Upload, Download, Document, DocumentChecked, Warning, Trophy, UserFilled, Ticket, DataAnalysis, Histogram, Medal, Memo, Money, Calendar, Flag, Files, Reading, Management, FirstAidKit, House, Bell, Delete, DeleteFilled } from '@element-plus/icons-vue'
126
-import { importCombinedLedger, clearLedgerByTimeRange } from '@/api/ledger/index'
131
+import { importCombinedLedger, clearLedgerByTimeRange, downloadLedgerTemplate } from '@/api/ledger/index'
127 132
 import {
128 133
   importSupervisionProblem,
129 134
   importPatrolInspection,
@@ -420,8 +425,35 @@ async function handleFileChange(uploadFile, item) {
420 425
   }
421 426
 }
422 427
 
423
-function downloadTemplate(item) {
424
-  ElMessage.info('模板文件功能开发中,请联系管理员获取模板')
428
+async function downloadTemplate(item) {
429
+  try {
430
+    const res = await downloadLedgerTemplate({ type: item.key })
431
+    triggerDownload(res, item.title + '_导入模板.xlsx')
432
+  } catch {
433
+    ElMessage.error('模板下载失败')
434
+  }
435
+}
436
+
437
+async function downloadCombinedTemplate() {
438
+  try {
439
+    const res = await downloadLedgerTemplate({})
440
+    triggerDownload(res, '旅检三部三三数字管理平台_模板.xlsx')
441
+  } catch {
442
+    ElMessage.error('合并模板下载失败')
443
+  }
444
+}
445
+
446
+function triggerDownload(blob, fileName) {
447
+  const url = URL.createObjectURL(new Blob([blob], {
448
+    type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
449
+  }))
450
+  const a = document.createElement('a')
451
+  a.href = url
452
+  a.download = fileName
453
+  document.body.appendChild(a)
454
+  a.click()
455
+  document.body.removeChild(a)
456
+  URL.revokeObjectURL(url)
425 457
 }
426 458
 </script>
427 459
 
@@ -483,12 +515,24 @@ function downloadTemplate(item) {
483 515
     max-width: 580px;
484 516
   }
485 517
 
518
+  .combined-btns {
519
+    display: flex;
520
+    gap: 10px;
521
+    align-items: center;
522
+    flex-wrap: wrap;
523
+  }
524
+
486 525
   .combined-btn {
487 526
     min-width: 180px;
488 527
     height: 44px;
489 528
     font-size: 15px;
490 529
   }
491 530
 
531
+  .combined-tpl-btn {
532
+    height: 44px;
533
+    font-size: 14px;
534
+  }
535
+
492 536
   .combined-result {
493 537
     margin-top: 14px;
494 538
     padding-top: 14px;