Kaynağa Gözat

feat: 修改文件上传多个文件会多次提交的问题

zhouyuhao 10 ay önce
ebeveyn
işleme
3787b5425b

+ 1 - 1
src/views/Tracking/src/components/TrackingDetail/src/TrackingDetail.vue

@@ -296,7 +296,7 @@ const openShareDialog = () => {
             <VBox :id="item.id" :isSeeAll="false" @draggable="handleDraggable">
               <template #header>Attachment</template>
               <template #content>
-                <AttachmentView :data="allData"></AttachmentView>
+                <AttachmentView @update="getData" :data="allData"></AttachmentView>
               </template>
             </VBox>
           </div>

+ 6 - 0
src/views/Tracking/src/components/TrackingDetail/src/components/AttachmentView.vue

@@ -97,6 +97,11 @@ const uploadFilesRef = ref<InstanceType<typeof UploadFilesDialog> | null>(null)
 const openUploadFilesDialog = () => {
   uploadFilesRef.value?.openDialog()
 }
+
+const emit = defineEmits<{ update: [] }>()
+const updateData = () => {
+  emit('update')
+}
 </script>
 
 <template>
@@ -129,6 +134,7 @@ const openUploadFilesDialog = () => {
     <UploadFilesDialog
       v-if="props.data"
       :data="props.data"
+      @update="updateData"
       ref="uploadFilesRef"
     ></UploadFilesDialog>
   </div>

+ 28 - 33
src/views/Tracking/src/components/TrackingDetail/src/components/UploadFilesDialog.vue

@@ -38,13 +38,39 @@ const removeFile = (file: any) => {
   uploadRef.value.handleRemove(file)
 }
 
+const finishLoading = ref(false)
+const emit = defineEmits<{ update: [] }>()
 const handleSave = () => {
-  uploadRef.value.submit()
+  if (finishLoading.value) return
+  finishLoading.value = true
+  const fileList = uploadFileList.value.map((item: any) => item.raw)
+  return $api
+    .uploadFile({
+      file: fileList,
+      file_type: fileType.value,
+      transport_mode: props.data?.transport_mode,
+      _schemas: props.data?._schemas,
+      h_bol: props.data?.basicInfo?.['HAWB/HBOL']
+    })
+    .then((res: any) => {
+      if (res.code === 200) {
+        ElMessage.success('Upload successfully')
+        emit('update')
+        dialogVisible.value = false
+      } else {
+        ElMessage.error('Upload failed')
+      }
+    })
+    .catch(() => {
+      ElMessage.error('Upload failed')
+    })
+    .finally(() => {
+      finishLoading.value = false
+    })
 }
 
 // 文件上传进度处理
 const handleProgress = (event: any, file: any) => {
-  console.log('123')
   // 在 fileList 中找到对应的文件并更新其上传进度
   const targetFile = uploadFileList.value.find((f: any) => f.uid === file.uid)
   if (targetFile) {
@@ -101,34 +127,6 @@ const beforeAvatarUpload = (rawFile: any) => {
   return true
 }
 const url = `${import.meta.env.VITE_API_HOST}/main_new_version.php`
-
-const uploadFile = () => {
-  return $api
-    .uploadFile({
-      file: [uploadFileList.value[0].raw],
-      file_type: fileType.value,
-      transport_mode: props.data?.transport_mode,
-      _schemas: props.data?._schemas,
-      h_bol: props.data?.basicInfo?.['HAWB/HBOL']
-    })
-    .then((res: any) => {
-      if (res.code === 200) {
-        ElMessage.success('Upload successfully')
-      } else {
-        ElMessage.error('Upload failed')
-      }
-    })
-    .catch(() => {
-      ElMessage.error('Upload failed')
-    })
-}
-const uploadFileParams = computed(() => ({
-  file: [uploadFileList.value[0].raw],
-  file_type: fileType.value,
-  transport_mode: props.data?.transport_mode,
-  _schemas: props.data?._schemas,
-  h_bol: props.data?.basicInfo?.['HAWB/HBOL']
-}))
 </script>
 
 <template>
@@ -157,9 +155,6 @@ const uploadFileParams = computed(() => ({
         :show-file-list="false"
         :action="url"
         :auto-upload="false"
-        :multiple="true"
-        :http-request="uploadFile"
-        :data="{ file_type: fileType }"
         :before-upload="beforeAvatarUpload"
         @change="changeFileList"
         @remove="changeFileList"