From 52be3be1f27f177513b3d612017d5c2892a5b31e Mon Sep 17 00:00:00 2001 From: jhd <1684074631@qq.com> Date: Tue, 7 Jul 2026 12:59:43 +0800 Subject: [PATCH 1/2] =?UTF-8?q?refactor(file):=20=E9=87=8D=E6=9E=84?= =?UTF-8?q?=E6=96=87=E4=BB=B6=E7=AE=A1=E7=90=86=E9=A1=B5=E9=9D=A2=E5=B8=83?= =?UTF-8?q?=E5=B1=80=E5=92=8C=E5=8A=9F=E8=83=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 将左右分栏布局改为侧边栏+主区域布局 - 移除拖拽调节宽度功能和相关代码 - 重构文件类型筛选为垂直列表形式 - 移除顶部标签页切换功能 - 合并文件预览和详情功能到单一详情弹窗 - 详情弹窗中集成文件预览和元数据展示 - 优化表格列显示，增加文件大小、所属部门、订单编号等字段 - 调整操作按钮位置和样式 - 优化评论功能的显示和交互 - 简化文件上传和编辑流程 - 移除不再使用的变量和方法 --- .../KLPService/UserSelect/index.vue | 102 +- klp-ui/src/views/system/file/all.vue | 919 +++++++-------- klp-ui/src/views/system/file/index.vue | 1032 ++++++----------- 3 files changed, 855 insertions(+), 1198 deletions(-) diff --git a/klp-ui/src/components/KLPService/UserSelect/index.vue b/klp-ui/src/components/KLPService/UserSelect/index.vue index 8a39408fa..633009e1c 100644 --- a/klp-ui/src/components/KLPService/UserSelect/index.vue +++ b/klp-ui/src/components/KLPService/UserSelect/index.vue @@ -1,26 +1,28 @@ diff --git a/klp-ui/src/views/system/file/all.vue b/klp-ui/src/views/system/file/all.vue index aabbde30e..dac9f1592 100644 --- a/klp-ui/src/views/system/file/all.vue +++ b/klp-ui/src/views/system/file/all.vue @@ -1,224 +1,171 @@ @@ -336,8 +316,6 @@ export default { }, data() { return { - // 当前激活tab - activeTab: 'all', // 遮罩层 loading: false, // 选中数组 @@ -346,8 +324,6 @@ export default { single: true, // 非多个禁用 multiple: true, - // 显示搜索条件 - showSearch: true, // 显示高级搜索 showQuery: false, // 总条数 @@ -410,8 +386,6 @@ export default { Authorization: 'Bearer ' + getToken() }, uploadFileList: [], - // 选中的文件（右侧预览） - selectedFile: null, // 文件详情弹窗 infoVisible: false, infoTitle: '', @@ -420,12 +394,7 @@ export default { comments: [], commentExpanded: false, commentInput: '', - commentLoading: false, - // 拖拽调节宽度 - leftPanelWidth: '40%', - isDragging: false, - startX: 0, - startLeftWidth: 60 + commentLoading: false } }, computed: { @@ -434,11 +403,10 @@ export default { const dict = this.dict.type.sys_file_type || [] return [{ value: '', label: '全部' }, ...dict] }, - /** 根据文件后缀分类，决定右侧用哪个预览组件 */ - fileTypeCategory() { - if (!this.selectedFile) return null - // 优先使用 suffix 字段，其次从 fileName 提取 - const raw = this.selectedFile.suffix || this.selectedFile.fileName || '' + /** 详情弹窗中根据文件后缀决定预览组件 */ + infoFileCategory() { + if (!this.infoFile) return null + const raw = this.infoFile.suffix || this.infoFile.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' @@ -452,7 +420,7 @@ export default { this.getList() }, watch: { - selectedFile(val) { + infoFile(val) { if (val) { this.loadComments() } else { @@ -462,50 +430,24 @@ export default { } }, methods: { - /** 切换tab */ - handleTabClick(tab) { - this.resetQuery() - }, /** 查询文件列表 */ getList() { this.loading = true const params = this.addDateRange(this.queryParams, this.dateRange) - // 根据tab设置额外参数 - if (this.activeTab === 'my') { - params.createBy = this.$store.getters.name - } else if (this.activeTab === 'share') { - params.scopeType = 1 - } - - // 根据tab选择不同的API - let request - if (this.activeTab === 'related') { - request = listRelatedToMe(params) - } else { - request = listFile(params) - } - - request.then(response => { + listFile(params).then(response => { this.fileList = response.rows this.total = response.total this.loading = false - // 加载统计数据 - if (this.activeTab === 'all') { - this.loadStats() - } + this.loadStats() }).catch(() => { this.loading = false }) }, /** 加载统计数据 */ loadStats() { - // 获取所有公开文件数量 listFile({ pageNum: 1, pageSize: 1, scopeType: 1 }).then(r => { this.stats.publicFiles = r.total }) - // 获取所有私有文件数量 listFile({ pageNum: 1, pageSize: 1, scopeType: 2 }).then(r => { this.stats.privateFiles = r.total }) - // 我上传的 listFile({ pageNum: 1, pageSize: 1, createBy: this.$store.getters.name }).then(r => { this.stats.myFiles = r.total }) - // 总计 listFile({ pageNum: 1, pageSize: 1 }).then(r => { this.stats.totalFiles = r.total }) }, /** 格式化文件大小 */ @@ -517,9 +459,6 @@ export default { }, /** 是否可编辑 */ canEdit(row) { - if (this.activeTab === 'related') return false - if (this.activeTab === 'share') return false - // 我的文件tab 或 所有文件tab中属于当前用户的 return row.createBy === this.$store.getters.name }, /** 取消按钮 */ @@ -575,7 +514,6 @@ export default { /** 重置按钮 */ resetQuery() { this.dateRange = [] - this.selectedFile = null this.queryParams = { pageNum: 1, pageSize: 20, @@ -620,7 +558,6 @@ export default { visibleUsers: [], remark: data.remark } - // 如果是私有文件，加载可见用户 if (data.scopeType === 2) { listVisibleUserByFileId(fileId).then(res => { const rows = res.rows || [] @@ -634,7 +571,6 @@ export default { }, /** 上传前校验 */ handleBeforeUpload(file) { - // 自动设置文件名 if (!this.form.fileName) { this.form.fileName = file.name } @@ -648,7 +584,6 @@ export default { this.form.filePath = response.data.url this.form.fileName = this.form.fileName || response.data.fileName this.$modal.msgSuccess('文件上传成功') - // 自动提交表单 this.doSubmit() } else { this.$modal.msgError(response.msg || '上传失败') @@ -663,10 +598,8 @@ export default { this.$refs['form'].validate(valid => { if (valid) { if (this.isEdit) { - // 编辑模式直接提交 this.doSubmit() } else { - // 新增模式，先上传文件 if (this.$refs.upload && this.$refs.upload.uploadFiles.length > 0) { this.$refs.upload.submit() } else { @@ -683,7 +616,6 @@ export default { delete data.visibleUsers if (data.fileId) { - // 编辑模式 updateFile(data).then(response => { this.saveVisibleUsers(data.fileId, visibleUsers) this.$modal.msgSuccess('修改成功') @@ -691,7 +623,6 @@ export default { this.getList() }).catch(() => {}) } else { - // 新增模式 addFile(data).then(response => { const newFileId = response.data if (newFileId && visibleUsers && visibleUsers.length > 0) { @@ -706,20 +637,15 @@ export default { /** 保存可见用户 */ saveVisibleUsers(fileId, visibleUsers) { if (!visibleUsers || visibleUsers.length === 0) { - // 删除所有可见用户 if (this.originalVisibleUsers.length > 0) { delVisibleUser(this.originalVisibleUsers.join(',')) } return } - // 新增的 const toAdd = visibleUsers.filter(u => !this.originalVisibleUsers.includes(u)) - // 删除的 const toDel = this.originalVisibleUsers.filter(u => !visibleUsers.includes(u)) - // 删除 if (toDel.length > 0) { - // 需要先查出visibleId listVisibleUserByFileId(fileId).then(res => { const rows = res.rows || [] const delIds = rows.filter(r => toDel.includes(r.userId)).map(r => r.visibleId) @@ -728,14 +654,13 @@ export default { } }) } - // 新增 toAdd.forEach(userId => { addVisibleUser({ fileId, userId }) }) }, /** 删除 */ handleDelete(row) { - const fileIds = row.fileId || this.ids.join(',') + const fileIds = row && row.fileId ? row.fileId : this.ids.join(',') this.$modal.confirm('是否确认删除所选文件？').then(() => { return delFile(fileIds) }).then(() => { @@ -743,37 +668,25 @@ export default { this.$modal.msgSuccess('删除成功') }).catch(() => {}) }, - /** 导出 */ - handleExport() { - this.download('system/file/export', { - ...this.queryParams - }, `file_${new Date().getTime()}.xlsx`) + /** 详情弹窗关闭 */ + handleInfoClose() { + this.infoFile = null }, - /** 点击文件名查看预览 */ - handlePreview(row) { - this.selectedFile = row - incrementView(row.fileId) - }, - /** 点击查看按钮弹出详情 */ + /** 打开详情弹窗 */ handleShowInfo(row) { this.infoFile = row this.infoTitle = '文件详情 - ' + row.fileName this.infoVisible = true + incrementView(row.fileId) }, - /** 点击行选中预览 */ + /** 点击行选中 */ handleRowClick(row) { - this.selectedFile = row - }, - /** 下载文件 */ - downloadFile(row) { - if (row.filePath) { - window.open(row.filePath, '_blank') - } + // 行点击不做跳转，仅高亮 }, /** 加载评论列表 */ loadComments() { this.commentLoading = true - listFileComment(this.selectedFile.fileId).then(res => { + listFileComment(this.infoFile.fileId).then(res => { this.comments = res.data || [] this.commentLoading = false }).catch(() => { @@ -784,130 +697,113 @@ export default { handleAddComment() { const content = this.commentInput.trim() if (!content) return - addFileComment({ fileId: this.selectedFile.fileId, content }).then(() => { + addFileComment({ fileId: this.infoFile.fileId, content }).then(() => { this.commentInput = '' this.loadComments() }) }, - /** 开始拖拽 */ - 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' + /** 导出（详情弹窗中） */ + handleExportInfo() { + this.download('system/file/export', { + ...this.queryParams + }, `file_${new Date().getTime()}.xlsx`) }, - /** 拖拽中 */ - 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 = '' + /** 下载文件 */ + downloadFile(row) { + if (row.filePath) { + window.open(row.filePath, '_blank') + } } } } - + diff --git a/klp-ui/src/views/system/file/index.vue b/klp-ui/src/views/system/file/index.vue index 543c70aaa..30bcebfcd 100644 --- a/klp-ui/src/views/system/file/index.vue +++ b/klp-ui/src/views/system/file/index.vue @@ -1,33 +1,5 @@ - + @@ -253,7 +253,7 @@ {{ infoFile.scopeType === 1 ? '公开' : '私有' }} - {{ infoFile.createBy }} + {{ infoFile.createByName || infoFile.createBy }} {{ parseTime(infoFile.createTime) }} {{ infoFile.remark || '-' }} diff --git a/klp-ui/src/views/system/file/index.vue b/klp-ui/src/views/system/file/index.vue index 30bcebfcd..45469eef7 100644 --- a/klp-ui/src/views/system/file/index.vue +++ b/klp-ui/src/views/system/file/index.vue @@ -95,7 +95,7 @@ {{ scope.row.fileName }} - + @@ -229,7 +229,7 @@ {{ infoFile.scopeType === 1 ? '公开' : '私有' }} - {{ infoFile.createBy }} + {{ infoFile.createByName || infoFile.createBy }} {{ parseTime(infoFile.createTime) }} {{ infoFile.remark || '-' }}