avue中tabel请求封装

1.封装请求hooks

返回reuqest，data,loading三个参数

import type { MaybeRef } from "@vueuse/core";
import type { Ref } from "vue";

export interface requestOptionTy {
  otherFunc: (...args) => void;
  otherQuery: any | Ref<any>;
  disableRequest: MaybeRef<boolean>;
  isMock: boolean;
  mockData: any;
  mockDelay: number;
  beforeRequest: (...args) => void;
}

/**
 * @param fetch onload时调用的方法
 * @param options 除开请求接口外额外的配置项
 *  beforeRequest 请求前执行的函数
 *  otherQuery 额外的请求参数
 *  otherFunc 请求方法之外执行的函数
 *  disableRequest 是否可以执行请求
 *  isMock 是否采用模拟数据
 *  mockData 模拟数据
 *  mockDelay 模拟数据延时
 *
 */

export default function <T extends Promise<BaseResType>>(
  fetch: ((current: number, size: number, params: object) => T) | null,
  options: Partial<requestOptionTy>
) {
  const data: Ref<PickOne<Awaited<T>, "data">> = ref();
  const loading: Ref<boolean> = ref(true);
  const _ = options;
  let queryCache = reactive({
    wheres: [],
  });
  const onLoad = async (page, params) => {
    if (params) {
      queryCache = params;
    }
    loading.value = true;
    const pageRow = unref(page);
    if (_?.isMock || fetch === null) {
      setTimeout(() => {
        data.value = _?.mockData;
        pageRow.total = _?.mockData.length ?? 0;
        loading.value = false;
      }, _?.mockDelay || 1000);
      return;
    }

    if (!unref(_?.disableRequest)) {
      if (_?.otherQuery && _?.otherQuery.parmasSearchWheres) {
        queryCache.wheres =
          queryCache.wheres && queryCache.wheres.length
            ? queryCache.wheres
            : [];
        //将搜索条件赋值
        _?.otherQuery.parmasSearchWheres.array.forEach((item) => {
          queryCache.wheres?.push(item);
        });
      }
      const _resParams = Object.assign(
        {},
        queryCache,
        unref(_?.otherQuery ?? {})
      );
      //请求执行之前方法
      _?.beforeRequest &&
        typeof _?.beforeRequest === "function" &&
        _?.beforeRequest(_resParams);

      const res = await fetch(pageRow.current, pageRow.size, _resParams);

      if (Object.keys(res?.data).length === 0) {
        data.value = [];
      } else {
        data.value = res?.data?.records ?? res?.data ?? [];
      }
      pageRow.total = res?.data?.total ?? 0;
      loading.value = false;
      _?.otherFunc && typeof _.otherFunc === "function" && _.otherFunc();
    }
  };

  return {
    onLoad,
    data,
    loading,
  };
}

2.对selectionList列表封装

import type { Ref } from "vue";
/**
 *
 * @param idKey id key值
 * @param selectionList 选择的checkbox
 * @param ids 选择对象的id集合 用，分割
 * @param selectionChange checkbox改变事件 数据源
 */

export default function (idKey = "id") {
  const selectionList: Ref<any[]> = ref([]);
  const selectionChange = (list: any[]) => {
    selectionList.value = list;
  };
  const ids = computed(() => {
    return selectionList.value.map((item) => item[idKey]).join(",");
  });
  const idsArr = computed(() => {
    return selectionList.value.map((item) => item[idKey]);
  });
  return {
    selectionList,
    selectionChange,
    ids,
    idsArr,
  };
}

3.搜索条件的封装

import type { Ref } from "vue";
import { cloneDeep } from "lodash-unified";

/**
 *
 * @param page 分页
 * @param request onload请求
 * @param paramsPreFixFn 请求参数前置处理
 * query 缓存的请求参数
 * searchChange 搜索条件变化重新请求
 * searchReset 重置搜索条件
 */

export default function (
  page,
  request: (...args) => void,
  paramsPreFixFn?: (...args) => void
) {
  const query = ref({});
  const searchChange = (params, done: () => void) => {
    const paramsClone = cloneDeep(params);
    paramsPreFixFn?.(paramsClone);
    query.value = paramsClone;
    page.value.currentPage = 1;
    request(page, paramsClone);
    done();
  };

  const searchReset = (params: any) => {
    const paramsClone = cloneDeep(params);
    paramsPreFixFn?.(paramsClone);
    query.value = {};
    page.value.currentPage = 1;
    request(page, paramsClone);
  };

  const refreshChange = () => {
    request(page, query.value);
  };
  return {
    query,
    searchChange,
    searchReset,
    refreshChange,
  };
}

针对于翻页的封装

export default function (request?: (...args: any) => void) {
  const page = ref({
    currentPage: 1,
    pageSize: 10,
    total: 0,
  });
  //改变页数
  const currentChange = (current: number, params: any) => {
    page.value.currentPage = current;
    if (request) request(page, params);
  };
  const sizeChange = (size: number, params: any) => {
    page.value.currentPage = 1;
    page.value.pageSize = size;
    if (request) request(page, params);
  };
  return {
    page,
    currentChange,
    sizeChange,
  };
}