import { VNode } from 'vue'; /** ProTable 列配置 */ export interface ProColumn { /** 列唯一标识 */ key?: string; /** 列标题 */ title: string; /** 数据字段名 */ dataIndex: string; /** 子列配置(用于多级表头) */ children?: ProColumn[]; /** 列宽度:number 为比例(如 1、2、3 表示 1:2:3),string 为 px */ width?: number | string; /** 最小宽度(参考 VbenAdmin,比例列和固定列均生效) */ minWidth?: number | string; /** 最大宽度(参考 VbenAdmin,用于限制列宽上限) */ maxWidth?: number | string; /** 固定列 */ fixed?: 'left' | 'right'; /** 是否可排序 */ sortable?: boolean; /** 对齐方式 */ align?: 'left' | 'center' | 'right'; /** 是否可调整宽度 */ resizable?: boolean; /** 内容超出时是否省略并显示 tooltip,默认继承表格 ellipsis */ ellipsis?: boolean; /** 是否隐藏 */ hideInTable?: boolean; /** 默认隐藏,可在列设置中显示(参考 VbenAdmin defaultHidden) */ defaultHidden?: boolean; /** 列头右侧帮助文本(参考 VbenAdmin helpMessage) */ helpMessage?: string | string[]; /** 值类型 */ valueType?: 'text' | 'date' | 'dateTime' | 'option' | 'select' | 'index'; /** 枚举值映射 */ valueEnum?: Record; /** 自定义渲染 */ customRender?: (params: { text: unknown; record: Record; index: number; }) => VNode | string; /** Element UI formatter */ formatter?: (row: Record, column: unknown, cellValue: unknown) => string; /** 根据业务控制列是否显示 */ ifShow?: boolean | ((params: { column: ProColumn; }) => boolean); /** 表单项配置(用于搜索) */ fieldProps?: Record; /** 表单项占位符 */ placeholder?: string; } /** 接口请求配置 */ export interface FetchSetting { pageField?: string; sizeField?: string; listField?: string; totalField?: string; } /** reload 请求参数(参考 VbenAdmin FetchParams) */ export interface FetchParams { page?: number; pageSize?: number; searchInfo?: Record; } /** 合并单元格回调参数 */ export interface SpanMethodParams { row: Record; column: Record; rowIndex: number; columnIndex: number; } /** 合并单元格返回值 */ export type SpanMethodResult = [number, number] | { rowspan: number; colspan: number; }; /** 树形表格配置 */ export interface TreeProps { /** 是否有子节点字段名 */ hasChildren?: string; /** 子节点字段名 */ children?: string; } /** ProTable Props */ export interface ProTableProps { [key: string]: unknown; columns?: ProColumn[]; dataSource?: Record[]; api?: (params: Record) => Promise; rowKey?: string; title?: string; titleHelpMessage?: string | string[]; bordered?: boolean; striped?: boolean; size?: 'medium' | 'small' | 'large'; loading?: boolean; maxHeight?: number | string; height?: number | string; ellipsis?: boolean; showIndexColumn?: boolean; indexColumnProps?: Partial; actionColumn?: Partial; /** 选择列配置(参考 VbenAdmin,通过自定义列实现,不使用 type="selection") */ rowSelection?: { type?: 'checkbox' | 'radio'; width?: number; fixed?: 'left' | 'right'; /** 多选时禁用某行的勾选,(record) => { disabled?: boolean } */ getCheckboxProps?: (record: Record) => { disabled?: boolean; }; /** 单选时禁用某行的选择,(record) => { disabled?: boolean } */ getRadioProps?: (record: Record) => { disabled?: boolean; }; }; /** 切换页码时是否清空勾选,默认 false 即支持跨分页选择 */ clearSelectOnPageChange?: boolean; pagination?: false | Record; fetchSetting?: FetchSetting; beforeFetch?: (params: Record) => Record; afterFetch?: (data: unknown) => unknown; immediate?: boolean; searchInfo?: Record; /** 合并行或列的方法 */ spanMethod?: (params: SpanMethodParams) => SpanMethodResult; /** 树形表格配置 */ treeProps?: TreeProps; /** 是否默认展开所有行(树形表格) */ defaultExpandAll?: boolean; /** 展开的行(树形表格),需配合 rowKey 使用 */ expandRowKeys?: (string | number)[]; /** 是否懒加载子节点(树形表格) */ lazy?: boolean; /** 懒加载子节点的方法(树形表格) */ load?: (row: Record, treeNode: { level: number; expanded: boolean; loaded: boolean; }, resolve: (data: Record[]) => void) => void; } /** 行选择配置(与 ProTableProps.rowSelection 一致,供 getRowSelection 返回) */ export type TableRowSelection = ProTableProps['rowSelection']; /** TableAction 气泡确认配置(参考 VbenAdmin PopConfirm) */ export interface TableActionPopConfirm { title: string; okText?: string; cancelText?: string; confirm: () => void | Promise; cancel?: () => void | Promise; icon?: string; } /** TableAction 弹窗确认配置(Element UI MessageBox.confirm) */ export interface TableActionModalConfirm { title: string; okText?: string; cancelText?: string; confirm: () => void | Promise; cancel?: () => void | Promise; } /** TableAction 单个操作项(参考 VbenAdmin ActionItem) */ export interface TableActionItem { /** 按钮文本 */ label: string; /** 是否禁用 */ disabled?: boolean; /** 按钮颜色(内部会映射到 Element UI 按钮类型) */ color?: 'success' | 'error' | 'warning'; /** 按钮类型,直接透传给 Element UI Button 的 type */ type?: string; /** 额外的按钮 props,直接透传给 Element UI Button */ props?: Record; /** 图标 class(例如 element-ui 图标或自定义 iconfont) */ icon?: string; /** 气泡确认配置 */ popConfirm?: TableActionPopConfirm; /** 弹窗确认配置 */ confirm?: TableActionModalConfirm; /** 是否显示分隔线(垂直 Divider) */ divider?: boolean; /** 权限标识,具体含义由业务自行约定 */ auth?: string | string[]; /** 是否显示当前操作项,可为布尔值或函数 */ ifShow?: boolean | ((action: TableActionItem) => boolean); /** 点击回调 */ onClick?: (e: MouseEvent) => void; /** Tooltip 配置:字符串或 Element UI Tooltip 的 props */ tooltip?: string | Record; } /** TableAction 组件 Props(参考 VbenAdmin TableAction) */ export interface TableActionProps { actions?: TableActionItem[]; dropDownActions?: TableActionItem[]; /** 是否阻止按钮 click 冒泡 */ stopButtonPropagation?: boolean; } /** ProTable 操作类型(参考 Vben Admin TableActionType) */ export interface TableActionType { setProps: (props: Partial) => void; reload: (opt?: FetchParams) => Promise; /** 重新计算表格高度/布局(参考 VbenAdmin redoHeight) */ redoHeight: () => void; setLoading: (loading: boolean) => void; getDataSource: () => Record[]; /** 获取接口原始返回数据(参考 VbenAdmin getRawDataSource) */ getRawDataSource: () => Record; setTableData: (data: Record[]) => void; getColumns: () => ProColumn[]; /** 设置列配置,支持列数组或列 key 列表(参考 VbenAdmin setColumns) */ setColumns: (columns: ProColumn[] | string[]) => void; setPagination: (info: Partial<{ page: number; pageSize: number; total: number; }>) => void; getSelectRowKeys: () => (string | number)[]; getSelectRows: () => Record[]; clearSelectedRowKeys: () => void; /** 设置选中行(参考 VbenAdmin setSelectedRowKeys) */ setSelectedRowKeys: (keys: (string | number)[]) => void; /** 按 key 取消选中(参考 VbenAdmin deleteSelectRowByKey) */ deleteSelectRowByKey: (key: string | number) => void; /** 按行索引和字段名更新单格数据(参考 VbenAdmin updateTableData) */ updateTableData: (index: number, key: string, value: unknown) => void; /** 根据 rowKey 更新指定行(参考 VbenAdmin updateTableDataRecord) */ updateTableDataRecord: (rowKey: string | number, record: Record) => Record | void; /** 根据 rowKey 删除指定行(参考 VbenAdmin deleteTableDataRecord) */ deleteTableDataRecord: (rowKey: string | number | (string | number)[]) => void; /** 插入行(参考 VbenAdmin insertTableDataRecord) */ insertTableDataRecord: (record: Record, index?: number) => Record | void; /** 获取分页信息(参考 VbenAdmin getPaginationRef) */ getPaginationRef: () => { page: number; pageSize: number; total: number; } | false; /** 是否显示分页 */ getShowPagination: () => boolean; /** 设置是否显示分页(参考 VbenAdmin,返回 Promise) */ setShowPagination: (show: boolean) => void | Promise; /** 获取当前行选择配置(参考 VbenAdmin getRowSelection) */ getRowSelection: () => TableRowSelection; /** 展开树形表格所有行 */ expandAll?: () => void; /** 折叠树形表格所有行 */ collapseAll?: () => void; /** 滚动到指定列。 * @param column - 列标识,支持三种形式: * 1. column.id(Element UI 内部生成的列唯一标识,精确匹配,优先级最高) * 2. dataIndex(列对应的数据字段名,按 property 匹配) * 3. number(列索引,基于 table.columns 全列顺序,含选择列/序号列/分组父列) */ scrollToColumn: (column: string | number) => void; } /** ProTable 工具栏配置 */ export interface ProTableToolBarConfig { /** 是否显示刷新按钮 */ reload?: boolean; /** 是否显示密度切换 */ density?: boolean; /** 是否显示列设置 */ columnSetting?: boolean; /** 是否显示全屏 */ fullScreen?: boolean; }