This commit is contained in:
Mr.j 2025-08-12 14:26:05 +08:00
commit a790551325
4 changed files with 161 additions and 11 deletions

View File

@ -1,4 +1,4 @@
// @/apis/bussiness/index.ts - 商务数据库信息模块API
// @/apis/bussiness/index.ts - 智能商务API
import http from '@/utils/http'
import type {
FolderInfo,
@ -59,7 +59,9 @@ export function getFilesApi(params?: FileListParams) {
page: params?.page || 1,
pageSize: params?.pageSize || 10,
folderId: params?.folderId || '0',
fileName: params?.fileName
fileName: params?.fileName,
sortField: params?.sortField,
sortOrder: params?.sortOrder
}
})
}

View File

@ -31,6 +31,8 @@ export interface FileListParams {
pageSize?: number
folderId?: string
fileName?: string
sortField?: string
sortOrder?: string
}
/** 文件夹列表响应 */

View File

@ -1104,7 +1104,7 @@ export const systemRoutes: RouteRecordRaw[] = [
},
// ],
// },
// 商务数据库信息模块
// 智能商务模块
{
path: '/bussiness-knowledge',
name: 'bussinesskonwledge',
@ -1117,7 +1117,7 @@ export const systemRoutes: RouteRecordRaw[] = [
name: 'bussiness-knowledge',
component: () => import('@/views/bussiness-data/bussiness.vue'),
meta: {
title: '商务数据库信息',
title: '智能商务',
icon: 'info-circle',
hidden: false,
},

View File

@ -242,10 +242,42 @@
<div class="file-grid-container" v-if="currentFolderId && !loading">
<!-- 表头行 -->
<a-row class="table-header-row">
<a-col :span="10" class="table-column name-column">文件名</a-col>
<a-col :span="4" class="table-column type-column">类型</a-col>
<a-col :span="3" class="table-column size-column">大小</a-col>
<a-col :span="5" class="table-column time-column">修改时间</a-col>
<a-col :span="10" class="table-column name-column">
<div class="sortable-header" @click="handleSortChange('fileName')">
<span>文件名</span>
<div class="sort-indicator">
<div class="sort-arrow up" :class="{ active: sortField === 'file_name' && sortOrder === 'asc' }"></div>
<div class="sort-arrow down" :class="{ active: sortField === 'file_name' && sortOrder === 'desc' }"></div>
</div>
</div>
</a-col>
<a-col :span="4" class="table-column type-column">
<div class="sortable-header" @click="handleSortChange('fileType')">
<span>类型</span>
<div class="sort-indicator">
<div class="sort-arrow up" :class="{ active: sortField === 'file_type' && sortOrder === 'asc' }"></div>
<div class="sort-arrow down" :class="{ active: sortField === 'file_type' && sortOrder === 'desc' }"></div>
</div>
</div>
</a-col>
<a-col :span="3" class="table-column size-column">
<div class="sortable-header" @click="handleSortChange('fileSize')">
<span>大小</span>
<div class="sort-indicator">
<div class="sort-arrow up" :class="{ active: sortField === 'file_size' && sortOrder === 'asc' }"></div>
<div class="sort-arrow down" :class="{ active: sortField === 'file_size' && sortOrder === 'desc' }"></div>
</div>
</div>
</a-col>
<a-col :span="5" class="table-column time-column">
<div class="sortable-header" @click="handleSortChange('uploadTime')">
<span>修改时间</span>
<div class="sort-indicator">
<div class="sort-arrow up" :class="{ active: sortField === 'upload_time' && sortOrder === 'asc' }"></div>
<div class="sort-arrow down" :class="{ active: sortField === 'upload_time' && sortOrder === 'desc' }"></div>
</div>
</div>
</a-col>
<a-col :span="2" class="table-column action-column">操作</a-col>
</a-row>
@ -613,6 +645,18 @@ const fileCurrentPage = ref(1);
const filePageSize = ref(10);
const totalFiles = ref(0);
//
const sortField = ref('');
const sortOrder = ref('');
// ->
const sortFieldMap = {
'fileName': 'file_name',
'fileType': 'file_type',
'fileSize': 'file_size',
'uploadTime': 'upload_time'
};
//
const folderForm = reactive({
id: '',
@ -941,6 +985,9 @@ const handleFileSearch = () => {
console.log('文件搜索关键词:', fileSearchKeyword.value);
//
fileCurrentPage.value = 1;
//
sortField.value = '';
sortOrder.value = '';
console.log('重置文件页码为:', fileCurrentPage.value);
if (currentFolderId.value) {
loadFiles(currentFolderId.value);
@ -960,6 +1007,9 @@ const handleFileSearchInput = (value) => {
searchTimeout.value = setTimeout(() => {
console.log('=== 防抖文件搜索执行 ===');
fileCurrentPage.value = 1;
//
sortField.value = '';
sortOrder.value = '';
console.log('重置文件页码为:', fileCurrentPage.value);
if (currentFolderId.value) {
loadFiles(currentFolderId.value);
@ -976,6 +1026,9 @@ const handleFileSearchClear = () => {
console.log('清除文件搜索定时器');
}
fileCurrentPage.value = 1;
//
sortField.value = '';
sortOrder.value = '';
console.log('重置文件页码为:', fileCurrentPage.value);
if (currentFolderId.value) {
loadFiles(currentFolderId.value);
@ -985,12 +1038,20 @@ const handleFileSearchClear = () => {
const loadFiles = async (folderId) => {
try {
loading.value = true;
const res = await getFilesApi({
const apiParams = {
folderId: folderId,
page: fileCurrentPage.value,
pageSize: filePageSize.value,
fileName: fileSearchKeyword.value || undefined
});
};
//
if (sortField.value && sortOrder.value) {
apiParams.sortField = sortField.value;
apiParams.sortOrder = sortOrder.value;
}
const res = await getFilesApi(apiParams);
//
if (res.code === 200 && res.data) {
@ -1012,6 +1073,26 @@ const loadFiles = async (folderId) => {
}
};
//
const handleSortChange = (field) => {
const backendField = sortFieldMap[field];
if (!backendField) return;
//
if (sortField.value === backendField) {
sortOrder.value = sortOrder.value === 'asc' ? 'desc' : 'asc';
} else {
//
sortField.value = backendField;
sortOrder.value = 'desc';
}
//
if (currentFolderId.value) {
loadFiles(currentFolderId.value);
}
};
//
// const handleFolderClick = (folderId) => {
@ -1030,8 +1111,10 @@ const handleFolderSelect = (selectedKeys, info) => {
const folderId = selectedKeys[0];
if (currentFolderId.value !== folderId) {
fileCurrentPage.value = 1;
//
//
fileSearchKeyword.value = '';
sortField.value = '';
sortOrder.value = '';
}
currentFolderId.value = folderId;
loadFiles(folderId);
@ -1136,6 +1219,9 @@ const handleBreadcrumbClick = (index) => {
if (index === 0) {
// ""
currentFolderId.value = '0';
//
sortField.value = '';
sortOrder.value = '';
loadFiles('0');
} else {
// ID
@ -1146,6 +1232,9 @@ const handleBreadcrumbClick = (index) => {
const targetFolder = folderList.value.find(folder => folder.name === targetFolderName);
if (targetFolder) {
currentFolderId.value = targetFolder.id;
//
sortField.value = '';
sortOrder.value = '';
loadFiles(targetFolder.id);
}
}
@ -1307,6 +1396,9 @@ const refreshData = async () => {
//
searchKeyword.value = '';
currentPage.value = 1;
//
sortField.value = '';
sortOrder.value = '';
await initData();
if (currentFolderId.value) {
@ -3464,6 +3556,60 @@ onMounted(() => {
}
}
/* 可排序表头样式 */
.sortable-header {
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
cursor: pointer;
padding: 4px 8px;
border-radius: 4px;
transition: all 0.2s ease;
user-select: none;
}
.sortable-header:hover {
background: var(--color-fill-2);
color: var(--color-primary);
}
.sort-indicator {
display: flex;
flex-direction: column;
gap: 1px;
margin-left: 4px;
}
.sort-arrow {
width: 0;
height: 0;
border-left: 3px solid transparent;
border-right: 3px solid transparent;
transition: all 0.2s ease;
}
.sort-arrow.up {
border-bottom: 3px solid var(--color-text-4);
}
.sort-arrow.down {
border-top: 3px solid var(--color-text-4);
}
.sort-arrow.active {
border-bottom-color: var(--color-primary);
border-top-color: var(--color-primary);
}
.sortable-header:hover .sort-arrow.up {
border-bottom-color: var(--color-primary);
}
.sortable-header:hover .sort-arrow.down {
border-top-color: var(--color-primary);
}
/* 文件分页样式 */
.file-pagination {
position: absolute;