minnan-website/src/composeable/SimplePagerDataLoader.ts

import { watch, ref, computed, type Ref } from "vue"
import type { ILoaderCommon, LoaderLoadType } from "./LoaderCommon";

export interface ISimplePageListLoader<T, P> extends ILoaderCommon<P> {
  list: Ref<T[]>;
  page: Ref<number>;
  next: () => Promise<void>;
  prev: () => Promise<void>;
  total: Ref<number>;
  totalPages: Ref<number>;
}

/**
 * 简单分页数据封装。
 * 
 * 该封装了分页数据的加载、分页、上一页、下一页等功能。当页码发生变化时，会自动调用加载函数。
 * 简单分页同时只能显示一页数据，重新加载会覆盖之前的数据。
 * 
 * 使用示例：
 * ```ts
 * const { data, page, total, loading } = useSimplePagerDataLoader(10, async (page, pageSize) => {
 *   const res = await fetch(`/api/data?page=${page}&pageSize=${pageSize}`);
 *   const data = await res.json();  
 *   return {
 *     data,
 *     page: res.page,
 *     total: res.total,
 *   };
 * });
 * ```
 *
 * @param pageSize 一页的数量
 * @param loader 加载函数
 * @returns 
 */
export function useSimplePagerDataLoader<T, P = any>(
  pageSize: number, 
  loader: (page: number, pageSize: number, params?: P) => Promise<{
    data: T[],
    total: number,
  }>)  : ISimplePageListLoader<T, P>
{
  const page = ref(0);
  const list = ref<T[]>([]) as Ref<T[]>;
  const total = ref(0);
  const totalPages = computed(() => Math.ceil(total.value / pageSize));
  const loadStatus = ref<LoaderLoadType>('loading');
  const loadError = ref('');
  
  watch(page, async () => {
    await loadData(lastParams, false);
  });

  let lastParams: P | undefined;
  let loading = false;

  async function loadData(params?: P, refresh: boolean = false) {
    if (loading) 
      return;
    if (params)
      lastParams = params;
    if (refresh) {
      page.value = 1;
    }
    list.value = []; 
    loadStatus.value = 'loading';
    loading = true;

    try {
      const res = (await loader(page.value, pageSize, lastParams));
      list.value = list.value.concat(res.data);
      total.value = res.total;
      loadStatus.value = res.data.length > 0 ? 'finished' : 'nomore';
      loadError.value = '';
      loading = false;
    } catch(e) {
      loadError.value = '' + e;
      loadStatus.value = 'error';
      loading = false;
    }
  }
  /**
   * 下一页
   */
  async function next() {
    if (page.value > total.value)
      return;
    page.value++;
    await loadData(lastParams, false);
  }
  /**
   * 上一页
   */
  async function prev() {
    if (page.value <= 1)
      return;   
    page.value--;
    await loadData(lastParams, false);
  }

  return {
    loadData,
    next,
    prev,
    /**
     * 数据
     */
    list,
    /**
     * 当前页码
     */
    page,
    /**
     * 总数据条数
     */
    total,
    /**
     * 总页数
     */
    totalPages,
    loadError,
    loadStatus,
  }
}