From 19e0a24649936c90bfef7cc6c7fcf754f8c693d8 Mon Sep 17 00:00:00 2001
From: MeterSphere Bot <78466014+metersphere-bot@users.noreply.github.com>
Date: Wed, 28 Feb 2024 17:55:36 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8D=E9=99=84=E4=BB=B6?=
 =?UTF-8?q?=E7=BB=84=E4=BB=B6=E5=81=B6=E5=8F=91=E4=B8=8A=E4=BC=A0=E6=97=A0?=
 =?UTF-8?q?=E5=8F=8D=E5=BA=94=E9=97=AE=E9=A2=98=20(#29150)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: baiqi <qi.bai@fit2cloud.com>
---
 .../ms-add-attachment/dropdownMenu.vue        | 30 +++++++++++--------
 .../business/ms-add-attachment/index.vue      | 13 ++++----
 .../src/components/pure/ms-upload/index.vue   |  2 +-
 .../components/requestComposition/body.vue    |  2 +-
 .../components/caseTemplateDetail.vue         | 22 +++++---------
 5 files changed, 33 insertions(+), 36 deletions(-)

diff --git a/frontend/src/components/business/ms-add-attachment/dropdownMenu.vue b/frontend/src/components/business/ms-add-attachment/dropdownMenu.vue
index 3c492b6a1b..9352149502 100644
--- a/frontend/src/components/business/ms-add-attachment/dropdownMenu.vue
+++ b/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>
 
diff --git a/frontend/src/components/business/ms-add-attachment/index.vue b/frontend/src/components/business/ms-add-attachment/index.vue
index 0044cc0abc..efa20200b2 100644
--- a/frontend/src/components/business/ms-add-attachment/index.vue
+++ b/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() {
diff --git a/frontend/src/components/pure/ms-upload/index.vue b/frontend/src/components/pure/ms-upload/index.vue
index 92c38fe5d6..7362d274e1 100644
--- a/frontend/src/components/pure/ms-upload/index.vue
+++ b/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);
diff --git a/frontend/src/views/api-test/components/requestComposition/body.vue b/frontend/src/views/api-test/components/requestComposition/body.vue
index c91766bae1..015c2085eb 100644
--- a/frontend/src/views/api-test/components/requestComposition/body.vue
+++ b/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,
       },
     ];
   });
diff --git a/frontend/src/views/case-management/caseManagementFeature/components/caseTemplateDetail.vue b/frontend/src/views/case-management/caseManagementFeature/components/caseTemplateDetail.vue
index ff454dfa84..e1cde1c587 100644
--- a/frontend/src/views/case-management/caseManagementFeature/components/caseTemplateDetail.vue
+++ b/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);
     }
   }