## winB_Pagination 分页管理工厂函数说明 ### 概述 用于生成带 `winB_` 前缀的 Vue mixin,统一管理分页列表。支持两种模式:上拉加载更多(loadMore)与分页器(pager)。 ### 期望接口返回结构 - `code`: 业务码,应为 `200` - `rows`: 当前页数据数组 - `total`: 数据总条数 ### 选项(createPagination options) - **fetchData**: 必填,请求函数,入参为 `winB_QueryParams` - **defaultParams**: 初始查询参数(合并到 `winB_QueryParams`) - **mode**: `'loadMore' | 'pager'`,默认 `loadMore` - **pageSize**: 每页条数,默认 `10` - **autoLoad**: 组件创建时是否自动请求,默认 `true` ### 状态与计算属性 - **核心状态** - `winB_List`: 数据列表 - `winB_Loading`: 加载中标记 - `winB_Error`: 错误对象 - `winB_QueryParams`: `{ pageNum, pageSize, ...defaultParams }` - `winB_Pagination`: `{ total, currentPage, pageSize, totalPages, remainingItems }` - `winB_NoMore`: `loadMore` 模式下是否还有更多 - **计算属性** - `winB_HasData`: 列表是否有数据 - `winB_IsEmpty`: 非加载且列表为空 - `winB_CanLoadMore`: 仅在 `loadMore` 模式、未到尽头且未加载时为 `true` ### 主要方法 - **winB_GetList(reset = false)**: 拉取数据;`reset` 时清空并重置页码为 1,成功后更新列表与分页信息;在 `loadMore` 模式下计算 `winB_NoMore`。 - **winB_Refresh()**: 重置并刷新(等价于 `winB_GetList(true)`)。 - **winB_LoadMore()**: 上拉加载下一页(仅在 `winB_CanLoadMore` 时生效)。 - **winB_GoToPage(page)**: 分页器模式跳页(校验范围与重复页)。 - **winB_Reset()**: 重置所有分页相关状态与列表。 - **winB_UpdateParams(newParams)**: 合并查询参数并重置页码为 1,然后重置与拉取。 - **winB_FormatDate(dateString)**: 将日期格式化为 `YYYY.MM.DD`。 ### 生命周期 - **created**: 当 `autoLoad=true` 时自动调用 `winB_GetList()`。 ### 使用示例 ```js // 导入 import { createPagination } from "../../composables/winB_Pagination"; export default { mixins: [ createPagination({ fetchData: getProjectSchedule, mode: "loadMore", // 或 "pager" pageSize: 5, autoLoad: false, // 手动触发时设为 false }), ], created() { // 条件就绪后触发首次加载 this.winB_UpdateParams({ formedId: this.formedId }); }, onReachBottom() { this.winB_LoadMore(); }, }; ``` ```html ... ``` ### 小提示 - `fetchData` 应直接返回包含 `code/rows/total` 的对象。若接口结构不同,可在 `fetchData` 外层适配或在 `winB_GetList` 内做映射。 - 切换筛选条件时使用 `winB_UpdateParams`,它会自动重置页码并刷新。