77 lines
2.8 KiB
Markdown
77 lines
2.8 KiB
Markdown
|
## 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
|
|||
|
|
<!-- 列表渲染 -->
|
|||
|
|
<view v-for="(item, index) in winB_List" :key="index">...</view>
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
### 小提示
|
|||
|
|
- `fetchData` 应直接返回包含 `code/rows/total` 的对象。若接口结构不同，可在 `fetchData` 外层适配或在 `winB_GetList` 内做映射。
|
|||
|
|
- 切换筛选条件时使用 `winB_UpdateParams`，它会自动重置页码并刷新。
|
|||
|
|
|
|||
|
|
|