表格分页、筛选、查询

<el-pagination
    background
    v-model:current-page="pageData.current"   //和tableOperation文件联动，通用pageData
    v-model:page-size="pageData.size"
    :page-sizes="pageData.pageSizeOptions"
    layout="total, sizes, prev, pager, next, jumper"
    :total="pageData.total"
    @size-change="handleSizeChange"
    @current-change="handleCurrentChange"
/>

import { ref, reactive } from "vue";
import { useScrollRefresh } from "./useScrollRefresh";

/**
 * 表格操作通用 Composable
 * 包含搜索、分页、下拉筛选等通用逻辑
 */
export function useTableOperations() {
  // 搜索相关
  const search = ref("");

  // 下拉框筛选相关
  const dropdown = ref("");

  // 表格状态
  const tableLoading = ref(false);
  const tableData = ref<any[]>([]);

  // 分页数据
  const pageData = reactive({
    current: 1,
    size: 10,
    total: 0,
    pageSizeOptions: [10, 30, 50],
  });

  /**
   * 处理搜索
   * @param getTableDataFn 获取表格数据的函数
   */
  const handleSearch = (getTableDataFn: () => void, tableRef?: any) => {
    pageData.current = 1;
    getTableDataFn();
  };

  /**
   * 处理筛选变化
   * @param getTableDataFn 获取表格数据的函数
   */
  const handleFilterChange = (getTableDataFn: () => void, tableRef?: any) => {
    pageData.current = 1;
    getTableDataFn();
  };

  /**
   * 处理每页条数变化
   * @param val 每页条数
   * @param getTableDataFn 获取表格数据的函数
   */
  const handleSizeChange = (
    val: number,
    getTableDataFn: () => void,
    tableRef?: any
  ) => {
    pageData.current = 1;
    pageData.size = val;
    getTableDataFn();
  };

  /**
   * 处理当前页变化
   * @param val 当前页码
   * @param getTableDataFn 获取表格数据的函数
   */
  const handleCurrentChange = (
    val: number,
    getTableDataFn: () => void,
    tableRef?: any
  ) => {
    pageData.current = val;
    getTableDataFn();
  };

  /**
   * 重置搜索和筛选条件
   */
  const resetFilters = () => {
    search.value = "";
    dropdown.value = "";
    pageData.current = 1;
  };

  /**
   * 获取通用查询参数
   */
  const getQueryParams = (additionalParams: Record<string, any> = {}) => {
    return {
      current: pageData.current,
      size: pageData.size,
      search: search.value,
      dropdown: dropdown.value,
      ...additionalParams,
    };
  };

  return {
    // 响应式数据
    search,
    dropdown,
    tableLoading,
    tableData,
    pageData,
    // 方法
    handleSearch,
    handleFilterChange,
    handleSizeChange,
    handleCurrentChange,
    resetFilters,
    getQueryParams,
  };
}