buddhism/composables/winB_Pagination.js
2025-09-22 17:14:53 +08:00

238 lines
6.0 KiB
JavaScript
Raw Permalink Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

//
// 使用示例
// import { createPagination } from "../../composables/winB_Pagination";
// mixins: [
// createPagination({
// fetchData: getProjectSchedule,
// mode: "loadMore",
// pageSize: 5,
// autoLoad: false, // 设置为 false不自动加载
// }),
// ],
// this.winB_UpdateParams({ formedId: this.formedId });启动
// onReachBottom() {
// this.winB_LoadMore();
// console.log("加载更多");
// },
// v-for="(item, index) in winB_List"
/**
* 分页管理工厂函数 (带winB_前缀)
* @param {Object} options - 配置选项
* @param {Function} options.fetchData - 获取数据的API函数
* @param {Object} options.defaultParams - 默认查询参数
* @param {string} options.mode - 分页模式:'loadMore' 或 'pager'
* @param {number} options.pageSize - 每页数量
* @param {boolean} options.autoLoad - 是否在创建时自动加载数据默认为true
* @returns {Object} Vue组件选项对象
*/
export function createPagination(options = {}) {
const {
fetchData,
defaultParams = {},
mode = "loadMore",
pageSize = 10,
autoLoad = true, // 新增参数,控制是否自动加载
} = options;
return {
data() {
return {
// 基础状态
winB_List: [],
winB_Loading: false,
winB_Error: null,
// 分页参数
winB_QueryParams: {
pageNum: 1,
pageSize,
...defaultParams,
},
// 分页信息
winB_Pagination: {
total: 0,
currentPage: 1,
pageSize,
totalPages: 0,
remainingItems: 0,
},
// 上拉加载相关
winB_NoMore: false,
};
},
computed: {
winB_HasData() {
return this.winB_List.length > 0;
},
winB_IsEmpty() {
return !this.winB_Loading && this.winB_List.length === 0;
},
winB_CanLoadMore() {
return mode === "loadMore" && !this.winB_NoMore && !this.winB_Loading;
},
},
methods: {
/**
* 获取数据
* @param {boolean} reset - 是否重置列表
*/
async winB_GetList(reset = false) {
if (this.winB_Loading) return;
if (reset) {
this.winB_List = [];
this.winB_QueryParams.pageNum = 1;
this.winB_NoMore = false;
}
this.winB_Loading = true;
this.winB_Error = null;
try {
const response = await fetchData(this.winB_QueryParams);
if (!response || response.code !== 200) {
throw new Error(response?.message || "获取数据失败");
}
const { rows = [], total = 0 } = response;
if (reset) {
this.winB_List = rows;
} else {
this.winB_List = [...this.winB_List, ...rows];
}
// 更新分页信息
this.winB_Pagination = {
total,
currentPage: this.winB_QueryParams.pageNum,
pageSize,
totalPages: Math.ceil(total / pageSize),
remainingItems: Math.max(
0,
total - this.winB_QueryParams.pageNum * pageSize,
),
};
// 检查是否还有更多数据
if (mode === "loadMore") {
this.winB_NoMore =
this.winB_QueryParams.pageNum * pageSize >= total;
console.log(
`noMore状态: ${this.winB_NoMore}, 当前页: ${this.winB_QueryParams.pageNum}, 每页: ${pageSize}, 总数: ${total}`,
);
}
console.log(
`获取数据成功: 第${this.winB_QueryParams.pageNum}页,共${rows.length}`,
);
} catch (err) {
console.error("获取数据失败:", err);
this.winB_Error = err;
// 显示错误提示
if (typeof uni !== "undefined") {
uni.showToast({
title: "数据加载失败",
icon: "none",
});
}
} finally {
this.winB_Loading = false;
}
},
/**
* 刷新数据
*/
winB_Refresh() {
this.winB_GetList(true);
},
/**
* 加载下一页(上拉加载模式)
*/
winB_LoadMore() {
if (!this.winB_CanLoadMore) return 0;
this.winB_QueryParams.pageNum++;
this.winB_GetList();
},
/**
* 跳转到指定页(分页器模式)
* @param {number} page - 目标页码
*/
winB_GoToPage(page) {
if (
page < 1 ||
page > this.winB_Pagination.totalPages ||
page === this.winB_QueryParams.pageNum
) {
return;
}
this.winB_QueryParams.pageNum = page;
this.winB_GetList(true);
},
/**
* 重置分页状态
*/
winB_Reset() {
this.winB_List = [];
this.winB_Loading = false;
this.winB_Error = null;
this.winB_NoMore = false;
this.winB_QueryParams.pageNum = 1;
this.winB_Pagination = {
total: 0,
currentPage: 1,
pageSize,
totalPages: 0,
};
},
/**
* 更新查询参数
* @param {Object} newParams - 新的查询参数
*/
winB_UpdateParams(newParams) {
this.winB_QueryParams = {
...this.winB_QueryParams,
...newParams,
pageNum: 1, // 重置页码
};
this.winB_Reset();
this.winB_GetList();
},
/**
* 格式化日期
* @param {string} dateString - 日期字符串
* @returns {string} 格式化后的日期
*/
winB_FormatDate(dateString) {
if (!dateString) return "未知";
const date = new Date(dateString);
return `${date.getFullYear()}.${String(date.getMonth() + 1).padStart(2, "0")}.${String(date.getDate()).padStart(2, "0")}`;
},
},
created() {
// 只有在 autoLoad 为 true 时才自动加载数据
if (autoLoad) {
this.winB_GetList();
}
},
};
}