986 lines
29 KiB
TypeScript
986 lines
29 KiB
TypeScript
import type { VNodeChild } from 'vue';
|
||
|
||
import type {
|
||
KtTableContext,
|
||
KtTableProps,
|
||
KtTableRecord,
|
||
KtTableRegisterApi,
|
||
KtTableRowAction,
|
||
KtTableSize,
|
||
} from './types';
|
||
|
||
import {
|
||
computed,
|
||
defineComponent,
|
||
onBeforeUnmount,
|
||
onMounted,
|
||
reactive,
|
||
ref,
|
||
watch,
|
||
} from 'vue';
|
||
|
||
import { ChevronDown } from '@vben/icons';
|
||
|
||
import { EllipsisOutlined } from '@antdv-next/icons';
|
||
import { Button, Popover, Space, Table } from 'antdv-next';
|
||
|
||
import KtTableFooter from './components/KtTableFooter';
|
||
import KtTableHeader from './components/KtTableHeader';
|
||
import KtTableResizableTitle from './components/KtTableResizableTitle';
|
||
import KtTableSearch from './components/KtTableSearch';
|
||
import KtTableSettings from './components/KtTableSettings';
|
||
import { renderKtTableSummary } from './components/KtTableSummary';
|
||
import {
|
||
KT_TABLE_ACTION_COLUMN_KEY,
|
||
KT_TABLE_INDEX_COLUMN_KEY,
|
||
KT_TABLE_ROW_ACTION_VISIBLE_COUNT,
|
||
} from './config/constants';
|
||
import { DEFAULT_TABLE_SETTING, ktTableProps } from './config/ktTableProps';
|
||
import { useKtTableActions } from './hooks/useKtTableActions';
|
||
import { useKtTableColumns } from './hooks/useKtTableColumns';
|
||
import { useKtTableForm } from './hooks/useKtTableForm';
|
||
import { useKtTableRuntimeHooks } from './hooks/useKtTableHooks';
|
||
import { useKtTableLayout } from './hooks/useKtTableLayout';
|
||
import { useKtTablePermission } from './hooks/useKtTablePermission';
|
||
import { useKtTableResolvedProps } from './hooks/useKtTableResolvedProps';
|
||
import { useKtTableSelection } from './hooks/useKtTableSelection';
|
||
import { normalizePageResult } from './utils/index';
|
||
|
||
import './style.scss';
|
||
|
||
const AButton = Button as any;
|
||
const APopover = Popover as any;
|
||
const ASpace = Space as any;
|
||
const ATable = Table as any;
|
||
|
||
const tableComponents = {
|
||
header: {
|
||
cell: KtTableResizableTitle,
|
||
},
|
||
};
|
||
|
||
type SortState = {
|
||
field?: string;
|
||
order?: string;
|
||
};
|
||
|
||
type LoadOptions = {
|
||
validateForm?: boolean;
|
||
};
|
||
|
||
type RowResizeState = {
|
||
frame?: number;
|
||
key: string;
|
||
nextHeight: number;
|
||
rowElement: HTMLTableRowElement;
|
||
startHeight: number;
|
||
startY: number;
|
||
};
|
||
|
||
export default defineComponent({
|
||
name: 'KtTable',
|
||
props: ktTableProps,
|
||
emits: ['register'],
|
||
/**
|
||
* 初始化 KtTable 主组件，组装表单、按钮、列、分页、选择和注册式 API。
|
||
*
|
||
* @param rawProps 组件显式传入的 props，后续会和 register 配置合并。
|
||
* @param emit Vue setup context。
|
||
* @param emit.emit Vue 事件发送器，用于向业务侧暴露 register API。
|
||
* @param emit.expose Vue 暴露实例方法的函数，用于模板 ref 直接访问表格 API。
|
||
* @param emit.slots 业务侧传入的 title、toolbar、bodyCell、summary、footer 等插槽。
|
||
*/
|
||
setup(rawProps, { emit, expose, slots }) {
|
||
const { props, setProps } = useKtTableResolvedProps(
|
||
rawProps as KtTableProps,
|
||
);
|
||
|
||
const loading = ref(false);
|
||
const rows = ref<KtTableRecord[]>([]);
|
||
const sortState = reactive<SortState>({});
|
||
const pagination = reactive({
|
||
current: 1,
|
||
pageSize: props.pageSize,
|
||
total: 0,
|
||
});
|
||
const fullscreen = ref(false);
|
||
const searchCollapsed = ref(false);
|
||
const searchVisible = ref(true);
|
||
const tableSize = ref<KtTableSize>(props.size);
|
||
const mounted = ref(false);
|
||
const autoLoaded = ref(false);
|
||
const rowHeights = reactive<Record<string, number>>({});
|
||
let rowResizeGuideElement: HTMLDivElement | null = null;
|
||
let rowResizeState: null | RowResizeState = null;
|
||
|
||
const {
|
||
formApi,
|
||
formGrid,
|
||
formOptions,
|
||
getSearchValues,
|
||
resetForm,
|
||
SearchForm,
|
||
setSearchValues,
|
||
} = useKtTableForm(props);
|
||
const { registerHook, runHook, unregisterHook } =
|
||
useKtTableRuntimeHooks(props);
|
||
const { clearSelection, rowSelection, selectedRowKeys, selectedRows } =
|
||
useKtTableSelection(props);
|
||
|
||
const api = computed(
|
||
() =>
|
||
props.api || props.modules.find((module) => !!module.api)?.api || null,
|
||
);
|
||
const tableSetting = computed(() => ({
|
||
...DEFAULT_TABLE_SETTING,
|
||
...props.tableSettings,
|
||
}));
|
||
const statistics = computed(() => [
|
||
...props.statistics,
|
||
...props.modules.flatMap((module) => module.statistics || []),
|
||
]);
|
||
const hasSummary = computed(
|
||
() => statistics.value.length > 0 || !!slots.summary,
|
||
);
|
||
const {
|
||
handleSearchTransitionEnd,
|
||
handleSearchTransitionStart,
|
||
scheduleTableLayout,
|
||
tableBodyRef,
|
||
tableScrollY,
|
||
tableViewportWidth,
|
||
} = useKtTableLayout({ hasSummary });
|
||
|
||
const context: KtTableContext = {
|
||
formApi,
|
||
getRows: () => rows.value,
|
||
getSearchValues,
|
||
registerHook,
|
||
reload,
|
||
reset,
|
||
search,
|
||
selectedRowKeys: () => selectedRowKeys.value,
|
||
selectedRows: () => selectedRows.value,
|
||
setSearchValues,
|
||
unregisterHook,
|
||
};
|
||
const registerApi: KtTableRegisterApi = {
|
||
...context,
|
||
getProps: () => ({ ...props }),
|
||
setProps,
|
||
};
|
||
|
||
emit('register', registerApi);
|
||
|
||
const permissions = useKtTablePermission(context);
|
||
const {
|
||
formButtons,
|
||
headerButtons,
|
||
renderButton,
|
||
renderRowAction,
|
||
rowActions,
|
||
} = useKtTableActions({
|
||
context,
|
||
permissions,
|
||
props,
|
||
reload,
|
||
reset,
|
||
runHook,
|
||
search,
|
||
});
|
||
const {
|
||
columnOrderKeys,
|
||
columns,
|
||
reorderColumns,
|
||
resetColumns,
|
||
sourceColumns,
|
||
tableScrollX,
|
||
visibleColumnKeys,
|
||
} = useKtTableColumns({
|
||
props,
|
||
rowActions,
|
||
scheduleTableLayout,
|
||
tableViewportWidth,
|
||
});
|
||
|
||
watch(
|
||
() => props.size,
|
||
(size) => {
|
||
tableSize.value = size;
|
||
},
|
||
{
|
||
immediate: true,
|
||
},
|
||
);
|
||
watch(
|
||
() => props.pageSize,
|
||
(pageSize) => {
|
||
pagination.pageSize = pageSize;
|
||
},
|
||
{
|
||
immediate: true,
|
||
},
|
||
);
|
||
watch(
|
||
() => props.dataSource,
|
||
(dataSource) => {
|
||
if (!api.value?.list && Array.isArray(dataSource)) {
|
||
rows.value = dataSource;
|
||
pagination.total = dataSource.length;
|
||
}
|
||
},
|
||
{
|
||
immediate: true,
|
||
},
|
||
);
|
||
watch(
|
||
[searchCollapsed, formOptions],
|
||
([collapsed]) => {
|
||
formApi.setState({ collapsed, showCollapseButton: true });
|
||
},
|
||
{
|
||
immediate: true,
|
||
},
|
||
);
|
||
|
||
/**
|
||
* 根据当前分页状态和当前页行下标计算序号列展示值。
|
||
*
|
||
* @param index Antdv Table 当前页内的行下标，从 0 开始。
|
||
*/
|
||
function resolveRowIndex(index: number) {
|
||
if (!props.showPagination) return index + 1;
|
||
|
||
return (pagination.current - 1) * pagination.pageSize + index + 1;
|
||
}
|
||
|
||
/**
|
||
* 从 Antdv bodyCell 参数中解析当前行序号，兼容 slot 未透出 index 的情况。
|
||
*
|
||
* @param record 当前行数据。
|
||
* @param index Antdv Table 当前页内的行下标；部分版本可能不传。
|
||
*/
|
||
function resolveRecordIndex(record: KtTableRecord, index?: number) {
|
||
const rowIndex =
|
||
typeof index === 'number' ? index : rows.value.indexOf(record);
|
||
|
||
return resolveRowIndex(Math.max(rowIndex, 0));
|
||
}
|
||
|
||
/**
|
||
* 解析行唯一标识，行高 resize 需要用它保存每一行的独立高度。
|
||
*
|
||
* @param record 当前行数据。
|
||
*/
|
||
function resolveRecordKey(record: KtTableRecord) {
|
||
const { rowKey } = props;
|
||
|
||
if (typeof rowKey === 'function') {
|
||
return rowKey(record);
|
||
}
|
||
|
||
return record[rowKey] ?? record.key ?? rows.value.indexOf(record);
|
||
}
|
||
|
||
/**
|
||
* 将行高限制在配置区间内，避免拖拽到不可用高度。
|
||
*
|
||
* @param height 拖拽计算出的原始行高。
|
||
*/
|
||
function clampRowHeight(height: number) {
|
||
const minHeight = Math.max(24, props.rowResizeMinHeight);
|
||
const maxHeight = Math.max(minHeight, props.rowResizeMaxHeight);
|
||
|
||
return Math.min(maxHeight, Math.max(minHeight, Math.round(height)));
|
||
}
|
||
|
||
/**
|
||
* 创建行高拖拽参考线，拖动期间只移动参考线并写当前行 DOM。
|
||
*
|
||
* @param rowElement 当前正在调整高度的表格行。
|
||
*/
|
||
function createRowResizeGuide(rowElement: HTMLTableRowElement) {
|
||
const tableBody = rowElement.closest('.kt-table__body');
|
||
const bodyRect = tableBody?.getBoundingClientRect();
|
||
if (!bodyRect) return;
|
||
|
||
rowResizeGuideElement = document.createElement('div');
|
||
rowResizeGuideElement.className = 'kt-table__row-resize-guide';
|
||
rowResizeGuideElement.style.left = `${bodyRect.left}px`;
|
||
rowResizeGuideElement.style.width = `${bodyRect.width}px`;
|
||
document.body.append(rowResizeGuideElement);
|
||
}
|
||
|
||
/**
|
||
* 按当前行和目标行高移动行高拖拽参考线。
|
||
*/
|
||
function moveRowResizeGuide() {
|
||
const state = rowResizeState;
|
||
if (!state || !rowResizeGuideElement) return;
|
||
|
||
const rowRect = state.rowElement.getBoundingClientRect();
|
||
rowResizeGuideElement.style.transform = `translate3d(0, ${Math.round(
|
||
rowRect.top + state.nextHeight,
|
||
)}px, 0)`;
|
||
}
|
||
|
||
/**
|
||
* 移除行高拖拽参考线。
|
||
*/
|
||
function removeRowResizeGuide() {
|
||
rowResizeGuideElement?.remove();
|
||
rowResizeGuideElement = null;
|
||
}
|
||
|
||
/**
|
||
* 判断鼠标是否命中序号列底部的行高拖拽区域。
|
||
*
|
||
* @param event 鼠标按下事件，用于读取当前坐标。
|
||
* @param rowElement 当前鼠标所在表格行。
|
||
*/
|
||
function isRowResizeHandleHit(
|
||
event: MouseEvent,
|
||
rowElement: HTMLTableRowElement,
|
||
) {
|
||
const indexCell = rowElement.querySelector(
|
||
'.kt-table__index-column',
|
||
) as HTMLElement | null;
|
||
if (!indexCell) return false;
|
||
|
||
const cellRect = indexCell.getBoundingClientRect();
|
||
const rowRect = rowElement.getBoundingClientRect();
|
||
const inIndexCell =
|
||
event.clientX >= cellRect.left && event.clientX <= cellRect.right;
|
||
const inBottomHandle =
|
||
event.clientY >= rowRect.bottom - 8 && event.clientY <= rowRect.bottom;
|
||
|
||
return inIndexCell && inBottomHandle;
|
||
}
|
||
|
||
/**
|
||
* 拖拽行高时只直接写当前 tr 的内联高度，mouseup 后再写入响应式状态。
|
||
* 这样可以避免拖拽过程中每一帧触发表格整体重算。
|
||
*/
|
||
function applyDraggingRowHeight() {
|
||
const state = rowResizeState;
|
||
if (!state) return;
|
||
|
||
state.frame = undefined;
|
||
state.rowElement.style.height = `${state.nextHeight}px`;
|
||
state.rowElement.style.setProperty(
|
||
'--kt-table-row-height',
|
||
`${state.nextHeight}px`,
|
||
);
|
||
moveRowResizeGuide();
|
||
}
|
||
|
||
/**
|
||
* 响应行高拖拽移动。
|
||
*
|
||
* @param event 鼠标移动事件。
|
||
*/
|
||
function handleRowResizeMove(event: MouseEvent) {
|
||
const state = rowResizeState;
|
||
if (!state) return;
|
||
|
||
state.nextHeight = clampRowHeight(
|
||
state.startHeight + event.clientY - state.startY,
|
||
);
|
||
if (state.frame) return;
|
||
|
||
state.frame = window.requestAnimationFrame(applyDraggingRowHeight);
|
||
}
|
||
|
||
/**
|
||
* 结束行高拖拽，并把最终高度写回行高状态表。
|
||
*/
|
||
function stopRowResize() {
|
||
const state = rowResizeState;
|
||
if (!state) return;
|
||
|
||
if (state.frame) {
|
||
window.cancelAnimationFrame(state.frame);
|
||
state.frame = undefined;
|
||
}
|
||
|
||
applyDraggingRowHeight();
|
||
rowHeights[state.key] = state.nextHeight;
|
||
removeRowResizeGuide();
|
||
rowResizeState = null;
|
||
document.removeEventListener('mousemove', handleRowResizeMove);
|
||
document.removeEventListener('mouseup', stopRowResize);
|
||
document.body.classList.remove('kt-table--row-resizing');
|
||
}
|
||
|
||
/**
|
||
* 开始拖拽单行行高。
|
||
*
|
||
* @param event 行高拖拽手柄的鼠标按下事件。
|
||
* @param record 当前行数据。
|
||
*/
|
||
function startRowResize(event: MouseEvent, record: KtTableRecord) {
|
||
if (!props.rowResizable) return;
|
||
|
||
event.preventDefault();
|
||
event.stopPropagation();
|
||
|
||
const rowElement = (event.currentTarget as HTMLElement).closest(
|
||
'tr',
|
||
) as HTMLTableRowElement | null;
|
||
if (!rowElement) return;
|
||
|
||
const key = String(resolveRecordKey(record));
|
||
const currentHeight =
|
||
rowHeights[key] || rowElement.getBoundingClientRect().height;
|
||
const startHeight = clampRowHeight(currentHeight);
|
||
|
||
rowResizeState = {
|
||
key,
|
||
nextHeight: startHeight,
|
||
rowElement,
|
||
startHeight,
|
||
startY: event.clientY,
|
||
};
|
||
createRowResizeGuide(rowElement);
|
||
applyDraggingRowHeight();
|
||
document.body.classList.add('kt-table--row-resizing');
|
||
document.addEventListener('mousemove', handleRowResizeMove);
|
||
document.addEventListener('mouseup', stopRowResize);
|
||
}
|
||
|
||
/**
|
||
* 处理行级鼠标按下事件，只在序号列底部命中区内启动行高拖拽。
|
||
*
|
||
* @param event 行级鼠标按下事件。
|
||
* @param record 当前行数据。
|
||
*/
|
||
function handleRowResizeMouseDown(
|
||
event: MouseEvent,
|
||
record: KtTableRecord,
|
||
) {
|
||
if (!props.rowResizable) return;
|
||
|
||
const rowElement = (event.currentTarget as HTMLElement).closest(
|
||
'tr',
|
||
) as HTMLTableRowElement | null;
|
||
if (!rowElement || !isRowResizeHandleHit(event, rowElement)) return;
|
||
|
||
startRowResize(event, record);
|
||
}
|
||
|
||
/**
|
||
* 为可调整行高的行追加 class 和高度 CSS 变量。
|
||
*
|
||
* @param record 当前行数据。
|
||
*/
|
||
function resolveRowProps(record: KtTableRecord) {
|
||
if (!props.rowResizable) return {};
|
||
|
||
const height = rowHeights[String(resolveRecordKey(record))];
|
||
|
||
return {
|
||
class: 'kt-table__row--resizable',
|
||
onMousedown: (event: MouseEvent) => {
|
||
handleRowResizeMouseDown(event, record);
|
||
},
|
||
style: height
|
||
? {
|
||
'--kt-table-row-height': `${height}px`,
|
||
height: `${height}px`,
|
||
}
|
||
: undefined,
|
||
};
|
||
}
|
||
|
||
/**
|
||
* 读取查询参数，并按需触发表单校验。
|
||
*
|
||
* @param options 加载参数选项，控制是否在读取参数前校验表单。
|
||
*/
|
||
async function getFetchParams(options: LoadOptions = {}) {
|
||
if (options.validateForm) {
|
||
const { valid } = await formApi.validate();
|
||
if (!valid) return null;
|
||
}
|
||
|
||
return {
|
||
...(await getSearchValues()),
|
||
pageNo: props.showPagination ? pagination.current : undefined,
|
||
pageSize: props.showPagination ? pagination.pageSize : undefined,
|
||
sortField: sortState.field,
|
||
sortOrder: sortState.order,
|
||
};
|
||
}
|
||
|
||
/**
|
||
* 加载表格数据，兼容接口数据源和静态 dataSource。
|
||
*
|
||
* @param options 加载参数选项，透传给查询参数构建逻辑。
|
||
*/
|
||
async function loadData(options: LoadOptions = {}) {
|
||
if (!api.value?.list) {
|
||
const list = props.dataSource || [];
|
||
rows.value = list;
|
||
pagination.total = list.length;
|
||
return;
|
||
}
|
||
|
||
const rawParams = await getFetchParams(options);
|
||
if (!rawParams) return;
|
||
|
||
const params =
|
||
((await props.beforeFetch?.(rawParams, context)) as KtTableRecord) ||
|
||
rawParams;
|
||
|
||
loading.value = true;
|
||
|
||
try {
|
||
await runHook('onBeforeFetch', params, context);
|
||
const result = await api.value.list(params, context);
|
||
const afterResult =
|
||
(await props.afterFetch?.(result, context)) || result;
|
||
const normalized = normalizePageResult(afterResult);
|
||
rows.value = normalized.list;
|
||
pagination.total = normalized.total;
|
||
clearSelection();
|
||
await runHook('onAfterFetch', afterResult, context);
|
||
} catch (error) {
|
||
await runHook('onFetchError', error, context);
|
||
throw error;
|
||
} finally {
|
||
loading.value = false;
|
||
}
|
||
}
|
||
|
||
/**
|
||
* 执行首次自动加载，register 模式下会等待 api 准备完成。
|
||
*/
|
||
async function autoLoadData() {
|
||
if (!props.immediate || autoLoaded.value || !api.value?.list) return;
|
||
|
||
// register 模式下 api 可能晚于 mounted 合并，首次自动加载要等 api 真正可用。
|
||
autoLoaded.value = true;
|
||
await loadData();
|
||
}
|
||
|
||
/**
|
||
* 执行查询操作，重置到第一页并要求表单校验通过。
|
||
*/
|
||
async function search() {
|
||
pagination.current = 1;
|
||
await loadData({ validateForm: true });
|
||
}
|
||
|
||
/**
|
||
* 重置查询表单并重新加载第一页数据。
|
||
*/
|
||
async function reset() {
|
||
await resetForm();
|
||
pagination.current = 1;
|
||
await loadData();
|
||
}
|
||
|
||
/**
|
||
* 按当前分页、排序和搜索条件重新加载数据。
|
||
*/
|
||
async function reload() {
|
||
await loadData();
|
||
}
|
||
|
||
/**
|
||
* 从 Antdv Table 排序参数中读取当前排序字段和排序方向。
|
||
*
|
||
* @param sorter Antdv Table 传入的排序对象或多排序对象数组。
|
||
*/
|
||
function readSorter(sorter: KtTableRecord | KtTableRecord[]) {
|
||
const currentSorter = Array.isArray(sorter) ? sorter[0] : sorter;
|
||
|
||
sortState.field = currentSorter?.field || currentSorter?.columnKey;
|
||
sortState.order = currentSorter?.order;
|
||
}
|
||
|
||
/**
|
||
* 响应 Antdv Table 的排序/过滤/分页变化。
|
||
*
|
||
* @param _tablePagination Antdv Table 内部分页参数，KtTable 使用自定义分页所以当前不消费。
|
||
* @param _filters Antdv Table 过滤参数，当前预留给未来列过滤扩展。
|
||
* @param sorter Antdv Table 排序参数，用于更新 KtTable 排序状态。
|
||
*/
|
||
function handleTableChange(
|
||
_tablePagination: KtTableRecord,
|
||
_filters: KtTableRecord,
|
||
sorter: KtTableRecord | KtTableRecord[],
|
||
) {
|
||
pagination.current = 1;
|
||
readSorter(sorter);
|
||
loadData();
|
||
}
|
||
|
||
/**
|
||
* 响应底部分页变化并重新加载数据。
|
||
*
|
||
* @param pageInfo 分页组件传回的页码和每页条数。
|
||
*/
|
||
function handlePageChange(pageInfo: KtTableRecord) {
|
||
pagination.current = pageInfo.current || 1;
|
||
pagination.pageSize = pageInfo.pageSize || props.pageSize;
|
||
loadData();
|
||
}
|
||
|
||
/**
|
||
* 渲染搜索表单区域和表单按钮。
|
||
*/
|
||
const renderSearchArea = () => {
|
||
const hasSearch = (formOptions.value.schema?.length || 0) > 0;
|
||
const hasFormButtons = formButtons.value.length > 0;
|
||
const hasCollapse =
|
||
hasSearch && (formOptions.value.schema?.length || 0) > 4;
|
||
const visible = hasSearch && searchVisible.value;
|
||
|
||
if (!visible) return null;
|
||
|
||
return (
|
||
<KtTableSearch
|
||
collapsed={searchCollapsed.value}
|
||
formGrid={formGrid.value}
|
||
onTransitionEnd={handleSearchTransitionEnd}
|
||
onTransitionStart={handleSearchTransitionStart}
|
||
visible
|
||
>
|
||
{{
|
||
actions: () =>
|
||
hasFormButtons || hasCollapse ? (
|
||
<div class="kt-table__search-action-stack">
|
||
{formButtons.value.map((button) => renderButton(button))}
|
||
{hasCollapse ? (
|
||
<AButton
|
||
class="kt-table__search-toggle"
|
||
onClick={() => {
|
||
searchCollapsed.value = !searchCollapsed.value;
|
||
}}
|
||
type="link"
|
||
>
|
||
<ChevronDown
|
||
class={[
|
||
'kt-table__search-toggle-icon',
|
||
searchCollapsed.value
|
||
? ''
|
||
: 'kt-table__search-toggle-icon--expanded',
|
||
]}
|
||
/>
|
||
{searchCollapsed.value ? '展开' : '收起'}
|
||
</AButton>
|
||
) : null}
|
||
</div>
|
||
) : null,
|
||
form: () => <SearchForm />,
|
||
}}
|
||
</KtTableSearch>
|
||
);
|
||
};
|
||
|
||
/**
|
||
* 渲染操作列里的行操作按钮。
|
||
*
|
||
* @param record 当前行数据。
|
||
*/
|
||
const renderActionCell = (record: KtTableRecord) => {
|
||
const { inlineActions, overflowActions } = splitRowActions(
|
||
rowActions.value,
|
||
);
|
||
|
||
return (
|
||
<ASpace class="kt-table__row-actions" size={0}>
|
||
{{
|
||
default: () => (
|
||
<>
|
||
{inlineActions.map((action) => renderRowAction(action, record))}
|
||
{overflowActions.length > 0 ? (
|
||
<APopover
|
||
overlayClassName="kt-table__row-action-popover"
|
||
placement="bottomRight"
|
||
trigger="click"
|
||
>
|
||
{{
|
||
content: () => (
|
||
<div class="kt-table__row-action-popover-content">
|
||
{overflowActions.map((action) =>
|
||
renderRowAction(action, record),
|
||
)}
|
||
</div>
|
||
),
|
||
default: () => (
|
||
<AButton
|
||
aria-label="更多操作"
|
||
class="kt-table__row-action-more"
|
||
type="link"
|
||
>
|
||
<EllipsisOutlined class="kt-table__row-action-more-icon" />
|
||
</AButton>
|
||
),
|
||
}}
|
||
</APopover>
|
||
) : null}
|
||
</>
|
||
),
|
||
}}
|
||
</ASpace>
|
||
);
|
||
};
|
||
|
||
/**
|
||
* 将行操作按内联展示和弹层展示拆分。
|
||
*
|
||
* @param actions 当前行可见操作按钮列表。
|
||
*/
|
||
function splitRowActions(actions: KtTableRowAction[]) {
|
||
const visibleCount = resolveRowActionVisibleCount();
|
||
|
||
if (actions.length <= visibleCount) {
|
||
return {
|
||
inlineActions: actions,
|
||
overflowActions: [],
|
||
};
|
||
}
|
||
|
||
return {
|
||
inlineActions: actions.slice(0, visibleCount),
|
||
overflowActions: actions.slice(visibleCount),
|
||
};
|
||
}
|
||
|
||
/**
|
||
* 解析行操作内联按钮数量，异常配置回退到默认两个。
|
||
*/
|
||
function resolveRowActionVisibleCount() {
|
||
const visibleCount = Number(props.rowActionVisibleCount);
|
||
|
||
if (!Number.isFinite(visibleCount)) {
|
||
return KT_TABLE_ROW_ACTION_VISIBLE_COUNT;
|
||
}
|
||
|
||
return Math.max(0, Math.floor(visibleCount));
|
||
}
|
||
|
||
/**
|
||
* 渲染表格头部左侧业务按钮和 toolbar 插槽。
|
||
*/
|
||
const renderHeaderButtons = () => {
|
||
const toolbar = slots.toolbar?.(context);
|
||
const buttons = headerButtons.value.map((button) => renderButton(button));
|
||
|
||
if (!toolbar && buttons.length === 0) return null;
|
||
|
||
return (
|
||
<ASpace wrap>
|
||
{{
|
||
default: () => (
|
||
<>
|
||
{buttons}
|
||
{toolbar}
|
||
</>
|
||
),
|
||
}}
|
||
</ASpace>
|
||
);
|
||
};
|
||
|
||
/**
|
||
* 渲染表格头部右侧设置按钮组。
|
||
*/
|
||
const renderHeaderSettings = () => {
|
||
if (!props.showTableSetting) return null;
|
||
|
||
return (
|
||
<KtTableSettings
|
||
columnOrderKeys={columnOrderKeys.value}
|
||
columns={sourceColumns.value}
|
||
fullscreen={fullscreen.value}
|
||
onColumnOrderKeysChange={(keys: string[]) => {
|
||
reorderColumns(keys);
|
||
}}
|
||
onFullscreenChange={(value: boolean) => {
|
||
fullscreen.value = value;
|
||
}}
|
||
onReload={reload}
|
||
onResetColumns={resetColumns}
|
||
onSearchVisibleChange={(value: boolean) => {
|
||
searchVisible.value = value;
|
||
}}
|
||
onSizeChange={(value: KtTableSize) => {
|
||
tableSize.value = value;
|
||
}}
|
||
onVisibleColumnKeysChange={(keys: string[]) => {
|
||
visibleColumnKeys.value = keys;
|
||
}}
|
||
searchVisible={searchVisible.value}
|
||
setting={tableSetting.value}
|
||
size={tableSize.value}
|
||
visibleColumnKeys={visibleColumnKeys.value}
|
||
/>
|
||
);
|
||
};
|
||
|
||
/**
|
||
* 生成表格布局监听签名，只收集会影响容器高度、横向滚动和列宽的轻量信号。
|
||
* 行内字段变化仍由 Vue/Antdv 正常渲染，不再触发布局重算，避免 deep watch 遍历整页数据。
|
||
*/
|
||
function createLayoutWatchKey() {
|
||
return columns.value
|
||
.map((column) =>
|
||
[
|
||
column.key,
|
||
Array.isArray(column.dataIndex)
|
||
? column.dataIndex.join('.')
|
||
: column.dataIndex,
|
||
column.width,
|
||
column.fixed,
|
||
]
|
||
.map((value) => String(value ?? ''))
|
||
.join(':'),
|
||
)
|
||
.join('|');
|
||
}
|
||
|
||
expose(registerApi);
|
||
|
||
onMounted(() => {
|
||
mounted.value = true;
|
||
autoLoadData();
|
||
});
|
||
|
||
onBeforeUnmount(() => {
|
||
stopRowResize();
|
||
});
|
||
|
||
watch(api, () => {
|
||
if (mounted.value) {
|
||
autoLoadData();
|
||
}
|
||
});
|
||
|
||
watch(
|
||
() => [
|
||
createLayoutWatchKey(),
|
||
rows.value.length,
|
||
searchVisible.value,
|
||
fullscreen.value,
|
||
tableSize.value,
|
||
hasSummary.value,
|
||
],
|
||
() => {
|
||
scheduleTableLayout();
|
||
},
|
||
);
|
||
|
||
return () => (
|
||
<div class={['kt-table', fullscreen.value ? 'kt-table--fullscreen' : '']}>
|
||
<div class="kt-table__main">
|
||
{renderSearchArea()}
|
||
|
||
<div class="kt-table__main-content">
|
||
{props.showHeader ? (
|
||
<KtTableHeader title={props.tableTitle}>
|
||
{{
|
||
controls: () => slots.headerControls?.(context),
|
||
settings: renderHeaderSettings,
|
||
title: () => slots.title?.(),
|
||
toolbar: renderHeaderButtons,
|
||
}}
|
||
</KtTableHeader>
|
||
) : null}
|
||
|
||
<div
|
||
class="kt-table__body"
|
||
ref={tableBodyRef}
|
||
style={{
|
||
'--kt-table-scroll-y': `${tableScrollY.value}px`,
|
||
}}
|
||
>
|
||
<ATable
|
||
class="kt-table__ant"
|
||
columns={columns.value}
|
||
components={tableComponents}
|
||
dataSource={rows.value}
|
||
loading={loading.value}
|
||
onChange={handleTableChange}
|
||
onRow={resolveRowProps}
|
||
pagination={false}
|
||
rowKey={props.rowKey}
|
||
rowSelection={rowSelection.value}
|
||
scroll={{ x: tableScrollX.value, y: tableScrollY.value }}
|
||
size={tableSize.value}
|
||
v-slots={{
|
||
bodyCell: ({ column, index, record }: any): VNodeChild => {
|
||
if (column.key === KT_TABLE_INDEX_COLUMN_KEY) {
|
||
const rowIndex = resolveRecordIndex(record, index);
|
||
|
||
if (!props.rowResizable) return rowIndex;
|
||
|
||
return (
|
||
<div class="kt-table__index-cell">
|
||
<span>{rowIndex}</span>
|
||
<span
|
||
aria-label="调整行高"
|
||
class="kt-table__row-resize-handle"
|
||
onMousedown={(event: MouseEvent) => {
|
||
startRowResize(event, record);
|
||
}}
|
||
role="separator"
|
||
/>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
if (column.key === KT_TABLE_ACTION_COLUMN_KEY) {
|
||
return renderActionCell(record);
|
||
}
|
||
|
||
return slots.bodyCell?.({ column, record });
|
||
},
|
||
summary: (): VNodeChild =>
|
||
hasSummary.value
|
||
? renderKtTableSummary({
|
||
columns: columns.value,
|
||
context,
|
||
customSummary: slots.summary?.({
|
||
columns: columns.value,
|
||
context,
|
||
rows: rows.value,
|
||
}),
|
||
showSelection: props.showSelection,
|
||
statistics: statistics.value,
|
||
})
|
||
: null,
|
||
}}
|
||
/>
|
||
</div>
|
||
|
||
{props.showFooter ? (
|
||
<KtTableFooter
|
||
current={pagination.current}
|
||
onPageChange={handlePageChange}
|
||
pageSize={pagination.pageSize}
|
||
pageSizeOptions={props.pageSizeOptions}
|
||
selectedCount={selectedRowKeys.value.length}
|
||
showPagination={props.showPagination}
|
||
showSelection={props.showSelection}
|
||
total={pagination.total}
|
||
>
|
||
{{
|
||
default: () =>
|
||
slots.footer?.({
|
||
context,
|
||
selectedRowKeys: selectedRowKeys.value,
|
||
selectedRows: selectedRows.value,
|
||
}),
|
||
}}
|
||
</KtTableFooter>
|
||
) : null}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
);
|
||
},
|
||
});
|