feat: 为文件上传组件添加禁用状态支持
This commit is contained in:
@ -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"
|
||||||
|
@ -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)"
|
||||||
|
Reference in New Issue
Block a user