WholeProcessPlatform/frontend/src/components/BasicTable/index.vue

<template>
  <a-table
    size="small"
    :loading="loading"
    :row-selection="enableRowSelection ? rowSelection : undefined"
    :data-source="tableData"
    :columns="columns"
    :pagination="paginationConfig"
    :scroll="scrollConfig "
    :row-key="rowKey"
    @change="handleTableChange"
  >
    <!-- 透传插槽，支持自定义列内容 -->
    <template v-for="slot in Object.keys($slots)" #[slot]="scope" :key="slot">
      <slot :name="slot" v-bind="scope"></slot>
    </template>
  </a-table>
</template>

<script setup lang="ts">
import { ref, computed, onMounted, watch } from "vue";

// --- Types ---
interface Props {
  columns: any[];

  scrollY?: string | number;
  // 请求数据的函数，由父组件传入
  listUrl: (params: any) => Promise<any>;
  data?: any[];
  // 是否开启行选择
  enableRowSelection?: boolean;
  // 行数据的 Key，用来优化 Table 的渲染
  rowKey?: string;
  // 外部传入的搜索/过滤参数，变化时会自动触发刷新
  searchParams?: Record<string, any>;
  // 默认每页显示数量
  defaultPageSize?: number;
  getCheckboxProps?: (record: any) => any;
  transformData?: (res: any) => { records: any[]; total: number };
}

const props = withDefaults(defineProps<Props>(), {
  enableRowSelection: false,
  rowKey: "id",
  data: () => ([]),
  searchParams: () => ({}),
  defaultPageSize: 20,
  getCheckboxProps: undefined,
  transformData: undefined,
});

const emit = defineEmits<{
  // 每次数据请求后，向父组件返回当前的查询参数和数据结果
  (e: "data-loaded", params: any, data: any): void;
  // 选中项变化
  (e: "selection-change", selectedRowKeys: string[], selectedRows: any[]): void;
}>();

// --- State ---
const loading = ref(false);
const tableData = ref<any[]>([]);
const total = ref(0);
const page = ref(1);
const size = ref(props.defaultPageSize);
const selectedRowKeys = ref<string[]>([]);
const selectedRows = ref<any[]>([]);
//保存最后一次使用的 filter
const lastFilter = ref<Record<string, any> | undefined>(undefined);


// 计算表格滚动高度
const scrollConfig = computed(() => ({
  x: 'max-content',
  y: props.scrollY,   // 注意：如果 scrollY 是 undefined，则不会启用垂直滚动
}))

// --- Row Selection ---
const rowSelection = computed(() => ({
  selectedRowKeys: selectedRowKeys.value,
  onChange: (keys: string[], rows: any[]) => {
    selectedRowKeys.value = keys;
    selectedRows.value = rows;
    emit("selection-change", keys, rows);
  },
  getCheckboxProps: props.getCheckboxProps ? props.getCheckboxProps : (record: any) => ({})
}));

// --- Pagination Config ---
const paginationConfig = computed(() => ({
  total: total.value,
  current: page.value,
  pageSize: size.value,
  showSizeChanger: true,
  showQuickJumper: true,
  showTotal: (total: number) => `共 ${total} 条`,
  pageSizeOptions: ["20", "50", "100"],
}));

// --- Methods ---

/**
 * 获取列表数据
 * @param extraParams 额外的临时参数（可选）
 */
const getList = async (filter?: Record<string, any>) => {
  if(props.data.length > 0) return
  loading.value = true;
  tableData.value = [];
  total.value = 0;
  // 如果传入了新 filter，则更新；否则保留旧的
  if (filter !== undefined) {
    lastFilter.value = filter;
  }
  try {
    // 合并基础分页参数、外部搜索参数和临时参数
    const params = {
      ...props.searchParams,
      skip: page.value,
      take: size.value,
      filter: lastFilter.value,
      
      // 如果后端需要 skip/take 格式，可以在此转换
      // skip: (page.value - 1) * size.value,
      // take: size.value,
    };

    const res = await props.listUrl(params);
    let records: any[] = [];
    let totalCount: number = 0;

    // [!code ++] 核心逻辑：如果父组件传入了 transformData，则使用父组件的逻辑
    if (props.transformData) {
      const result = props.transformData(res);
      records = result.records || [];
      totalCount = result.total || 0;
    } else {
      // [!code ++] 否则使用默认逻辑
      records = res?.data?.records || res?.data || [];
      totalCount = res?.data?.total || res?.total || 0;
    }

    tableData.value = records;
    total.value = totalCount;

    // 向父组件暴露当前请求参数和结果
    emit("data-loaded", params, { records, total: totalCount });
    
  } catch (error) {
    console.error("Fetch table data error:", error);
    tableData.value = [];
    total.value = 0;
  } finally {
    loading.value = false;
  }
};

/**
 * 处理分页、排序、筛选变化
 */
const handleTableChange = (pag: any) => {
  page.value = pag.current;
  size.value = pag.pageSize;
  getList();
};

/**
 * 重置表格状态（回到第一页，清空选中）
 */
const reset = () => {
  page.value = 1;
  size.value = props.defaultPageSize;
  selectedRowKeys.value = [];
  selectedRows.value = [];
  getList();
};

/**
 * 刷新当前页
 */
const refresh = () => {
  getList();
};

const clearSelection = () => {
  selectedRowKeys.value = [];
  selectedRows.value = [];
}
// --- Expose Methods to Parent ---
defineExpose({
  getList,
  reset,
  refresh,
  tableData,
  clearSelection,
  // 也可以暴露选中的数据供父组件获取
  getSelected: () => ({
    keys: selectedRowKeys.value,
    rows: selectedRows.value,
  }),
});

// --- Watchers ---

// 监听外部搜索参数变化，自动重置页码并刷新
watch(
  () => props.searchParams,
  () => {
    page.value = 1; // 搜索时通常重置到第一页
    getList();
  },
  { deep: true }
);

// --- Lifecycle ---
onMounted(() => {
  if(props.data && props.data.length > 0) tableData.value = props.data || [];
});
</script>

<style scoped>

:deep(.ant-table-wrapper) {
  height: 100%; /* 让表格容器填满父级 */
  .ant-spin-nested-loading, .ant-spin-container {
    height: 100%;
    display: flex;
    flex-direction: column;
  }
  .ant-table {
    flex: 1; /* 表格主体区域自动撑满剩余空间 */
    overflow: hidden; /* 防止内容溢出 */
  }
  .ant-table-container {
    height: 100%;
    display: flex;
    flex-direction: column;
  }
  .ant-table-body {
    flex: 1; /* 表体部分撑满，实现固定表头 + 滚动内容 */
    overflow: auto !important; /* 出现滚动条的关键 */
  }
}
</style>