From 882c329e03afb561714b0c531c565c6545fb4e7c Mon Sep 17 00:00:00 2001 From: jhd <1684074631@qq.com> Date: Fri, 3 Jul 2026 17:55:06 +0800 Subject: [PATCH] =?UTF-8?q?feat(file):=20=E5=AE=9E=E7=8E=B0=E6=96=87?= =?UTF-8?q?=E4=BB=B6=E7=AE=A1=E7=90=86=E9=A1=B5=E9=9D=A2=E5=B7=A6=E5=8F=B3?= =?UTF-8?q?=E5=88=86=E6=A0=8F=E5=B8=83=E5=B1=80=E5=92=8C=E5=AE=9E=E6=97=B6?= =?UTF-8?q?=E9=A2=84=E8=A7=88=E5=8A=9F=E8=83=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 添加左右分栏布局结构，支持拖拽调节面板宽度 - 在左侧显示文件列表表格，右侧显示选中文件的详细信息和预览 - 集成多种文件类型的预览组件（图片、PDF、Word、Excel等） - 实现点击表格行选中文件并同步到右侧预览区域 - 添加文件详情弹窗用于显示完整元数据信息 - 优化文件统计卡片的样式设计和间距布局 - 移除原有的独立预览对话框，整合到右侧预览面板中 --- klp-ui/src/views/system/file/all.vue | 372 ++++++++++++++++++++------- 1 file changed, 279 insertions(+), 93 deletions(-) diff --git a/klp-ui/src/views/system/file/all.vue b/klp-ui/src/views/system/file/all.vue index 757154ac4..bc7233ad5 100644 --- a/klp-ui/src/views/system/file/all.vue +++ b/klp-ui/src/views/system/file/all.vue @@ -28,8 +28,12 @@ - - + +
+ +
+ + - + - - - - - - - - - - - - - - - +
+ +
+ +
+
+
+ +
+ +
+
+
@@ -265,32 +265,28 @@ - - -
- - {{ previewFile.fileName }} - - - - {{ formatFileSize(previewFile.fileSize) }} - {{ previewFile.suffix }} - {{ previewFile.orderNo || '-' }} - {{ previewFile.dept || '-' }} - - - {{ previewFile.scopeType === 1 ? '公开' : '私有' }} - - - {{ previewFile.createBy }} - {{ parseTime(previewFile.createTime) }} - {{ previewFile.remark || '-' }} - -
- 下载文件 -
-
+ + + + {{ infoFile.fileName }} + + + + {{ formatFileSize(infoFile.fileSize) }} + {{ infoFile.suffix || '-' }} + {{ infoFile.orderNo || '-' }} + {{ infoFile.dept || '-' }} + + + {{ infoFile.scopeType === 1 ? '公开' : '私有' }} + + + {{ infoFile.createBy }} + {{ parseTime(infoFile.createTime) }} + {{ infoFile.remark || '-' }} + + @@ -298,12 +294,22 @@ import { listFile, getFile, addFile, updateFile, delFile, exportFile, listVisibleUser, addVisibleUser, delVisibleUser, listVisibleUserByFileId, listRelatedToMe } from '@/api/system/file' import { getToken } from '@/utils/auth' import UserSelect from '@/components/KLPService/UserSelect/index' +import ImagePreview from '@/components/FilePreview/preview/image/index.vue' +import PdfPreview from '@/components/FilePreview/preview/pdf/index.vue' +import DocxPreview from '@/components/FilePreview/preview/docx/index.vue' +import XlsxPreview from '@/components/FilePreview/preview/xlsx/index.vue' +import XlsPreview from '@/components/FilePreview/preview/xls/index.vue' export default { name: 'SysFile', dicts: ['sys_file_type'], components: { - UserSelect + UserSelect, + ImagePreview, + PdfPreview, + DocxPreview, + XlsxPreview, + XlsPreview }, data() { return { @@ -379,10 +385,32 @@ export default { Authorization: 'Bearer ' + getToken() }, uploadFileList: [], - // 预览 - previewVisible: false, - previewTitle: '', - previewFile: null + // 选中的文件（右侧预览） + selectedFile: null, + // 文件详情弹窗 + infoVisible: false, + infoTitle: '', + infoFile: null, + // 拖拽调节宽度 + leftPanelWidth: '40%', + isDragging: false, + startX: 0, + startLeftWidth: 60 + } + }, + computed: { + /** 根据文件后缀分类，决定右侧用哪个预览组件 */ + fileTypeCategory() { + if (!this.selectedFile) return null + // 优先使用 suffix 字段，其次从 fileName 提取 + const raw = this.selectedFile.suffix || this.selectedFile.fileName || '' + const ext = (raw.includes('.') ? raw.split('.').pop() : raw).toLowerCase() + if (['png', 'jpg', 'jpeg', 'bmp', 'webp'].includes(ext)) return 'image' + if (ext === 'pdf') return 'pdf' + if (ext === 'docx') return 'docx' + if (ext === 'xlsx') return 'xlsx' + if (ext === 'xls') return 'xls' + return 'other' } }, created() { @@ -492,6 +520,7 @@ export default { /** 重置按钮 */ resetQuery() { this.dateRange = [] + this.selectedFile = null this.resetForm('queryForm') this.queryParams = { pageNum: 1, @@ -666,17 +695,54 @@ export default { ...this.queryParams }, `file_${new Date().getTime()}.xlsx`) }, - /** 预览 */ + /** 点击文件名查看预览 */ handlePreview(row) { - this.previewFile = row - this.previewTitle = '文件详情 - ' + row.fileName - this.previewVisible = true + this.selectedFile = row + }, + /** 点击查看按钮弹出详情 */ + handleShowInfo(row) { + this.infoFile = row + this.infoTitle = '文件详情 - ' + row.fileName + this.infoVisible = true + }, + /** 点击行选中预览 */ + handleRowClick(row) { + this.selectedFile = row }, /** 下载文件 */ downloadFile(row) { if (row.filePath) { window.open(row.filePath, '_blank') } + }, + /** 开始拖拽 */ + startResize(e) { + this.isDragging = true + this.startX = e.clientX + this.startLeftWidth = parseFloat(this.leftPanelWidth) + document.addEventListener('mousemove', this.doResize) + document.addEventListener('mouseup', this.stopResize) + document.body.style.cursor = 'col-resize' + document.body.style.userSelect = 'none' + }, + /** 拖拽中 */ + doResize(e) { + if (!this.isDragging) return + const container = this.$refs.layoutContainer + const rect = container.getBoundingClientRect() + const deltaX = e.clientX - this.startX + let percent = this.startLeftWidth + (deltaX / rect.width) * 100 + percent = Math.max(30, Math.min(80, percent)) + this.leftPanelWidth = percent + '%' + }, + /** 结束拖拽 */ + stopResize() { + if (!this.isDragging) return + this.isDragging = false + document.removeEventListener('mousemove', this.doResize) + document.removeEventListener('mouseup', this.stopResize) + document.body.style.cursor = '' + document.body.style.userSelect = '' } } } @@ -684,16 +750,16 @@ export default { + + +