feat: 为文件上传组件添加禁用状态支持
All checks were successful
/ test (push) Successful in 21s
/ surge (push) Successful in 22s

This commit is contained in:
严浩
2024-12-31 16:31:04 +08:00
parent f94bec1118
commit 86f47b5113
2 changed files with 16 additions and 1 deletions

View File

@ -5,6 +5,7 @@ import { computed } from 'vue';
import type { BadgeProps } from 'primevue/badge'; import type { BadgeProps } from 'primevue/badge';
const props = defineProps<{ const props = defineProps<{
disabled: boolean;
url: string; url: string;
filename: string; filename: string;
status?: FileUploadStatus; status?: FileUploadStatus;
@ -62,6 +63,7 @@ const bageSeverity = computed<BadgeProps['severity']>(() => {
:value="progress" :value="progress"
/> />
<Button <Button
:disabled="disabled"
text text
:rounded="true" :rounded="true"
severity="danger" severity="danger"

View File

@ -22,6 +22,9 @@ const customRequest = props.context.customRequest;
const fileUploadRef = useTemplateRef<FileUploadInst>('fileUploadRef'); const fileUploadRef = useTemplateRef<FileUploadInst>('fileUploadRef');
const cmpt_disabled = computed(() => { const cmpt_disabled = computed(() => {
if (formkitContext.disabled === true) {
return true;
}
if (fileUploadRef.value) { if (fileUploadRef.value) {
// 有上传失败的文件 // 有上传失败的文件
if (fileUploadRef.value.uploadedFiles.some((f) => f.status === 'failed')) { if (fileUploadRef.value.uploadedFiles.some((f) => f.status === 'failed')) {
@ -55,7 +58,11 @@ const changeModelValue = () => {
console.warn('[FileUpload] filesToValue is not defined'); console.warn('[FileUpload] filesToValue is not defined');
return; return;
} }
formkitContext.node.input(formkitContext.filesToValue(uploadedFiles)); if (uploadedFiles.length === 0) {
formkitContext.node.input(null);
} else {
formkitContext.node.input(formkitContext.filesToValue(uploadedFiles));
}
}; };
const changeUploadedFiles = () => { const changeUploadedFiles = () => {
if (!formkitContext.valueToFiles) { if (!formkitContext.valueToFiles) {
@ -112,6 +119,8 @@ const onUploader = (event: FileUploadUploaderEvent) => {
}); });
} }
}; };
// fileUploadRef.value?.uploadedFiles
</script> </script>
<template> <template>
@ -133,6 +142,8 @@ const onUploader = (event: FileUploadUploaderEvent) => {
:chooseButtonProps="{ size: 'small' }" :chooseButtonProps="{ size: 'small' }"
:uploadButtonProps="{ size: 'small', severity: 'secondary' }" :uploadButtonProps="{ size: 'small', severity: 'secondary' }"
:cancelButtonProps="{ size: 'small', severity: 'secondary' }" :cancelButtonProps="{ size: 'small', severity: 'secondary' }"
@remove="changeModelValue()"
@removeUploadedFile="changeModelValue()"
> >
<template #empty> <template #empty>
<Message <Message
@ -159,6 +170,7 @@ const onUploader = (event: FileUploadUploaderEvent) => {
:key="file.name + file.url" :key="file.name + file.url"
> >
<FileUploadItem <FileUploadItem
:disabled="formkitContext.disabled === true"
:url="file.url || file.rawFile?.objectURL || ''" :url="file.url || file.rawFile?.objectURL || ''"
:filename="file.name || file.url || '未知文件'" :filename="file.name || file.url || '未知文件'"
@remove=" @remove="
@ -178,6 +190,7 @@ const onUploader = (event: FileUploadUploaderEvent) => {
:key="file.name + file.type + file.size" :key="file.name + file.type + file.size"
> >
<FileUploadItem <FileUploadItem
:disabled="formkitContext.disabled === true"
:url="file.objectURL" :url="file.objectURL"
:filename="file.name" :filename="file.name"
@remove="removeFileCallback(index)" @remove="removeFileCallback(index)"