import { defineComponent, h, onMounted, onUnmounted, ref } from "vue";
|
import { useBrowser, useConfig, useCore } from "../../hooks";
|
|
export default defineComponent({
|
name: "cl-pagination",
|
|
setup(_, { expose }) {
|
const { crud, mitt } = useCore();
|
const { style } = useConfig();
|
const browser = useBrowser();
|
|
// 总数
|
const total = ref(0);
|
|
// 当前页数
|
const currentPage = ref(1);
|
|
// 每页大小
|
const pageSize = ref(20);
|
|
// 页数发生变化
|
function onCurrentChange(index: number) {
|
crud.refresh({
|
page: index
|
});
|
}
|
|
// 条目发生变化
|
function onSizeChange(size: number) {
|
crud.refresh({
|
page: 1,
|
size
|
});
|
}
|
|
// 设置分页信息
|
function setPagination(res: obj) {
|
if (res) {
|
currentPage.value = res.currentPage || res.page || 1;
|
pageSize.value = res.pageSize || res.size || 20;
|
total.value = res.total || 0;
|
crud.params.size = pageSize.value;
|
}
|
}
|
|
// 数据刷新
|
function onRefresh(res: ClCrud.Response["page"]) {
|
setPagination(res.pagination);
|
}
|
|
// 监听刷新事件
|
onMounted(() => {
|
mitt.on("crud.refresh", onRefresh);
|
});
|
|
// 移除监听事件
|
onUnmounted(() => {
|
mitt.off("crud.refresh", onRefresh);
|
});
|
|
expose({
|
total,
|
currentPage,
|
pageSize,
|
setPagination
|
});
|
|
return () => {
|
return h(
|
<el-pagination
|
class="cl-pagination"
|
size={browser.isMini ? 'small' : style.size}
|
background
|
page-sizes={[10, 20, 30, 40, 50, 100]}
|
pager-count={browser.isMini ? 5 : 7}
|
layout={
|
browser.isMini ? "total, pager" : "total, sizes, prev, pager, next, jumper"
|
}
|
/>,
|
{
|
onSizeChange,
|
onCurrentChange,
|
total: total.value,
|
currentPage: currentPage.value,
|
pageSize: pageSize.value
|
}
|
);
|
};
|
}
|
});
|
