125 lines
2.9 KiB
Vue
125 lines
2.9 KiB
Vue
<script setup lang="ts">
|
||
import { onMounted, reactive, ref, watch } from 'vue';
|
||
|
||
import { ElEmpty, ElPagination } from 'element-plus';
|
||
|
||
import { api } from '#/api/request';
|
||
|
||
interface PageDataProps {
|
||
pageUrl: string;
|
||
pageSize?: number;
|
||
pageSizes?: number[];
|
||
extraQueryParams?: Record<string, any>;
|
||
}
|
||
|
||
const props = withDefaults(defineProps<PageDataProps>(), {
|
||
pageSize: 10,
|
||
pageSizes: () => [10, 20, 50, 100],
|
||
extraQueryParams: () => ({}),
|
||
});
|
||
|
||
// 响应式数据
|
||
const pageList = ref([]);
|
||
const loading = ref(false);
|
||
const queryParams = ref({});
|
||
|
||
const pageInfo = reactive({
|
||
pageNumber: 1,
|
||
pageSize: props.pageSize,
|
||
total: 0,
|
||
});
|
||
|
||
// 模拟 API 调用 - 这里需要根据你的实际 API 调用方式调整
|
||
const doGet = async (params: any) => {
|
||
loading.value = true;
|
||
try {
|
||
// 这里替换为你的实际 API 调用
|
||
// 例如：return await api.get(props.pageUrl, { params })
|
||
const response = await api.get(`${props.pageUrl}`, {
|
||
params,
|
||
});
|
||
const data = await response.data;
|
||
return { data };
|
||
} finally {
|
||
loading.value = false;
|
||
}
|
||
};
|
||
|
||
// 获取页面数据
|
||
const getPageList = async () => {
|
||
try {
|
||
const res = await doGet({
|
||
pageNumber: pageInfo.pageNumber,
|
||
pageSize: pageInfo.pageSize,
|
||
...props.extraQueryParams,
|
||
...queryParams.value,
|
||
});
|
||
pageList.value = res.data?.records || [];
|
||
pageInfo.total = res.data?.totalRow || 0;
|
||
} catch (error) {
|
||
console.error('get data error:', error);
|
||
pageList.value = [];
|
||
pageInfo.total = 0;
|
||
}
|
||
};
|
||
|
||
// 分页事件处理
|
||
const handleSizeChange = (newSize: number) => {
|
||
pageInfo.pageSize = newSize;
|
||
pageInfo.pageNumber = 1; // 重置到第一页
|
||
};
|
||
|
||
const handleCurrentChange = (newPage: number) => {
|
||
pageInfo.pageNumber = newPage;
|
||
};
|
||
|
||
// 暴露给父组件的方法 (替代 useImperativeHandle)
|
||
const setQuery = (newQueryParams: string) => {
|
||
pageInfo.pageNumber = 1;
|
||
pageInfo.pageSize = props.pageSize;
|
||
queryParams.value = newQueryParams;
|
||
getPageList();
|
||
};
|
||
|
||
// 暴露方法给父组件
|
||
defineExpose({
|
||
setQuery,
|
||
});
|
||
|
||
// 监听器
|
||
watch(
|
||
[() => pageInfo.pageNumber, () => pageInfo.pageSize],
|
||
() => {
|
||
getPageList();
|
||
},
|
||
{ deep: true },
|
||
);
|
||
|
||
// 生命周期
|
||
onMounted(() => {
|
||
getPageList();
|
||
});
|
||
</script>
|
||
|
||
<template>
|
||
<div class="page-data-container" v-loading="loading">
|
||
<template v-if="pageList.length > 0">
|
||
<div>
|
||
<slot :page-list="pageList"></slot>
|
||
</div>
|
||
<div v-if="pageInfo.total > pageInfo.pageSize" class="mx-auto mt-8 w-fit">
|
||
<ElPagination
|
||
v-model:current-page="pageInfo.pageNumber"
|
||
v-model:page-size="pageInfo.pageSize"
|
||
:total="pageInfo.total"
|
||
:page-sizes="pageSizes"
|
||
layout="total, sizes, prev, pager, next, jumper"
|
||
@size-change="handleSizeChange"
|
||
@current-change="handleCurrentChange"
|
||
/>
|
||
</div>
|
||
</template>
|
||
<ElEmpty image="/empty.png" v-else />
|
||
</div>
|
||
</template>
|