From 513e0506225d841b40ed7b6136d6b08aafe5eacb Mon Sep 17 00:00:00 2001 From: "Mr.j" <2221464500@qq.com> Date: Wed, 13 Aug 2025 09:30:09 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E5=A4=8D=E8=AE=BE=E5=A4=87=E7=AE=A1?= =?UTF-8?q?=E7=90=86=E7=9B=B8=E5=85=B3=E5=8A=9F=E8=83=BD=E5=88=86=E9=A1=B5?= =?UTF-8?q?=E6=9F=A5=E8=AF=A2=E8=A1=A8=E6=A0=BC=E6=97=A0=E6=B3=95=E9=A1=BA?= =?UTF-8?q?=E5=88=A9=E4=B8=8B=E6=8B=89=E5=92=8C=E5=88=86=E9=A1=B5=E6=9D=A1?= =?UTF-8?q?=E4=B8=8D=E5=9B=BA=E5=AE=9A=E9=97=AE=E9=A2=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/apis/equipment/approval.ts | 28 +++- src/apis/equipment/procurement.ts | 4 +- src/types/auto-imports.d.ts | 2 +- src/types/components.d.ts | 62 --------- src/types/equipment.d.ts | 2 +- .../device-management/approval/index.vue | 85 ++++++++++-- .../device-management/index.vue | 124 +++++++++--------- .../device-management/procurement/index.vue | 85 ++++++++++-- 8 files changed, 235 insertions(+), 157 deletions(-) diff --git a/src/apis/equipment/approval.ts b/src/apis/equipment/approval.ts index 8ce061b..65d78e1 100644 --- a/src/apis/equipment/approval.ts +++ b/src/apis/equipment/approval.ts @@ -9,14 +9,38 @@ export const equipmentApprovalApi = { * 分页查询待审批的设备采购申请 */ getPendingApprovals(params: EquipmentApprovalListReq) { - return http.get('/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('/equipment/approval/pending', requestParams) }, /** * 分页查询已审批的设备采购申请 */ getApprovedApprovals(params: EquipmentApprovalListReq) { - return http.get('/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('/equipment/approval/approved', requestParams) }, /** diff --git a/src/apis/equipment/procurement.ts b/src/apis/equipment/procurement.ts index cae4d71..dd8b3f6 100644 --- a/src/apis/equipment/procurement.ts +++ b/src/apis/equipment/procurement.ts @@ -20,8 +20,8 @@ export const equipmentProcurementApi = { // 确保参数格式正确 const requestParams = { ...params, - // 确保分页参数存在 - page: params.page || 1, + // 直接使用 pageNum，因为后端分页器需要的是 pageNum 参数 + pageNum: params.pageNum || 1, pageSize: params.pageSize || 10, } diff --git a/src/types/auto-imports.d.ts b/src/types/auto-imports.d.ts index eab6be6..369aad4 100644 --- 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') } diff --git a/src/types/components.d.ts b/src/types/components.d.ts index 73dac61..7fa6b1b 100644 --- a/src/types/components.d.ts +++ b/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'] } } diff --git a/src/types/equipment.d.ts b/src/types/equipment.d.ts index 2e86b33..f5d7ca1 100644 --- a/src/types/equipment.d.ts +++ b/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 diff --git a/src/views/system-resource/device-management/approval/index.vue b/src/views/system-resource/device-management/approval/index.vue index 9de6c40..adf49b2 100644 --- a/src/views/system-resource/device-management/approval/index.vue +++ b/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 @@ + + +
+ +
@@ -249,19 +267,7 @@ const pagination = reactive({ showPageSize: true, showJumper: true, showTotal: (total: number) => `共 ${total} 条记录`, - 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) - } + pageSizeOptions: [10, 20, 50, 100] }) // 弹窗控制 @@ -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 { diff --git a/src/views/system-resource/device-management/index.vue b/src/views/system-resource/device-management/index.vue index dafb746..7e731a2 100644 --- a/src/views/system-resource/device-management/index.vue +++ b/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 @@ + + +
+ +
@@ -262,33 +279,7 @@ const pagination = reactive({ // 确保分页器完全可见 hideOnSinglePage: false, // 分页器大小 - 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) - } + size: 'default' }) // 弹窗控制 @@ -740,20 +731,20 @@ const handleTableChange = (pag: any) => { loadData(currentSearchParams.value) } -// 分页变化 - 已移至分页配置中处理 -// const handlePageChange = (page: number) => { -// console.log('页码变化:', page) -// pagination.current = page -// 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 handlePageSizeChange = (pageSize: number) => { + console.log('每页条数变化:', pageSize) + pagination.pageSize = pageSize + pagination.current = 1 // 重置到第一页 + loadData(currentSearchParams.value) +} @@ -1132,28 +1123,39 @@ onMounted(() => { } } - // 分页样式优化 - .arco-pagination { - margin-top: 24px; - justify-content: center; - padding: 16px 0; + // 分页器容器样式 - 固定在表格下方 + .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-item { - border-radius: 6px; - margin: 0 4px; + .arco-pagination { + margin: 0; - &.arco-pagination-item-active { - background: var(--color-primary); - border-color: var(--color-primary); + .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; } - } - - .arco-pagination-size-changer { - margin-left: 16px; - } - - .arco-pagination-jumper { - margin-left: 16px; } } diff --git a/src/views/system-resource/device-management/procurement/index.vue b/src/views/system-resource/device-management/procurement/index.vue index 2399f1e..b3f4431 100644 --- a/src/views/system-resource/device-management/procurement/index.vue +++ b/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 @@ + + +
+ +
@@ -277,19 +295,7 @@ const pagination = reactive({ showPageSize: true, showJumper: true, showTotal: (total: number) => `共 ${total} 条记录`, - 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) - } + pageSizeOptions: [10, 20, 50, 100] }) // 弹窗控制 @@ -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; + } + } + } } // 响应式设计