/** * CustomForm v0.5 * 阶段一新增能力: * - onChange(field, value, allValues) 统一字段变化事件,消灭所有 onXxxChange 样板函数 * - initialValues 属性面板直接配置字段初始值,无需在页面 state 手写 * - computedFields 声明式模板字符串计算衍生字段,提交时自动合并 * 阶段二新增能力: * - DateTimePicker 日期时间组件,格式化为 YYYY-MM-DD HH:mm * - optionsBind 下拉/单选/复选选项支持变量绑定(动态数据源) * - fieldLinkage 字段联动:选 A → 自动填 B/C(从数据源查找匹配项) * - submitMapping 提交映射:自动组装 itemList 格式,消灭手写 onSubmitClick * 阶段三新增能力: * - labelAlign 全局标签位置(top/left/inset),对齐 Fusion Form 标准 * - fullWidth(全局) 全局控制所有表单项组件是否 100% 宽,可被单项覆盖 * - isPreview 全局预览/只读态(依赖 Fusion Form isPreview 广播) * - labelCol / wrapperCol via otherProps 透传,labelAlign=left 时配合使用 * - onReset 点击重置按钮后触发的回调事件 */ import React from 'react'; import './index.scss'; import { FormProps } from '@alifd/next/lib/form'; export type CustomFormItemType = 'Input' | 'TextArea' | 'Select' | 'RadioGroup' | 'CheckboxGroup' | 'NumberPicker' | 'DatePicker' | 'DateTimePicker' | 'Upload'; export interface CustomFormItemSchema { /** 字段名,对应提交值的 key,必填 */ field: string; /** 标签文字 */ label?: string; /** 是否必填(会显示红色星号,并在提交时校验) */ required?: boolean; /** 该字段的初始/默认值(优先级高于 CustomFormProps.initialValues) */ initialValue?: any; /** 组件类型,默认 Input */ componentType?: CustomFormItemType; /** 传给组件的额外属性,如 placeholder、disabled、maxLength 等 */ componentProps?: Record; /** 快捷配置 placeholder(等同于 componentProps.placeholder) */ placeholder?: string; /** Select / RadioGroup / CheckboxGroup 的选项列表(静态配置) */ options?: Array<{ label: string; value: any; }>; /** 动态选项(绑定变量/数据源后优先使用),仅 Select/RadioGroup/CheckboxGroup 生效 */ optionsBind?: any[]; /** * optionsBind 数据源中用作选项显示文字的字段名(当数据源字段名不是 'label' 时填写)。 * 例如数据源字段为 package_name,则填 "package_name"。 * 不填则默认使用 'label' 字段。 */ optionsLabelKey?: string; /** * optionsBind 数据源中用作选项存储值的字段名(当数据源字段名不是 'value' 时填写)。 * 例如数据源字段为 id,则填 "id";字段为 package_name,则填 "package_name"。 * 不填则默认使用 'value' 字段。 * 配置后,字段联动的 matchKey 会自动默认使用此字段名,无需在联动规则中重复配置。 */ optionsValueKey?: string; /** 该表单项占几列(不超过父级 columns),默认 1 */ columnSpan?: number; /** 组件尺寸:small / medium / large,默认继承表单全局 size */ size?: 'small' | 'medium' | 'large'; /** 宽度是否占满容器(100%),默认 true */ fullWidth?: boolean; /** 自定义错误提示文案(不设置则由 required 自动生成) */ help?: string; /** 额外说明文案,显示在错误信息下方 */ extra?: string; /** 传给 Form.Item 的额外属性,优先级最高,会覆盖上方所有同名配置 */ formItemProps?: Record; } type GridSpacing = [number] | [number, number] | [number, number, number] | [number, number, number, number]; /** * computedFields:计算字段映射表 * key = 要写入 values 的字段名 * value = 模板字符串,用 {fieldName} 引用其他字段值 * 示例:{ "order_desc": "{package_name},{package_price},日期:{banquet_date}" } */ export type ComputedFields = Record; /** * 字段联动规则(阶段二 + 阶段四 UX 简化) * * 【简单格式(推荐)】— 属性面板 ArraySetter 可视化编辑,每条规则对应一行: * { watchField, matchValue?, fillField, fillValue } * watchField = 监听哪个字段变化 * matchValue = 匹配值(留空 = 任何变化都触发) * fillField = 要回填的目标字段名 * fillValue = 回填的具体值 * * 【高级格式(兼容旧配置)】— 支持动态数据源查找 + staticRules 嵌套格式: * { watchField, dataSource?, matchKey?, fillFields?, staticRules? } */ export interface FieldLinkageRule { /** 监听的字段名(所有模式必填) */ watchField: string; /** 触发回填的条件值(留空 = watchField 任何变化都触发) */ matchValue?: string | number; /** 要回填的目标表单字段名 */ fillField?: string; /** 回填的目标值 */ fillValue?: any; /** 数据源数组(支持变量绑定),用于动态查找匹配项回填多个字段 */ dataSource?: any[]; /** 在 dataSource 中用于与 watchField 值比较匹配的 key,默认 'value' */ matchKey?: string; /** * 找到匹配项后,要回填的字段映射。 * key = 表单字段名(field),value = 数据源对象中的字段名 * 示例:{ "package_price": "price", "package_desc": "description" } */ fillFields?: Record; /** * 静态联动规则(不依赖 dataSource)。 * key = watchField 的匹配值,value = 要同时设置的字段映射 { formField: setValue } * 示例:{ "豪华套餐": { "package_price": "9800" } } */ staticRules?: Record>; } /** 提交映射 item(阶段二) */ export interface SubmitMappingItem { /** 写入结果数组中的 columnName */ columnName: string; /** 从表单字段名取值(与 template 二选一) */ field?: string; /** 模板字符串(同 computedFields 格式,与 field 二选一),如 "{package_name},{guest_count}人" */ template?: string; } /** rename 模式:单条字段重命名规则 */ export interface FieldRenameItem { /** 表单字段名(源) */ fromField: string; /** API 参数名(目标) */ toField: string; } /** * 操作按钮配置项(阶段四新增) * 表单底部可配置多个按钮,每个按钮均可独立设置操作类型与数据源。 */ export interface OperationItem { /** 按钮显示文字 */ text: string; /** 按钮操作类型:提交 / 重置 / 自定义 */ action: 'submit' | 'reset' | 'custom'; /** 按钮样式:primary(主要)/ secondary(次要)/ normal(普通),默认 normal */ type?: 'primary' | 'secondary' | 'normal'; /** * 仅 action=submit 时生效:提交前是否执行必填校验,默认继承组件级 submitValidate(true)。 * 设置为 false 可跳过校验直接提交。 */ submitValidate?: boolean; /** * 仅 action=submit 时生效:绑定的提交数据源(在 lowcode-web 数据源面板中配置)。 * 优先级高于组件级 submitDataSource,未配置时回退到组件级 submitDataSource。 */ dataSource?: any; /** 仅 action=custom 时生效:自定义点击回调函数 */ onClick?: (...args: any[]) => void; /** 透传给 Button 组件的额外属性 */ buttonProps?: Record; } /** * 提交参数配置(阶段五扩展) * * 三种工作模式(mode): * - 'passthrough':直接将 finalValues 作为请求参数,无需任何配置(字段名与 API 参数名相同时使用)。 * - 'rename':按 fieldRenameMap 规则重命名指定字段,未列出的字段保持原名透传; * 适合字段名与 API 参数名不一致的标准 REST 接口。 * - 'itemList':将字段转换为动态表单格式 [{columnName, columnValue}], * 适合 /source/api/dynamicFormTableRecord/ 等动态表单接口。 * * 向后兼容:未设置 mode 时,若 items 不为空则自动识别为 'itemList' 模式,否则等同于 'passthrough'。 */ export interface SubmitMapping { /** * 参数构建模式,默认 'passthrough'(无 items 时)或 'itemList'(有 items 时,向后兼容)。 */ mode?: 'passthrough' | 'rename' | 'itemList'; /** rename 模式:字段重命名规则列表,未列出的字段按原名透传 */ fieldRenameMap?: FieldRenameItem[]; /** itemList 模式:组装结果写入 finalValues 的目标字段名,默认 'itemList' */ targetField?: string; /** itemList 模式:字段映射规则 */ items?: SubmitMappingItem[]; } export interface CustomFormProps extends Omit { columns?: number; spacing?: GridSpacing; emptyContent?: React.ReactNode; formItems?: CustomFormItemSchema[]; /** 字段初始值,key = field,value = 初始值(阶段一新增) */ initialValues?: Record; /** 计算字段声明,key = 目标字段名,value = 模板字符串如 "{a},{b}"(阶段一新增) */ computedFields?: ComputedFields; /** * 全局组件宽度占满(阶段三新增) * 控制所有表单项的输入组件是否默认 100% 宽,可被单项 formItems[].fullWidth 覆盖。 * 不设置时沿用各项自身配置(默认无 style 约束)。 */ fullWidth?: boolean; showSubmit?: boolean; submitText?: string; submitValidate?: boolean; submitDataSource?: any; submitButtonProps?: Record; showReset?: boolean; resetText?: string; resetButtonProps?: Record; /** * 操作按钮列表(阶段四新增)。 * 配置后取代 showSubmit / showReset 的显示逻辑,支持任意数量的提交 / 重置 / 自定义按钮。 * 未配置时(undefined)回退到旧版 showSubmit / showReset 双按钮模式,保证向后兼容。 */ operations?: OperationItem[]; /** * 操作按钮区域的水平对齐方式(阶段四新增)。 * 'left' | 'center' | 'right',默认 'center'。 */ operationAlign?: 'left' | 'center' | 'right'; onSubmit?: (values: any, errors: any, field: any) => void; onSubmitFailed?: (values: any, errors: any, field: any) => void; /** * 统一字段变化事件(阶段一新增) * field = 发生变化的字段名 * value = 该字段最新值 * allValues = 当前所有字段值(已合并 computedFields) */ onChange?: (field: string, value: any, allValues: Record) => void; /** 点击重置按钮后触发(阶段三新增) */ onReset?: () => void; /** 字段联动规则数组(阶段二新增) */ fieldLinkage?: FieldLinkageRule[]; /** 提交字段映射,自动组装 itemList 格式(阶段二新增) */ submitMapping?: SubmitMapping; children?: React.ReactNode; } declare const CustomForm: React.FC; export default CustomForm;