商务数据库信息模块更名为智能商务,初步实现文件排序功能

This commit is contained in:
chabai 2025-08-12 14:18:00 +08:00
parent 3657b1914c
commit b6cb51a5e9
5 changed files with 162 additions and 12 deletions

View File

@ -1,4 +1,4 @@
// @/apis/bussiness/index.ts - 商务数据库信息模块API // @/apis/bussiness/index.ts - 智能商务API
import http from '@/utils/http' import http from '@/utils/http'
import type { import type {
FolderInfo, FolderInfo,
@ -59,7 +59,9 @@ export function getFilesApi(params?: FileListParams) {
page: params?.page || 1, page: params?.page || 1,
pageSize: params?.pageSize || 10, pageSize: params?.pageSize || 10,
folderId: params?.folderId || '0', 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 pageSize?: number
folderId?: string folderId?: string
fileName?: string fileName?: string
sortField?: string
sortOrder?: string
} }
/** 文件夹列表响应 */ /** 文件夹列表响应 */

View File

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

View File

@ -70,6 +70,6 @@ declare global {
// for type re-export // for type re-export
declare global { declare global {
// @ts-ignore // @ts-ignore
export type { Component, ComponentPublicInstance, ComputedRef, ExtractDefaultPropTypes, ExtractPropTypes, ExtractPublicPropTypes, InjectionKey, PropType, Ref, VNode, WritableComputedRef } from 'vue' export type { Component, ComponentPublicInstance, ComputedRef, DirectiveBinding, ExtractDefaultPropTypes, ExtractPropTypes, ExtractPublicPropTypes, InjectionKey, PropType, Ref, MaybeRef, MaybeRefOrGetter, VNode, WritableComputedRef } from 'vue'
import('vue') import('vue')
} }

View File

@ -242,10 +242,42 @@
<div class="file-grid-container" v-if="currentFolderId && !loading"> <div class="file-grid-container" v-if="currentFolderId && !loading">
<!-- 表头行 --> <!-- 表头行 -->
<a-row class="table-header-row"> <a-row class="table-header-row">
<a-col :span="10" class="table-column name-column">文件名</a-col> <a-col :span="10" class="table-column name-column">
<a-col :span="4" class="table-column type-column">类型</a-col> <div class="sortable-header" @click="handleSortChange('fileName')">
<a-col :span="3" class="table-column size-column">大小</a-col> <span>文件名</span>
<a-col :span="5" class="table-column time-column">修改时间</a-col> <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-col :span="2" class="table-column action-column">操作</a-col>
</a-row> </a-row>
@ -613,6 +645,18 @@ const fileCurrentPage = ref(1);
const filePageSize = ref(10); const filePageSize = ref(10);
const totalFiles = ref(0); 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({ const folderForm = reactive({
id: '', id: '',
@ -941,6 +985,9 @@ const handleFileSearch = () => {
console.log('文件搜索关键词:', fileSearchKeyword.value); console.log('文件搜索关键词:', fileSearchKeyword.value);
// //
fileCurrentPage.value = 1; fileCurrentPage.value = 1;
//
sortField.value = '';
sortOrder.value = '';
console.log('重置文件页码为:', fileCurrentPage.value); console.log('重置文件页码为:', fileCurrentPage.value);
if (currentFolderId.value) { if (currentFolderId.value) {
loadFiles(currentFolderId.value); loadFiles(currentFolderId.value);
@ -960,6 +1007,9 @@ const handleFileSearchInput = (value) => {
searchTimeout.value = setTimeout(() => { searchTimeout.value = setTimeout(() => {
console.log('=== 防抖文件搜索执行 ==='); console.log('=== 防抖文件搜索执行 ===');
fileCurrentPage.value = 1; fileCurrentPage.value = 1;
//
sortField.value = '';
sortOrder.value = '';
console.log('重置文件页码为:', fileCurrentPage.value); console.log('重置文件页码为:', fileCurrentPage.value);
if (currentFolderId.value) { if (currentFolderId.value) {
loadFiles(currentFolderId.value); loadFiles(currentFolderId.value);
@ -976,6 +1026,9 @@ const handleFileSearchClear = () => {
console.log('清除文件搜索定时器'); console.log('清除文件搜索定时器');
} }
fileCurrentPage.value = 1; fileCurrentPage.value = 1;
//
sortField.value = '';
sortOrder.value = '';
console.log('重置文件页码为:', fileCurrentPage.value); console.log('重置文件页码为:', fileCurrentPage.value);
if (currentFolderId.value) { if (currentFolderId.value) {
loadFiles(currentFolderId.value); loadFiles(currentFolderId.value);
@ -985,12 +1038,20 @@ const handleFileSearchClear = () => {
const loadFiles = async (folderId) => { const loadFiles = async (folderId) => {
try { try {
loading.value = true; loading.value = true;
const res = await getFilesApi({ const apiParams = {
folderId: folderId, folderId: folderId,
page: fileCurrentPage.value, page: fileCurrentPage.value,
pageSize: filePageSize.value, pageSize: filePageSize.value,
fileName: fileSearchKeyword.value || undefined 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) { 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) => { // const handleFolderClick = (folderId) => {
@ -1030,8 +1111,10 @@ const handleFolderSelect = (selectedKeys, info) => {
const folderId = selectedKeys[0]; const folderId = selectedKeys[0];
if (currentFolderId.value !== folderId) { if (currentFolderId.value !== folderId) {
fileCurrentPage.value = 1; fileCurrentPage.value = 1;
// //
fileSearchKeyword.value = ''; fileSearchKeyword.value = '';
sortField.value = '';
sortOrder.value = '';
} }
currentFolderId.value = folderId; currentFolderId.value = folderId;
loadFiles(folderId); loadFiles(folderId);
@ -1136,6 +1219,9 @@ const handleBreadcrumbClick = (index) => {
if (index === 0) { if (index === 0) {
// "" // ""
currentFolderId.value = '0'; currentFolderId.value = '0';
//
sortField.value = '';
sortOrder.value = '';
loadFiles('0'); loadFiles('0');
} else { } else {
// ID // ID
@ -1146,6 +1232,9 @@ const handleBreadcrumbClick = (index) => {
const targetFolder = folderList.value.find(folder => folder.name === targetFolderName); const targetFolder = folderList.value.find(folder => folder.name === targetFolderName);
if (targetFolder) { if (targetFolder) {
currentFolderId.value = targetFolder.id; currentFolderId.value = targetFolder.id;
//
sortField.value = '';
sortOrder.value = '';
loadFiles(targetFolder.id); loadFiles(targetFolder.id);
} }
} }
@ -1307,6 +1396,9 @@ const refreshData = async () => {
// //
searchKeyword.value = ''; searchKeyword.value = '';
currentPage.value = 1; currentPage.value = 1;
//
sortField.value = '';
sortOrder.value = '';
await initData(); await initData();
if (currentFolderId.value) { 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 { .file-pagination {
position: absolute; position: absolute;