Merge branch 'dev_upload' of United_Software/k_online_ui into dev

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/styles/elementui.scss

@@ -518,6 +518,11 @@ div .el-select-dropdown__item.is-hovering {
 .el-select-dropdown__item {
   border-radius: var(--border-radius-6);
   margin: 0 8px;
+
+  margin-bottom: 4px;
+  &:last-child {
+    margin-bottom: 0;
+  }
 }
 
 div .el-badge__content--warning {
@@ -776,4 +781,4 @@ div .DaterangeClass {
   background-color: var(--management-bg-color) !important;
   border-color: var(--management-bg-color) !important;
   border-radius: 12px !important;
-}
+}

src/styles/theme.scss

@@ -246,6 +246,10 @@
   --color-vxe-table-visited-row-bg: #f2f2f2;
 
   --color-public-tracking-empty-bg: #fff;
+
+  --color-upload-file-bg: #fef8f2;
+  --color-upload-file-color: #b5b9bf;
+  --color-upload-file-border-bg: #f5b279;
 }
 
 :root.dark {
@@ -308,6 +312,10 @@
   --color-share-link-bg: #3a4149;
 
   --color-public-tracking-empty-bg: #2b2f36;
+
+  --color-upload-file-bg: rgba(237, 109, 0, 0.2);
+  --color-upload-file-color: rgba(240, 241, 243, 0.7);
+  --color-upload-file-border-bg: rgba(237, 109, 0, 0.5);
   // 滚动条
   --color-scrollbar-thumb: #656f7d;
 

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>

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

@@ -97,14 +97,19 @@ const uploadFilesRef = ref<InstanceType<typeof UploadFilesDialog> | null>(null)
 const openUploadFilesDialog = () => {
   uploadFilesRef.value?.openDialog()
 }
+
+const emit = defineEmits<{ update: [] }>()
+const updateData = () => {
+  emit('update')
+}
 </script>
 
 <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 +131,12 @@ const openUploadFilesDialog = () => {
         <div class="empty">No data</div>
       </template>
     </vxe-grid>
-    <UploadFilesDialog ref="uploadFilesRef"></UploadFilesDialog>
+    <UploadFilesDialog
+      v-if="props.data"
+      :data="props.data"
+      @update="updateData"
+      ref="uploadFilesRef"
+    ></UploadFilesDialog>
   </div>
 </template>
 

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

@@ -1,22 +1,37 @@
 <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 uploadFileList = ref([])
 
 const changeFileList = (file: any, fileList: any) => {
+  if (file.size / 1024 / 1024 > 5) {
+    const index = fileList.findIndex((item: any) => item.uid === file.uid)
+    if (index !== -1) {
+      fileList.splice(index, 1)
+    }
+    ElMessage.warning('File size must not exceed 5MB!')
+    return false
+  }
   // 给当前文件添加fileType属性
   file.raw.fileType = fileType.value
   uploadFileList.value = fileList
+  if (fileList.length >= 5) {
+    disableUpload.value = true
+  } else {
+    disableUpload.value = false
+  }
 }
 
 function bytesToKB(bytes: number) {
@@ -28,8 +43,39 @@ const removeFile = (file: any) => {
   uploadRef.value.handleRemove(file)
 }
 
+const finishLoading = ref(false)
+const emit = defineEmits<{ update: [] }>()
 const handleSave = () => {
-  uploadRef.value.submit()
+  // uploadRef.value.submit()
+  if (fileTypeList.value.length === 0 || uploadFileList.value.length === 0) {
+    ElMessage.warning('Please select file type and upload file')
+    return
+  }
+
+  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
+      }
+    })
+    .catch(() => {
+      ElMessage.error('Upload failed')
+    })
+    .finally(() => {
+      finishLoading.value = false
+    })
 }
 
 // 文件上传进度处理
@@ -52,6 +98,23 @@ const handleSuccess = (response: any, file: any) => {
   }
 }
 
