fix: 修复附件组件偶发上传无反应问题 (#29150)
Co-authored-by: baiqi <qi.bai@fit2cloud.com>
This commit is contained in:
parent
491cc7de86
commit
19e0a24649
|
@ -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>
|
||||||
|
|
||||||
|
|
|
@ -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() {
|
||||||
|
|
|
@ -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);
|
||||||
|
|
|
@ -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,
|
||||||
},
|
},
|
||||||
];
|
];
|
||||||
});
|
});
|
||||||
|
|
|
@ -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);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue