feat: 修改文件上传

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

@@ -16,7 +16,7 @@ defineExpose({
 const uploadFileList = ref()
 
 const changeFileList = (file: any, fileList: any) => {
-  if (file.size / 1024 / 1024 > 25) {
+  if (file.size / 1024 / 1024 > 5) {
     const index = fileList.findIndex((item: any) => item.uid === file.uid)
     if (index !== -1) {
       fileList.splice(index, 1)
@@ -26,7 +26,11 @@ const changeFileList = (file: any, fileList: any) => {
   // 给当前文件添加fileType属性
   file.raw.fileType = fileType.value
   uploadFileList.value = fileList
-  console.log('change', fileList)
+  if (fileList.length >= 5) {
+    disableUpload.value = true
+  } else {
+    disableUpload.value = false
+  }
 }
 
 function bytesToKB(bytes: number) {
@@ -41,6 +45,8 @@ const removeFile = (file: any) => {
 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)
@@ -57,8 +63,6 @@ const handleSave = () => {
         ElMessage.success('Upload successfully')
         emit('update')
         dialogVisible.value = false
-      } else {
-        ElMessage.error('Upload failed')
       }
     })
     .catch(() => {
@@ -120,13 +124,15 @@ const beforeAvatarUpload = (rawFile: any) => {
   ) {
     ElMessage.error('The file types allowed for upload are: PDF, DOCX, and XLSX.')
     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>
@@ -151,10 +157,12 @@ const url = `${import.meta.env.VITE_API_HOST}/main_new_version.php`
         class="upload-demo"
         ref="uploadRef"
         drag
+        :limit="5"
         :accept="'application/pdf,.docx,.xlsx'"
         :show-file-list="false"
         :action="url"
         :auto-upload="false"
+        :disabled="disableUpload"
         :before-upload="beforeAvatarUpload"
         @change="changeFileList"
         @remove="changeFileList"
@@ -165,10 +173,12 @@ const url = `${import.meta.env.VITE_API_HOST}/main_new_version.php`
           <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>
+            <span>Supported formats: pdf, docx, xlsx ; </span>
+          </div>
+          <span>Maximum Size: 5MB; </span>
+          <span>Maximum Number: 5 files</span>
         </div>
       </el-upload>
     </div>
@@ -182,12 +192,13 @@ const url = `${import.meta.env.VITE_API_HOST}/main_new_version.php`
         <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"
@@ -195,7 +206,7 @@ const url = `${import.meta.env.VITE_API_HOST}/main_new_version.php`
           color="#ed6d00"
           status="success"
           :stroke-width="4"
-        />
+        /> -->
       </div>
     </el-scrollbar>
     <template #footer>
@@ -243,9 +254,16 @@ const url = `${import.meta.env.VITE_API_HOST}/main_new_version.php`
       margin-right: 2px;
       transform: translateY(2px);
     }
-    span {
+    span,
+    p {
+      vertical-align: middle;
+      font-size: 12px;
       color: var(--color-upload-file-color);
     }
+    .label {
+      height: 16px;
+      line-height: 16px;
+    }
   }
 }
 
@@ -256,6 +274,7 @@ const url = `${import.meta.env.VITE_API_HOST}/main_new_version.php`
   .file-item {
     padding: 10px 8px;
     margin-bottom: 8px;
+    border-radius: 6px;
     background-color: var(--color-header-bg);
     & > .header {
       margin-bottom: 8px;