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

refactor(file): 重构文件管理页面UI布局和搜索功能

Browse Source 
- 将统计卡片改为销售看板风格的汇总卡片布局
- 实现左右分栏布局并支持拖拽调节宽度
- 新增高级搜索功能和文件类型筛选标签页
- 优化搜索栏布局为工具栏样式并支持折叠
- 移除文件元数据卡片改用预览区域显示
- 添加查看文件详情和导出功能按钮
- 重构表格容器为固定高度可滚动布局
- 分离我的文件和共享文件的搜索界面差异
This commit is contained in:
jhd
2026-07-06 11:23:28 +08:00
parent cf4e5b78fc
commit b0ac38c050
2 changed files with 350 additions and 202 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -39,8 +39,8 @@
<div class="file-layout" ref="layoutContainer">
<!-- 左侧：文件列表 -->
<div class="file-left" :style="{ width: activeTab === 'share' || activeTab === 'related' ? leftPanelWidth : '100%' }">
<!-- 搜索栏 -->
<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="80px">
<!-- 搜索栏 - 我的文件 -->
<el-form v-if="activeTab === 'my'" :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="80px">
<el-form-item label="文件名称" prop="fileName">
<el-input
v-model="queryParams.fileName"
@@ -112,8 +112,61 @@
</el-form-item>
</el-form>
<!-- 操作按钮 -->
<el-row :gutter="10" class="mb8">
<!-- 搜索栏 - 共享文件 / 与我相关 -->
<div v-else class="share-search-area">
<div class="toolbar-row">
<div class="toolbar-buttons">
<el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport">导出</el-button>
</div>
<div class="toolbar-search">
<el-input
v-model="queryParams.fileName"
style="flex: 1;"
prefix-icon="el-icon-search"
placeholder="按名称搜索"
clearable
size="mini"
@change="handleQuery"
@keyup.enter.native="handleQuery"
@clear="handleQuery"
></el-input>
<el-button icon="el-icon-sort" @click="toggleQuery"></el-button>
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery"></el-button>
</div>
</div>
<div v-show="showQuery" class="advanced-search">
<el-form :model="queryParams" inline size="mini" class="advanced-search-form">
<el-form-item label="订单编号">
<el-input v-model="queryParams.orderNo" placeholder="订单编号" clearable @change="handleQuery" style="width: 140px;"></el-input>
</el-form-item>
<el-form-item label="所属部门">
<el-input v-model="queryParams.dept" placeholder="所属部门" clearable @change="handleQuery" style="width: 140px;"></el-input>
</el-form-item>
<el-form-item label="文件类型">
<el-select v-model="queryParams.fileType" placeholder="文件类型" clearable @change="handleQuery" style="width: 120px;">
<el-option v-for="item in dict.type.sys_file_type" :key="item.value" :label="item.label" :value="item.value" />
</el-select>
</el-form-item>
<el-form-item label="上传时间">
<el-date-picker
v-model="dateRange"
type="daterange"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期"
format="yyyy-MM-dd"
value-format="yyyy-MM-dd"
clearable
style="width: 240px;"
@change="handleQuery"
></el-date-picker>
</el-form-item>
</el-form>
</div>
</div>
<!-- 操作按钮（仅我的文件 tab） -->
<el-row v-if="activeTab === 'my'" :gutter="10" class="mb8">
<el-col :span="1.5" v-if="activeTab === 'my' || activeTab === 'all'">
<el-button
type="primary"
@@ -147,6 +200,7 @@
<!-- 文件列表表格（固定高度可滚动） -->
<div :class="['file-table-wrapper', { scrolling: activeTab === 'share' || activeTab === 'related' }]">
<div class="file-table-scroll">
<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">
@@ -210,6 +264,7 @@
</template>
</el-table-column>
</KLPTable>
</div>
<pagination
v-show="total>0"
@@ -220,28 +275,6 @@
/>
</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） -->
@@ -257,6 +290,7 @@
<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>
@@ -435,6 +469,8 @@ export default {
multiple: true,
// 显示搜索条件
showSearch: true,
// 显示高级搜索
showQuery: false,
// 总条数
total: 0,
// 文件列表
@@ -641,10 +677,15 @@ export default {
this.queryParams.pageNum = 1
this.getList()
},
/** 切换高级搜索 */
toggleQuery() {
this.showQuery = !this.showQuery
},
/** 重置按钮 */
resetQuery() {
this.dateRange = []
this.selectedFile = null
this.showQuery = false
this.resetForm('queryForm')
this.queryParams = {
pageNum: 1,
@@ -948,13 +989,13 @@ export default {
display: flex;
align-items: stretch;
gap: 0;
height: calc(100vh - 100px);
}
.file-left {
flex-shrink: 0;
display: flex;
flex-direction: column;
height: calc(100vh - 240px);
}
.file-right {
@@ -1003,7 +1044,6 @@ export default {
border: 1px solid #ebeef5;
border-radius: 4px;
height: 100%;
min-height: calc(100vh - 300px);
display: flex;
flex-direction: column;
}
@@ -1131,15 +1171,62 @@ export default {
height: 400px;
}
/* 左侧表格区域撑满剩余空间可滚动（仅 share / related tab） */
/* 左侧表格区域撑满剩余空间可滚动 + 边框 */
.file-table-wrapper.scrolling {
flex: 1;
display: flex;
flex-direction: column;
border: 1px solid #ebeef5;
border-radius: 4px;
}
.file-table-wrapper.scrolling .file-table-scroll {
flex: 1;
overflow-y: auto;
}
/* 左侧文件元数据卡片 */
.file-meta-card {
margin-top: 12px;
/* 搜索栏（共享文件 / 与我相关 tab） */
.share-search-area {
margin-bottom: 8px;
padding: 6px 0;
}
.toolbar-row {
display: flex;
align-items: center;
margin-bottom: 8px;
}
.toolbar-buttons {
display: flex;
gap: 10px;
flex-shrink: 0;
}
.toolbar-search {
display: flex;
align-items: center;
gap: 5px;
margin-left: auto;
flex: 0 1 420px;
}
.advanced-search {
background: #fff;
border: 1px solid #ebeef5;
border-radius: 4px;
padding: 10px 16px;
margin-bottom: 8px;
}
.advanced-search-form {
display: flex;
flex-wrap: wrap;
gap: 4px;
}
.advanced-search-form /deep/ .el-form-item {
margin-bottom: 0;
}
</style>