银川 1.添加全局预览附件功能

gaoluyang

2026-08-06 cb66b65c5fa4e70632625e8393dd00831507d2c0

银川
1.添加全局预览附件功能

 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>


 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>

  <!-- 文件预览（PDF/Word/Excel/PPT） -->
  <FilePreviewModal
    v-model:visible="filePreviewState.visible.value"
    :file-url="filePreviewState.fileUrl.value"
    :file-name="filePreviewState.fileName.value"
  />
</template>