add option

Author: xlorne

apps/app-mobile/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@form-example/app-mobile",
-  "version": "0.0.16",
+  "version": "0.0.18",
   "private": true,
   "type": "module",
   "scripts": {

apps/app-pc/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@form-example/app-pc",
-  "version": "0.0.16",
+  "version": "0.0.18",
   "private": true,
   "type": "module",
   "scripts": {

apps/app-pc/src/components/select/index.tsx

@@ -0,0 +1,55 @@
+import {Form, Select} from "antd";
+import React from "react";
+import {type FormItemProps, useFormContext} from "@coding-form/form-engine";
+
+export const FormSelect: React.FC<FormItemProps> = (props) => {
+
+    const {context} = useFormContext();
+
+    const instance = context.getFormInstance();
+
+    const AttributeUtils = React.useMemo(() => {
+        let data = {} as any;
+        if (props.attributes && props.attributes.length > 0) {
+            props.attributes.forEach(attribute => {
+                if(attribute.label && attribute.value) {
+                    const item = {
+                        [attribute.label]: attribute.value,
+                    }
+                    // 合并数据到data
+                    Object.assign(data, item);
+                }
+            });
+        }
+        return {
+            getAttribute: (name: string) => {
+                return data[name];
+            }
+        }
+    }, [props.attributes]);
+
+    return (
+        <Form.Item
+            name={props.name}
+            key={props.name}
+            label={props.label}
+            required={props.required}
+            hidden={props.hidden}
+            rules={props.rules}
+            layout={props.layout}
+        >
+            <Select
+                options={AttributeUtils.getAttribute('DataSource')}
+                placeholder={props.placeholder}
+                onChange={(value, option) => {
+                    props.onChange?.(value, option);
+                }}
+                onBlur={(_) => {
+                    const value = instance.getFieldValue(props.name);
+                    props.onBlur?.(value);
+                }}
+            />
+        </Form.Item>
+    )
+
+}

apps/app-pc/src/config/form-register.tsx

@@ -1,9 +1,11 @@
 import {registerFormItems} from "@coding-form/form-engine";
 import {FormString} from "@/components/string";
+import {FormSelect} from "@/components/select";
 import {Form} from "antd";
 import {LayoutRegister} from "@coding-form/form-engine";
 import {CardFormLayout} from "@/layout/card-form-layout.tsx";
 
+
 export const registerForms = () => {
 
     registerFormItems(Form,[
@@ -13,5 +15,12 @@ export const registerForms = () => {
         }
     ]);
 
+    registerFormItems(Form,[
+        {
+            type: 'select',
+            componentType:FormSelect
+        }
+    ]);
+
     LayoutRegister.getInstance().register('card',CardFormLayout);
 }

apps/app-pc/src/pages/home.tsx

@@ -35,7 +35,32 @@ const HomePage = () => {
                 dataType: 'STRING',
                 hidden: false,
                 required: true,
-            }
+            },
+            {
+                id: "option",
+                name: 'option',
+                code: 'option',
+                type: "select",
+                dataType: 'STRING',
+                hidden: false,
+                required: true,
+                attributes: [
+                    {
+                        key: '123',
+                        label: 'DataSource',
+                        value: [
+                            {
+                                label: '1',
+                                value: '1'
+                            },
+                            {
+                                label: '2',
+                                value: '2'
+                            }
+                        ]
+                    }
+                ]
+            },
         ],
         subForms: []
     }
@@ -86,6 +111,13 @@ const HomePage = () => {
                             instance.setFieldValue('id', value);
                             instance.refreshFields('name');
                         }
+                    },
+                    {
+                        type: 'change',
+                        target: 'option',
+                        event: (_: FormInstance, value: any, option) => {
+                            console.log('value', value, option);
+                        }
                     }
                 ]}
                 layouts={[
@@ -104,6 +136,10 @@ const HomePage = () => {
                                 {
                                     code: 'name',
                                     span: 24
+                                },
+                                {
+                                    code: 'option',
+                                    span: 24
                                 }
                             ]
                         }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coding-form/root",
-  "version": "0.0.16",
+  "version": "0.0.18",
   "description": "form-engine",
   "main": "index.js",
   "scripts": {

packages/form-engine/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coding-form/form-engine",
-  "version": "0.0.16",
+  "version": "0.0.18",
   "description": "form-engine components",
   "keywords": [
     "coding-form",

packages/form-engine/src/event/event-context.ts

@@ -9,21 +9,21 @@ export class EventContext {
         this.events = events;
     }
 
-    public handlerOnChange(formInstance:FormInstance,target: FieldKey, value: any) {
+    public handlerOnChange(formInstance: FormInstance, target: FieldKey, value: any, option: any) {
         const events = this.getEvents('change', target);
         if (events && events.length > 0) {
             for (const event of events) {
-                event.event(formInstance,value);
+                event.event(formInstance, value, option);
             }
         }
     }
 
 
-    public handlerOnBlur(formInstance:FormInstance,target: FieldKey,value:any) {
+    public handlerOnBlur(formInstance: FormInstance, target: FieldKey, value: any) {
         const events = this.getEvents('blur', target);
         if (events && events.length > 0) {
             for (const event of events) {
-                event.event(formInstance,value);
+                event.event(formInstance, value);
             }
         }
     }

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

@@ -17,7 +17,7 @@ export class FormItemFactory {
         return this.instance;
     }
 
-    public register(type: string,componentType:React.ComponentType<FormItemProps>) {
+    public register(type: string, componentType: React.ComponentType<FormItemProps>) {
         this.cache.set(type, componentType);
     }
 
@@ -27,17 +27,17 @@ export class FormItemFactory {
     }
 
 
-    public render(formCode:string,
-                  formField:FormField,
-                  layout:'horizontal' | 'vertical',
-                  readOnly:boolean,
-                  context:FormContextScope){
+    public render(formCode: string,
+                  formField: FormField,
+                  layout: 'horizontal' | 'vertical',
+                  readOnly: boolean,
+                  context: FormContextScope) {
 
         const formItemProps: FormItemProps = {
             ...formField,
             readOnly: readOnly,
-            name:formField.code,
-            label:formField.name
+            name: formField.code,
+            label: formField.name
         };
 
         const FormItem = FormItemFactory.getInstance().getItem(formField.type);
@@ -48,17 +48,17 @@ export class FormItemFactory {
 
         const fieldKey = {
             formCode,
-            fieldCode:formField.code,
+            fieldCode: formField.code,
         }
 
-        const handlerOnChange = (value:any)=>{
+        const handlerOnChange = (value: any, option: any) => {
             formItemProps.onChange?.(value);
-            eventContext.handlerOnChange(instance,fieldKey, value);
+            eventContext.handlerOnChange(instance, fieldKey, value, option);
         }
 
-        const handlerOnBlur = (value:any) => {
+        const handlerOnBlur = (value: any) => {
             formItemProps.onBlur?.(value);
-            eventContext.handlerOnBlur(instance,fieldKey,value);
+            eventContext.handlerOnBlur(instance, fieldKey, value);
         }
 
         if (FormItem) {

packages/form-engine/src/types/event.ts

@@ -13,7 +13,7 @@ export interface FormEvent {
     target?:FieldKey;
 
     // 事件触发
-    event:(instance:FormInstance,value?:any)=>void;
+    event:(instance:FormInstance,value?:any,option?:any)=>void;
 
 }