From cb66b65c5fa4e70632625e8393dd00831507d2c0 Mon Sep 17 00:00:00 2001
From: gaoluyang <2820782392@qq.com>
Date: 星期四, 06 八月 2026 17:09:53 +0800
Subject: [PATCH] 银川 1.添加全局预览附件功能
---
src/views/bpm/processInstance/detail/modules/operation-button.vue | 56 ----------------------------
src/components/upload/file-upload.vue | 35 ++++++++++++++++-
2 files changed, 33 insertions(+), 58 deletions(-)
diff --git a/src/components/upload/file-upload.vue b/src/components/upload/file-upload.vue
index fb2f1dd..15eb640 100644
--- a/src/components/upload/file-upload.vue
+++ b/src/components/upload/file-upload.vue
@@ -10,9 +10,12 @@
import { IconifyIcon } from '@vben/icons';
import { $t } from '@vben/locales';
-import { checkFileType, isFunction, isObject, isString } from '@vben/utils';
+import { checkFileType, isFunction, isImage, isObject, isString } from '@vben/utils';
import { Button, message, Upload } from 'ant-design-vue';
+
+import { requestClient } from '#/api/request';
+import { FilePreviewModal, useFilePreview } from '#/components/file-preview';
import { UploadResultStatus } from './typing';
import { useUpload, useUploadType } from './use-upload';
@@ -139,8 +142,31 @@
}
}
+const { openPreview, previewState } = useFilePreview();
+const previewLoading = ref(false);
+
/** 澶勭悊鏂囦欢棰勮 */
-function handlePreview(file: UploadFile) {
+async function handlePreview(file: UploadFile) {
+ const url = (file as any)?.url || (file as any)?.response?.url || (file as any)?.response;
+ if (!url) {
+ message.warning('鏂囦欢鍦板潃涓嶅瓨鍦紝鏃犳硶棰勮');
+ return;
+ }
+ const name = file.name || (file as any)?.fileName || '';
+ if (isImage(name || url)) {
+ window.open(url, '_blank');
+ return;
+ }
+ previewLoading.value = true;
+ try {
+ const blob = await requestClient.get(url, { responseType: 'blob' }) as unknown as Blob;
+ const blobUrl = URL.createObjectURL(blob);
+ openPreview(blobUrl, name);
+ } catch {
+ message.error('鏂囦欢鍔犺浇澶辫触锛岃灏濊瘯涓嬭浇鍚庢煡鐪�');
+ } finally {
+ previewLoading.value = false;
+ }
emit('preview', file);
}
@@ -319,6 +345,11 @@
鏍煎紡鏂囦欢
</div>
</Upload>
+ <FilePreviewModal
+ v-model:visible="previewState.visible.value"
+ :file-url="previewState.fileUrl.value"
+ :file-name="previewState.fileName.value"
+ />
</div>
</template>
diff --git a/src/views/bpm/processInstance/detail/modules/operation-button.vue b/src/views/bpm/processInstance/detail/modules/operation-button.vue
index 248bc1d..89dc1ca 100644
--- a/src/views/bpm/processInstance/detail/modules/operation-button.vue
+++ b/src/views/bpm/processInstance/detail/modules/operation-button.vue
@@ -23,8 +23,6 @@
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 {
@@ -787,38 +785,6 @@
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) {
@@ -926,7 +892,6 @@
:show-description="true"
:show-download-icon="false"
help-text="鏀寔澶氭枃浠�/鍥剧墖涓婁紶"
- @preview="handleFilePreview"
/>
</FormItem>
<FormItem>
@@ -996,7 +961,6 @@
:multiple="true"
:show-description="true"
help-text="鏀寔澶氭枃浠�/鍥剧墖涓婁紶"
- @preview="handleFilePreview"
/>
</FormItem>
<FormItem>
@@ -1543,24 +1507,4 @@
<!-- 绛惧悕寮圭獥 -->
<SignatureModal @success="handleSignFinish" />
-
- <!-- 鍥剧墖棰勮锛堥殣钘忕殑 Image 缁勪欢锛屼粎鐢ㄤ簬闄勪欢棰勮寮圭獥锛� -->
- <div style="display: none">
- <Image
- :preview="{
- visible: imagePreviewVisible,
- onVisibleChange: (visible: boolean) => {
- imagePreviewVisible = visible;
- },
- }"
- :src="imagePreviewUrl"
- />
- </div>
-
- <!-- 鏂囦欢棰勮锛圥DF/Word/Excel/PPT锛� -->
- <FilePreviewModal
- v-model:visible="filePreviewState.visible.value"
- :file-url="filePreviewState.fileUrl.value"
- :file-name="filePreviewState.fileName.value"
- />
</template>
--
Gitblit v1.9.3