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 1/4] =?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 { + + + From 5029d09f09f2e0ae193af84a4455ebcb0e36c94e Mon Sep 17 00:00:00 2001 From: jhd <1684074631@qq.com> Date: Sat, 4 Jul 2026 09:40:48 +0800 Subject: [PATCH 2/4] =?UTF-8?q?feat(file):=20=E6=B7=BB=E5=8A=A0=E6=96=87?= =?UTF-8?q?=E4=BB=B6=E6=B5=8F=E8=A7=88=E6=AC=A1=E6=95=B0=E7=BB=9F=E8=AE=A1?= =?UTF-8?q?=E5=8A=9F=E8=83=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 在文件列表表格中新增浏览次数列显示 - 在文件详情描述中添加浏览次数信息展示 - 实现文件浏览次数自增接口 incrementView - 前端点击文件预览时自动调用浏览次数增加功能 - 后端添加 SysFile 实体类 viewCount 字段 - 实现数据库表字段映射和更新逻辑 - 添加控制器接口 /incrementView/{fileId} 处理请求 --- .../klp/web/controller/system/SysFileController.java | 9 +++++++++ .../src/main/java/com/klp/system/domain/SysFile.java | 4 ++++ .../main/java/com/klp/system/domain/bo/SysFileBo.java | 4 ++++ .../main/java/com/klp/system/domain/vo/SysFileVo.java | 5 +++++ .../java/com/klp/system/service/ISysFileService.java | 5 +++++ .../klp/system/service/impl/SysFileServiceImpl.java | 11 +++++++++++ .../main/resources/mapper/system/SysFileMapper.xml | 1 + klp-ui/src/api/system/file.js | 8 ++++++++ klp-ui/src/views/system/file/all.vue | 9 ++++++++- 9 files changed, 55 insertions(+), 1 deletion(-) diff --git a/klp-admin/src/main/java/com/klp/web/controller/system/SysFileController.java b/klp-admin/src/main/java/com/klp/web/controller/system/SysFileController.java index d2c287236..275b0e2b9 100644 --- a/klp-admin/src/main/java/com/klp/web/controller/system/SysFileController.java +++ b/klp-admin/src/main/java/com/klp/web/controller/system/SysFileController.java @@ -98,6 +98,15 @@ public class SysFileController extends BaseController { return toAjax(iSysFileService.deleteWithValidByIds(Arrays.asList(fileIds), true)); } + /** + * 文件浏览次数 +1 + */ + @PutMapping("/incrementView/{fileId}") + public R incrementView(@NotNull(message = "主键不能为空") @PathVariable Long fileId) { + iSysFileService.incrementViewCount(fileId); + return R.ok(); + } + /** * 查询与我相关的文件（私有文件且当前用户在可见用户列表中） */ diff --git a/klp-system/src/main/java/com/klp/system/domain/SysFile.java b/klp-system/src/main/java/com/klp/system/domain/SysFile.java index 708877aec..3401000f1 100644 --- a/klp-system/src/main/java/com/klp/system/domain/SysFile.java +++ b/klp-system/src/main/java/com/klp/system/domain/SysFile.java @@ -60,6 +60,10 @@ public class SysFile extends BaseEntity { * 备注 */ private String remark; + /** + * 浏览次数 + */ + private Long viewCount; /** * 删除标识 0正常 2删除 */ diff --git a/klp-system/src/main/java/com/klp/system/domain/bo/SysFileBo.java b/klp-system/src/main/java/com/klp/system/domain/bo/SysFileBo.java index 4d84f2d1e..05ebcfb45 100644 --- a/klp-system/src/main/java/com/klp/system/domain/bo/SysFileBo.java +++ b/klp-system/src/main/java/com/klp/system/domain/bo/SysFileBo.java @@ -67,5 +67,9 @@ public class SysFileBo extends BaseEntity { */ private String remark; + /** + * 浏览次数 + */ + private Long viewCount; } diff --git a/klp-system/src/main/java/com/klp/system/domain/vo/SysFileVo.java b/klp-system/src/main/java/com/klp/system/domain/vo/SysFileVo.java index a9075d43c..66c91baf2 100644 --- a/klp-system/src/main/java/com/klp/system/domain/vo/SysFileVo.java +++ b/klp-system/src/main/java/com/klp/system/domain/vo/SysFileVo.java @@ -80,5 +80,10 @@ public class SysFileVo extends BaseEntity { @ExcelProperty(value = "备注") private String remark; + /** + * 浏览次数 + */ + @ExcelProperty(value = "浏览次数") + private Long viewCount; } diff --git a/klp-system/src/main/java/com/klp/system/service/ISysFileService.java b/klp-system/src/main/java/com/klp/system/service/ISysFileService.java index 1cd0a32da..134f86493 100644 --- a/klp-system/src/main/java/com/klp/system/service/ISysFileService.java +++ b/klp-system/src/main/java/com/klp/system/service/ISysFileService.java @@ -51,4 +51,9 @@ public interface ISysFileService { * 查询与我相关的文件（私有文件且当前用户在可见用户列表中） */ TableDataInfo queryPageListRelatedToMe(SysFileBo bo, PageQuery pageQuery); + + /** + * 文件浏览次数 +1 + */ + void incrementViewCount(Long fileId); } diff --git a/klp-system/src/main/java/com/klp/system/service/impl/SysFileServiceImpl.java b/klp-system/src/main/java/com/klp/system/service/impl/SysFileServiceImpl.java index b06095d64..09b1c2ccf 100644 --- a/klp-system/src/main/java/com/klp/system/service/impl/SysFileServiceImpl.java +++ b/klp-system/src/main/java/com/klp/system/service/impl/SysFileServiceImpl.java @@ -5,6 +5,7 @@ import com.klp.common.core.page.TableDataInfo; import com.klp.common.core.domain.PageQuery; import com.baomidou.mybatisplus.extension.plugins.pagination.Page; import com.baomidou.mybatisplus.core.conditions.query.LambdaQueryWrapper; +import com.baomidou.mybatisplus.core.conditions.update.LambdaUpdateWrapper; import com.baomidou.mybatisplus.core.toolkit.Wrappers; import com.klp.common.helper.LoginHelper; import com.klp.common.utils.StringUtils; @@ -124,6 +125,16 @@ public class SysFileServiceImpl implements ISysFileService { return TableDataInfo.build(result); } + /** + * 文件浏览次数 +1 + */ + @Override + public void incrementViewCount(Long fileId) { + baseMapper.update(null, Wrappers.lambdaUpdate() + .setSql("view_count = view_count + 1") + .eq(SysFile::getFileId, fileId)); + } + /** * 保存前的数据校验 */ diff --git a/klp-system/src/main/resources/mapper/system/SysFileMapper.xml b/klp-system/src/main/resources/mapper/system/SysFileMapper.xml index 809b1c040..c987af387 100644 --- a/klp-system/src/main/resources/mapper/system/SysFileMapper.xml +++ b/klp-system/src/main/resources/mapper/system/SysFileMapper.xml @@ -15,6 +15,7 @@ + diff --git a/klp-ui/src/api/system/file.js b/klp-ui/src/api/system/file.js index c184ddda3..f46086350 100644 --- a/klp-ui/src/api/system/file.js +++ b/klp-ui/src/api/system/file.js @@ -52,6 +52,14 @@ export function exportFile(query) { }) } +// 文件浏览次数 +1 +export function incrementView(fileId) { + return request({ + url: '/system/file/incrementView/' + fileId, + method: 'put' + }) +} + // 查询与我相关的文件 export function listRelatedToMe(query) { return request({ diff --git a/klp-ui/src/views/system/file/all.vue b/klp-ui/src/views/system/file/all.vue index bc7233ad5..6e66e7ed7 100644 --- a/klp-ui/src/views/system/file/all.vue +++ b/klp-ui/src/views/system/file/all.vue @@ -152,6 +152,11 @@ {{ parseTime(scope.row.createTime) }} + + + {{ formatFileSize(infoFile.fileSize) }} {{ infoFile.suffix || '-' }} + {{ infoFile.viewCount != null ? infoFile.viewCount : 0 }} 次 {{ infoFile.orderNo || '-' }} {{ infoFile.dept || '-' }} @@ -291,7 +297,7 @@