import { AffixProps, ModalFuncProps } from 'antd'; import { Key, ReactNode } from 'react'; import { DragEndEvent } from '@dnd-kit/core'; import type { ButtonProps } from 'antd/es/button'; import type { TooltipProps } from 'antd/es/tooltip'; import type { NamePath } from 'antd/es/form/interface'; import type { ColumnType, TableProps } from 'antd/es/table'; import type { FormInstance, FormItemProps } from 'antd/es/form'; import type { ProFormValueType, FunctionArgs, ProRule, ReactiveFunction } from '../ProForm/components/render/propsType'; import type { DiffOriginalParams } from './utils/diffOriginal'; /** * 操作类型定义 */ export type ActionType = 'edit' | 'delete' | 'save' | 'cancel' | 'add' | 'mulDelete' | 'custom'; /** * 操作按钮展示控制函数类型 * @template T 记录类型 */ export type ShowFunction = (record?: T, options?: { index: number; form: FormInstance; name: NamePath; namePath: NamePath; tableLength: number; selectedRows: T[]; }) => Promise | boolean | void; /** * 选项属性接口 */ export interface OptionsProps { /** 索引 */ index: number; /** 表单实例 */ form: FormInstance; /** 名称路径 */ namePath: NamePath; /** 名称 */ name: NamePath; } /** * 选项属性类型(基于接口) */ export type OptionsType = OptionsProps; /** * 汇总列属性 */ export interface SummaryColumnProps { /** 列唯一标识 */ key: string; /** 列索引 */ index: number; /** 列标题 */ title?: string; /** 跨列数 */ colSpan?: number; /** 值类型 */ valueType?: string; /** 精度 */ precision?: number; /** 前缀 */ prefix?: ReactNode | string; } /** * 基础操作按钮属性 * @template T 记录类型 */ export interface BaseActionProps { /** * 按钮类型 */ type?: ActionType; /** * 按钮名称 */ label?: string | ReactNode; /** * 是否显示按钮 * @default true */ show?: boolean | ShowFunction; /** * 是否持久化(一直显示)操作按钮 * @default true */ persistence?: boolean; /** * 是否禁止操作 * @default true */ disabled?: boolean | ShowFunction; /** * 添加是否自定义打开弹框 * @default false */ isSelectModal?: boolean; /** * 删除是否开启二次确认 * @default true */ needConfirm?: boolean; /** * 按钮是否禁止操作 */ isEditable?: boolean; /** * 按钮前置校验事件 */ onClick?: (record?: T, index?: number) => any; /** * 按钮前置校验事件 */ onHandle?: (record?: T, index?: number) => any; /** * 支持antd的Button属性 */ buttonProps?: Omit; } /** * 规则函数类型(与 ProForm 保持一致) * @template T 记录类型 */ export type RulesFn = ReactiveFunction; /** * 必填函数类型(与 ProForm 保持一致) * @template T 记录类型 */ export type RequiredFn = ReactiveFunction; /** * 视图渲染函数类型 * @template T 记录类型 */ export type viewRenderFn = (text?: any, record?: T, options?: OptionsProps) => string | number | ReactNode | void; /** * 组件渲染函数类型(与 ReactiveFunction 保持一致) * @template T 记录类型 */ export type ComponentRenderFn = ReactiveFunction; /** * 表格列属性接口 * @template Values 值类型 * @template T 记录类型 */ export interface ProColumnsProps extends Omit, 'rules' | 'required' | 'tooltip'>, ColumnType { /** 是否必填 */ required?: boolean | boolean[] | RequiredFn; /** 标签是否必填 */ labelRequired?: boolean; /** 字段名 */ name?: NamePath; /** 多字段名 */ names?: NamePath[]; /** 是否可编辑 */ isEditable?: boolean | RequiredFn; /** 值类型 */ valueType?: ProFormValueType | ((text?: any, record?: T, options?: OptionsProps) => ProFormValueType); /** 提示信息 */ tooltip?: string | ({ icon?: string | ReactNode; } & TooltipProps); /** 组件 */ component?: string | number | ReactNode | ComponentRenderFn; /** 视图渲染 */ viewRender?: string | number | ReactNode | viewRenderFn; /** 隐藏的字段名 */ hiddenNames?: NamePath[] | NamePath[][]; /** 校验规则 */ rules?: ProRule[] | RulesFn; /** 单元格渲染组件的 Props */ fieldProps?: object | ReactiveFunction; /** 开启数据脱敏功能(仅限查看场景) */ desensitization?: [number, number] | ReactiveFunction; /** 控制表单元素禁用 */ disabled?: boolean | boolean[] | ReactiveFunction; /** 确认操作 */ confirm?: boolean | ModalFuncProps | FunctionArgs; /** 依赖项 */ dependencies?: NamePath[]; /** 差异处理 */ onDiff?: DiffOriginalParams['onDiff']; [key: string]: any; } /** * 表格列属性类型(基于接口) * @template Values 值类型 * @template T 记录类型 */ export type ProColumnsType = ProColumnsProps; /** * 可编辑表格列属性 * @template K 键类型 */ export type ProEditTableColumnsProps = ProColumnsProps; /** * 状态接口 */ export interface StateProps { /** 表格内部强制刷新开关 */ forceUpdate: Record; /** 正在编辑行的row-key集合 */ editingKeys: string[]; /** 当前选中行的row-key集合 */ selectedRowKeys: Key[]; /** 当前选中行数据集合 */ selectedRows: any[]; /** 虚拟键 */ virtualKey: string; /** 分页信息 */ page: { pageNum: number; pageSize: number; }; } /** * 状态类型(基于接口) */ export type StateType = StateProps; /** * 可编辑表格引用属性 */ export interface ProEditTableRefProps { /** 获取内部状态 */ getInternalState: () => StateProps; /** 设置内部状态 */ setInternalState: (state: Partial) => void; } /** * 可编辑表格引用属性类型(基于接口) */ export type ProEditTableRefType = ProEditTableRefProps; /** * 可编辑表格模式类型 */ export type ProEditTableMode = 'single' | 'multiple'; export type ProEditTableModeType = ProEditTableMode; /** * 表格插入类型 */ export type InsertType = 'before' | 'after'; /** * 操作按钮方向 */ export type ActionDirection = 'vertical' | 'horizontal'; export type ActionDirectionType = ActionDirection; /** * 汇总信息配置 * @template T 记录类型 */ export type SummaryProps = { columns: ProEditTableSummaryColumnType[]; total?: boolean; fixed?: boolean | 'top' | 'bottom'; } | TableProps['summary']; /** * 可编辑表格属性接口 * @template T 记录类型 */ export interface ProEditTableProps extends Omit, 'onChange' | 'summary'> { /** * 可编辑表格的 form 实例,使用 Form.useForm 生成后使用 */ form?: FormInstance; /** * 原始数据源,设置后可以对比更新后的数值 */ originalValues?: Record; /** * 可编辑表格的模式 * @default multiple */ mode?: ProEditTableMode; /** * 必填对齐方式, 默认右对齐 * @default right */ requiredAlign?: 'left' | 'right'; /** * 同 dataSource,传入一个数组,是 table 渲染的元数据 * @default undefined */ value?: T[]; /** * dataSource 修改时触发,删除和修改都会触发,如果设置了 value,ProEditTable 会成为一个受控组件 */ onChange?: (list: T[]) => void; /** * 表格列的配置描述,扩展了FormItemProps属性 * @default [] */ columns: ProEditTableColumnType[]; /** * 是否禁止编辑 * @default false */ disabled?: boolean; /** * 是否开启斑马纹 * @default true */ stripe?: boolean; /** * 可编辑表格新增时数据插入方式,头部插入或者尾部插入 * @default after */ insertType?: InsertType; /** * 字段名,支持数组 */ name?: string | number | (string | number)[]; /** * 是否可拖拽排序 */ draggable?: boolean; /** * 是否开启虚拟列表(scroll,x,y必须为固定值) */ virtual?: boolean; /** * 空列表状态时,自定义添加按钮 * @default 点击添加 */ emptyBtnText?: string; /** * 只能编辑一行的的提示 * @default 请先保存数据 */ onlyOneLineMsg?: string; /** * 单行删除时弹出的确认框提示消息 * @default 您确定要删除该行数据吗? */ deletePoConfirmMsg?: string; /** * 多行删除时弹出的确认框提示消息 * @default 您确定要删除选中的数据吗? */ mulDeletePoConfirmMsg?: string; /** * 自定义编辑模式的操作栏宽度 */ actionWidth?: ColumnType['width']; /** * 自定义编辑模式的操作栏 单行编辑默认为编辑、删除、保存、取消;多行编辑为删除 */ actionProps?: BaseActionProps[] | boolean; /** * 自定义 table footer 左侧渲染, 配置后toolbarProps会失效 */ footerRender?: ReactNode; /** * 自定义底部操作栏 默认为添加、删除(批量) */ toolbarProps?: BaseActionProps[] | boolean; /** * 自定义底部操作栏跟随页面滚动 */ toolbarSticky?: boolean | Omit; /** * 最大可添加数量 */ max?: number; /** * formItem的props */ otherProps?: Record; /** * 底部合计配置 */ summary?: ProEditTableSummaryConfigType; /** * 自定义头部渲染 */ headerRender?: ReactNode; /** * 行是否禁用 */ rowDisabled?: (record?: T) => string | boolean; /** * 行是否可拖拽 */ rowDraggable?: (record?: T) => string | boolean; /** * 拖拽事件处理 * @param event 拖拽事件 * @param dataSource 当前数据源 * @param nextDataSource 拖拽后的数据源 */ onDrag?: (event: DragEndEvent, dataSource: T[], nextDataSource: T[]) => T[]; /** * 拖拽结束事件处理 * @param event 拖拽事件 * @param dataSource 当前数据源 * @param nextDataSource 拖拽后的数据源 */ onDragEnd?: (event: DragEndEvent, dataSource: T[], nextDataSource: T[]) => T[]; /** * 引用对象 */ ref?: any; /** * 操作按钮方向 */ actionDirection?: ActionDirection; /** * 校验触发方式 */ validateTrigger?: string | string[]; /** * 差异配置 */ diffConfig?: { /** 是否跟随父元素滚动 */ scrollFollowParent?: boolean; }; /** * 动态属性更新防抖时间(毫秒) * 用于优化表格编辑时的性能,对 fieldProps、desensitization, required、rules、isEditable, valueType 等属性进行防抖处理, 当设置为 0 时禁用防抖,所有属性立即响应 * @default 200 */ shouldUpdateDebounce?: number; } /** * 基础操作按钮类型(基于接口) * @template T 记录类型 */ export type ProEditTableActionType = BaseActionProps; export type ProEditTableSummaryConfigType = SummaryProps; export type ProEditTableSummaryColumnType = SummaryColumnProps; /** * 可编辑表格列属性类型(基于类型) * @template K 键类型 */ export type ProEditTableColumnType = ProEditTableColumnsProps; /** * 可编辑表格属性类型(基于接口) * @template T 记录类型 */ export type ProEditTableType = ProEditTableProps;