import { computed, ref } from 'vue'; import type { DataTableBaseColumn, DataTableColumn } from 'naive-ui'; import type { TableColumnCheck } from '@sa/hooks'; import { $t } from '@/locales'; import type { AlovaGenerics, Method } from '~/packages/alova/src'; function isTableColumnHasKey(column: DataTableColumn): column is DataTableBaseColumn { return Boolean((column as NaiveUI.TableColumnWithKey).key); } type TableAlovaApiFn = ( params: R ) => Method>>; // this hook is used to manage table columns // if you choose alova, you can move this hook to the `src/hooks` to handle all list page in your project export default function useCheckedColumns>['records'][number]>( getColumns: () => DataTableColumn[] ) { const SELECTION_KEY = '__selection__'; const EXPAND_KEY = '__expand__'; const getColumnChecks = (cols: DataTableColumn[]) => { const checks: NaiveUI.TableColumnCheck[] = []; cols.forEach(column => { if (isTableColumnHasKey(column)) { checks.push({ key: column.key as string, title: column.title as string, checked: true }); } else if (column.type === 'selection') { checks.push({ key: SELECTION_KEY, title: $t('common.check'), checked: true }); } else if (column.type === 'expand') { checks.push({ key: EXPAND_KEY, title: $t('common.expandColumn'), checked: true }); } }); return checks; }; const columnChecks = ref(getColumnChecks(getColumns())); const columns = computed(() => { const cols = getColumns(); const columnMap = new Map>(); cols.forEach(column => { if (isTableColumnHasKey(column)) { columnMap.set(column.key as string, column); } else if (column.type === 'selection') { columnMap.set(SELECTION_KEY, column); } else if (column.type === 'expand') { columnMap.set(EXPAND_KEY, column); } }); const filteredColumns = columnChecks.value .filter(item => item.checked) .map(check => columnMap.get(check.key) as NaiveUI.TableColumn); return filteredColumns; }); return { columnChecks, columns }; }