Merge branch '0.8.X' of http://49.232.154.205:10100/DeXun/klp-oa into 0.8.X
This commit is contained in:
砂糖
@@ -1,88 +1,109 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="app-container">
|
<div class="app-container">
|
||||||
<!-- 统计卡片 -->
|
|
||||||
<el-row :gutter="16" class="stat-row" v-if="activeTab === 'all'">
|
|
||||||
<el-col :span="6">
|
|
||||||
<div class="stat-card">
|
|
||||||
<div class="stat-num">{{ stats.totalFiles }}</div>
|
|
||||||
<div class="stat-label">文件总数</div>
|
|
||||||
</div>
|
|
||||||
</el-col>
|
|
||||||
<el-col :span="6">
|
|
||||||
<div class="stat-card public">
|
|
||||||
<div class="stat-num">{{ stats.publicFiles }}</div>
|
|
||||||
<div class="stat-label">公开文件</div>
|
|
||||||
</div>
|
|
||||||
</el-col>
|
|
||||||
<el-col :span="6">
|
|
||||||
<div class="stat-card private">
|
|
||||||
<div class="stat-num">{{ stats.privateFiles }}</div>
|
|
||||||
<div class="stat-label">私有文件</div>
|
|
||||||
</div>
|
|
||||||
</el-col>
|
|
||||||
<el-col :span="6">
|
|
||||||
<div class="stat-card">
|
|
||||||
<div class="stat-num">{{ stats.myFiles }}</div>
|
|
||||||
<div class="stat-label">我上传的</div>
|
|
||||||
</div>
|
|
||||||
</el-col>
|
|
||||||
</el-row>
|
|
||||||
|
|
||||||
<!-- 左右分栏布局（可拖拽调节宽度） -->
|
<!-- 左右分栏布局（可拖拽调节宽度） -->
|
||||||
<div class="file-layout" ref="layoutContainer">
|
<div class="file-layout" ref="layoutContainer">
|
||||||
<!-- 左侧：文件列表 -->
|
<!-- 左侧：文件列表 -->
|
||||||
<div class="file-left" :style="{ width: leftPanelWidth }">
|
<div class="file-left" :style="{ width: leftPanelWidth }">
|
||||||
<!-- 搜索栏 -->
|
<!-- 统计卡片（两行每行两个） -->
|
||||||
<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="80px">
|
<div class="summary-stat-container">
|
||||||
<el-form-item label="文件名称" prop="fileName">
|
<el-card class="summary-card" shadow="hover">
|
||||||
|
<el-row :gutter="6">
|
||||||
|
<el-col :span="12">
|
||||||
|
<div class="summary-item">
|
||||||
|
<span class="item-label">文件总数</span>
|
||||||
|
<span class="item-value">{{ stats.totalFiles }}</span>
|
||||||
|
</div>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="12">
|
||||||
|
<div class="summary-item">
|
||||||
|
<span class="item-label">公开文件</span>
|
||||||
|
<span class="item-value">{{ stats.publicFiles }}</span>
|
||||||
|
</div>
|
||||||
|
</el-col>
|
||||||
|
</el-row>
|
||||||
|
<el-row :gutter="6" style="margin-top: 4px;">
|
||||||
|
<el-col :span="12">
|
||||||
|
<div class="summary-item">
|
||||||
|
<span class="item-label">私有文件</span>
|
||||||
|
<span class="item-value">{{ stats.privateFiles }}</span>
|
||||||
|
</div>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="12">
|
||||||
|
<div class="summary-item">
|
||||||
|
<span class="item-label">我上传的</span>
|
||||||
|
<span class="item-value">{{ stats.myFiles }}</span>
|
||||||
|
</div>
|
||||||
|
</el-col>
|
||||||
|
</el-row>
|
||||||
|
</el-card>
|
||||||
|
</div>
|
||||||
|
<!-- 文件类型筛选（两行） -->
|
||||||
|
<div class="file-type-tabs">
|
||||||
|
<span
|
||||||
|
v-for="opt in fileTypeOptions"
|
||||||
|
:key="opt.value"
|
||||||
|
class="type-tab"
|
||||||
|
:class="{ active: (queryParams.fileType || '') === opt.value }"
|
||||||
|
@click="handleTypeTabClick(opt.value)"
|
||||||
|
>{{ opt.label }}</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 操作按钮 + 名称搜索 -->
|
||||||
|
<div class="toolbar-row">
|
||||||
|
<div class="toolbar-buttons">
|
||||||
|
<el-button
|
||||||
|
type="primary"
|
||||||
|
plain
|
||||||
|
icon="el-icon-plus"
|
||||||
|
size="mini"
|
||||||
|
v-if="activeTab === 'my' || activeTab === 'all'"
|
||||||
|
@click="handleAdd"
|
||||||
|
>上传文件</el-button>
|
||||||
|
</div>
|
||||||
|
<el-button
|
||||||
|
type="danger"
|
||||||
|
plain
|
||||||
|
icon="el-icon-delete"
|
||||||
|
size="mini"
|
||||||
|
v-if="activeTab === 'my' || activeTab === 'all'"
|
||||||
|
:disabled="multiple"
|
||||||
|
style="margin-right: auto;"
|
||||||
|
@click="handleDelete"
|
||||||
|
>删除</el-button>
|
||||||
|
<div class="toolbar-search">
|
||||||
<el-input
|
<el-input
|
||||||
v-model="queryParams.fileName"
|
v-model="queryParams.fileName"
|
||||||
placeholder="请输入文件名称"
|
style="flex: 1;"
|
||||||
|
prefix-icon="el-icon-search"
|
||||||
|
placeholder="按名称搜索"
|
||||||
clearable
|
clearable
|
||||||
style="width: 200px"
|
size="mini"
|
||||||
|
@change="handleQuery"
|
||||||
@keyup.enter.native="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>
|
||||||
<el-form-item label="订单编号" prop="orderNo">
|
<el-form-item label="所属部门">
|
||||||
<el-input
|
<el-input v-model="queryParams.dept" placeholder="所属部门" clearable @change="handleQuery" style="width: 140px;"></el-input>
|
||||||
v-model="queryParams.orderNo"
|
|
||||||
placeholder="请输入订单编号"
|
|
||||||
clearable
|
|
||||||
style="width: 200px"
|
|
||||||
@keyup.enter.native="handleQuery"
|
|
||||||
/>
|
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
<el-form-item label="所属部门" prop="dept">
|
<el-form-item label="文件类型">
|
||||||
<el-input
|
<el-select v-model="queryParams.fileType" placeholder="文件类型" clearable @change="handleQuery" style="width: 120px;">
|
||||||
v-model="queryParams.dept"
|
<el-option v-for="item in dict.type.sys_file_type" :key="item.value" :label="item.label" :value="item.value" />
|
||||||
placeholder="请输入部门"
|
|
||||||
clearable
|
|
||||||
style="width: 200px"
|
|
||||||
@keyup.enter.native="handleQuery"
|
|
||||||
/>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="文件类型" prop="fileType">
|
|
||||||
<el-select
|
|
||||||
v-model="queryParams.fileType"
|
|
||||||
placeholder="请选择文件类型"
|
|
||||||
clearable
|
|
||||||
style="width: 200px"
|
|
||||||
>
|
|
||||||
<el-option
|
|
||||||
v-for="item in dict.type.sys_file_type"
|
|
||||||
:key="item.value"
|
|
||||||
:label="item.label"
|
|
||||||
:value="item.value"
|
|
||||||
/>
|
|
||||||
</el-select>
|
</el-select>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
<el-form-item label="可见范围" prop="scopeType" v-if="activeTab !== 'share' && activeTab !== 'related'">
|
<el-form-item label="可见范围">
|
||||||
<el-select
|
<el-select v-model="queryParams.scopeType" placeholder="可见范围" clearable @change="handleQuery" style="width: 120px;">
|
||||||
v-model="queryParams.scopeType"
|
|
||||||
placeholder="请选择可见范围"
|
|
||||||
clearable
|
|
||||||
style="width: 200px"
|
|
||||||
>
|
|
||||||
<el-option label="公开" :value="1" />
|
<el-option label="公开" :value="1" />
|
||||||
<el-option label="私有" :value="2" />
|
<el-option label="私有" :value="2" />
|
||||||
</el-select>
|
</el-select>
|
||||||
@@ -90,56 +111,23 @@
|
|||||||
<el-form-item label="上传时间">
|
<el-form-item label="上传时间">
|
||||||
<el-date-picker
|
<el-date-picker
|
||||||
v-model="dateRange"
|
v-model="dateRange"
|
||||||
style="width: 240px"
|
|
||||||
value-format="yyyy-MM-dd HH:mm:ss"
|
|
||||||
type="daterange"
|
type="daterange"
|
||||||
range-separator="-"
|
range-separator="至"
|
||||||
start-placeholder="开始日期"
|
start-placeholder="开始日期"
|
||||||
end-placeholder="结束日期"
|
end-placeholder="结束日期"
|
||||||
:default-time="['00:00:00', '23:59:59']"
|
format="yyyy-MM-dd"
|
||||||
|
value-format="yyyy-MM-dd"
|
||||||
|
clearable
|
||||||
|
style="width: 240px;"
|
||||||
|
@change="handleQuery"
|
||||||
></el-date-picker>
|
></el-date-picker>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
<el-form-item>
|
|
||||||
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
|
|
||||||
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
|
|
||||||
</el-form-item>
|
|
||||||
</el-form>
|
</el-form>
|
||||||
|
</div>
|
||||||
<!-- 操作按钮 -->
|
|
||||||
<el-row :gutter="10" class="mb8">
|
|
||||||
<el-col :span="1.5" v-if="activeTab === 'my' || activeTab === 'all'">
|
|
||||||
<el-button
|
|
||||||
type="primary"
|
|
||||||
plain
|
|
||||||
icon="el-icon-plus"
|
|
||||||
size="mini"
|
|
||||||
@click="handleAdd"
|
|
||||||
>上传文件</el-button>
|
|
||||||
</el-col>
|
|
||||||
<el-col :span="1.5" v-if="activeTab === 'my' || activeTab === 'all'">
|
|
||||||
<el-button
|
|
||||||
type="danger"
|
|
||||||
plain
|
|
||||||
icon="el-icon-delete"
|
|
||||||
size="mini"
|
|
||||||
:disabled="multiple"
|
|
||||||
@click="handleDelete"
|
|
||||||
>删除</el-button>
|
|
||||||
</el-col>
|
|
||||||
<el-col :span="1.5">
|
|
||||||
<el-button
|
|
||||||
type="warning"
|
|
||||||
plain
|
|
||||||
icon="el-icon-download"
|
|
||||||
size="mini"
|
|
||||||
@click="handleExport"
|
|
||||||
>导出</el-button>
|
|
||||||
</el-col>
|
|
||||||
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
|
|
||||||
</el-row>
|
|
||||||
|
|
||||||
<!-- 文件列表表格（固定高度可滚动） -->
|
<!-- 文件列表表格（固定高度可滚动） -->
|
||||||
<div class="file-table-wrapper">
|
<div class="file-table-wrapper">
|
||||||
|
<div class="file-table-scroll">
|
||||||
<KLPTable v-loading="loading" :data="fileList" @selection-change="handleSelectionChange" highlight-current-row @row-click="handleRowClick">
|
<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 type="selection" width="55" align="center" v-if="activeTab === 'my' || activeTab === 'all'" />
|
||||||
<el-table-column label="文件名称" align="center" prop="fileName" :show-overflow-tooltip="true">
|
<el-table-column label="文件名称" align="center" prop="fileName" :show-overflow-tooltip="true">
|
||||||
@@ -159,6 +147,7 @@
|
|||||||
</template>
|
</template>
|
||||||
</el-table-column>
|
</el-table-column>
|
||||||
</KLPTable>
|
</KLPTable>
|
||||||
|
</div>
|
||||||
|
|
||||||
<pagination
|
<pagination
|
||||||
v-show="total>0"
|
v-show="total>0"
|
||||||
@@ -169,28 +158,6 @@
|
|||||||
/>
|
/>
|
||||||
</div>
|
</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>
|
||||||
<!-- 拖拽分隔条 -->
|
<!-- 拖拽分隔条 -->
|
||||||
<div class="resize-handle" @mousedown="startResize" :class="{ dragging: isDragging }"></div>
|
<div class="resize-handle" @mousedown="startResize" :class="{ dragging: isDragging }"></div>
|
||||||
@@ -204,6 +171,8 @@
|
|||||||
<div class="preview-header">
|
<div class="preview-header">
|
||||||
<span class="preview-filename" :title="selectedFile.fileName">{{ selectedFile.fileName }}</span>
|
<span class="preview-filename" :title="selectedFile.fileName">{{ selectedFile.fileName }}</span>
|
||||||
<div>
|
<div>
|
||||||
|
<el-button size="mini" type="warning" plain icon="el-icon-download" @click="handleExport">导出</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 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-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>
|
<el-button v-if="canEdit(selectedFile)" size="mini" type="text" icon="el-icon-delete" @click="handleDelete(selectedFile)">删除</el-button>
|
||||||
@@ -379,6 +348,8 @@ export default {
|
|||||||
multiple: true,
|
multiple: true,
|
||||||
// 显示搜索条件
|
// 显示搜索条件
|
||||||
showSearch: true,
|
showSearch: true,
|
||||||
|
// 显示高级搜索
|
||||||
|
showQuery: false,
|
||||||
// 总条数
|
// 总条数
|
||||||
total: 0,
|
total: 0,
|
||||||
// 文件列表
|
// 文件列表
|
||||||
@@ -458,6 +429,11 @@ export default {
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
|
/** 文件类型筛选选项 */
|
||||||
|
fileTypeOptions() {
|
||||||
|
const dict = this.dict.type.sys_file_type || []
|
||||||
|
return [{ value: '', label: '全部' }, ...dict]
|
||||||
|
},
|
||||||
/** 根据文件后缀分类，决定右侧用哪个预览组件 */
|
/** 根据文件后缀分类，决定右侧用哪个预览组件 */
|
||||||
fileTypeCategory() {
|
fileTypeCategory() {
|
||||||
if (!this.selectedFile) return null
|
if (!this.selectedFile) return null
|
||||||
@@ -581,16 +557,25 @@ export default {
|
|||||||
this.form.visibleUsers = []
|
this.form.visibleUsers = []
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
/** 搜索按钮 */
|
/** 搜索 */
|
||||||
handleQuery() {
|
handleQuery() {
|
||||||
this.queryParams.pageNum = 1
|
this.queryParams.pageNum = 1
|
||||||
this.getList()
|
this.getList()
|
||||||
},
|
},
|
||||||
|
/** 切换高级搜索 */
|
||||||
|
toggleQuery() {
|
||||||
|
this.showQuery = !this.showQuery
|
||||||
|
},
|
||||||
|
/** 文件类型筛选切换 */
|
||||||
|
handleTypeTabClick(value) {
|
||||||
|
this.queryParams.fileType = value || undefined
|
||||||
|
this.queryParams.pageNum = 1
|
||||||
|
this.getList()
|
||||||
|
},
|
||||||
/** 重置按钮 */
|
/** 重置按钮 */
|
||||||
resetQuery() {
|
resetQuery() {
|
||||||
this.dateRange = []
|
this.dateRange = []
|
||||||
this.selectedFile = null
|
this.selectedFile = null
|
||||||
this.resetForm('queryForm')
|
|
||||||
this.queryParams = {
|
this.queryParams = {
|
||||||
pageNum: 1,
|
pageNum: 1,
|
||||||
pageSize: 20,
|
pageSize: 20,
|
||||||
@@ -600,7 +585,7 @@ export default {
|
|||||||
fileType: undefined,
|
fileType: undefined,
|
||||||
scopeType: undefined
|
scopeType: undefined
|
||||||
}
|
}
|
||||||
this.handleQuery()
|
this.getList()
|
||||||
},
|
},
|
||||||
/** 多选框 */
|
/** 多选框 */
|
||||||
handleSelectionChange(selection) {
|
handleSelectionChange(selection) {
|
||||||
@@ -838,38 +823,111 @@ export default {
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
.stat-row {
|
/* 操作工具栏 */
|
||||||
|
.toolbar-row {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
margin-bottom: 8px;
|
margin-bottom: 8px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.stat-card {
|
.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;
|
background: #fff;
|
||||||
border-radius: 6px;
|
border: 1px solid #ebeef5;
|
||||||
|
border-radius: 4px;
|
||||||
padding: 10px 16px;
|
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;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 文件类型筛选（两行） */
|
||||||
|
.file-type-tabs {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
gap: 6px;
|
||||||
|
margin-bottom: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.type-tab {
|
||||||
|
display: inline-block;
|
||||||
|
padding: 3px 10px;
|
||||||
|
font-size: 12px;
|
||||||
|
color: #606266;
|
||||||
|
border: 1px solid #dcdfe6;
|
||||||
|
border-radius: 2px;
|
||||||
|
cursor: pointer;
|
||||||
|
user-select: none;
|
||||||
|
transition: all 0.2s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.type-tab:hover {
|
||||||
|
color: #5F7BA0;
|
||||||
|
border-color: #5F7BA0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.type-tab.active {
|
||||||
|
color: #fff;
|
||||||
|
background: #5F7BA0;
|
||||||
|
border-color: #5F7BA0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 统计卡片 - 销售看板风格 */
|
||||||
|
.summary-stat-container {
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.summary-stat-container .summary-card {
|
||||||
|
border: none;
|
||||||
|
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.04);
|
||||||
|
}
|
||||||
|
|
||||||
|
.summary-stat-container .summary-card /deep/ .el-card__body {
|
||||||
|
padding: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.summary-item {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
|
padding: 6px 4px;
|
||||||
border-left: 3px solid #409eff;
|
border: 1px solid #ebeef5;
|
||||||
|
border-radius: 2px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.stat-card.public {
|
.item-label {
|
||||||
border-left-color: #67c23a;
|
display: block;
|
||||||
}
|
|
||||||
|
|
||||||
.stat-card.private {
|
|
||||||
border-left-color: #e6a23c;
|
|
||||||
}
|
|
||||||
|
|
||||||
.stat-num {
|
|
||||||
font-size: 22px;
|
|
||||||
font-weight: 700;
|
|
||||||
color: #303133;
|
|
||||||
line-height: 1.2;
|
|
||||||
}
|
|
||||||
|
|
||||||
.stat-label {
|
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
color: #909399;
|
color: #909399;
|
||||||
margin-top: 2px;
|
margin-bottom: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.item-value {
|
||||||
|
display: block;
|
||||||
|
font-size: 20px;
|
||||||
|
font-weight: bold;
|
||||||
|
color: #1f2d3d;
|
||||||
|
line-height: 1.2;
|
||||||
}
|
}
|
||||||
|
|
||||||
.upload-demo {
|
.upload-demo {
|
||||||
@@ -881,13 +939,13 @@ export default {
|
|||||||
display: flex;
|
display: flex;
|
||||||
align-items: stretch;
|
align-items: stretch;
|
||||||
gap: 0;
|
gap: 0;
|
||||||
|
height: calc(100vh - 100px);
|
||||||
}
|
}
|
||||||
|
|
||||||
.file-left {
|
.file-left {
|
||||||
flex-shrink: 0;
|
flex-shrink: 0;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
height: calc(100vh - 240px);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.file-right {
|
.file-right {
|
||||||
@@ -936,7 +994,6 @@ export default {
|
|||||||
border: 1px solid #ebeef5;
|
border: 1px solid #ebeef5;
|
||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
min-height: calc(100vh - 300px);
|
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
}
|
}
|
||||||
@@ -1064,16 +1121,20 @@ export default {
|
|||||||
height: 400px;
|
height: 400px;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 左侧表格区域撑满剩余空间可滚动 */
|
/* 左侧表格区域撑满剩余空间，分页置底 */
|
||||||
.file-table-wrapper {
|
.file-table-wrapper {
|
||||||
|
flex: 1;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
border: 1px solid #ebeef5;
|
||||||
|
border-radius: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.file-table-scroll {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
overflow-y: auto;
|
overflow-y: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 左侧文件元数据卡片 */
|
|
||||||
.file-meta-card {
|
|
||||||
margin-top: 12px;
|
|
||||||
}
|
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
<!-- 表格选中行高亮（非 scoped，穿透 el-table） -->
|
<!-- 表格选中行高亮（非 scoped，穿透 el-table） -->
|
||||||
|
|||||||
@@ -39,8 +39,8 @@
|
|||||||
<div class="file-layout" ref="layoutContainer">
|
<div class="file-layout" ref="layoutContainer">
|
||||||
<!-- 左侧：文件列表 -->
|
<!-- 左侧：文件列表 -->
|
||||||
<div class="file-left" :style="{ width: activeTab === 'share' || activeTab === 'related' ? leftPanelWidth : '100%' }">
|
<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-form-item label="文件名称" prop="fileName">
|
||||||
<el-input
|
<el-input
|
||||||
v-model="queryParams.fileName"
|
v-model="queryParams.fileName"
|
||||||
@@ -112,8 +112,61 @@
|
|||||||
</el-form-item>
|
</el-form-item>
|
||||||
</el-form>
|
</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-col :span="1.5" v-if="activeTab === 'my' || activeTab === 'all'">
|
||||||
<el-button
|
<el-button
|
||||||
type="primary"
|
type="primary"
|
||||||
@@ -147,6 +200,7 @@
|
|||||||
|
|
||||||
<!-- 文件列表表格（固定高度可滚动） -->
|
<!-- 文件列表表格（固定高度可滚动） -->
|
||||||
<div :class="['file-table-wrapper', { scrolling: activeTab === 'share' || activeTab === 'related' }]">
|
<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">
|
<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 type="selection" width="55" align="center" v-if="activeTab === 'my' || activeTab === 'all'" />
|
||||||
<el-table-column label="文件名称" align="center" prop="fileName" :show-overflow-tooltip="true">
|
<el-table-column label="文件名称" align="center" prop="fileName" :show-overflow-tooltip="true">
|
||||||
@@ -210,6 +264,7 @@
|
|||||||
</template>
|
</template>
|
||||||
</el-table-column>
|
</el-table-column>
|
||||||
</KLPTable>
|
</KLPTable>
|
||||||
|
</div>
|
||||||
|
|
||||||
<pagination
|
<pagination
|
||||||
v-show="total>0"
|
v-show="total>0"
|
||||||
@@ -220,28 +275,6 @@
|
|||||||
/>
|
/>
|
||||||
</div>
|
</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>
|
</div>
|
||||||
|
|
||||||
<!-- 拖拽分隔条（共享文件 / 与我相关 tab） -->
|
<!-- 拖拽分隔条（共享文件 / 与我相关 tab） -->
|
||||||
@@ -257,6 +290,7 @@
|
|||||||
<div class="preview-header">
|
<div class="preview-header">
|
||||||
<span class="preview-filename" :title="selectedFile.fileName">{{ selectedFile.fileName }}</span>
|
<span class="preview-filename" :title="selectedFile.fileName">{{ selectedFile.fileName }}</span>
|
||||||
<div>
|
<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 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-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>
|
<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,
|
multiple: true,
|
||||||
// 显示搜索条件
|
// 显示搜索条件
|
||||||
showSearch: true,
|
showSearch: true,
|
||||||
|
// 显示高级搜索
|
||||||
|
showQuery: false,
|
||||||
// 总条数
|
// 总条数
|
||||||
total: 0,
|
total: 0,
|
||||||
// 文件列表
|
// 文件列表
|
||||||
@@ -641,10 +677,15 @@ export default {
|
|||||||
this.queryParams.pageNum = 1
|
this.queryParams.pageNum = 1
|
||||||
this.getList()
|
this.getList()
|
||||||
},
|
},
|
||||||
|
/** 切换高级搜索 */
|
||||||
|
toggleQuery() {
|
||||||
|
this.showQuery = !this.showQuery
|
||||||
|
},
|
||||||
/** 重置按钮 */
|
/** 重置按钮 */
|
||||||
resetQuery() {
|
resetQuery() {
|
||||||
this.dateRange = []
|
this.dateRange = []
|
||||||
this.selectedFile = null
|
this.selectedFile = null
|
||||||
|
this.showQuery = false
|
||||||
this.resetForm('queryForm')
|
this.resetForm('queryForm')
|
||||||
this.queryParams = {
|
this.queryParams = {
|
||||||
pageNum: 1,
|
pageNum: 1,
|
||||||
@@ -948,13 +989,13 @@ export default {
|
|||||||
display: flex;
|
display: flex;
|
||||||
align-items: stretch;
|
align-items: stretch;
|
||||||
gap: 0;
|
gap: 0;
|
||||||
|
height: calc(100vh - 100px);
|
||||||
}
|
}
|
||||||
|
|
||||||
.file-left {
|
.file-left {
|
||||||
flex-shrink: 0;
|
flex-shrink: 0;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
height: calc(100vh - 240px);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.file-right {
|
.file-right {
|
||||||
@@ -1003,7 +1044,6 @@ export default {
|
|||||||
border: 1px solid #ebeef5;
|
border: 1px solid #ebeef5;
|
||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
min-height: calc(100vh - 300px);
|
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
}
|
}
|
||||||
@@ -1131,15 +1171,62 @@ export default {
|
|||||||
height: 400px;
|
height: 400px;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 左侧表格区域撑满剩余空间可滚动（仅 share / related tab） */
|
/* 左侧表格区域撑满剩余空间可滚动 + 边框 */
|
||||||
.file-table-wrapper.scrolling {
|
.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;
|
flex: 1;
|
||||||
overflow-y: auto;
|
overflow-y: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 左侧文件元数据卡片 */
|
/* 搜索栏（共享文件 / 与我相关 tab） */
|
||||||
.file-meta-card {
|
.share-search-area {
|
||||||
margin-top: 12px;
|
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>
|
</style>
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user