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

<template>
  <div class="table-container" ref="tableContainerRef">
    <a-table
      size="small"
      :loading="loading"
      :row-selection="enableRowSelection ? rowSelection : undefined"
      :data-source="tableData"
      :columns="enhancedColumns"
      :pagination="paginationConfig"
      :scroll="scrollConfig"
      :row-key="rowKey"
      @change="handleTableChange"
    >
      <!-- 合计行插槽 -->
      <template #summary>
        <slot name="summary"></slot>
      </template>
      <!-- 使用 bodyCell 插槽透传自定义列内容 -->
      <template #bodyCell="{ column, text, record, index }">
        <template v-for="slotName in customSlotNames" :key="slotName">
          <slot
            v-if="
              column._slotName === slotName || column.dataIndex === slotName
            "
            :name="slotName"
            :column="column"
            :text="text"
            :record="record"
            :index="index"
          ></slot>
        </template>
      </template>
    </a-table>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted, watch, nextTick, h, useSlots } from 'vue';
import { Tooltip } from 'ant-design-vue';
import { calcTableScrollY } from '@/utils/index';

// --- Types ---
interface Props {
  columns: any[];
  scrollY?: string | number; // 优先使用传入的固定值
  scrollX?: string | number; // 横向滚动宽度
  listUrl?: (params: any) => Promise<any>;
  data?: any[];
  enableRowSelection?: boolean;
  rowKey?: string;
  searchParams?: Record<string, any>;
  defaultPageSize?: number;
  isPage?: boolean;
  defaultSelectedRowKeys?: string[];
  getCheckboxProps?: (record: any) => any;
  minSelectionCount?: number; // 最小选中数量，0表示无限制
  transformData?: (res: any) => { records: any[]; total: number };
  emptyPlaceholder?: string; // 新增：空值占位符
  processEmptyValues?: boolean; // 新增：是否开启空值处理
  enableEllipsis?: boolean; // 新增：是否开启超出隐藏
  enableSort?: boolean; // 新增：是否启用排序功能
}

const props = withDefaults(defineProps<Props>(), {
  enableRowSelection: false,
  rowKey: 'id',
  isPage: true,
  data: () => [],
  searchParams: () => ({}),
  defaultPageSize: 20,
  defaultSelectedRowKeys: () => [],
  getCheckboxProps: undefined,
  minSelectionCount: 0,
  transformData: undefined,
  scrollY: undefined,
  emptyPlaceholder: '-',
  processEmptyValues: true, // 默认开启
  enableEllipsis: true, // 默认开启
  enableSort: false // 默认关闭，确保旧代码不受影响
});

