import { VNode, ComponentPublicInstance } from 'vue'; /** 栅格配置 */ export interface ColEx { span?: number; offset?: number; pull?: number; push?: number; xs?: number; sm?: number; md?: number; lg?: number; xl?: number; } /** Render 回调参数 */ export interface RenderCallbackParams { schema: ProFormSchema; values: Record; model: Record; field: string; } /** 滚动到字段的配置 */ export interface ScrollToFieldOptions { /** 滚动行为 */ behavior?: ScrollBehavior; /** 块级对齐 */ block?: ScrollLogicalPosition; /** 行内对齐 */ inline?: ScrollLogicalPosition; } export interface ProFormFieldOption { label: string; value: unknown; } export interface GetFieldOptions { (field: string): ProFormFieldOption[]; (field: string, raw: false): ProFormFieldOption[]; (field: string, raw: true): unknown[]; } export interface CollapseContainerProps { title?: string; loading?: boolean; /** 与 Vben Admin 保持一致,沿用 canExpan 命名 */ canExpan?: boolean; /** canExpan 的别名,便于业务侧按语义使用 */ canExpand?: boolean; helpMessage?: string | string[]; triggerWindowResize?: boolean; expanded?: boolean; defaultExpand?: boolean; ghost?: boolean; expandButtonText?: string; collapseButtonText?: string; /** 根容器透传属性,支持 style/class/id/data-* 等 */ wrapperProps?: Record; /** 头部额外 class */ headerClass?: string; /** 头部额外样式 */ headerStyle?: Record; /** 内容区额外 class */ contentClass?: string; /** 内容区额外样式 */ contentStyle?: Record; } /** ApiSelect 暴露的实例类型 */ export interface ApiSelectInstance { options: ProFormFieldOption[]; rawOptions: unknown[]; loading: boolean; fetchOptions: () => Promise; } /** 表单操作类型(参考 Vben Admin FormActionType) */ export interface FormActionType { getFieldsValue: () => Record; setFieldsValue: (values: Record) => Promise; resetFields: () => Promise; validate: (nameList?: string[]) => Promise | { errors: Record; }>; validateFields: (nameList?: string[]) => Promise; submit: () => Promise; scrollToField: (name: string, options?: ScrollToFieldOptions) => Promise; clearValidate: (name?: string | string[]) => void; updateSchema: (data: Partial | Partial[]) => Promise; appendSchemaByField: (schema: ProFormSchema, prefixField?: string, first?: boolean) => Promise; removeSchemaByField: (field: string | string[]) => Promise; setProps: (props: Partial) => Promise; /** 获取指定字段的组件实例 */ getComponentInstance: (field: string) => ComponentPublicInstance | null; /** 获取 api-select 字段的 options,raw=true 时返回接口原始列表数据 */ getFieldOptions: GetFieldOptions; /** 获取 api-select 字段的加载状态 */ isFieldLoading: (field: string) => boolean; } /** 时间字段映射 [表单字段, [开始字段, 结束字段], 格式?] */ export type FieldMapToTime = [string, [string, string], string?]; /** 表单事件监听器 */ export type FormListeners = Record unknown) | ((...args: unknown[]) => unknown)[]>; /** ProForm Props */ export interface ProFormProps { schemas?: ProFormSchema[]; modelValue?: Record; initialValues?: Record; labelWidth?: string; labelPosition?: 'left' | 'right' | 'top'; colon?: boolean; gutter?: number; size?: 'medium' | 'small' | 'large'; disabled?: boolean; baseColProps?: ColEx; showSubmitButton?: boolean; showResetButton?: boolean; submitButtonText?: string; resetButtonText?: string; submitButtonIcon?: string; resetButtonIcon?: string; actionColOptions?: ColEx; showAdvancedButton?: boolean; autoAdvancedLine?: number; alwaysShowLines?: number; submitFunc?: () => Promise; resetFunc?: () => Promise; fieldMapToTime?: FieldMapToTime[]; /** 透传给 el-form 的事件监听器 */ formListeners?: FormListeners; /** 自定义组件映射(组件名 -> 组件定义),供 schema.component 使用 */ components?: Record; } /** ProForm 内置表单项组件类型 */ export type ProFormBuiltInComponent = 'input' | 'select' | 'api-select' | 'tree-select' | 'date-picker' | 'date-range' | 'input-number' | 'formatted-number' | 'switch' | 'cascader' | 'checkbox' | 'radio'; /** 自定义组件:组件名(string)或 Vue 组件选项/构造函数(object | Function) */ export type ProFormCustomComponent = string | object | ((...args: unknown[]) => unknown); /** ProForm 表单项配置 */ export interface ProFormSchema { /** 字段名 */ field: string; /** 标签 */ label: string; /** 单个表单项标签宽度,优先级高于 Form 的 labelWidth */ labelWidth?: string; /** 是否显示 label 冒号,优先级高于 ProForm 的 colon */ colon?: boolean; /** * 组件类型: * - 内置:'input' | 'select' | 'date-picker' | 'date-range' | 'input-number' | 'formatted-number' | 'switch' | 'cascader' | 'checkbox' | 'radio' * - 自定义组件名:任意字符串,对应全局或 ProForm 传入的 components 中注册的组件 * - 内联组件:直接传入 Vue 组件选项对象或构造函数 */ component?: ProFormBuiltInComponent | ProFormCustomComponent; /** 组件属性,支持函数 */ componentProps?: Record | ((params: RenderCallbackParams & { formActionType?: FormActionType; }) => Record); /** 占位符 */ placeholder?: string; /** 默认值 */ defaultValue?: unknown; /** 是否必填 */ required?: boolean; /** 校验规则 */ rules?: Array>; /** 栅格占位 */ colProps?: ColEx; /** 是否隐藏(静态) */ hidden?: boolean; /** 自定义渲染(替代 component) */ render?: (params: RenderCallbackParams) => VNode | VNode[] | string; /** 自定义 slot 名称,对应父组件的具名插槽 */ slot?: string; /** 动态显示,css 控制,不删除 dom */ show?: boolean | ((params: RenderCallbackParams) => boolean); /** 动态显示,js 控制,会删除 dom */ ifShow?: boolean | ((params: RenderCallbackParams) => boolean); /** 动态禁用 */ dynamicDisabled?: boolean | ((params: RenderCallbackParams) => boolean); /** 动态校验规则 */ dynamicRules?: Array> | ((params: RenderCallbackParams) => Array>); /** 依赖字段 */ dependencies?: string[]; /** 标签右侧温馨提示,支持 string 或 string[] */ helpMessage?: string | string[]; /** 温馨提示组件的 props */ helpComponentProps?: Record; /** 表单项 value 的 tooltip,true 时默认展示当前值,支持函数动态返回 */ tooltip?: boolean | string | Record | ((params: RenderCallbackParams) => boolean | string | Record); } /** ProDescriptions 描述项配置 */ export interface ProDescriptionsSchema { /** 标签 */ label: string; /** 数据字段 */ dataIndex: string; /** 自定义渲染 */ render?: (value: unknown, record?: Record) => VNode | string; /** 栅格占位 */ span?: number; } /** Description 列数配置 */ export type DescriptionColumn = number | { xxl?: number; xl?: number; lg?: number; md?: number; sm?: number; xs?: number; }; /** Description 描述项配置 */ export interface DescriptionSchema { /** 标签 */ label: string; /** 数据字段(兼容 Vben Description 的 field) */ field?: string; /** 数据字段 */ dataIndex: string; /** 栅格占位 */ span?: number; /** 是否显示 */ show?: boolean | ((data: Record) => boolean); /** 标签最小宽度 */ labelMinWidth?: number; /** 内容最小宽度 */ contentMinWidth?: number; /** 标签样式 */ labelStyle?: Record; /** 内容样式 */ contentStyle?: Record; /** 自定义插槽名称 */ slot?: string; /** 自定义渲染 */ render?: (value: unknown, record: Record) => VNode | string | number | null | undefined; /** 描述项 value 的 tooltip,true 时默认展示当前值,支持函数动态返回 */ tooltip?: boolean | string | Record | ((params: { value: unknown; record: Record; schema: DescriptionSchema; }) => boolean | string | Record); } /** Description Props */ export interface DescriptionProps { [key: string]: unknown; title?: string; helpMessage?: string | string[]; size?: 'medium' | 'small'; bordered?: boolean; column?: DescriptionColumn; schema?: DescriptionSchema[]; data?: Record; emptyText?: string; useCollapse?: boolean; collapseOptions?: { canExpand?: boolean; defaultExpand?: boolean; expandButtonText?: string; collapseButtonText?: string; helpMessage?: string | string[]; visibleRows?: number; }; } /** Description 操作实例 */ export interface DescriptionActionType { setProps: (props: Partial) => Promise; setData: (data: Record) => Promise; getData: () => Record; } /** el-form 实例 */ export interface FormInstance { validate?(cb?: (valid: boolean) => void): Promise | void; clearValidate?(props?: string | string[]): void; resetFields?(): void; scrollToField?(name: string): void; } /** 指标列单元格渲染方式 */ export type ProTableFormBuiltInComponent = 'input' | 'input-number' | 'formatted-number' | 'select' | 'api-select' | 'tree-select' | 'date-picker' | 'date-range' | 'switch' | 'cascader' | 'checkbox' | 'radio' | 'slot'; /** 自定义渲染函数,返回文本或 VNode;参数为 { row, value, column } */ export type ProTableFormColumnRender = (params: { row: Record; value: unknown; column: ProTableFormColumn | ProTableFormColumnChild; }) => string | VNode; /** 指标列(或含友商名称等任意 key) */ export interface ProTableFormColumn { /** 对应 model 中对象字段名 */ key: string; title: string; required?: boolean; /** 单元格渲染方式:input / formatted-number / slot */ component?: ProTableFormBuiltInComponent; /** component 为 slot 时必填,对应插槽名为 `cell-{slotName}` */ slotName?: string; /** * 自定义渲染,返回 string(文本)或 VNode(组件)。 * 若返回 string 且不为纯数字,单元格自动包裹 `el-form-item` 做校验; * 若返回 VNode 则直接渲染,不包裹 form-item(适合纯展示列)。 */ render?: ProTableFormColumnRender; placeholder?: string; /** 列宽(优先级低于 minWidth) */ width?: number; /** 列最小宽度 */ minWidth?: number; /** * 透传给单元格组件。`component === 'formatted-number'` 时在此传入 * `integerDigits`、`decimalPlaces`、`rounding`、`inputLimit` 等(与 FormattedNumberInput 一致)。 * 支持函数形式,参数为 { row, value, column },返回要合并到组件上的属性。 */ /** * 透传给单元格组件。`component === 'formatted-number'` 时在此传入 * `integerDigits`、`decimalPlaces`、`rounding`、`inputLimit` 等。 * 支持函数形式,参数为 { row, value, column, index, formActionType },返回要合并到组件上的属性。 */ componentProps?: Record | ((params: CellComponentPropsParams) => Record); /** 动态校验规则 */ dynamicRules?: unknown[] | ((params: { row: Record; value: unknown; column: ProTableFormColumn; }) => unknown[]); /** 列级校验规则(会与 dynamicRules/required 合并) */ rules?: unknown[]; /** * 多级表头子列。 * 配置后本列作为分组标题行,不渲染数据单元格,子列渲染数据。 */ children?: ProTableFormColumnChild[]; /** * 本列是否渲染单元格(默认 true)。children 存在时自动为 false。 */ hideInTable?: boolean; /** 单元格对齐方式 */ align?: 'left' | 'center' | 'right'; /** 表头对齐方式 */ headerAlign?: 'left' | 'center' | 'right'; /** 是否固定列 */ fixed?: boolean | 'left' | 'right'; /** 单元格样式 */ cellStyle?: Record; /** 表头单元格样式 */ headerCellStyle?: Record; /** 单元格 className */ cellClassName?: string; /** 表头单元格 className */ headerCellClassName?: string; /** 是否可排序 */ sortable?: boolean; /** 是否可拖拽调整宽度 */ resizable?: boolean; } /** 多级表头子列 */ export interface ProTableFormColumnChild { key: string; title: string; required?: boolean; component?: ProTableFormBuiltInComponent; slotName?: string; /** 自定义渲染,返回 string(文本)或 VNode(组件) */ render?: ProTableFormColumnRender; placeholder?: string; /** 列宽(优先级低于 minWidth) */ width?: number; /** 列最小宽度 */ minWidth?: number; /** * 透传给单元格组件。`component === 'formatted-number'` 时在此传入 * `integerDigits`、`decimalPlaces`、`rounding`、`inputLimit` 等。 * 支持函数形式,参数为 { row, value, column, index, formActionType },返回要合并到组件上的属性。 */ componentProps?: Record | ((params: CellComponentPropsParams) => Record); rules?: unknown[]; /** 动态校验规则 */ dynamicRules?: unknown[] | ((params: { row: Record; value: unknown; column: ProTableFormColumnChild; }) => unknown[]); hideInTable?: boolean; /** 单元格对齐方式 */ align?: 'left' | 'center' | 'right'; /** 表头对齐方式 */ headerAlign?: 'left' | 'center' | 'right'; /** 是否固定列 */ fixed?: boolean | 'left' | 'right'; /** 单元格样式 */ cellStyle?: Record; /** 表头单元格样式 */ headerCellStyle?: Record; /** 单元格 className */ cellClassName?: string; /** 表头单元格 className */ headerCellClassName?: string; /** 是否可排序 */ sortable?: boolean; /** 是否可拖拽调整宽度 */ resizable?: boolean; } /** ProTableForm Props */ export interface ProTableFormProps { modelValue?: Record[]; columns: ProTableFormColumn[]; metricPlaceholder?: string; minRows?: number; rules?: Record; labelWidth?: string; bordered?: boolean; /** * 表格合并单元格函数,参数同 Element UI el-table span-method。 * column.property 格式:叶子列 `{colKey}` 或 `{colKey}.{childKey}`;分组列 `{colKey}`。 */ spanMethod?: (params: { row: Record; column: { property: string; label: string; }; rowIndex: number; columnIndex: number; }) => [number, number] | { rowspan: number; colspan: number; } | void; /** 表单尺寸 */ formSize?: 'medium' | 'small' | 'large'; /** 标签位置 */ labelPosition?: 'left' | 'right' | 'top'; /** 表单禁用态 */ disabled?: boolean; /** 斑马纹 */ stripe?: boolean; /** 表格尺寸 */ size?: 'medium' | 'small' | 'large'; /** 表格最大高度 */ maxHeight?: number | string; /** 表格固定高度 */ height?: number | string; /** 行 ClassName */ rowClassName?: string | ((params: { row: Record; rowIndex: number; }) => string); /** 展开行 Keys(树形数据) */ expandRowKeys?: (string | number)[]; /** 默认展开所有行 */ defaultExpandAll?: boolean; /** 行点击事件 */ onRowClick?: (row: Record, event: Event) => void; /** 行双击事件 */ onRowDblclick?: (row: Record, event: Event) => void; /** 排序变化事件 */ onSortChange?: (sortInfo: { prop: string; order: string; }) => void; /** 展开变化事件 */ onExpandChange?: (row: Record, expanded: boolean) => void; /** 透传给 el-table 的额外属性(所有上面未覆盖的 el-table 属性均可通过此传入) */ tableProps?: Record; /** 透传给 el-form 的额外属性 */ formProps?: Record; } /** ProTableForm 操作实例类型 */ export interface ProTableFormActionType { /** 表单校验 */ validate: () => Promise; /** 清除校验 */ clearValidate: (props?: string | string[]) => void; /** 新增行 */ addRow: () => void; /** 删除行 */ removeRow: (index: number) => void; /** 获取行列表 */ getRows: () => Record[]; /** 获取 el-table 实例 */ getTable: () => { clearSelection: () => void; } | null; /** 获取当前行数 */ getRowCount: () => number; /** 获取整个 modelValue */ getModelValue: () => Record[]; /** 设置整个 modelValue(触发 update:modelValue) */ setModelValue: (val: Record[]) => void; /** 获取 el-form 实例(可用于滚动、聚焦等高级操作) */ getFormRef: () => FormInstance | null; /** 获取指定行 */ getRow: (index: number) => Record; /** 设置指定行 */ setRow: (index: number, row: Record) => void; } /** componentProps 函数的参数类型 */ export interface CellComponentPropsParams { row: Record; value: unknown; /** 当前单元格所在行的索引 */ index?: number; column: ProTableFormColumn | ProTableFormColumnChild; /** ProTableForm 操作实例 */ formActionType: ProTableFormActionType; }