| | |
| | | import { useUserStore } from '@vben/stores'; |
| | | import { isEmpty } from '@vben/utils'; |
| | | |
| | | import { FilePreviewModal, useFilePreview } from '#/components/file-preview'; |
| | | |
| | | import FormCreate from '@form-create/ant-design-vue'; |
| | | import { until, useDebounceFn } from '@vueuse/core'; |
| | | import { |
| | |
| | | approveFormRef.value?.validateFields(['signPicUrl']); |
| | | } |
| | | |
| | | /** 附件图片预览 */ |
| | | const imagePreviewVisible = ref(false); |
| | | const imagePreviewUrl = ref(''); |
| | | |
| | | const { openPreview: openFilePreview, previewState: filePreviewState } = useFilePreview(); |
| | | |
| | | /** 判断文件是否为图片类型 */ |
| | | function isImageUrl(url: string) { |
| | | return /\.(jpg|jpeg|png|gif|bmp|webp|svg)$/i.test( |
| | | url.split(/[?#]/)[0] || '', |
| | | ); |
| | | } |
| | | |
| | | /** 处理文件预览 */ |
| | | function handleFilePreview(file: any) { |
| | | if (!file?.url && !file?.response) { |
| | | message.warning('文件地址不存在,无法预览'); |
| | | return; |
| | | } |
| | | const url = file.url || file?.response?.url || file?.response; |
| | | if (!url) { |
| | | message.warning('文件地址不存在,无法预览'); |
| | | return; |
| | | } |
| | | if (isImageUrl(url)) { |
| | | imagePreviewUrl.value = url; |
| | | imagePreviewVisible.value = true; |
| | | } else { |
| | | openFilePreview(url, file?.name); |
| | | } |
| | | } |
| | | |
| | | /** 处理弹窗可见性 */ |
| | | function handlePopoverVisible(visible: boolean) { |
| | | if (!visible) { |
| | |
| | | :show-description="true" |
| | | :show-download-icon="false" |
| | | help-text="支持多文件/图片上传" |
| | | @preview="handleFilePreview" |
| | | /> |
| | | </FormItem> |
| | | <FormItem> |
| | |
| | | :multiple="true" |
| | | :show-description="true" |
| | | help-text="支持多文件/图片上传" |
| | | @preview="handleFilePreview" |
| | | /> |
| | | </FormItem> |
| | | <FormItem> |
| | |
| | | |
| | | <!-- 签名弹窗 --> |
| | | <SignatureModal @success="handleSignFinish" /> |
| | | |
| | | <!-- 图片预览(隐藏的 Image 组件,仅用于附件预览弹窗) --> |
| | | <div style="display: none"> |
| | | <Image |
| | | :preview="{ |
| | | visible: imagePreviewVisible, |
| | | onVisibleChange: (visible: boolean) => { |
| | | imagePreviewVisible = visible; |
| | | }, |
| | | }" |
| | | :src="imagePreviewUrl" |
| | | /> |
| | | </div> |
| | | |
| | | <!-- 文件预览(PDF/Word/Excel/PPT) --> |
| | | <FilePreviewModal |
| | | v-model:visible="filePreviewState.visible.value" |
| | | :file-url="filePreviewState.fileUrl.value" |
| | | :file-name="filePreviewState.fileName.value" |
| | | /> |
| | | </template> |