试验下载导入模板

src/views/tentative/detect/components/ListItem.vue

@@ -120,13 +120,21 @@
                             <div class="table-tip-foot">
                                 <div class="tip-left-btn">
                                     <HcTooltip keys="wbs_import_table">
-                                        <div class="text-gray-400 dow-text">
+                                        <div class="text-main dow-text" @click="uploadFileClick(item)">
                                             <HcIcon name="publish" ui="text-lg" />
-                                            <span class="ml-1">导入列表数据</span>
+                                            <span class="ml-1">导入表格数据</span>
                                         </div>
                                     </HcTooltip>
+                                    <HcUploadFile
+                                        v-if="checkItem?.pKeyId"
+                                        ref="dataHcUploadFileRef"
+                                        :params="{ pKeyId: checkItem.pKeyId }"
+                                        :options="UploadFileOptions"
+                                        multiple="false"
+                                        @success="HcUploadFileSuccess"
+                                    />
                                     <HcTooltip keys="wbs_download_table">
-                                        <div class="text-main dow-text">
+                                        <div v-loading="downloadLoading" class="text-main dow-text" @click="downModal(item)">
                                             <HcIcon name="file_download" ui="text-lg" />
                                             <span class="ml-1">下载导入模板</span>
                                         </div>
@@ -283,6 +291,7 @@ import {
     arrIndex,
     base64ToFile,
     deepClone,
+    downloadBlob,
     formValidate,
     getArrValue,
     getObjVal,
@@ -292,6 +301,7 @@ import {
     setPosRange,
 } from 'js-fast-way'
 import ossApi from '~api/oss'
+import { getTokenHeader } from '~src/api/request/header'
 
 
 //初始
@@ -1633,6 +1643,63 @@ const clearDragModalTableForm = ()=>{
     DragModalTableForm.value = []
 }
 
+//下载导入模板
+const downloadLoading = ref(false)
+const getdownloadExcel = async (pKeyId)=>{
+    downloadLoading.value = true
+    const { error, disposition, res } = await wbsApi.downloadExcel({ pKeyId: pKeyId })
+      //处理数据
+      downloadLoading.value = false
+    if (!error) {
+        if (disposition) {
+            downloadBlob(res, disposition)
+        } else {
+            window.$message?.error('数据异常')
+        }
+    }
+}
+//下载模板
+const downModal = (item)=>{
+    const { pKeyId } = item
+    getdownloadExcel(pKeyId)
+}
+//导入表格数据
+//导入模板
+const dataHcUploadFileRef = ref(null)
+const checkItem = ref({})
+//打开文件选择框
+const uploadFileClick = (item) => {
+    checkItem.value = item
+    dataHcUploadFileRef?.value[0]?.cancelUpload()
+    dataHcUploadFileRef?.value[0].selectFile()
+}
+//上传配置
+const UploadFileOptions = {
+    //此处设置header
+    headers: getTokenHeader(),
+    url: '/api/blade-manager/wbsTreeContract/import-excel',
+}
+
+
+
+
+
+
+// 文件上传成功的回调
+const HcUploadFileSuccess = async (res) => {
+   const { resData } = res
+   const { pKeyId } = checkItem.value
+   if (resData) {
+       let changeitem = formData.value.filter(item=>item.pkeyId === pKeyId)
+       let obj = changeitem[0]
+       for (let i in resData) {
+            obj[i] = resData[i]
+        }
+   }
+  
+    dataHcUploadFileRef.value[0]?.setModalShow(false)
+ 
+}
 
 // 暴露出去
 defineExpose({