实现商务模块可以选择多个文件上传

PREVIEW_FEATURE_GUIDE.md

@@ -0,0 +1,88 @@
+# 商务数据库文件预览功能说明
+
+## 功能概述
+
+商务数据库信息模块的文件预览功能已经实现，支持多种文件类型的在线预览，为用户提供便捷的文件查看体验。
+
+## 支持的文件类型
+
+### 1. 图片文件
+- **支持格式**: JPG, JPEG, PNG, GIF, BMP, WebP
+- **预览方式**: 在模态窗口中直接显示图片
+- **特性**: 
+  - 自适应大小，最大高度为70vh
+  - 圆角和阴影效果提升视觉体验
+  - 显示文件名信息
+
+### 2. PDF文件
+- **支持格式**: PDF
+- **预览方式**: 在新窗口中打开PDF文件
+- **特性**: 利用浏览器原生PDF查看器
+
+### 3. 文本文件
+- **支持格式**: TXT, MD, JSON, XML, CSV
+- **预览方式**: 在模态窗口中显示文本内容
+- **特性**: 
+  - 等宽字体显示，保持格式
+  - 400px高度的滚动区域
+  - 保留原文本格式和换行
+
+### 4. Office文档
+- **支持格式**: DOC, DOCX, XLS, XLSX, PPT, PPTX
+- **预览方式**: 提示用户下载查看
+- **说明**: 由于Office文档需要特殊渲染，建议下载后使用相应软件打开
+
+### 5. 其他文件类型
+- **处理方式**: 询问用户是否下载查看
+- **说明**: 对于不支持在线预览的文件类型，系统会友好提示用户
+
+## 功能特性
+
+### 用户体验优化
+1. **加载提示**: 预览过程中显示"正在加载预览..."提示
+2. **错误处理**: 针对不同错误状态提供详细的错误信息
+3. **资源管理**: 自动清理预览使用的内存资源
+
+### 错误处理机制
+- **404错误**: "文件不存在或已被删除"
+- **403错误**: "没有权限访问该文件" 
+- **500错误**: "服务器内部错误，请稍后重试"
+- **网络错误**: "预览文件失败，请检查网络连接"
+
+### 安全性
+- 使用Blob URL进行文件预览，确保安全性
+- 10秒后自动释放URL资源，防止内存泄漏
+
+## 使用方法
+
+1. 在文件列表中找到要预览的文件
+2. 点击文件行中的"眼睛"图标按钮
+3. 系统会根据文件类型自动选择合适的预览方式
+4. 对于不支持的文件类型，系统会提供下载选项
+
+## 技术实现
+
+### API接口
+- **接口地址**: `/businessData/file/preview`
+- **请求方式**: GET
+- **参数**: `fileId` (必需)
+- **响应类型**: Blob
+
+### 核心函数
+- `handlePreview(file)`: 主预览函数
+- `showImagePreview(url, fileName)`: 图片预览组件
+- `showTextPreview(blob, fileName)`: 文本预览组件
+
+## 注意事项
+
+1. **文件大小限制**: 大文件可能需要较长加载时间
+2. **浏览器兼容性**: 确保浏览器支持Blob和URL.createObjectURL
+3. **网络要求**: 稳定的网络连接确保预览效果
+4. **权限控制**: 需要有相应的文件访问权限
+
+## 后续优化建议
+
+1. 添加文件预览缓存机制
+2. 支持更多文件格式的在线预览
+3. 添加图片预览的缩放和旋转功能
+4. 支持文档的分页预览功能

src/types/auto-imports.d.ts

@@ -70,6 +70,6 @@ declare global {
 // for type re-export
 declare global {
   // @ts-ignore
-  export type { Component, ComponentPublicInstance, ComputedRef, ExtractDefaultPropTypes, ExtractPropTypes, ExtractPublicPropTypes, InjectionKey, PropType, Ref, VNode, WritableComputedRef } from 'vue'
+  export type { Component, ComponentPublicInstance, ComputedRef, DirectiveBinding, ExtractDefaultPropTypes, ExtractPropTypes, ExtractPublicPropTypes, InjectionKey, PropType, Ref, MaybeRef, MaybeRefOrGetter, VNode, WritableComputedRef } from 'vue'
   import('vue')
 }

src/views/operation-platform/data-processing/data-storage/index.vue

@@ -106,8 +106,8 @@
       </a-tabs>
     </div>
 
-    <!-- 文件预览模态框 -->
+    <!-- 文件预览模态框（待重新设计） -->
-    <PreviewModal ref="previewModal" />
+    <!-- <PreviewModal ref="previewModal" /> -->
   </GiPageLayout>
 </template>
 
@@ -115,7 +115,6 @@
 import { ref, reactive, computed,onMounted } from 'vue'
 import { Message } from '@arco-design/web-vue'
 import type { TableColumnData } from '@arco-design/web-vue'
-import PreviewModal  from './components/PreviewModal.vue'
 
 import {
   getProjectList,
@@ -129,7 +128,8 @@ import {
   uploadImageToPartV2
 } from '@/apis/industrial-image'
 
-const previewModal = ref()
+// 预览弹窗引用（待重新设计）
+// const previewModal = ref()
 // 活动选项卡
 const activeTab = ref('image')
 
@@ -358,18 +358,17 @@ const getImageUrl = (imagePath: string): string => {
   return `${baseUrl}${imagePath}`
 }
 
-// 预览文件
+// 预览文件（待重新设计预览弹窗）
 const previewFile = (file: any) => {
- /* previewFileData.value = file
-  previewModalVisible.value = true*/
-
   const fileObj = {
     id: file.id,
     name: file.name,
-    url: getImageUrl(file.imagePath),
+    url: getImageUrl(file.imagePath)
-    audios: file.audioList
   }
-  previewModal.value.openPreview(fileObj)
+  // TODO: 重新设计预览弹窗后取消注释
+  // previewModal.value.openPreview(fileObj)
+  console.log('预览文件:', fileObj)
+  // 暂时禁用预览功能，等待重新设计
 }
 
 // 删除文件