+const fileTypeList = ref([])
+// 获取上传文件类型
+const getFileType = () => {
+  $api
+    .getUploadType({
+      transport_mode: props.data?.transport_mode,
+      _schemas: props.data?._schemas
+    })
+    .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()
@@ -59,19 +122,23 @@ const clearData = () => {
 const beforeAvatarUpload = (rawFile: any) => {
   if (
     ![
-      'application/pdf',
-      'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
-      'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
+      'application/pdf'
+      // 'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
+      // 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
     ].includes(rawFile.type)
   ) {
-    ElMessage.error('The file types allowed for upload are: PDF, DOCX, and XLSX.')
+    // , DOCX, and XLSX
+    ElMessage.error('The file types allowed for upload are: PDF.')
     return false
-  } else if (rawFile.size / 1024 / 1024 > 25) {
-    ElMessage.error('File size must not exceed 25MB!')
+  } else if (rawFile.size / 1024 / 1024 > 5) {
+    ElMessage.error('File size must not exceed 5MB!')
     return false
   }
   return true
 }
+const url = `${import.meta.env.VITE_API_HOST}/main_new_version.php`
+
+const disableUpload = ref(false)
 </script>
 
 <template>
@@ -84,18 +151,25 @@ 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-select v-model="fileType" placeholder="file type">
+        <el-option
+          v-for="item in fileTypeList"
+          :key="item.file_type"
+          :label="item.file_type"
+          :value="item.file_type"
+        ></el-option>
       </el-select>
+      <!-- ,.docx,.xlsx -->
       <el-upload
         class="upload-demo"
         ref="uploadRef"
-        :auto-upload="false"
         drag
-        :accept="'application/pdf,.docx,.xlsx'"
+        :limit="5"
+        :accept="'application/pdf'"
         :show-file-list="false"
-        :action="'http://localhost:3000/upload'"
-        multiple
+        :action="url"
+        :auto-upload="false"
+        :disabled="disableUpload || fileTypeList.length === 0"
         :before-upload="beforeAvatarUpload"
         @change="changeFileList"
         @remove="changeFileList"
@@ -106,10 +180,13 @@ const beforeAvatarUpload = (rawFile: any) => {
           <span class="font_family icon-icon_upload_b"></span> <span>Upload</span>
         </div>
         <div class="el-upload-tips">
-          <span class="font_family icon-icon_info_b"></span>
-          <span style="font-size: 12px"
-            >Supported formats: pdf, docx, xlsx ; Maximum Size: 25MB</span
-          >
+          <div class="label">
+            <span class="font_family icon-icon_info_b" style="vertical-align: baseline"></span>
+            <!-- , docx, xlsx  -->
+            <span>Supported formats: pdf ; </span>
+          </div>
+          <span>Maximum Size: 5MB; </span>
+          <span>Maximum Number: 5 files</span>
         </div>
       </el-upload>
     </div>
@@ -123,12 +200,13 @@ const beforeAvatarUpload = (rawFile: any) => {
         <div class="file">
           <span class="font_family icon-icon_edoc_b"></span>
           <span class="file-name">{{ item.name }}</span>
-          <span class="size">{{
+          <!-- <span class="size">{{
             item.percentage !== undefined ? item.percentage + '%' : bytesToKB(item.size) + 'KB'
-          }}</span>
+          }}</span> -->
+          <span class="size">{{ bytesToKB(item.size) + 'KB' }}</span>
         </div>
         <!-- 添加进度条 -->
-        <el-progress
+        <!-- <el-progress
           style="width: 100%"
           v-if="item.percentage !== undefined"
           :percentage="item.percentage"
@@ -136,7 +214,7 @@ const beforeAvatarUpload = (rawFile: any) => {
           color="#ed6d00"
           status="success"
           :stroke-width="4"
-        />
+        /> -->
       </div>
     </el-scrollbar>
     <template #footer>
@@ -145,7 +223,7 @@ const beforeAvatarUpload = (rawFile: any) => {
           style="height: 40px; padding: 8px 40px"
           class="download-btn el-button--dark"
           @click="handleSave"
-          >Finish</el-button
+          >Upload</el-button
         >
       </div>
     </template>
@@ -169,8 +247,8 @@ const beforeAvatarUpload = (rawFile: any) => {
   :deep(.el-upload-dragger) {
     padding-top: 19px;
     padding-bottom: 19px;
-    background-color: #fef8f2;
-    border: 1px dashed #f5b279;
+    background-color: var(--color-upload-file-bg);
+    border: 1px dashed var(--color-upload-file-border-bg);
   }
   .el-upload-text {
     margin-bottom: 8px;
@@ -184,8 +262,15 @@ const beforeAvatarUpload = (rawFile: any) => {
       margin-right: 2px;
       transform: translateY(2px);
     }
-    span {
-      color: var(--color-neutral-3);
+    span,
+    p {
+      vertical-align: middle;
+      font-size: 12px;
+      color: var(--color-upload-file-color);
+    }
+    .label {
+      height: 16px;
+      line-height: 16px;
     }
   }
 }
@@ -197,6 +282,7 @@ const beforeAvatarUpload = (rawFile: any) => {
   .file-item {
     padding: 10px 8px;
     margin-bottom: 8px;
+    border-radius: 6px;
     background-color: var(--color-header-bg);
     & > .header {
       margin-bottom: 8px;