|
|
@@ -133,14 +133,26 @@
|
|
|
|
|
|
<template #footer>
|
|
|
<div ref="paginationRef" class="pagination-bar">
|
|
|
- <AnalysisPagination
|
|
|
- :total="pagination.total"
|
|
|
+ <div class="pagination-total">共 {{ pagination.total }} 条</div>
|
|
|
+ <Select
|
|
|
+ :value="pagination.limit"
|
|
|
+ class="pagination-size-select"
|
|
|
+ :options="pageSizeOptions"
|
|
|
+ :getPopupContainer="getTableSettingPopupContainer"
|
|
|
+ @change="handlePageSizeSelect"
|
|
|
+ />
|
|
|
+ <Pagination
|
|
|
:current="pagination.page"
|
|
|
+ :total="pagination.total"
|
|
|
:page-size="pagination.limit"
|
|
|
- :page-size-options="pageSizeOptions"
|
|
|
- :loading="loading"
|
|
|
- @change="handlePaginationChange"
|
|
|
+ :show-size-changer="false"
|
|
|
+ @change="handlePageChange"
|
|
|
/>
|
|
|
+ <div class="pagination-jump">
|
|
|
+ <span>前往</span>
|
|
|
+ <Input v-model:value="jumpPage" class="pagination-jump-input" @pressEnter="handleJumpPage" />
|
|
|
+ <span>页</span>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</template>
|
|
|
</BasicModal>
|
|
|
@@ -149,8 +161,7 @@
|
|
|
<script lang="ts" setup>
|
|
|
import { computed, nextTick, onBeforeUnmount, ref, watch } from 'vue';
|
|
|
import type { Dayjs } from 'dayjs';
|
|
|
- import { Button, DatePicker, Input, Select } from 'ant-design-vue';
|
|
|
- import AnalysisPagination from '@/core/components/AnalysisPagination/src/AnalysisPagination.vue';
|
|
|
+ import { Button, DatePicker, Input, Pagination, Select } from 'ant-design-vue';
|
|
|
import { EmptyState } from '@/core/components/EmptyState';
|
|
|
import { BasicTable } from '@/core/components/Table';
|
|
|
import { BasicModal } from '@/core/components/Modal';
|
|
|
@@ -231,6 +242,38 @@
|
|
|
emit('page-change', page, pageSize);
|
|
|
};
|
|
|
|
|
|
+ /** 分页条与数据页保持一致:总条数 + 每页条数下拉 + 原生页码 + 前往页输入框 */
|
|
|
+ const jumpPage = ref(String(props.pagination.page || 1));
|
|
|
+
|
|
|
+ watch(
|
|
|
+ () => props.pagination.page,
|
|
|
+ (page) => {
|
|
|
+ jumpPage.value = String(page || 1);
|
|
|
+ },
|
|
|
+ );
|
|
|
+
|
|
|
+ const handlePageChange = (page: number) => {
|
|
|
+ handlePaginationChange(page, props.pagination.limit);
|
|
|
+ };
|
|
|
+
|
|
|
+ const handlePageSizeSelect = (value: any) => {
|
|
|
+ const pageSize = Number(value);
|
|
|
+ if (!Number.isFinite(pageSize) || pageSize === props.pagination.limit || props.loading) return;
|
|
|
+ emit('page-change', 1, pageSize);
|
|
|
+ };
|
|
|
+
|
|
|
+ const handleJumpPage = () => {
|
|
|
+ const maxPage = Math.max(1, Math.ceil(props.pagination.total / props.pagination.limit));
|
|
|
+ let target = Math.max(1, Number(jumpPage.value) || 1);
|
|
|
+ if (target > maxPage) {
|
|
|
+ target = maxPage;
|
|
|
+ }
|
|
|
+ jumpPage.value = String(target);
|
|
|
+ if (target !== props.pagination.page) {
|
|
|
+ handlePaginationChange(target, props.pagination.limit);
|
|
|
+ }
|
|
|
+ };
|
|
|
+
|
|
|
const handleTableChange = (_pagination: any, _filters: any, sorter: any) => {
|
|
|
const currentSorter = Array.isArray(sorter) ? sorter[0] : sorter;
|
|
|
if (!currentSorter?.order) return;
|
|
|
@@ -772,50 +815,57 @@
|
|
|
align-items: center;
|
|
|
justify-content: flex-end;
|
|
|
gap: 12px;
|
|
|
- color: #6b7280;
|
|
|
- font-size: 12px;
|
|
|
+ color: #98a2b3;
|
|
|
+ font-size: 11px;
|
|
|
flex-wrap: nowrap;
|
|
|
|
|
|
.pagination-total {
|
|
|
margin-right: 0;
|
|
|
- color: #64748b;
|
|
|
+ color: #98a2b3;
|
|
|
white-space: nowrap;
|
|
|
}
|
|
|
|
|
|
- .pagination-size {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- gap: 6px;
|
|
|
- white-space: nowrap;
|
|
|
+ .pagination-size-select {
|
|
|
+ width: 112px;
|
|
|
+ flex: 0 0 auto;
|
|
|
+ }
|
|
|
|
|
|
- .ant-select {
|
|
|
- width: 86px;
|
|
|
- }
|
|
|
+ .ant-pagination.ant-pagination {
|
|
|
+ margin: 0;
|
|
|
|
|
|
- .ant-select-selector {
|
|
|
+ .ant-pagination-item,
|
|
|
+ .ant-pagination-prev,
|
|
|
+ .ant-pagination-next,
|
|
|
+ .ant-pagination-jump-prev,
|
|
|
+ .ant-pagination-jump-next {
|
|
|
+ min-width: 26px;
|
|
|
+ height: 26px;
|
|
|
border-radius: 6px;
|
|
|
+ border-color: #e7ebf3;
|
|
|
+ line-height: 24px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .ant-pagination-item-active {
|
|
|
+ border-color: #2a50ec;
|
|
|
+ background: #eef2ff;
|
|
|
+
|
|
|
+ a {
|
|
|
+ color: #2a50ec;
|
|
|
+ font-weight: 600;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
|
|
|
- .pagination-actions {
|
|
|
+ .pagination-jump {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
- gap: 6px;
|
|
|
+ gap: 8px;
|
|
|
white-space: nowrap;
|
|
|
+ }
|
|
|
|
|
|
- .page-total {
|
|
|
- color: #6b7280;
|
|
|
- min-width: 28px;
|
|
|
- text-align: center;
|
|
|
- }
|
|
|
-
|
|
|
- .ant-btn {
|
|
|
- border-radius: 6px;
|
|
|
- }
|
|
|
-
|
|
|
- .ant-btn-primary {
|
|
|
- min-width: 36px;
|
|
|
- }
|
|
|
+ .pagination-jump-input {
|
|
|
+ width: 64px;
|
|
|
+ flex: 0 0 auto;
|
|
|
}
|
|
|
}
|
|
|
</style>
|