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

2025-08-12 14:18:00 +08:00 · 2025-08-12 14:18:00 +08:00 · b6cb51a5e9
parent 3657b1914c
commit b6cb51a5e9
5 changed files with 162 additions and 12 deletions
--- a/src/apis/bussiness/index.ts
+++ b/src/apis/bussiness/index.ts
@ -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
    }
  })
 }
--- a/src/apis/bussiness/type.ts
+++ b/src/apis/bussiness/type.ts
@ -31,6 +31,8 @@ export interface FileListParams {
  pageSize?: number
  folderId?: string
  fileName?: string
+  sortField?: string
+  sortOrder?: string
 }

 /** 文件夹列表响应 */
--- a/src/router/route.ts
+++ b/src/router/route.ts
@ -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,
        },
--- a/src/types/auto-imports.d.ts
+++ b/src/types/auto-imports.d.ts
@ -70,6 +70,6 @@ declare global {
 // for type re-export
 declare global {
  // @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')
 }
--- a/src/views/bussiness-data/bussiness.vue
+++ b/src/views/bussiness-data/bussiness.vue
@ -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;