lu-lowcode-package-form 0.9.88 → 0.9.90

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "lu-lowcode-package-form",
-  "version": "0.9.88",
+  "version": "0.9.90",
   "dependencies": {
     "@ant-design/icons": "^4.8.1",
     "@testing-library/jest-dom": "^5.17.0",

package/src/App.jsx

@@ -101,7 +101,7 @@ function App() {
   const setFormFields = () => {
     formRef?.current?.formRef?.setFieldsValue({
       datetime: "2024-08-25", datetime2: "2024-08-25", datetime3: "",
-      "remark11": "{ \"label\": \"选项2\", \"value\": \"1\" }",
+      "remark11": { label: '选项1', value: '1', name: "1111", table: "[{\"price\":1,\"num\":2},{\"price\":2,\"num\":2},{\"price\":3,\"num\":3},{\"price\":3,\"num\":3}]" },
       "remark12": [{ "label": "选项1", "value": "1" }, { "label": "选项2", "value": "2" }],
       "userselect": "1213131", "DeptSelect": ["leaf11"],
       "searchuser": [{ "id": 2, "name": "2222", "label": "2222", "value": 2 }, { "id": 4, "name": "4444", "label": "4444", "value": 4 }],

package/src/components/field/select/select.jsx

@@ -71,16 +71,20 @@ const MultipleSelect = ({ onChange, value, ...props }) => {
  * @param {*}  
  * @returns 
  */
-const WithSingleSelect = ({ readItemRender, readonly, onChange, value, ...props }) => {
+const WithSingleSelect = ({ readItemRender, readonly, onChange, onCustomChange,value, form,fieldName, ...props }) => {
 
     React.useEffect(() => {
         if (value && typeof value === "string") {
             try {
                 value = JSON.parse(value)
-                onChange(value)
+                // typeof onCustomChange === "function" && onCustomChange(value)
+                // onChange(value)
+                form?.setFieldValue(fieldName, value )
+                console.log("WithSingleSelect useEffect onChange////// form",form)
                 console.log("WithSingleSelect useEffect onChange////// value",value)
+                console.log("WithSingleSelect useEffect onChange////// props",props)
             } catch (error) {
-
+                console.log("WithSingleSelect useEffect error",error)
             }
         }
 

package/src/components/field/switch/index.jsx

@@ -1,23 +1,23 @@
 import React, { useEffect } from 'react';
 import { Switch as OriginalSwitch } from 'antd';
 import { BaseWrapper } from "../base.jsx"
-const Switch = ({value,onChange,...props}) => {
-    const [nValue, setNValue] = React.useState(false)
-    useEffect(()=>{
-        let tem_value = false 
-        if( typeof value === "boolean" )
-            tem_value = value
-        else if (typeof value === "string")
-            tem_value =value == "1" || value == "true"
-        else if (typeof value == "number") 
-            tem_value = value == 1
-        setNValue(tem_value)
-        // 格式化form表单获取到的值
-        typeof onChange == "function" && onChange(tem_value)
-    },[value])
+const Switch = ({value,onChange, form,fieldName,...props}) => {
+    let tem_value = false 
+    if( typeof value === "boolean" )
+        tem_value = value
+    else if (typeof value === "string")
+        tem_value =value == "1" || value == "true"
+    else if (typeof value == "number") 
+        tem_value = value == 1
+
+    if (value!== tem_value)
+    {
+        form?.setFieldValue(fieldName,tem_value)
+        // onChange(tem_value)
+    }
     return (
         <BaseWrapper {...props}>
-            <OriginalSwitch {...props} onChange={onChange} value={nValue} />
+            <OriginalSwitch {...props} onChange={onChange} value={value} />
         </BaseWrapper>
     );
 }

package/src/components/field/table/index.jsx

@@ -28,21 +28,21 @@ const TableCol = ({ children, width, ...props }) => {
     </div>
 }
 
-const Table = ({ children, onTableAddRow,disabled,readonly,onTableRemoveRow, ...props }) => {
+const Table = ({ children, onTableAddRow,disabled,readonly,onTableRemoveRow, form, fieldName,...props }) => {
     const [init, setInit] = useState(false);
     const name = props.componentId || props.__id
     const childrenIds = React.Children.map(children, (child) => `${name}.${child.props.componentId || child.props.__id}`)
     const rules = []
-    const handleAdd = (add) => {
+    const handleAdd = () => {
         if (!init) setInit(true);
-        typeof add === "function" && add();
+        form?.setFieldValue(fieldName, [{}] )
     }
 
     if (props.isRequired)
         rules.push({ required: true, message: `子表[${props.label}]必须填写` });
     return <Form.List name={name} rules={rules}>
         {(fields, { add, remove }) => {
-            if (fields.length === 0 && !init) handleAdd(add);
+            if (fields.length === 0 && !init) handleAdd();
             return <div className="fw-full ">
                 <div className="fw-full frelative fmin-h-20 foverflow-x-auto">
                     {fields.length === 0 && <div key={`tableHead`} className="fborder-b fflex flex-nowrap fmin-w-full ">
@@ -91,6 +91,8 @@ const Table = ({ children, onTableAddRow,disabled,readonly,onTableRemoveRow, ...
                                             subTable: true,
                                             subTableIndex: index,
                                             subTableHead: index == 0,
+                                            form, 
+                                            fieldName: [field.name, col_id],
                                         })}
                                     </Form.Item>
                                 </TableCol>

package/src/components/form-container/index.jsx

@@ -175,7 +175,7 @@ const FormContainer = forwardRef(({ cols = 1, children, mode = "view" }, ref) =>
                 if (dependencyMap.current.has(target)) {
                     let tableChildren = dependencyMap.current.get(target)?.component?.props?.children
                     if (Array.isArray(tableChildren) && tableChildren.length > 0) idGroups.push(tableChildren.map(item => `${source}.${item?.props?.componentId || item?.props?.__id}`))
-                    
+
                 }
                 if (source_value && typeof source_value == "string") {
                     try {
@@ -221,8 +221,8 @@ const FormContainer = forwardRef(({ cols = 1, children, mode = "view" }, ref) =>
                 handleFieldsWith(target, form.getFieldsValue())
                 // if (idGroups.length > 0) handleTableAddRow(idGroups)
             }, 0);
-            
-          
+
+
             // if (idGroups.length > 0) setTimeout(() => handleTableAddRow(idGroups), 0)
         }
 
@@ -234,7 +234,7 @@ const FormContainer = forwardRef(({ cols = 1, children, mode = "view" }, ref) =>
                 })
                 debounceHandleFieldsChange();
             }
-            console.log("idGroups",idGroups)
+            console.log("idGroups", idGroups)
             if (idGroups.length > 0) idGroups.forEach(ids => { if (Array.isArray(ids) && ids.length > 0) handleTableAddRow(ids) })
         }, 200)
 
@@ -339,7 +339,7 @@ const FormContainer = forwardRef(({ cols = 1, children, mode = "view" }, ref) =>
         }
 
         if (formula && formula.length > 0) {
-            console.log(`${identifier} 计算公式:`, formula)
+            console.log(`${childIdentifier} 计算公式:`, formula)
             const formulaResult = evalFormula(formula);
             form.setFieldValue(childIdentifier, formulaResult)
             handleFieldsWith(childIdentifier, form.getFieldsValue())
@@ -392,6 +392,7 @@ const FormContainer = forwardRef(({ cols = 1, children, mode = "view" }, ref) =>
     }, 200);
 
     const handleFieldsChange = (changedFields) => {
+        console.log("changedFields", changedFields)
         changedFields.filter(field => {
             if (field.name && field.name.length > 0) {
                 // const fieldKey = field.name.filter(item => typeof item == "string").join(".")
@@ -458,9 +459,14 @@ const FormContainer = forwardRef(({ cols = 1, children, mode = "view" }, ref) =>
                         else {
                             rules.push({ pattern: new RegExp(props.rules), message: props.rulesFailMessage ? props.rulesFailMessage : `${props.label}格式错误` })
                         }
-                    let childComponent = child;
-                    if (isTable || isLayoutComponent) {
-                        childComponent = React.cloneElement(child, { onTableAddRow: handleTableAddRow ,onTableRemoveRow: handleTableRemoveRow })
+                    const onCustomChange = (value) =>{
+                        form.setFieldValue(identifier,value)
+                    }
+                    let childComponent
+                    if (isTable || isLayoutComponent) 
+                        childComponent = React.cloneElement(child, { onTableAddRow: handleTableAddRow, onTableRemoveRow: handleTableRemoveRow, form: form, fieldName:identifier,onCustomChange })
+                    else {
+                        childComponent = React.cloneElement(child, { form: form , fieldName:identifier,onCustomChange})
                     }
                     return (
                         <Col key={identifier || `col-${index}`} span={isLayoutComponent ? 24 : 24 / group.length} style={{ marginBottom: 0 }}>
@@ -480,7 +486,10 @@ const FormContainer = forwardRef(({ cols = 1, children, mode = "view" }, ref) =>
     };
 
     return (
-        <Form form={form} className={"form-container fp-0 fw-full fh-full box-border  fflex fflex-col fgap-y-2" + (mode == "desgin" ? " fp-6" : "")} onFieldsChange={handleFieldsChange}>
+        <Form form={form} className={"form-container fp-0 fw-full fh-full box-border  fflex fflex-col fgap-y-2" + (mode == "desgin" ? " fp-6" : "")} onValuesChange={(changedValues, allValues)=>{
+            console.log("changedValues", changedValues)
+            // console.log("allValues", allValues)
+        }} onFieldsChange={handleFieldsChange}>
             {formContent}
         </Form>
     );

package/src/components/form-container/layout/form-row.jsx

@@ -1,7 +1,7 @@
 import React, { useMemo } from 'react';
 import { Form, Row, Col } from 'antd';
 
-const LayoutFormRow = ({ children, layout, onTableAddRow,onTableRemoveRow}) => {
+const LayoutFormRow = ({ children, layout, onTableAddRow, onTableRemoveRow, form }) => {
   layout = layout || '1';
   const getColSpan = (layoutStr) => {
     const layoutArray = layoutStr.split(',').map(Number);
@@ -18,10 +18,18 @@ const LayoutFormRow = ({ children, layout, onTableAddRow,onTableRemoveRow}) => {
       const name = props?.componentId || props?.__id;
       var componentName = child.type?.displayName || child.props?._componentName;
       // console.log("initializeDependencyMap componentName", componentName)
-      let childComponent = child;
-      if (componentName  == 'Field.Table') 
-          childComponent = React.cloneElement(child, { onTableAddRow: onTableAddRow, onTableRemoveRow: onTableRemoveRow })
-     
+      // let childComponent = child;
+      // if (componentName  == 'Field.Table') 
+      //     childComponent = React.cloneElement(child, { onTableAddRow: onTableAddRow, onTableRemoveRow: onTableRemoveRow })
+
+
+      let childComponent = null
+      if (componentName == 'Field.Table')
+        childComponent = React.cloneElement(child, { onTableAddRow: onTableAddRow, onTableRemoveRow: onTableRemoveRow, form: form ,fieldName:name})
+      else if (React.isValidElement(child))
+        childComponent = React.cloneElement(child, { form: form ,fieldName:name })
+      else childComponent = child
+
       if (name) {
         return (
           colSpans?.[index] && <Col span={colSpans[index]} key={index}>