yxk-20260709

文件在线预览功能

src/components/semri/fileComponent/SUploadFile.vue

@@ -46,6 +46,14 @@
 
             <!-- 操作按钮 -->
             <div class="file-actions">
+              <a-button
+                type="link"
+                size="small"
+                @click="handlePreview(file)"
+              >
+                <Icon icon="ant-design:eye-outlined" />
+                预览
+              </a-button>
               <a-button
                 type="link"
                 size="small"
@@ -87,9 +95,12 @@ import { ref, computed, watch } from 'vue';
 import { Icon } from '/src/components/Icon';
 import { defHttp } from '/src/utils/http/axios';
 import { useMessage } from '/src/hooks/web/useMessage';
+import { useGlobSetting } from '/@/hooks/setting';
+import { encryptByBase64 } from '/@/utils/cipher';
 import SFileUploadModal from './SFileUploadModal.vue';
 
 const { createMessage, createConfirm } = useMessage();
+const globSetting = useGlobSetting();
 
 const props = defineProps({
   bussinessId: {
@@ -193,6 +204,41 @@ function handleUploadError(error: any) {
   emit('upload-error', error);
 }
 
+async function handlePreview(file: any) {
+  const fileId = file.fileId || file.id;
+  if (!fileId) {
+    createMessage.warning('文件信息不完整，无法预览');
+    return;
+  }
+
+  const viewUrl = globSetting.viewUrl;
+  if (!viewUrl) {
+    createMessage.warning('未配置在线预览地址');
+    return;
+  }
+
+  try {
+    const previewDownloadUrl = await defHttp.get<string>({
+      url: '/sys/file/previewUrl',
+      params: { id: fileId }
+    });
+    if (!previewDownloadUrl) {
+      createMessage.warning('获取文件预览地址失败');
+      return;
+    }
+    const previewUrl = `${viewUrl}?url=${encodeURIComponent(encryptByBase64(previewDownloadUrl))}`;
+    openPreviewWindow(previewUrl);
+  } catch (error) {
+    console.error('预览失败:', error);
+    createMessage.error('文件预览失败');
+  }
+}
+
+function openPreviewWindow(previewUrl: string) {
+  // 预览地址包含短时 token，仅用于打开 kkFileView，不在前端弹窗展示。
+  window.open(previewUrl, '_blank');
+}
+
 async function handleDownload(file: any) {
   try {
     const fileUrl = file.filePath;