lu-lowcode-package-form 0.10.40 → 0.10.42

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "lu-lowcode-package-form",
-  "version": "0.10.40",
+  "version": "0.10.42",
   "dependencies": {
     "@ant-design/icons": "^4.8.1",
     "@dnd-kit/core": "^6.1.0",

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

@@ -6,7 +6,7 @@ import { BaseWrapper } from "../base"
 import { debounce, isEqual } from 'lodash';
 
 
-const SearchSelect = forwardRef(({ addWrapper = true, form, fieldName, fieldsValue, value, type, defaultValue, onChange, option_label, option_value, option_search, options, request, requestParams, callError, subRequest, sub_option_label = "label", mode = "single", sub_option_value = "id", rightIconRender, rightIcon, rightIconClick, ...props }, ref) => {
+const SearchSelect = forwardRef(({ addWrapper = true, form, fieldName, fieldsValue, value, type, defaultValue, onChange, option_label, option_value, option_search, options, request, requestParams, callError, subRequest, sub_option_label = "label", mode = "single", sub_option_value = "id", rightIconRender, rightIcon, rightIconClick,recordFieldsChange, ...props }, ref) => {
     const [nOptions, setNOptions] = React.useState([])
     const [fetching, setFetching] = useState(false);
     useEffect(() => {
@@ -26,6 +26,7 @@ const SearchSelect = forwardRef(({ addWrapper = true, form, fieldName, fieldsVal
             if (!item) loadSelectOptions() 
         }
     }, [value])
+
     // useEffect(() => {
     //     initData(requestParams)
     // }, [requestParams, fieldsValue])
@@ -186,7 +187,7 @@ const SearchSelect = forwardRef(({ addWrapper = true, form, fieldName, fieldsVal
 
             </OriginalSelect>
             {!props?.disabled && rightIcon}
-            {!props?.disabled && typeof rightIconRender === 'function' && rightIconRender({ value, onChange, form, fieldName })}
+            {!props?.disabled && typeof rightIconRender === 'function' && rightIconRender({ value, onChange, form, fieldName,recordFieldsChange })}
         </BaseWrapper>
     ) : (<>
         <OriginalSelect
@@ -204,7 +205,7 @@ const SearchSelect = forwardRef(({ addWrapper = true, form, fieldName, fieldsVal
 
         </OriginalSelect>
         {!props?.disabled && rightIcon}
-        {!props?.disabled && typeof rightIconRender === 'function' && rightIconRender({ value, onChange, form, fieldName })}
+        {!props?.disabled && typeof rightIconRender === 'function' && rightIconRender({ value, onChange, form, fieldName ,recordFieldsChange})}
     </>
     )
 

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

@@ -30,7 +30,7 @@ const TableCol = ({ children, width, hidden, ...props }) => {
     </div>
 }
 
-const Table = ({ children, onTableAddRow, disabled, readonly, onTableRemoveRow, form, fieldName, initializeFormRender, mode, ...props }) => {
+const Table = ({ children, onTableAddRow, disabled, readonly, onTableRemoveRow, form, fieldName, initializeFormRender,recordFieldsChange, mode, ...props }) => {
     useEffect(() => {
         // console.log("Table form reload", form)
     }, [form])
@@ -160,6 +160,7 @@ const Table = ({ children, onTableAddRow, disabled, readonly, onTableRemoveRow,
                                                     fieldName: [fieldName, field.name, col_id],
                                                     fieldsValue: fieldsValue,
                                                     initializeFormRender,
+                                                    recordFieldsChange
                                                 })}
                                             </Form.Item>
                                         }}

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

@@ -57,7 +57,7 @@ const FormContainer = forwardRef(({ cols = 1, children, mode = "view" }, ref) =>
         formRef: form,
         setFieldsValue: (values) => {
             lockStatus.current = 1;
-            form.setFieldsValue({...values,__id: values?.id })
+            form.setFieldsValue({ ...values, __id: values?.id })
         },
         initializeFieldVisibility,
     }), []);
@@ -180,6 +180,35 @@ const FormContainer = forwardRef(({ cols = 1, children, mode = "view" }, ref) =>
         return needRefresh;
 
     };
+    const removeLastFieldsValues = (name, isTable = false) => {
+        if (!lastFormValues.current) return
+        if (isTable) {
+            const lastFormValuesKeys = Object.keys(lastFormValues.current)
+            for (let index = 0; index < lastFormValuesKeys.length; index++) {
+                const key = lastFormValuesKeys[index];
+                if (key.includes(`${name},`)) {
+                    delete lastFormValues.current[key]
+                }
+            }
+        }
+        else delete lastFormValues.current[name]
+    }
+
+    const recordFieldChange = (fieldName, fieldValue) => {
+        if (!changedFieldsState.current) {
+            changedFieldsState.current = {};
+        }
+        changedFieldsState.current[fieldName] = fieldValue;
+    }
+    const recordFieldsChange = (changedFields, handleChange = false) => {
+        var changedKeys = Object.keys(changedFields)
+        if (changedKeys.length > 0) {
+            changedKeys.forEach(key => {
+                recordFieldChange(key, changedFields[key])
+            })
+            if (handleChange) debounceHandleFieldsChange();
+        }
+    }
 
     // 处理填充规则
     const handleFillRules = (current_identifier, parentIdentifier, fieldValues, fillRules) => {
@@ -221,6 +250,7 @@ const FormContainer = forwardRef(({ cols = 1, children, mode = "view" }, ref) =>
                     return target_item_value
                 })
                 setValue = target_value
+                removeLastFieldsValues(target, true)
                 eventEmitter.emit('reloadTable', target);
             }
             // 同级字段
@@ -253,14 +283,7 @@ const FormContainer = forwardRef(({ cols = 1, children, mode = "view" }, ref) =>
         }
 
         setTimeout(() => {
-            var changedKeys = Object.keys(changedFields)
-            if (changedKeys.length > 0) {
-                changedKeys.forEach(key => {
-                    changedFieldsState.current[key] = changedFields[key];
-                })
-                
-                debounceHandleFieldsChange();
-            }
+            recordFieldsChange(changedFields,true)
             // console.log("idGroups", idGroups)
             if (idGroups.length > 0) idGroups.forEach(ids => { if (Array.isArray(ids) && ids.length > 0) handleTableAddRow(ids) })
         }, 0)
@@ -395,6 +418,7 @@ const FormContainer = forwardRef(({ cols = 1, children, mode = "view" }, ref) =>
         return result
     }
 
+
     const changedFieldsState = React.useRef({});
     const debounceHandleFieldsChange = debounce(() => {
         const fieldValues = form.getFieldsValue();
@@ -402,10 +426,9 @@ const FormContainer = forwardRef(({ cols = 1, children, mode = "view" }, ref) =>
         lockStatus.current = 0
         let needRefresh = false;
         if (!lastFormValues.current) lastFormValues.current = {}
+
         for (let key in changedFieldsState.current) {
             let field = changedFieldsState.current[key];
-            // console.log("field",field.value)
-            // console.log("getLastFieldValue(field.name)",getLastFieldValue(field.name))
             if (!isEqual(field.value, getLastFieldValue(field.name))) {
                 if (lockStatus_ != 1) {
                     needRefresh = handleFieldsWith(field.name, fieldValues);
@@ -493,9 +516,11 @@ const FormContainer = forwardRef(({ cols = 1, children, mode = "view" }, ref) =>
                     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, initializeFormRender, mode })
+                    if (isTable || isLayoutComponent){
+                        childComponent = React.cloneElement(child, { onTableAddRow: handleTableAddRow, onTableRemoveRow: handleTableRemoveRow, form: form, fieldName: identifier, onCustomChange, initializeFormRender, mode , recordFieldsChange })
+                    }
                     else if (componentName === "Field.WithSingleSelect" || componentName === "Field.WithMultipleSelect" || componentName === "Show.WithTable") {
                         childComponent = <Form.Item
                             hidden={hidden}
@@ -524,7 +549,7 @@ const FormContainer = forwardRef(({ cols = 1, children, mode = "view" }, ref) =>
                         >
                             {({ getFieldsValue }) => {
                                 const fieldsValue = getFieldsValue();
-                                let element = React.cloneElement(child, { onTableAddRow: handleTableAddRow, onTableRemoveRow: handleTableRemoveRow, form: form, fieldName: identifier, onCustomChange, fieldsValue, initializeFormRender })
+                                let element = React.cloneElement(child, { onTableAddRow: handleTableAddRow, onTableRemoveRow: handleTableRemoveRow, form: form, fieldName: identifier, onCustomChange, fieldsValue, initializeFormRender ,recordFieldsChange})
                                 return componentName === "show.WithTable" ? <>{element}</> : <Form.Item
                                     style={{ marginBottom: 0 }}
                                     label=""
@@ -543,7 +568,7 @@ const FormContainer = forwardRef(({ cols = 1, children, mode = "view" }, ref) =>
                             name={identifier}
                             rules={rules}
                         >
-                            {React.cloneElement(child, { form: form, fieldName: identifier, onCustomChange, initializeFormRender })}
+                            {React.cloneElement(child, { form: form, fieldName: identifier, onCustomChange, initializeFormRender,recordFieldsChange })}
                         </Form.Item>
                     }
                     return (

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, form, initializeFormRender, mode }) => {
+const LayoutFormRow = ({ children, layout, onTableAddRow, onTableRemoveRow, form, initializeFormRender,recordFieldsChange, mode }) => {
   layout = layout || '1';
   const getColSpan = (layoutStr) => {
     const layoutArray = layoutStr.split(',').map(Number);
@@ -40,7 +40,7 @@ const LayoutFormRow = ({ children, layout, onTableAddRow, onTableRemoveRow, form
       }
       let childComponent = null
       if (componentName == 'Field.Table')
-        childComponent = React.cloneElement(child, { onTableAddRow: onTableAddRow, onTableRemoveRow: onTableRemoveRow, form: form, fieldName: name, initializeFormRender, mode })
+        childComponent = React.cloneElement(child, { onTableAddRow: onTableAddRow, onTableRemoveRow: onTableRemoveRow, form: form, fieldName: name, initializeFormRender, mode,recordFieldsChange })
       else if (componentName === "Field.WithSingleSelect" || componentName === "Field.WithMultipleSelect" || componentName === "Show.WithTable") {
         childComponent = <Form.Item
           hidden={hidden}
@@ -68,7 +68,7 @@ const LayoutFormRow = ({ children, layout, onTableAddRow, onTableRemoveRow, form
         >
           {({ getFieldsValue }) => {
             const fieldsValue = getFieldsValue();
-            let element = React.cloneElement(child, { onTableAddRow: onTableAddRow, onTableRemoveRow: onTableRemoveRow, form: form, fieldName: identifier, onCustomChange, fieldsValue, initializeFormRender })
+            let element = React.cloneElement(child, { onTableAddRow: onTableAddRow, onTableRemoveRow: onTableRemoveRow, form: form, fieldName: identifier, onCustomChange, fieldsValue, initializeFormRender,recordFieldsChange })
             return componentName === "Show.WithTable" ? <>{element}</> : <Form.Item
               style={{ marginBottom: 0 }}
               label=""
@@ -88,7 +88,7 @@ const LayoutFormRow = ({ children, layout, onTableAddRow, onTableRemoveRow, form
           name={name}
           rules={rules}
         >
-          {React.cloneElement(child, { form: form, fieldName: name, initializeFormRender })}
+          {React.cloneElement(child, { form: form, fieldName: name, initializeFormRender,recordFieldsChange })}
         </Form.Item>
       else childComponent = child