fix: 修复附件组件偶发上传无反应问题 (#29150)

Co-authored-by: baiqi <qi.bai@fit2cloud.com>

frontend/src/components/business/ms-add-attachment/dropdownMenu.vue

@@ -1,23 +1,24 @@
 <template>
-  <a-dropdown position="tl" trigger="hover">
+  <a-dropdown v-model:popup-visible="dropdownVisible" position="tl" trigger="click">
     <a-button size="mini" type="outline">
       <template #icon> <icon-upload class="text-[14px] !text-[rgb(var(--primary-5))]" /> </template>
     </a-button>
     <template #content>
-      <a-upload
-        ref="uploadRef"
+      <MsUpload
         v-model:file-list="innerFileList"
+        accept="none"
         :auto-upload="false"
         :show-file-list="false"
-        :before-upload="beforeUpload"
+        :limit="50"
+        size-unit="MB"
+        :multiple="false"
+        class="w-full"
         @change="handleChange"
       >
-        <template #upload-button>
-          <a-button size="small" type="text" class="ms-add-attachment-dropdown-btn">
-            <icon-upload class="mr-[8px]" />{{ t('ms.add.attachment.localUpload') }}
-          </a-button>
-        </template>
-      </a-upload>
+        <a-button size="small" type="text" class="ms-add-attachment-dropdown-btn">
+          <icon-upload class="mr-[8px]" />{{ t('ms.add.attachment.localUpload') }}
+        </a-button>
+      </MsUpload>
       <a-button size="small" type="text" class="ms-add-attachment-dropdown-btn" @click="emit('linkFile')">
         <MsIcon type="icon-icon_link-copy_outlined" class="mr-[8px]" size="16" />
         {{ t('ms.add.attachment.associateFile') }}
@@ -27,6 +28,7 @@
 </template>
 
 <script setup lang="ts">
+  import MsUpload from '@/components/pure/ms-upload/index.vue';
   import { MsFileItem } from '@/components/pure/ms-upload/types';
 
   import { useI18n } from '@/hooks/useI18n';
@@ -43,12 +45,14 @@
     required: true,
   });
 
-  function beforeUpload(file: File) {
-    emit('upload', file);
-  }
+  const dropdownVisible = ref(false);
 
   function handleChange(_fileList: MsFileItem[], fileItem: MsFileItem) {
     emit('change', _fileList, fileItem);
+    nextTick(() => {
+      // emit 完文件之后再关闭菜单
+      dropdownVisible.value = false;
+    });
   }
 </script>
 

frontend/src/components/business/ms-add-attachment/index.vue

@@ -1,8 +1,9 @@
 <template>
   <a-form-item v-if="props.mode === 'button'" field="attachment" :label="t('caseManagement.featureCase.addAttachment')">
+    <!-- TODO:跟下面统一样式 -->
     <div class="flex flex-col">
       <div class="mb-1">
-        <a-dropdown position="tr" trigger="hover">
+        <a-dropdown v-model:popup-visible="buttonDropDownVisible" position="tr" trigger="click">
           <a-button type="outline">
             <template #icon> <icon-plus class="text-[14px]" /> </template>
             {{ t('system.orgTemplate.addAttachment') }}
@@ -14,7 +15,6 @@
               :limit="50"
               :auto-upload="false"
               :show-file-list="false"
-              :before-upload="beforeUpload"
               @change="handleChange"
             >
               <template #upload-button>
@@ -185,6 +185,7 @@
       hiddenIds: [],
     },
   });
+  const buttonDropDownVisible = ref(false);
 
   onBeforeMount(() => {
     // 回显文件
@@ -207,10 +208,6 @@
     }
   });
 
-  function beforeUpload(file: File) {
-    emit('upload', file);
-  }
-
   function handleChange(_fileList: MsFileItem[], fileItem: MsFileItem) {
     innerFileList.value = _fileList.map((item) => ({ ...item, local: true }));
     if (props.multiple) {
@@ -223,6 +220,10 @@
       inputFileName.value = fileItem.name || '';
     }
     emit('change', _fileList, { ...fileItem, local: true });
+    nextTick(() => {
+      // 在 emit 文件上去之后再关闭菜单
+      buttonDropDownVisible.value = false;
+    });
   }
 
   function associatedFile() {

frontend/src/components/pure/ms-upload/index.vue

@@ -150,7 +150,7 @@
     const fileFormatType = fileFormatMatch ? fileFormatMatch[1] : 'none';
 
     if (props.accept !== getFileEnum(fileFormatType) && props.accept !== 'none') {
-      Message.error(props.fileTypeTip ? props?.fileTypeTip : t('ms.upload.fileTypeValidate', { type: props.accept }));
+      Message.error(props.fileTypeTip ? props.fileTypeTip : t('ms.upload.fileTypeValidate', { type: props.accept }));
       return Promise.resolve(false);
     }
     return Promise.resolve(true);

frontend/src/views/api-test/components/requestComposition/body.vue

@@ -228,7 +228,7 @@
         slotName: 'operation',
         fixed: 'right',
         format: innerParams.value.bodyType,
-        width: innerParams.value.bodyType === RequestBodyFormat.FORM_DATA ? 60 : 30,
+        width: innerParams.value.bodyType === RequestBodyFormat.FORM_DATA ? 65 : 35,
       },
     ];
   });

frontend/src/views/case-management/caseManagementFeature/components/caseTemplateDetail.vue

@@ -76,12 +76,7 @@
             :upload-image="handleUploadImage"
           />
         </a-form-item>
-        <AddAttachment
-          v-model:file-list="fileList"
-          @change="handleChange"
-          @link-file="associatedFile"
-          @upload="beforeUpload"
-        />
+        <AddAttachment v-model:file-list="fileList" @change="handleChange" @link-file="associatedFile" />
       </a-form>
       <!-- 文件列表开始 -->
       <div class="w-[90%]">
@@ -401,21 +396,13 @@
       formRules.value = result;
       isLoading.value = false;
     } catch (error) {
+      // eslint-disable-next-line no-console
       console.log(error);
     }
   }
 
   const fileList = ref<MsFileItem[]>([]);
 
-  function beforeUpload(file: File) {
-    const _maxSize = 50 * 1024 * 1024;
-    if (file.size > _maxSize) {
-      Message.warning(t('ms.upload.overSize'));
-      return Promise.resolve(false);
-    }
-    return Promise.resolve(true);
-  }
-
   // 处理关联文件
   function saveSelectAssociatedFile(fileData: AssociatedList[]) {
     const fileResultList = fileData.map((fileInfo) => convertToFile(fileInfo));
@@ -494,6 +481,7 @@
         imageUrl.value = item.url || '';
       }
     } catch (error) {
+      // eslint-disable-next-line no-console
       console.log(error);
     }
   }
@@ -578,6 +566,7 @@
       }
       getDetailData(detailResult);
     } catch (error) {
+      // eslint-disable-next-line no-console
       console.log(error);
     } finally {
       isLoading.value = false;
@@ -590,6 +579,7 @@
     try {
       caseTree.value = await getCaseModuleTree({ projectId: currentProjectId.value });
     } catch (error) {
+      // eslint-disable-next-line no-console
       console.log(error);
     }
   }
@@ -714,6 +704,7 @@
       });
       downloadByteFile(res, `${item.name}`);
     } catch (error) {
+      // eslint-disable-next-line no-console
       console.log(error);
     }
   }
@@ -724,6 +715,7 @@
       await updateFile(currentProjectId.value, item.associationId);
       Message.success(t('common.updateSuccess'));
     } catch (error) {
+      // eslint-disable-next-line no-console
       console.log(error);
     }
   }