统一管理后台分页样式
- 新建 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:
@@ -1,17 +1,34 @@
|
||||
<script setup lang="ts">
|
||||
import { computed, ref } from 'vue'
|
||||
import { computed, onMounted, ref } from 'vue'
|
||||
|
||||
import { fetchAdminOrders, type Order } from '@/features/orders'
|
||||
import { useAdminTable } from '@/features/admin/composables/useAdminTable'
|
||||
import { handoffStatusLabel, orderStatusLabel, settlementStatusLabel } from '@/utils/statusLabels'
|
||||
import { formatDateTime } from '@/utils/time'
|
||||
import AdminTablePagination from '../components/AdminTablePagination.vue'
|
||||
|
||||
const status = ref('')
|
||||
const loading = ref(false)
|
||||
const orders = ref<Order[]>([])
|
||||
const total = ref(0)
|
||||
const currentPage = ref(1)
|
||||
const currentPageSize = ref(20)
|
||||
|
||||
const { loading, data: orders, load: loadOrders } = useAdminTable<Order[]>({
|
||||
fetchFn: fetchAdminOrders,
|
||||
initialData: [],
|
||||
})
|
||||
onMounted(loadOrders)
|
||||
|
||||
async function loadOrders() {
|
||||
loading.value = true
|
||||
try {
|
||||
const result = await fetchAdminOrders(currentPage.value, currentPageSize.value)
|
||||
orders.value = result.items
|
||||
total.value = result.total
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
async function handlePageChange() {
|
||||
await loadOrders()
|
||||
}
|
||||
|
||||
const filteredOrders = computed(() => {
|
||||
if (!status.value) return orders.value
|
||||
@@ -74,5 +91,14 @@ const filteredOrders = computed(() => {
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<AdminTablePagination
|
||||
v-if="total > 0"
|
||||
v-model:current-page="currentPage"
|
||||
v-model:page-size="currentPageSize"
|
||||
:total="total"
|
||||
:loading="loading"
|
||||
@page-change="handlePageChange"
|
||||
/>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
Reference in New Issue
Block a user