web修改

This commit is contained in:
2025-12-19 17:34:30 +08:00
parent cc372bc7ea
commit 9c4f73ac9c
22 changed files with 1660 additions and 822 deletions

View File

@@ -169,6 +169,8 @@ interface Props {
maxCount?: number
title?: string
buttonText?: string
// 自定义上传函数,如果提供则使用外部实现,否则使用默认上传逻辑
customUpload?: (files: File[]) => Promise<TbSysFileDTO[] | void>
}
const props = withDefaults(defineProps<Props>(), {
@@ -178,7 +180,8 @@ const props = withDefaults(defineProps<Props>(), {
maxSize: 10 * 1024 * 1024,
maxCount: 10,
title: '文件上传',
buttonText: '上传文件'
buttonText: '上传文件',
customUpload: undefined
})
const emit = defineEmits<{
@@ -186,6 +189,8 @@ const emit = defineEmits<{
'update:fileList': [value: TbSysFileDTO[]]
'upload-success': [files: TbSysFileDTO[]]
'upload-error': [error: string]
// 文件准备就绪事件,当使用自定义上传时触发,传递文件列表供外部处理
'files-ready': [files: File[]]
}>()
// 响应式数据
@@ -347,6 +352,41 @@ const handleDialogClose = (done: () => void) => {
const uploadFiles = async () => {
if (selectedFiles.value.length === 0) return
// 如果提供了自定义上传函数,则使用外部实现
if (props.customUpload) {
uploading.value = true
try {
// 触发 files-ready 事件,传递文件列表
emit('files-ready', [...selectedFiles.value])
// 调用自定义上传函数
const result = await props.customUpload([...selectedFiles.value])
// 如果自定义函数返回了文件列表,触发上传成功事件
if (result && result.length > 0) {
emit('upload-success', result)
emit('update:fileList', [...props.fileList, ...result])
if (props.mode === 'cover' && result[0]?.url) {
emit('update:coverImg', result[0].url)
}
}
// 清空文件列表
selectedFiles.value = []
if (props.mode === 'dialog') {
closeDialog()
}
} catch (error) {
console.error('自定义上传失败:', error)
emit('upload-error', error instanceof Error ? error.message : '上传失败,请重试')
} finally {
uploading.value = false
}
return
}
// 默认上传逻辑
uploading.value = true
const uploadedFilesList: TbSysFileDTO[] = []
@@ -406,6 +446,29 @@ const uploadFiles = async () => {
}
}
// 暴露方法和状态供外部使用
defineExpose({
// 当前选中的文件列表
selectedFiles,
// 上传状态
uploading,
// 弹窗显示状态
showDialog,
// 手动触发文件选择
triggerFileInput,
// 手动添加文件
addFiles,
// 移除指定文件
removeFile,
// 清空所有文件
clearFiles: () => { selectedFiles.value = [] },
// 手动触发上传
uploadFiles,
// 关闭弹窗
closeDialog,
// 打开弹窗
openDialog: () => { showDialog.value = true }
})
</script>
<style lang="scss" scoped>