add children onBlur

Author: xlorne

README.md

@@ -92,13 +92,15 @@ interface CardLayout {
 
 ```typescript
 interface FormViewProps {
-    header?: React.ReactNode;  // 表单头部内容
-    footer?: React.ReactNode;  // 表单底部内容
+    header?: React.ReactNode;  // 表单头部内容（表单外部）
+    footer?: React.ReactNode;  // 表单底部内容（表单外部）
+    children?:React.ReactNode; // 主表单自定义内容（表单内部）
 }
 ```
 
-- `header`: 渲染在表单内容上方的区域，可用于放置标题、说明文字等
-- `footer`: 渲染在表单内容下方的区域，可用于放置提交按钮、操作栏等
+- `header`: 渲染在表单外部内容上方的区域，可用于放置标题、说明文字等
+- `footer`: 渲染在表单外部内容下方的区域，可用于放置提交按钮、操作栏等
+- `children`: 渲染在主表单内部的区域，可用于放置固定的隐藏字段或者其他的界面内容
 
 ### 6. 表单提交（onFinish）
 
@@ -252,18 +254,18 @@ pnpm build
 
 ### FormView 组件属性
 
-| 属性 | 类型 | 说明 |
-|------|------|------|
-| meta | FormMeta | 表单元数据定义 |
-| form | FormInstance | 表单实例 |
-| onValuesChange | (values: any) => void | 值变化回调 |
-| onFinish | (values: any, formCode?: string) => void | 表单提交回调 |
-| header | React.ReactNode | 表单头部内容 |
-| footer | React.ReactNode | 表单底部内容 |
-| review | boolean | 是否预览模式 |
-| validators | FormFieldValidator[] | 验证规则数组 |
-| events | FormEvent[] | 事件定义数组 |
-| layouts | FormLayout[] | 布局定义数组 |
+| 属性         | 类型 | 说明       |
+|------------|------|----------|
+| meta       | FormMeta | 表单元数据定义  |
+| form       | FormInstance | 表单实例     |
+| onBlur     | (formCode?: string) => void | 表单失去焦点事件 |
+| onFinish   | (values: any, formCode?: string) => void | 表单提交回调   |
+| header     | React.ReactNode | 表单头部内容   |
+| footer     | React.ReactNode | 表单底部内容   |
+| review     | boolean | 是否预览模式   |
+| validators | FormFieldValidator[] | 验证规则数组   |
+| events     | FormEvent[] | 事件定义数组   |
+| layouts    | FormLayout[] | 布局定义数组   |
 
 ### 数据类型
 

packages/form-engine/src/form/index.tsx

@@ -28,26 +28,33 @@ export const FormViewContent: React.FC<FormViewContentProps> = (props) => {
 
     const review = props.review || false;
 
-    const handleOnSubmit = (values:any,formCode:string) => {
+    const handleOnFinish = (values:any,formCode:string) => {
         props.onFinish?.(values,formCode);
     }
 
+    const handleOnBlur = (formCode:string) => {
+        props.onBlur?.(formCode);
+    }
+
     return (
         <FormContext.Provider value={context}>
             {props.header}
             <FormSubView
                 Form={Form}
                 formCode={meta.code}
                 review={review}
-                onFinish={handleOnSubmit}
+                onFinish={handleOnFinish}
+                onBlur={handleOnBlur}
+                children={props.children}
             />
             {subFormList && subFormList.map(item=>{
                 return (
                     <FormSubView
                         Form={Form}
                         formCode={item.code}
                         review={review}
-                        onFinish={handleOnSubmit}
+                        onFinish={handleOnFinish}
+                        onBlur={handleOnBlur}
                     />
                 )
             })}

packages/form-engine/src/form/sub-view.tsx

@@ -6,6 +6,8 @@ interface FormSubViewProps {
     Form: React.ComponentType<any>;
     review: boolean;
     onFinish: (values:any,formCode:string) => void;
+    onBlur: (formCode:string) => void;
+    children?:React.ReactNode;
 }
 
 export const FormSubView: React.FC<FormSubViewProps> = (props) => {
@@ -51,10 +53,14 @@ export const FormSubView: React.FC<FormSubViewProps> = (props) => {
     return (
         <Form
             form={formTarget}
+            onBlur={()=>{
+                props.onBlur(props.formCode);
+            }}
             onFinish={(values:any)=>{
                 props.onFinish(values,props.formCode);
             }}
         >
+            {props.children}
             {layoutContext.render(props.formCode, fields, review, context)}
         </Form>
     )

packages/form-engine/src/types/view.tsx

@@ -96,14 +96,16 @@ export interface FormViewProps {
     meta: FormMeta;
     /** 表单操控对象 */
     form?: FormInstance;
-    /** 表单数据更新事件 */
-    onValuesChange?: (values: any) => void;
     /** 表单提交数据 **/
     onFinish?: (values:any,formCode?:string) => void;
-    /** 表单头内容 **/
+    /** 表单失去焦点事件 **/
+    onBlur?: (formCode?:string) => void;
+    /** 表单头内容（表单外部） **/
     header?:React.ReactNode;
-    /** 表单底部内容 **/
+    /** 表单底部内容（表单外部） **/
     footer?:React.ReactNode;
+    /** 主表单自定义内容（表单内部） **/
+    children?:React.ReactNode;
     /** 是否预览模式 */
     review?: boolean;
     /** 字段校验逻辑 */