DeXun/klp-oa
9
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor(file): 优化文件管理页面布局和元数据显示

Browse Source 
- 将文件列表表格包装在可滚动容器中，支持固定高度显示
- 新增选中文件元数据卡片组件，显示文件详细信息
- 调整左右分栏布局为拉伸对齐，优化高度计算
- 移除预览区域的文件元数据行，统一在卡片中显示
- 为共享文件和相关文件标签页添加独立的滚动样式
- 简化预览内容区域的flex属性配置
This commit is contained in:
jhd
2026-07-06 09:51:28 +08:00
parent 827555aa43
commit 9ef387114d
2 changed files with 88 additions and 53 deletions
Download Patch File Download Diff File Expand all files Collapse all files

71
klp-ui/src/views/system/file/all.vue
View File

@@ -138,8 +138,9 @@
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
</el-row>
<!-- 文件列表表格 -->
<KLPTable v-loading="loading" :data="fileList" @selection-change="handleSelectionChange" highlight-current-row @row-click="handleRowClick">
<!-- 文件列表表格（固定高度可滚动） -->
<div class="file-table-wrapper">
<KLPTable v-loading="loading" :data="fileList" @selection-change="handleSelectionChange" highlight-current-row @row-click="handleRowClick">
<el-table-column type="selection" width="55" align="center" v-if="activeTab === 'my' || activeTab === 'all'" />
<el-table-column label="文件名称" align="center" prop="fileName" :show-overflow-tooltip="true">
<template slot-scope="scope">
@@ -166,6 +167,30 @@
:limit.sync="queryParams.pageSize"
@pagination="getList"
/>
</div>
<!-- 选中文件元数据卡片 -->
<div class="file-meta-card" v-if="selectedFile">
<el-descriptions :column="2" border size="small">
<el-descriptions-item label="文件名称">{{ selectedFile.fileName }}</el-descriptions-item>
<el-descriptions-item label="文件类型">
<dict-tag :options="dict.type.sys_file_type" :value="selectedFile.fileType"/>
</el-descriptions-item>
<el-descriptions-item label="文件大小">{{ formatFileSize(selectedFile.fileSize) }}</el-descriptions-item>
<el-descriptions-item label="文件后缀">{{ selectedFile.suffix || '-' }}</el-descriptions-item>
<el-descriptions-item label="浏览次数">{{ selectedFile.viewCount != null ? selectedFile.viewCount : 0 }} 次</el-descriptions-item>
<el-descriptions-item label="订单编号">{{ selectedFile.orderNo || '-' }}</el-descriptions-item>
<el-descriptions-item label="所属部门">{{ selectedFile.dept || '-' }}</el-descriptions-item>
<el-descriptions-item label="可见范围">
<el-tag :type="selectedFile.scopeType === 1 ? 'success' : 'warning'" size="small">
{{ selectedFile.scopeType === 1 ? '公开' : '私有' }}
</el-tag>
</el-descriptions-item>
<el-descriptions-item label="上传人">{{ selectedFile.createBy }}</el-descriptions-item>
<el-descriptions-item label="上传时间">{{ parseTime(selectedFile.createTime) }}</el-descriptions-item>
<el-descriptions-item label="备注" :span="2">{{ selectedFile.remark || '-' }}</el-descriptions-item>
</el-descriptions>
</div>
</div>
<!-- 拖拽分隔条 -->
<div class="resize-handle" @mousedown="startResize" :class="{ dragging: isDragging }"></div>
@@ -179,19 +204,11 @@
<div class="preview-header">
<span class="preview-filename" :title="selectedFile.fileName">{{ selectedFile.fileName }}</span>
<div>
<el-button size="mini" type="text" @click="handlePreview(selectedFile)">预览</el-button>
<el-button size="mini" plain icon="el-icon-info" @click="handleShowInfo(selectedFile)">查看</el-button>
<el-button size="mini" type="primary" icon="el-icon-download" @click="downloadFile(selectedFile)">下载</el-button>
<el-button v-if="canEdit(selectedFile)" size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(selectedFile)">编辑</el-button>
<el-button v-if="canEdit(selectedFile)" size="mini" type="text" icon="el-icon-delete" @click="handleDelete(selectedFile)">删除</el-button>
</div>
</div>
<div class="preview-meta">
<span>{{ formatFileSize(selectedFile.fileSize) }}</span>
<dict-tag :options="dict.type.sys_file_type" :value="selectedFile.fileType" />
<span>{{ selectedFile.createBy }}</span>
<span>{{ parseTime(selectedFile.createTime) }}</span>
</div>
<div class="preview-comment">
<div class="comment-bar" @click="commentExpanded = !commentExpanded">
<span><i class="el-icon-chat-dot-round"></i> 评论 ({{ comments.length }})</span>
@@ -862,12 +879,15 @@ export default {
/* 左右分栏布局 */
.file-layout {
display: flex;
align-items: flex-start;
align-items: stretch;
gap: 0;
}
.file-left {
flex-shrink: 0;
display: flex;
flex-direction: column;
height: calc(100vh - 240px);
}
.file-right {
@@ -915,12 +935,10 @@ export default {
background: #fff;
border: 1px solid #ebeef5;
border-radius: 4px;
height: calc(100vh - 280px);
min-height: 450px;
height: 100%;
min-height: calc(100vh - 300px);
display: flex;
flex-direction: column;
position: sticky;
top: 16px;
}
.preview-empty {
@@ -948,17 +966,6 @@ export default {
margin-right: 12px;
}
.preview-meta {
padding: 8px 16px;
border-bottom: 1px solid #ebeef5;
display: flex;
gap: 12px;
align-items: center;
flex-wrap: wrap;
font-size: 12px;
color: #909399;
}
.preview-comment {
border-bottom: 1px solid #ebeef5;
}
@@ -1042,7 +1049,6 @@ export default {
}
.preview-content {
flex: 1;
overflow: auto;
display: flex;
}
@@ -1057,6 +1063,17 @@ export default {
align-items: center;
height: 400px;
}
/* 左侧表格区域撑满剩余空间可滚动 */
.file-table-wrapper {
flex: 1;
overflow-y: auto;
}
/* 左侧文件元数据卡片 */
.file-meta-card {
margin-top: 12px;
}
</style>
<!-- 表格选中行高亮（非 scoped，穿透 el-table） -->

70
klp-ui/src/views/system/file/index.vue
View File

@@ -145,8 +145,9 @@
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
</el-row>
<!-- 文件列表表格 -->
<KLPTable v-loading="loading" :data="fileList" @selection-change="handleSelectionChange" :highlight-current-row="activeTab === 'share' || activeTab === 'related'" @row-click="handleRowClick">
<!-- 文件列表表格（固定高度可滚动） -->
<div :class="['file-table-wrapper', { scrolling: activeTab === 'share' || activeTab === 'related' }]">
<KLPTable v-loading="loading" :data="fileList" @selection-change="handleSelectionChange" :highlight-current-row="activeTab === 'share' || activeTab === 'related'" @row-click="handleRowClick">
<el-table-column type="selection" width="55" align="center" v-if="activeTab === 'my' || activeTab === 'all'" />
<el-table-column label="文件名称" align="center" prop="fileName" :show-overflow-tooltip="true">
<template slot-scope="scope">
@@ -217,6 +218,30 @@
:limit.sync="queryParams.pageSize"
@pagination="getList"
/>
</div>
<!-- 选中文件元数据卡片（仅共享文件 / 与我相关 tab） -->
<div class="file-meta-card" v-if="selectedFile && (activeTab === 'share' || activeTab === 'related')">
<el-descriptions :column="2" border size="small">
<el-descriptions-item label="文件名称">{{ selectedFile.fileName }}</el-descriptions-item>
<el-descriptions-item label="文件类型">
<dict-tag :options="dict.type.sys_file_type" :value="selectedFile.fileType"/>
</el-descriptions-item>
<el-descriptions-item label="文件大小">{{ formatFileSize(selectedFile.fileSize) }}</el-descriptions-item>
<el-descriptions-item label="文件后缀">{{ selectedFile.suffix || '-' }}</el-descriptions-item>
<el-descriptions-item label="浏览次数">{{ selectedFile.viewCount != null ? selectedFile.viewCount : 0 }} 次</el-descriptions-item>
<el-descriptions-item label="订单编号">{{ selectedFile.orderNo || '-' }}</el-descriptions-item>
<el-descriptions-item label="所属部门">{{ selectedFile.dept || '-' }}</el-descriptions-item>
<el-descriptions-item label="可见范围">
<el-tag :type="selectedFile.scopeType === 1 ? 'success' : 'warning'" size="small">
{{ selectedFile.scopeType === 1 ? '公开' : '私有' }}
</el-tag>
</el-descriptions-item>
<el-descriptions-item label="上传人">{{ selectedFile.createBy }}</el-descriptions-item>
<el-descriptions-item label="上传时间">{{ parseTime(selectedFile.createTime) }}</el-descriptions-item>
<el-descriptions-item label="备注" :span="2">{{ selectedFile.remark || '-' }}</el-descriptions-item>
</el-descriptions>
</div>
</div>
<!-- 拖拽分隔条（共享文件 / 与我相关 tab） -->
@@ -232,18 +257,11 @@
<div class="preview-header">
<span class="preview-filename" :title="selectedFile.fileName">{{ selectedFile.fileName }}</span>
<div>
<el-button size="mini" plain icon="el-icon-info" @click="handleShowInfo(selectedFile)">查看</el-button>
<el-button size="mini" type="primary" icon="el-icon-download" @click="downloadFile(selectedFile)">下载</el-button>
<el-button v-if="canEdit(selectedFile)" size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(selectedFile)">编辑</el-button>
<el-button v-if="canEdit(selectedFile)" size="mini" type="text" icon="el-icon-delete" @click="handleDelete(selectedFile)">删除</el-button>
</div>
</div>
<div class="preview-meta">
<span>{{ formatFileSize(selectedFile.fileSize) }}</span>
<dict-tag :options="dict.type.sys_file_type" :value="selectedFile.fileType" />
<span>{{ selectedFile.createBy }}</span>
<span>{{ parseTime(selectedFile.createTime) }}</span>
</div>
<div class="preview-comment">
<div class="comment-bar" @click="commentExpanded = !commentExpanded">
<span><i class="el-icon-chat-dot-round"></i> 评论 ({{ comments.length }})</span>
@@ -928,12 +946,15 @@ export default {
/* 左右分栏布局 */
.file-layout {
display: flex;
align-items: flex-start;
align-items: stretch;
gap: 0;
}
.file-left {
flex-shrink: 0;
display: flex;
flex-direction: column;
height: calc(100vh - 240px);
}
.file-right {
@@ -981,12 +1002,10 @@ export default {
background: #fff;
border: 1px solid #ebeef5;
border-radius: 4px;
height: calc(100vh - 280px);
min-height: 450px;
height: 100%;
min-height: calc(100vh - 300px);
display: flex;
flex-direction: column;
position: sticky;
top: 16px;
}
.preview-empty {
@@ -1014,17 +1033,6 @@ export default {
margin-right: 12px;
}
.preview-meta {
padding: 8px 16px;
border-bottom: 1px solid #ebeef5;
display: flex;
gap: 12px;
align-items: center;
flex-wrap: wrap;
font-size: 12px;
color: #909399;
}
.preview-comment {
border-bottom: 1px solid #ebeef5;
}
@@ -1108,7 +1116,6 @@ export default {
}
.preview-content {
flex: 1;
overflow: auto;
display: flex;
}
@@ -1123,6 +1130,17 @@ export default {
align-items: center;
height: 400px;
}
/* 左侧表格区域撑满剩余空间可滚动（仅 share / related tab） */
.file-table-wrapper.scrolling {
flex: 1;
overflow-y: auto;
}
/* 左侧文件元数据卡片 */
.file-meta-card {
margin-top: 12px;
}
</style>
<!-- 表格选中行高亮（非 scoped，穿透 el-table） -->