统一管理后台分页样式
- 新建 AdminTablePagination 组件,统一分页 UI - 改造 6 个前端页面使用统一分页组件: - 管理员管理 - 用户管理 - 申诉管理 - 审计日志 - 公告管理 - 钱包流水 - 订单管理前后端完整改造: - 后端:添加 PaginatedResult 结构,支持 page/page_size 参数 - 前端:API 支持分页参数,页面使用统一分页组件 - 所有列表页分页样式统一为商品管理的 .table-pagination 设计 Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
@@ -0,0 +1,67 @@
|
||||
<script setup lang="ts">
|
||||
import { computed } from 'vue'
|
||||
|
||||
interface Props {
|
||||
currentPage: number
|
||||
pageSize: number
|
||||
total: number
|
||||
loading?: boolean
|
||||
}
|
||||
|
||||
interface Emits {
|
||||
(e: 'update:currentPage', value: number): void
|
||||
(e: 'update:pageSize', value: number): void
|
||||
(e: 'pageChange'): void
|
||||
}
|
||||
|
||||
const props = defineProps<Props>()
|
||||
const emit = defineEmits<Emits>()
|
||||
|
||||
const totalPages = computed(() => Math.max(1, Math.ceil(props.total / props.pageSize)))
|
||||
const currentCount = computed(() => {
|
||||
if (!props.total) return 0
|
||||
const start = (props.currentPage - 1) * props.pageSize
|
||||
return Math.min(props.pageSize, props.total - start)
|
||||
})
|
||||
|
||||
function handleSizeChange(size: number) {
|
||||
emit('update:pageSize', size)
|
||||
emit('update:currentPage', 1)
|
||||
emit('pageChange')
|
||||
}
|
||||
|
||||
function prevPage() {
|
||||
if (props.currentPage <= 1) return
|
||||
emit('update:currentPage', props.currentPage - 1)
|
||||
emit('pageChange')
|
||||
}
|
||||
|
||||
function nextPage() {
|
||||
if (props.currentPage >= totalPages.value) return
|
||||
emit('update:currentPage', props.currentPage + 1)
|
||||
emit('pageChange')
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="table-pagination">
|
||||
<span class="pagination-summary">当前页 {{ currentCount }} 条,共 {{ total }} 条</span>
|
||||
<div class="pagination-controls">
|
||||
<span class="pagination-size-label">每页</span>
|
||||
<el-select
|
||||
:model-value="pageSize"
|
||||
class="page-size-select"
|
||||
size="small"
|
||||
@update:model-value="handleSizeChange"
|
||||
>
|
||||
<el-option :value="10" label="10条" />
|
||||
<el-option :value="20" label="20条" />
|
||||
<el-option :value="50" label="50条" />
|
||||
<el-option :value="100" label="100条" />
|
||||
</el-select>
|
||||
<span class="pagination-page">{{ currentPage }}/{{ totalPages }}页</span>
|
||||
<el-button size="small" :disabled="currentPage <= 1 || loading" @click="prevPage">上页</el-button>
|
||||
<el-button size="small" :disabled="currentPage >= totalPages || loading" @click="nextPage">下页</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
Reference in New Issue
Block a user