From 903bbc07f4afdac9f40bc352684a94eba521a919 Mon Sep 17 00:00:00 2001 From: WindowBird <13870814+windows-bird@user.noreply.gitee.com> Date: Mon, 13 Oct 2025 17:02:25 +0800 Subject: [PATCH] =?UTF-8?q?=E5=88=86=E9=A1=B5=E5=87=BD=E6=95=B0=E6=96=87?= =?UTF-8?q?=E6=A1=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/winB_Pagination.md | 76 +++++++++++++++++++++++++++++++++++++++++ 1 file changed, 76 insertions(+) create mode 100644 docs/winB_Pagination.md diff --git a/docs/winB_Pagination.md b/docs/winB_Pagination.md new file mode 100644 index 0000000..2bd72e0 --- /dev/null +++ b/docs/winB_Pagination.md @@ -0,0 +1,76 @@ +## 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`,它会自动重置页码并刷新。 + +