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

Co-authored-by: baiqi <qi.bai@fit2cloud.com>
This commit is contained in:
MeterSphere Bot 2024-02-28 17:55:36 +08:00 committed by GitHub
parent 491cc7de86
commit 19e0a24649
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
5 changed files with 33 additions and 36 deletions

View File

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

View File

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

View File

@ -150,7 +150,7 @@
const fileFormatType = fileFormatMatch ? fileFormatMatch[1] : 'none'; const fileFormatType = fileFormatMatch ? fileFormatMatch[1] : 'none';
if (props.accept !== getFileEnum(fileFormatType) && props.accept !== '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(false);
} }
return Promise.resolve(true); return Promise.resolve(true);

View File

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

View File

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