列表请求hooks

7 阅读1分钟
import { ref, reactive } from 'vue';
import { cloneDeep } from 'lodash';

export default () => {
  /* 表格数据*/
  const tableData = ref([]);
  const tableLoading = ref(false);
  /* 筛选参数*/
  const filterParams = ref({});
  /* 点击搜索后缓存筛选参数*/
  const cacheFilterParams = ref({});
  /* 选择行*/
  const selectedKeys = ref([]);
  /* 分页参数*/
  const page = reactive({
    page: 1,
    pageSize: 10,
    total: 0,
  });
  /* 选择行配置*/
  const rowSelection = reactive({
    type: 'checkbox',
    showCheckedAll: true,
    onlyCurrent: true,
  });
  /* 搜索*/
  const search = (getList) => {
    page.page = 1;
    cacheFilterParams.value = cloneDeep(filterParams.value);
    getList();
  };

  /* 搜索*/
  const reset = (getList) => {
    filterParams.value = {};
    search(getList);
  };

  const getApiList = (api, searchParams = {}, callback) => {
    tableLoading.value = true;
    api(searchParams)
      .then((res) => {
        callback(res);
      })
      .finally(() => {
        tableLoading.value = false;
      });
  };

  return {
    rowSelection,
    filterParams,
    cacheFilterParams,
    selectedKeys,
    search,
    reset,
    getApiList,
    tableData,
    tableLoading,
    page,
  };
};