修复设备管理相关功能分页查询表格无法顺利下拉和分页条不固定问题

src/apis/equipment/approval.ts

@@ -9,14 +9,38 @@ export const equipmentApprovalApi = {
    * 分页查询待审批的设备采购申请
    */
   getPendingApprovals(params: EquipmentApprovalListReq) {
-    return http.get<EquipmentApprovalResp[]>('/equipment/approval/pending', params)
+    // 确保分页参数格式正确，与设备采购模块保持一致
+    const requestParams = {
+      ...params,
+      // 直接使用 pageNum，因为后端分页器需要的是 pageNum 参数
+      pageNum: params.pageNum || 1,
+      pageSize: params.pageSize || 10,
+    }
+    
+    console.log('🔍 API - equipmentApprovalApi.getPendingApprovals 被调用')
+    console.log('🔍 API - 接收到的参数:', params)
+    console.log('🔍 API - 最终请求参数:', requestParams)
+    
+    return http.get<EquipmentApprovalResp[]>('/equipment/approval/pending', requestParams)
   },
 
   /**
    * 分页查询已审批的设备采购申请
    */
   getApprovedApprovals(params: EquipmentApprovalListReq) {
-    return http.get<EquipmentApprovalResp[]>('/equipment/approval/approved', params)
+    // 确保分页参数格式正确，与设备采购模块保持一致
+    const requestParams = {
+      ...params,
+      // 直接使用 pageNum，因为后端分页器需要的是 pageNum 参数
+      pageNum: params.pageNum || 1,
+      pageSize: params.pageSize || 10,
+    }
+    
+    console.log('🔍 API - equipmentApprovalApi.getApprovedApprovals 被调用')
+    console.log('🔍 API - 接收到的参数:', params)
+    console.log('🔍 API - 最终请求参数:', requestParams)
+    
+    return http.get<EquipmentApprovalResp[]>('/equipment/approval/approved', requestParams)
   },
 
   /**

src/apis/equipment/procurement.ts

@@ -20,8 +20,8 @@ export const equipmentProcurementApi = {
     // 确保参数格式正确
     const requestParams = {
       ...params,
-      // 确保分页参数存在
+      // 直接使用 pageNum，因为后端分页器需要的是 pageNum 参数
-      page: params.page || 1,
+      pageNum: params.pageNum || 1,
       pageSize: params.pageSize || 10,
     }
     

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')
 }

src/types/components.d.ts

@@ -7,69 +7,7 @@ export {}
 
 declare module 'vue' {
   export interface GlobalComponents {
-    ApprovalAssistant: typeof import('./../components/ApprovalAssistant/index.vue')['default']
-    ApprovalMessageItem: typeof import('./../components/NotificationCenter/ApprovalMessageItem.vue')['default']
-    Avatar: typeof import('./../components/Avatar/index.vue')['default']
-    Breadcrumb: typeof import('./../components/Breadcrumb/index.vue')['default']
-    CellCopy: typeof import('./../components/CellCopy/index.vue')['default']
-    Chart: typeof import('./../components/Chart/index.vue')['default']
-    ColumnSetting: typeof import('./../components/GiTable/src/components/ColumnSetting.vue')['default']
-    CronForm: typeof import('./../components/GenCron/CronForm/index.vue')['default']
-    CronModal: typeof import('./../components/GenCron/CronModal/index.vue')['default']
-    DateRangePicker: typeof import('./../components/DateRangePicker/index.vue')['default']
-    DayForm: typeof import('./../components/GenCron/CronForm/component/day-form.vue')['default']
-    FilePreview: typeof import('./../components/FilePreview/index.vue')['default']
-    GiCellAvatar: typeof import('./../components/GiCell/GiCellAvatar.vue')['default']
-    GiCellGender: typeof import('./../components/GiCell/GiCellGender.vue')['default']
-    GiCellStatus: typeof import('./../components/GiCell/GiCellStatus.vue')['default']
-    GiCellTag: typeof import('./../components/GiCell/GiCellTag.vue')['default']
-    GiCellTags: typeof import('./../components/GiCell/GiCellTags.vue')['default']
-    GiCodeView: typeof import('./../components/GiCodeView/index.vue')['default']
-    GiDot: typeof import('./../components/GiDot/index.tsx')['default']
-    GiEditTable: typeof import('./../components/GiEditTable/GiEditTable.vue')['default']
-    GiFooter: typeof import('./../components/GiFooter/index.vue')['default']
-    GiForm: typeof import('./../components/GiForm/src/GiForm.vue')['default']
-    GiIconBox: typeof import('./../components/GiIconBox/index.vue')['default']
-    GiIconSelector: typeof import('./../components/GiIconSelector/index.vue')['default']
-    GiIframe: typeof import('./../components/GiIframe/index.vue')['default']
-    GiOption: typeof import('./../components/GiOption/index.vue')['default']
-    GiOptionItem: typeof import('./../components/GiOptionItem/index.vue')['default']
-    GiPageLayout: typeof import('./../components/GiPageLayout/index.vue')['default']
-    GiSpace: typeof import('./../components/GiSpace/index.vue')['default']
-    GiSplitButton: typeof import('./../components/GiSplitButton/index.vue')['default']
-    GiSplitPane: typeof import('./../components/GiSplitPane/index.vue')['default']
-    GiSplitPaneFlexibleBox: typeof import('./../components/GiSplitPane/components/GiSplitPaneFlexibleBox.vue')['default']
-    GiSvgIcon: typeof import('./../components/GiSvgIcon/index.vue')['default']
-    GiTable: typeof import('./../components/GiTable/src/GiTable.vue')['default']
-    GiTag: typeof import('./../components/GiTag/index.tsx')['default']
-    GiThemeBtn: typeof import('./../components/GiThemeBtn/index.vue')['default']
-    HourForm: typeof import('./../components/GenCron/CronForm/component/hour-form.vue')['default']
-    Icon403: typeof import('./../components/icons/Icon403.vue')['default']
-    Icon404: typeof import('./../components/icons/Icon404.vue')['default']
-    Icon500: typeof import('./../components/icons/Icon500.vue')['default']
-    IconBorders: typeof import('./../components/icons/IconBorders.vue')['default']
-    IconTableSize: typeof import('./../components/icons/IconTableSize.vue')['default']
-    IconTreeAdd: typeof import('./../components/icons/IconTreeAdd.vue')['default']
-    IconTreeReduce: typeof import('./../components/icons/IconTreeReduce.vue')['default']
-    ImageImport: typeof import('./../components/ImageImport/index.vue')['default']
-    ImageImportWizard: typeof import('./../components/ImageImportWizard/index.vue')['default']
-    IndustrialImageList: typeof import('./../components/IndustrialImageList/index.vue')['default']
-    JsonPretty: typeof import('./../components/JsonPretty/index.vue')['default']
-    MinuteForm: typeof import('./../components/GenCron/CronForm/component/minute-form.vue')['default']
-    MonthForm: typeof import('./../components/GenCron/CronForm/component/month-form.vue')['default']
-    NotificationCenter: typeof import('./../components/NotificationCenter/index.vue')['default']
-    ParentView: typeof import('./../components/ParentView/index.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
-    SecondForm: typeof import('./../components/GenCron/CronForm/component/second-form.vue')['default']
-    SplitPanel: typeof import('./../components/SplitPanel/index.vue')['default']
-    TextCopy: typeof import('./../components/TextCopy/index.vue')['default']
-    TurbineGrid: typeof import('./../components/TurbineGrid/index.vue')['default']
-    UserSelect: typeof import('./../components/UserSelect/index.vue')['default']
-    Verify: typeof import('./../components/Verify/index.vue')['default']
-    VerifyPoints: typeof import('./../components/Verify/Verify/VerifyPoints.vue')['default']
-    VerifySlide: typeof import('./../components/Verify/Verify/VerifySlide.vue')['default']
-    WeekForm: typeof import('./../components/GenCron/CronForm/component/week-form.vue')['default']
-    YearForm: typeof import('./../components/GenCron/CronForm/component/year-form.vue')['default']
   }
 }

src/types/equipment.d.ts

@@ -23,7 +23,7 @@ export interface EquipmentPageQuery {
     invoice?: string
     barcode?: string
     importer?: string
-    page?: number // 当前页码 - 与后端参数保持一致
+    pageNum?: number // 当前页码 - 与后端分页器期望的参数名保持一致
     pageSize?: number // 每页大小
     orderBy?: string
     orderDirection?: string

src/views/system-resource/device-management/approval/index.vue

@@ -117,8 +117,9 @@
         :columns="columns"
         :data="tableData"
         :loading="loading"
-        :pagination="pagination"
+        :pagination="false"
         row-key="approvalId"
+        :scroll="{ x: 'max-content', y: 400 }"
         @change="handleTableChange"
       >
         <!-- 业务类型 -->
@@ -193,6 +194,23 @@
           </a-space>
         </template>
       </a-table>
+
+      <!-- 分页器 - 固定在表格下方 -->
+      <div class="pagination-container">
+        <a-pagination
+          v-model:current="pagination.current"
+          v-model:page-size="pagination.pageSize"
+          :total="pagination.total"
+          :show-total="true"
+          :show-jumper="true"
+          :show-page-size="true"
+          :page-size-options="[10, 20, 50, 100]"
+          :hide-on-single-page="false"
+          size="default"
+          @change="handlePageChange"
+          @page-size-change="handlePageSizeChange"
+        />
+      </div>
     </a-card>
 
     <!-- 审批详情弹窗 -->
@@ -249,19 +267,7 @@ const pagination = reactive<any>({
   showPageSize: true,
   showJumper: true,
   showTotal: (total: number) => `共 ${total} 条记录`,
-  pageSizeOptions: [10, 20, 50, 100], // 添加分页条数选项
+  pageSizeOptions: [10, 20, 50, 100]
-  onChange: (page: number, pageSize: number) => {
-    console.log('分页变化 - 页码:', page, '每页条数:', pageSize)
-    pagination.current = page
-    pagination.pageSize = pageSize
-    loadData(currentSearchParams.value)
-  },
-  onPageSizeChange: (pageSize: number) => {
-    console.log('每页条数变化:', pageSize)
-    pagination.pageSize = pageSize
-    pagination.current = 1 // 重置到第一页
-    loadData(currentSearchParams.value)
-  }
 })
 
 // 弹窗控制
@@ -570,6 +576,21 @@ const handleTableChange = (pag: any) => {
   loadData(currentSearchParams.value || {})
 }
 
+// 分页变化处理
+const handlePageChange = (page: number) => {
+  console.log('页码变化:', page)
+  pagination.current = page
+  loadData(currentSearchParams.value || {})
+}
+
+// 每页条数变化处理
+const handlePageSizeChange = (pageSize: number) => {
+  console.log('每页条数变化:', pageSize)
+  pagination.pageSize = pageSize
+  pagination.current = 1 // 重置到第一页
+  loadData(currentSearchParams.value || {})
+}
+
 // 标签页变化
 const handleTabChange = (key: string) => {
   activeTab.value = key
@@ -799,6 +820,42 @@ onMounted(() => {
     color: var(--color-text-4);
     font-style: italic;
   }
+
+  // 分页器容器样式 - 固定在表格下方
+  .pagination-container {
+    position: sticky;
+    bottom: 0;
+    background: white;
+    padding: 16px 24px;
+    border-top: 1px solid var(--color-border);
+    display: flex;
+    justify-content: flex-end;
+    align-items: center;
+    z-index: 10;
+    box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.06);
+    
+    .arco-pagination {
+      margin: 0;
+      
+      .arco-pagination-item {
+        border-radius: 6px;
+        margin: 0 4px;
+        
+        &.arco-pagination-item-active {
+          background: var(--color-primary);
+          border-color: var(--color-primary);
+        }
+      }
+      
+      .arco-pagination-size-changer {
+        margin-left: 16px;
+      }
+      
+      .arco-pagination-jumper {
+        margin-left: 16px;
+      }
+    }
+  }
   
   // 确保搜索区域有良好的对比度
   .approval-search-container {

src/views/system-resource/device-management/index.vue

@@ -117,9 +117,9 @@
         :columns="columns"
         :data="tableData"
         :loading="loading"
-        :pagination="pagination"
+        :pagination="false"
         row-key="equipmentId"
-        :scroll="{ x: 'max-content', y: 500 }"
+        :scroll="{ x: 'max-content', y: 400 }"
         :bordered="false"
         :stripe="true"
         size="medium"
@@ -209,6 +209,23 @@
           </a-space>
         </template>
       </a-table>
+
+      <!-- 分页器 - 固定在表格下方 -->
+      <div class="pagination-container">
+        <a-pagination
+          v-model:current="pagination.current"
+          v-model:page-size="pagination.pageSize"
+          :total="pagination.total"
+          :show-total="true"
+          :show-jumper="true"
+          :show-page-size="true"
+          :page-size-options="[10, 20, 50, 100]"
+          :hide-on-single-page="false"
+          size="default"
+          @change="handlePageChange"
+          @page-size-change="handlePageSizeChange"
+        />
+      </div>
     </a-card>
 
     <!-- 新增/编辑弹窗 -->
@@ -262,33 +279,7 @@ const pagination = reactive({
   // 确保分页器完全可见
   hideOnSinglePage: false,
   // 分页器大小
-  size: 'default',
+  size: 'default'
-  // 分页器位置
-  position: 'bottom',
-  // 分页事件处理
-  onChange: (page: number, pageSize: number) => {
-    console.log('🔄 分页变化事件触发:', { page, pageSize })
-    console.log('📊 变化前分页状态:', { 
-      current: pagination.current, 
-      pageSize: pagination.pageSize,
-      total: pagination.total 
-    })
-    
-    pagination.current = page
-    if (pageSize !== pagination.pageSize) {
-      pagination.pageSize = pageSize
-      pagination.current = 1 // 重置到第一页
-    }
-    
-    console.log('📊 变化后分页状态:', { 
-      current: pagination.current, 
-      pageSize: pagination.pageSize,
-      total: pagination.total 
-    })
-    
-    console.log('🚀 开始重新加载数据...')
-    loadData(currentSearchParams.value)
-  }
 })
 
 // 弹窗控制
@@ -740,20 +731,20 @@ const handleTableChange = (pag: any) => {
   loadData(currentSearchParams.value)
 }
 
-// 分页变化 - 已移至分页配置中处理
+// 分页变化处理
-// const handlePageChange = (page: number) => {
+const handlePageChange = (page: number) => {
-//   console.log('页码变化:', page)
+  console.log('页码变化:', page)
-//   pagination.current = page
+  pagination.current = page
-//   loadData(currentSearchParams.value)
+  loadData(currentSearchParams.value)
-// }
+}
 
-// 每页条数变化 - 已移至分页配置中处理
+// 每页条数变化处理
-// const handlePageSizeChange = (pageSize: number) => {
+const handlePageSizeChange = (pageSize: number) => {
-//   console.log('每页条数变化:', pageSize)
+  console.log('每页条数变化:', pageSize)
-//   pagination.pageSize = pageSize
+  pagination.pageSize = pageSize
-//   pagination.current = 1 // 重置到第一页
+  pagination.current = 1 // 重置到第一页
-//   loadData(currentSearchParams.value)
+  loadData(currentSearchParams.value)
-// }
+}
 
 
 
@@ -1132,28 +1123,39 @@ onMounted(() => {
     }
   }
 
-  // 分页样式优化
+  // 分页器容器样式 - 固定在表格下方
-  .arco-pagination {
+  .pagination-container {
-    margin-top: 24px;
+    position: sticky;
-    justify-content: center;
+    bottom: 0;
-    padding: 16px 0;
+    background: white;
+    padding: 16px 24px;
+    border-top: 1px solid var(--color-border);
+    display: flex;
+    justify-content: flex-end;
+    align-items: center;
+    z-index: 10;
+    box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.06);
     
-    .arco-pagination-item {
+    .arco-pagination {
-      border-radius: 6px;
+      margin: 0;
-      margin: 0 4px;
       
-      &.arco-pagination-item-active {
+      .arco-pagination-item {
-        background: var(--color-primary);
+        border-radius: 6px;
-        border-color: var(--color-primary);
+        margin: 0 4px;
+        
+        &.arco-pagination-item-active {
+          background: var(--color-primary);
+          border-color: var(--color-primary);
+        }
+      }
+      
+      .arco-pagination-size-changer {
+        margin-left: 16px;
+      }
+      
+      .arco-pagination-jumper {
+        margin-left: 16px;
       }
-    }
-    
-    .arco-pagination-size-changer {
-      margin-left: 16px;
-    }
-    
-    .arco-pagination-jumper {
-      margin-left: 16px;
     }
   }
 

src/views/system-resource/device-management/procurement/index.vue

@@ -116,9 +116,10 @@
         :columns="columns"
         :data="tableData"
         :loading="loading"
-        :pagination="pagination"
+        :pagination="false"
         :row-selection="rowSelection"
         row-key="equipmentId"
+        :scroll="{ x: 'max-content', y: 400 }"
         @change="handleTableChange"
       >
         <!-- 设备状态 -->
@@ -218,6 +219,23 @@
           </a-space>
         </template>
       </a-table>
+
+      <!-- 分页器 - 固定在表格下方 -->
+      <div class="pagination-container">
+        <a-pagination
+          v-model:current="pagination.current"
+          v-model:page-size="pagination.pageSize"
+          :total="pagination.total"
+          :show-total="true"
+          :show-jumper="true"
+          :show-page-size="true"
+          :page-size-options="[10, 20, 50, 100]"
+          :hide-on-single-page="false"
+          size="default"
+          @change="handlePageChange"
+          @page-size-change="handlePageSizeChange"
+        />
+      </div>
     </a-card>
 
     <!-- 新增/编辑弹窗 -->
@@ -277,19 +295,7 @@ const pagination = reactive<any>({
   showPageSize: true,
   showJumper: true,
   showTotal: (total: number) => `共 ${total} 条记录`,
-  pageSizeOptions: [10, 20, 50, 100], // 添加分页条数选项
+  pageSizeOptions: [10, 20, 50, 100]
-  onChange: (page: number, pageSize: number) => {
-    console.log('分页变化 - 页码:', page, '每页条数:', pageSize)
-    pagination.current = page
-    pagination.pageSize = pageSize
-    loadData(currentSearchParams.value)
-  },
-  onPageSizeChange: (pageSize: number) => {
-    console.log('每页条数变化:', pageSize)
-    pagination.pageSize = pageSize
-    pagination.current = 1 // 重置到第一页
-    loadData(currentSearchParams.value)
-  }
 })
 
 // 弹窗控制
@@ -717,6 +723,21 @@ const handleTableChange = (pag: any) => {
   loadData(currentSearchParams.value)
 }
 
+// 分页变化处理
+const handlePageChange = (page: number) => {
+  console.log('页码变化:', page)
+  pagination.current = page
+  loadData(currentSearchParams.value)
+}
+
+// 每页条数变化处理
+const handlePageSizeChange = (pageSize: number) => {
+  console.log('每页条数变化:', pageSize)
+  pagination.pageSize = pageSize
+  pagination.current = 1 // 重置到第一页
+  loadData(currentSearchParams.value)
+}
+
 // 新增
 const handleAdd = () => {
   modalMode.value = 'add'
@@ -1003,6 +1024,42 @@ onMounted(() => {
     color: var(--color-text-4);
     font-style: italic;
   }
+
+  // 分页器容器样式 - 固定在表格下方
+  .pagination-container {
+    position: sticky;
+    bottom: 0;
+    background: white;
+    padding: 16px 24px;
+    border-top: 1px solid var(--color-border);
+    display: flex;
+    justify-content: flex-end;
+    align-items: center;
+    z-index: 10;
+    box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.06);
+    
+    .arco-pagination {
+      margin: 0;
+      
+      .arco-pagination-item {
+        border-radius: 6px;
+        margin: 0 4px;
+        
+        &.arco-pagination-item-active {
+          background: var(--color-primary);
+          border-color: var(--color-primary);
+        }
+      }
+      
+      .arco-pagination-size-changer {
+        margin-left: 16px;
+      }
+      
+      .arco-pagination-jumper {
+        margin-left: 16px;
+      }
+    }
+  }
 }
 
 // 响应式设计