feat: 完成Tracking详情页文件上传功能

src/api/module/tracking.ts

@@ -137,3 +137,33 @@ export const recordShareLinkClicked = (params: any, config: any) => {
     config
   )
 }
+
+/**
+ * 获取文件上传的类型
+ */
+export const getUploadType = (params: any, config: any) => {
+  return HttpAxios.post(
+    `${baseUrl}`,
+    {
+      action: 'ocean_order',
+      operate: 'document_upload',
+      ...params
+    },
+    config
+  )
+}
+
+/**
+ * 上传文件
+ */
+export const uploadFile = (params: any, config: any) => {
+  return HttpAxios.post(
+    `${baseUrl}`,
+    {
+      action: 'ocean_order',
+      operate: 'document_upload_do',
+      ...params
+    },
+    config
+  )
+}

src/views/Tracking/src/components/TrackingDetail/src/components/AttachmentView.vue

@@ -101,10 +101,10 @@ const openUploadFilesDialog = () => {
 
 <template>
   <div class="attachment">
-    <!-- <el-button @click="openUploadFilesDialog" class="el-button--text title">
+    <el-button @click="openUploadFilesDialog" class="el-button--text title">
       <span class="font_family icon-icon_upload_b"></span>
-      Upload Files
-    </el-button> -->
+      <span>Upload Files</span>
+    </el-button>
     <vxe-grid class="radius-bottom" ref="tableRef" v-bind="tableData">
       <template #action="{ row }">
         <el-button @click="handleDownload(row)" class="el-button--icon">
@@ -126,7 +126,7 @@ const openUploadFilesDialog = () => {
         <div class="empty">No data</div>
       </template>
     </vxe-grid>
-    <UploadFilesDialog ref="uploadFilesRef"></UploadFilesDialog>
+    <UploadFilesDialog :data="props.data" ref="uploadFilesRef"></UploadFilesDialog>
   </div>
 </template>
 

src/views/Tracking/src/components/TrackingDetail/src/components/UploadFilesDialog.vue

@@ -1,16 +1,18 @@
 <script setup lang="ts">
+const props = defineProps({
+  data: Object
+})
+
 const dialogVisible = ref(false)
 const openDialog = () => {
   dialogVisible.value = true
 }
 
-const fileType = ref('Certificate of Origin')
+const fileType = ref('')
 defineExpose({
   openDialog
 })
 
-const fileTypeList = ['Certificate of Origin', 'House Bill of Lading', 'E-Packing List']
-
 const uploadFileList = ref()
 
 const changeFileList = (file: any, fileList: any) => {
@@ -34,6 +36,7 @@ const handleSave = () => {
 
 // 文件上传进度处理
 const handleProgress = (event: any, file: any) => {
+  console.log('123')
   // 在 fileList 中找到对应的文件并更新其上传进度
   const targetFile = uploadFileList.value.find((f: any) => f.uid === file.uid)
   if (targetFile) {
@@ -52,6 +55,23 @@ const handleSuccess = (response: any, file: any) => {
   }
 }
 
+const fileTypeList = ref([])
+// 获取上传文件类型
+const getFileType = () => {
+  $api
+    .getUploadType({
+      transport_mode: 'sea',
+      _schemas: 'public'
+    })
+    .then((res: any) => {
+      fileTypeList.value = res.data?.['File Type']
+      fileType.value = fileTypeList.value[0]?.file_type
+    })
+}
+onMounted(() => {
+  getFileType()
+})
+
 const clearData = () => {
   uploadFileList.value = []
   uploadRef.value.clearFiles()
@@ -72,6 +92,35 @@ 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>
@@ -85,17 +134,24 @@ const beforeAvatarUpload = (rawFile: any) => {
     <div class="upload-template">
       <div class="label">File Type</div>
       <el-select v-model="fileType" placeholder="string">
-        <el-option v-for="item in fileTypeList" :key="item" :label="item" :value="item"></el-option>
+        <el-option
+          v-for="item in fileTypeList"
+          :key="item.file_type"
+          :label="item.display_name"
+          :value="item.file_type"
+        ></el-option>
       </el-select>
       <el-upload
         class="upload-demo"
         ref="uploadRef"
-        :auto-upload="false"
         drag
         :accept="'application/pdf,.docx,.xlsx'"
         :show-file-list="false"
-        :action="'http://localhost:3000/upload'"
-        multiple
+        :action="url"
+        :auto-upload="false"
+        :multiple="true"
+        :http-request="uploadFile"
+        :data="{ file_type: fileType }"
         :before-upload="beforeAvatarUpload"
         @change="changeFileList"
         @remove="changeFileList"