const emit = defineEmits<{
  (e: 'data-loaded', params: any, data: any): void;
  (e: 'selection-change', selectedRowKeys: string[], selectedRows: any[]): void;
  (
    e: 'sort-change',
    sortInfo: { field: string; order: 'ascend' | 'descend' | null }
  ): 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[]>([...props.defaultSelectedRowKeys]);
const selectedRows = ref<any[]>([]);
const lastFilter = ref<Record<string, any> | undefined>(undefined);
const tableContainerRef = ref<any>(null);
const tableScrollY = ref<number>(0); // ✅ 新增：存储容器高度

// --- Computed Scroll Config ---
const scrollConfig = computed(() => {
  const config: any = {
    x: '100%',
    y: 0
  };

  // 1. 如果父组件传入了固定的 scrollX，优先使用
  if (props.scrollX !== undefined && props.scrollX !== null) {
    config.x = props.scrollX;
  }

  // 2. 如果父组件传入了固定的 scrollY，优先使用
  if (props.scrollY !== undefined && props.scrollY !== null) {
    config.y = props.scrollY;
  }
  // 3. 否则，如果检测到容器有高度，则使用容器高度作为滚动高度
  else if (tableScrollY.value > 0) {
    config.y = tableScrollY.value;
  }

  return config;
});

// --- Row Selection ---
const rowSelection = computed(() => ({
  selectedRowKeys: selectedRowKeys.value,
  onChange: (keys: string[], rows: any[]) => {
    // 至少保留 minSelectionCount 条勾选，如果取消后低于最小值则恢复默认第一条
    if (
      props.minSelectionCount > 0 &&
      keys.length < props.minSelectionCount &&
      props.data.length > 0
    ) {
      const firstKey = props.data[0][props.rowKey];
      keys = [firstKey];
      rows = [props.data[0]];
    }
    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']
}));

const $slots = useSlots();

// --- 自定义插槽名称列表 ---
const customSlotNames = computed(() => {
  return Object.keys($slots).filter(
    name => name !== 'bodyCell' && name !== 'headerCell'
  );
});

// --- Methods ---
const getList = async (filter?: Record<string, any>) => {
  if (props.data.length > 0) return;
  loading.value = true;
  tableData.value = [];
  total.value = 0;
  if (filter !== undefined) {
    lastFilter.value = filter;
  }
  console.log(props.searchParams);
  try {
    const params = {
      ...props.searchParams,
      skip: page.value,
      take: size.value,
      filter: lastFilter.value
    };
    if (!props.isPage) {
      delete params.take;
      delete params.skip;
    }

    const res = await props.listUrl(params);

    let finalRecords: any[] = [];
    let finalTotal = 0;

    if (props.transformData) {
      const result = props.transformData(res);
      finalRecords = result.records || [];
      finalTotal = result.total || 0;
    } else {
      finalRecords = res?.data?.records || res?.data?.data || res?.data || [];
      finalTotal = res.data?.data?.total || res?.data?.total || res?.total || 0;
    }

    tableData.value = processData(finalRecords);
    total.value = finalTotal;
    emit('data-loaded', params, { records: finalRecords, total: finalTotal });
  } catch (error) {
    console.error('Fetch table data error:', error);
    tableData.value = [];
    total.value = 0;
  } finally {
    loading.value = false;
  }
};

const handleTableChange = (pag: any, filters: any, sorter: any) => {
  page.value = pag.current;
  size.value = pag.pageSize;
  if (props.enableSort) {
    if (sorter && sorter.field) {
      emit('sort-change', { field: sorter.field, order: sorter.order });
    } else {
      emit('sort-change', { field: '', order: null });
    }
  } else {
    getList();
  }
};

const reset = () => {
  page.value = 1;
  size.value = props.defaultPageSize;
  selectedRowKeys.value = [];
  selectedRows.value = [];
  getList();
};

const refresh = () => {
  getList();
};

const clearSelection = () => {
  selectedRowKeys.value = [];
  selectedRows.value = [];
};
defineExpose({
  loading,
  getList,
  reset,
  refresh,
  tableData,
  clearSelection,
  getSelected: () => ({
    keys: selectedRowKeys.value,
    rows: selectedRows.value
  })
});

const observer = new ResizeObserver(() => {
  tableScrollY.value = calcTableScrollY(tableContainerRef.value);
});

watch(
  () => props.data,
  newData => {
    if (newData && newData.length > 0) {
      // If defaultSelectedRowKeys is provided, reset selection
      if (
        props.defaultSelectedRowKeys &&
        props.defaultSelectedRowKeys.length > 0
      ) {
        selectedRowKeys.value = [...props.defaultSelectedRowKeys];
        selectedRows.value = newData.filter(row =>
          props.defaultSelectedRowKeys.includes(row[props.rowKey])
        );
      } else {
        // Otherwise clear selection when data changes
        selectedRowKeys.value = [];
        selectedRows.value = [];
      }
    } else {
      selectedRowKeys.value = [];
      selectedRows.value = [];
    }
  },
  { deep: true }
);

// --- 空值处理工具函数 ---
const processData = (records: any[]) => {
  if (!props.processEmptyValues || !Array.isArray(records)) return records;

  return records.map(record => {
    const processedRecord: any = { ...record };
    for (const key in processedRecord) {
      if (Object.prototype.hasOwnProperty.call(processedRecord, key)) {
        const val = processedRecord[key];
        if (val === null || val === undefined || val === '') {
          processedRecord[key] = props.emptyPlaceholder;
        }
      }
    }
    return processedRecord;
  });
};

// --- 处理自定义单元格（用于行合并）---
const createMergeCellHandler = (dataIndex: string) => {
  return (record: any, index: number) => {
    const currentValue = record[dataIndex];
    
    // 检查当前行是否是该值的起始行
    let isStartRow = true;
    if (index > 0) {
      const previousValue = tableData.value[index - 1]?.[dataIndex];
      if (previousValue === currentValue) {
        isStartRow = false;
      }
    }
    
    if (!isStartRow) {
      // 不是起始行，设置 rowSpan 为 0（隐藏该单元格）
      return { rowSpan: 0 };
    } else {
      // 是起始行，计算需要跨越的行数
      let rowSpan = 1;
      for (let i = index + 1; i < tableData.value.length; i++) {
        if (tableData.value[i][dataIndex] === currentValue) {
          rowSpan++;
        } else {
          break;
        }
      }
      
      return rowSpan > 1 ? { rowSpan } : {};
    }
  };
};

// --- 列配置增强（超出隐藏 + Tooltip + 插槽兼容 + 行合并）---
const enhancedColumns = computed(() => {
  return props.columns.map(col => {
    // 处理 merge 配置
    if (col.merge && col.dataIndex) {
      const baseCol = {
        ...col,
        customCell: createMergeCellHandler(col.dataIndex)
      };
      
      // 如果有 slots.customRender，移除 slots
      if (baseCol.slots?.customRender) {
        const { slots, ...restCol } = baseCol;
        return {
          ...restCol,
          _slotName: slots.customRender,
          ...(props.enableEllipsis ? { ellipsis: true } : {})
        };
      }
      
      return baseCol;
    }
    
    // 如果有 slots.customRender，移除 slots（由 bodyCell 处理），保留 dataIndex 用于匹配
    if (col.slots?.customRender) {
      const { slots, ...restCol } = col;
      return {
        ...restCol,
        // 保留 slotName 供 bodyCell 模板匹配使用
        _slotName: slots.customRender,
        ...(props.enableEllipsis ? { ellipsis: true } : {})
      };
    }

    // 如果已有 customRender 函数，直接返回
    if (col.customRender) {
      return {
        ...col,
        ...(props.enableEllipsis && !col.ellipsis ? { ellipsis: true } : {})
      };
    }

    // 普通列，添加 ellipsis 和 tooltip
    if (!props.enableEllipsis) return col;

    return {
      ...col,
      ellipsis: true,
      customRender: ({ text }: any) => {
        const content = String(text ?? props.emptyPlaceholder);
        return h(Tooltip, { title: content }, () =>
          h(
            'div',
            {
              class: 'table-cell-ellipsis',
              style: {
                overflow: 'hidden',
                whiteSpace: 'nowrap',
                textOverflow: 'ellipsis'
              }
            },
            content
          )
        );
      }
    };
  });
});

onMounted(() => {
  nextTick(() => {
    tableScrollY.value = calcTableScrollY(tableContainerRef.value);
    if (tableContainerRef.value) {
      observer.observe(tableContainerRef.value);
    }
  });
  if (props.data && props.data.length > 0) {
    tableData.value = processData(props.data);
    total.value = props.data.length;
  }
});

// 监听 data prop 变化
watch(
  () => props.data,
  newData => {
    if (newData && newData.length > 0) {
      tableData.value = processData(newData);
      total.value = newData.length;
    } else {
      tableData.value = [];
      total.value = 0;
    }
  },
  { deep: true }
);
</script>

<style scoped lang="scss">
// 优化合并单元格的边框样式
::v-deep(.ant-table-cell) {
  vertical-align: middle;
}

::v-deep(.ant-table-tbody > tr > td) {
  border-bottom: 1px solid #f0f0f0;
}
</style>