71 lines
2.0 KiB
TypeScript
71 lines
2.0 KiB
TypeScript
import type { Component, VNode } from 'vue';
|
|
import { h } from 'vue';
|
|
import type { ButtonProps, DataTableColumn, DataTableColumns } from 'naive-ui';
|
|
import { NButton, NSpace } from 'naive-ui';
|
|
import type { InternalRowData } from 'naive-ui/es/data-table/src/interface';
|
|
import type { safeClient } from '@/service/api';
|
|
import type TableBase from './table-base.vue';
|
|
|
|
export type TableBaseExpandColumn<T = InternalRowData> = {
|
|
operations?: (row: T) => Array<Partial<ButtonProps> & { contentText: string }>;
|
|
key: string;
|
|
title: string;
|
|
};
|
|
|
|
type TableBaseColumn<T = InternalRowData> = DataTableColumn<T> & TableBaseExpandColumn<T>;
|
|
|
|
export type TableBaseColumns<T = InternalRowData> = Array<TableBaseColumn<T>>;
|
|
|
|
export type TableInst = InstanceType<typeof TableBase>;
|
|
|
|
export interface Pagination {
|
|
pageIndex: number;
|
|
pageSize: number;
|
|
total?: number;
|
|
[key: string]: any;
|
|
}
|
|
|
|
export type TableFetchData = (query: {
|
|
pagination: Pagination;
|
|
filter?: Record<string, any>;
|
|
}) => ReturnType<typeof safeClient>;
|
|
|
|
export type TableFilterColumn = {
|
|
key: string;
|
|
title: string;
|
|
component?: Component | VNode;
|
|
componentProps?: Record<string, any>;
|
|
};
|
|
|
|
export type TableFilterColumns = Array<TableFilterColumn>;
|
|
|
|
export function transformColumns<T = InternalRowData>(columns: TableBaseColumns<T>): DataTableColumns<T> {
|
|
return columns.map(col => {
|
|
return {
|
|
...col,
|
|
ellipsis: {
|
|
tooltip: true
|
|
},
|
|
render: col.operations
|
|
? (row: T) =>
|
|
h(NSpace, null, {
|
|
default: () => col.operations!(row).map(item => h(NButton, item, { default: () => item.contentText }))
|
|
})
|
|
: (col as any).render
|
|
} as TableBaseColumn<T>;
|
|
});
|
|
}
|
|
|
|
export function transformHeaderColumns<T = any>(columns: TableBaseColumns<T>): NaiveUI.TableColumnCheck[] {
|
|
return columns
|
|
.filter(col => {
|
|
return !col.fixed;
|
|
})
|
|
.map(col => ({
|
|
key: col.key,
|
|
title: col.title,
|
|
checked: true,
|
|
visible: true
|
|
}));
|
|
}
|