Merge branch 'devlopment' of http://pms.dtyx.net:3000/wuxueyu/Industrial-image-management-system---web into devlopment
This commit is contained in:
Mr.j
commit
d5929bdc2d
|
|
@ -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. 支持文档的分页预览功能
|
||||
|
|
@ -7,7 +7,66 @@ export {}
|
|||
|
||||
declare module 'vue' {
|
||||
export interface GlobalComponents {
|
||||
Avatar: typeof import('./../components/Avatar/index.vue')['default']
|
||||
Breadcrumb: typeof import('./../components/Breadcrumb/index.vue')['default']
|
||||
CellCopy: typeof import('./../components/CellCopy/index.vue')['default']
|
||||
Chart: typeof import('./../components/Chart/index.vue')['default']
|
||||
ColumnSetting: typeof import('./../components/GiTable/src/components/ColumnSetting.vue')['default']
|
||||
CronForm: typeof import('./../components/GenCron/CronForm/index.vue')['default']
|
||||
CronModal: typeof import('./../components/GenCron/CronModal/index.vue')['default']
|
||||
DateRangePicker: typeof import('./../components/DateRangePicker/index.vue')['default']
|
||||
DayForm: typeof import('./../components/GenCron/CronForm/component/day-form.vue')['default']
|
||||
FilePreview: typeof import('./../components/FilePreview/index.vue')['default']
|
||||
GiCellAvatar: typeof import('./../components/GiCell/GiCellAvatar.vue')['default']
|
||||
GiCellGender: typeof import('./../components/GiCell/GiCellGender.vue')['default']
|
||||
GiCellStatus: typeof import('./../components/GiCell/GiCellStatus.vue')['default']
|
||||
GiCellTag: typeof import('./../components/GiCell/GiCellTag.vue')['default']
|
||||
GiCellTags: typeof import('./../components/GiCell/GiCellTags.vue')['default']
|
||||
GiCodeView: typeof import('./../components/GiCodeView/index.vue')['default']
|
||||
GiDot: typeof import('./../components/GiDot/index.tsx')['default']
|
||||
GiEditTable: typeof import('./../components/GiEditTable/GiEditTable.vue')['default']
|
||||
GiFooter: typeof import('./../components/GiFooter/index.vue')['default']
|
||||
GiForm: typeof import('./../components/GiForm/src/GiForm.vue')['default']
|
||||
GiIconBox: typeof import('./../components/GiIconBox/index.vue')['default']
|
||||
GiIconSelector: typeof import('./../components/GiIconSelector/index.vue')['default']
|
||||
GiIframe: typeof import('./../components/GiIframe/index.vue')['default']
|
||||
GiOption: typeof import('./../components/GiOption/index.vue')['default']
|
||||
GiOptionItem: typeof import('./../components/GiOptionItem/index.vue')['default']
|
||||
GiPageLayout: typeof import('./../components/GiPageLayout/index.vue')['default']
|
||||
GiSpace: typeof import('./../components/GiSpace/index.vue')['default']
|
||||
GiSplitButton: typeof import('./../components/GiSplitButton/index.vue')['default']
|
||||
GiSplitPane: typeof import('./../components/GiSplitPane/index.vue')['default']
|
||||
GiSplitPaneFlexibleBox: typeof import('./../components/GiSplitPane/components/GiSplitPaneFlexibleBox.vue')['default']
|
||||
GiSvgIcon: typeof import('./../components/GiSvgIcon/index.vue')['default']
|
||||
GiTable: typeof import('./../components/GiTable/src/GiTable.vue')['default']
|
||||
GiTag: typeof import('./../components/GiTag/index.tsx')['default']
|
||||
GiThemeBtn: typeof import('./../components/GiThemeBtn/index.vue')['default']
|
||||
HourForm: typeof import('./../components/GenCron/CronForm/component/hour-form.vue')['default']
|
||||
Icon403: typeof import('./../components/icons/Icon403.vue')['default']
|
||||
Icon404: typeof import('./../components/icons/Icon404.vue')['default']
|
||||
Icon500: typeof import('./../components/icons/Icon500.vue')['default']
|
||||
IconBorders: typeof import('./../components/icons/IconBorders.vue')['default']
|
||||
IconTableSize: typeof import('./../components/icons/IconTableSize.vue')['default']
|
||||
IconTreeAdd: typeof import('./../components/icons/IconTreeAdd.vue')['default']
|
||||
IconTreeReduce: typeof import('./../components/icons/IconTreeReduce.vue')['default']
|
||||
ImageImport: typeof import('./../components/ImageImport/index.vue')['default']
|
||||
ImageImportWizard: typeof import('./../components/ImageImportWizard/index.vue')['default']
|
||||
IndustrialImageList: typeof import('./../components/IndustrialImageList/index.vue')['default']
|
||||
JsonPretty: typeof import('./../components/JsonPretty/index.vue')['default']
|
||||
MinuteForm: typeof import('./../components/GenCron/CronForm/component/minute-form.vue')['default']
|
||||
MonthForm: typeof import('./../components/GenCron/CronForm/component/month-form.vue')['default']
|
||||
ParentView: typeof import('./../components/ParentView/index.vue')['default']
|
||||
RouterLink: typeof import('vue-router')['RouterLink']
|
||||
RouterView: typeof import('vue-router')['RouterView']
|
||||
SecondForm: typeof import('./../components/GenCron/CronForm/component/second-form.vue')['default']
|
||||
SplitPanel: typeof import('./../components/SplitPanel/index.vue')['default']
|
||||
TextCopy: typeof import('./../components/TextCopy/index.vue')['default']
|
||||
TurbineGrid: typeof import('./../components/TurbineGrid/index.vue')['default']
|
||||
UserSelect: typeof import('./../components/UserSelect/index.vue')['default']
|
||||
Verify: typeof import('./../components/Verify/index.vue')['default']
|
||||
VerifyPoints: typeof import('./../components/Verify/Verify/VerifyPoints.vue')['default']
|
||||
VerifySlide: typeof import('./../components/Verify/Verify/VerifySlide.vue')['default']
|
||||
WeekForm: typeof import('./../components/GenCron/CronForm/component/week-form.vue')['default']
|
||||
YearForm: typeof import('./../components/GenCron/CronForm/component/year-form.vue')['default']
|
||||
}
|
||||
}
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load Diff
|
|
@ -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 ={
|
||||
const fileObj = {
|
||||
id: file.id,
|
||||
name: file.name,
|
||||
url: getImageUrl(file.imagePath),
|
||||
audios: file.audioList
|
||||
url: getImageUrl(file.imagePath)
|
||||
}
|
||||
previewModal.value.openPreview(fileObj)
|
||||
// TODO: 重新设计预览弹窗后取消注释
|
||||
// previewModal.value.openPreview(fileObj)
|
||||
console.log('预览文件:', fileObj)
|
||||
// 暂时禁用预览功能，等待重新设计
|
||||
}
|
||||
|
||||
// 删除文件
|
||||
|
|
|
|||
Loading…
Reference in New Issue