108 lines
3.2 KiB
TypeScript
108 lines
3.2 KiB
TypeScript
|
import type { ColProps } from "antd/es/col";
|
|||
|
|
import type { FormItemProps, Rule } from "antd/es/form";
|
|||
|
|
import type { NamePath } from "rc-field-form/lib/interface";
|
|||
|
|
import type { FC, ReactNode } from "react";
|
|||
|
|
import type { FORM_ITEM_RENDER_ENUM } from "../../enum/formItemRender";
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 表单项渲染类型
|
|||
|
|
*/
|
|||
|
|
export type FormItemRenderType
|
|||
|
|
= | (typeof FORM_ITEM_RENDER_ENUM)[keyof typeof FORM_ITEM_RENDER_ENUM]
|
|||
|
|
| ((props: any) => ReactNode);
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 选项项数据类型
|
|||
|
|
*/
|
|||
|
|
export interface OptionItem {
|
|||
|
|
/** 值字段 */
|
|||
|
|
value?: any;
|
|||
|
|
/** 标签字段 */
|
|||
|
|
label?: string;
|
|||
|
|
/** 字典ID */
|
|||
|
|
dictionariesId?: any;
|
|||
|
|
/** ID字段 */
|
|||
|
|
id?: any;
|
|||
|
|
/** 名称字段 */
|
|||
|
|
name?: string;
|
|||
|
|
[key: string]: any;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 字段键配置
|
|||
|
|
*/
|
|||
|
|
export interface itemsFieldConfig {
|
|||
|
|
/** 值字段的键名，默认为 'value' */
|
|||
|
|
valueKey?: string;
|
|||
|
|
/** 标签字段的键名，默认为 'label' */
|
|||
|
|
labelKey?: string;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 表单值类型
|
|||
|
|
*/
|
|||
|
|
export type FormValues = Record<string, any>;
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 表单配置项
|
|||
|
|
*/
|
|||
|
|
export interface FormOption {
|
|||
|
|
/** 表单项字段名 */
|
|||
|
|
name?: string | string[];
|
|||
|
|
/** 表单项标签 */
|
|||
|
|
label?: ReactNode;
|
|||
|
|
/** 渲染类型 */
|
|||
|
|
render?: FormItemRenderType;
|
|||
|
|
/** 占据栅格列数，默认 12 */
|
|||
|
|
span?: number | string;
|
|||
|
|
/** 是否必填，默认 true，支持函数动态计算 */
|
|||
|
|
required?: boolean | ((formValues: FormValues) => boolean);
|
|||
|
|
/** 验证规则 */
|
|||
|
|
rules?: Rule | Rule[];
|
|||
|
|
/** 占位符文本，默认会根据传入的 render 类型自动判断（请选择、请输入）和 label 组合 */
|
|||
|
|
placeholder?: ReactNode;
|
|||
|
|
/** 提示信息，传入将在 label 右侧生成图标展示 tooltip */
|
|||
|
|
tip?: ReactNode;
|
|||
|
|
/** 是否隐藏，默认 false，支持函数动态计算 */
|
|||
|
|
hidden?: boolean | ((formValues: FormValues) => boolean);
|
|||
|
|
/** 是否自定义渲染，默认 false，将不生成 Col 和 Form.Item（ 仅生效 render、items、itemsField、componentProps ） */
|
|||
|
|
customizeRender?: boolean;
|
|||
|
|
/** 选项数据（用于 select、radio、checkbox） */
|
|||
|
|
items?: OptionItem[];
|
|||
|
|
/** 字段键配置 */
|
|||
|
|
itemsField?: itemsFieldConfig;
|
|||
|
|
/** 传递给表单控件的属性，支持函数动态计算 */
|
|||
|
|
componentProps?: Record<string, any> | ((formValues: FormValues) => Record<string, any>);
|
|||
|
|
/** 传递给 Form.Item 的属性，支持函数动态计算 */
|
|||
|
|
formItemProps?: FormItemProps | ((formValues: FormValues) => FormItemProps);
|
|||
|
|
/** label 栅格配置 */
|
|||
|
|
labelCol?: ColProps;
|
|||
|
|
/** wrapper 栅格配置 */
|
|||
|
|
wrapperCol?: ColProps;
|
|||
|
|
/** 是否应该更新（用于表单联动） */
|
|||
|
|
shouldUpdate?: boolean | ((prevValues: FormValues, nextValues: FormValues, info: { source?: string }) => boolean);
|
|||
|
|
/** 依赖字段（用于表单联动） */
|
|||
|
|
dependencies?: NamePath[];
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* FormItemsRenderer 组件属性
|
|||
|
|
*/
|
|||
|
|
export interface FormItemsRendererProps {
|
|||
|
|
/** 表单配置项数组 */
|
|||
|
|
options: FormOption[];
|
|||
|
|
/** 默认栅格占据列数，默认 12 */
|
|||
|
|
span?: number;
|
|||
|
|
/** 是否折叠（仅显示前3项），默认 false */
|
|||
|
|
collapse?: boolean;
|
|||
|
|
/** 自动生成必填规则，默认 true */
|
|||
|
|
useAutoGenerateRequired?: boolean;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 表单项渲染器组件
|
|||
|
|
*/
|
|||
|
|
declare const FormItemsRenderer: FC<FormItemsRendererProps>;
|
|||
|
|
|
|||
|
|
export default FormItemsRenderer;
|