lu-lowcode-package-form 0.10.41 → 0.10.43

package/package.json

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

package/src/App.jsx

@@ -259,7 +259,11 @@ function App() {
             <Layout.FormRow layout={'1'}>
               <Field.Number label="测试规则" isRequired={true} __id="ceshi_rule1" />
             </Layout.FormRow>
-
+            <Layout.FormRow layout={'1'}>
+              <Field.Table label="子表格" __id="table2" >
+                <Field.Number label="测试规则2"  __id="ceshi_rule2" />
+              </Field.Table>
+            </Layout.FormRow>
             <Layout.FormRow layout={'1'}>
               <Field.Table label="子表格" __id="table"  >
 

package/src/components/field/base.jsx

@@ -24,7 +24,7 @@ export const BaseWrapper = ({
     hidePrompt = false,
     subTableIndex,
     addWrapper = true,
-    calcHidden,
+    calcHidden = false,
     defaultValue,
     value,
     onChange,

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

@@ -1,6 +1,6 @@
 import React, { useEffect, useRef, useState } from "react";
-import { Button, Form, Input } from "antd";
-import { DeleteOutlined } from "@ant-design/icons";
+import { Button, Form, Input,Popconfirm } from "antd";
+import { CopyOutlined, DeleteOutlined } from "@ant-design/icons";
 import { BaseWrapper } from "../base.jsx"
 import { type } from "@testing-library/user-event/dist/type/index.js";
 import { nanoid } from "nanoid";
@@ -11,7 +11,7 @@ const TableAction = ({ label, subTableIndex, children, subTableHead = false, ...
     return <div className="fw-12  ">
         <div className="frelative fw-full fh-full fflex fflex-col foverflow-hidden">
             {label && subTableHead && <div className='fh-12 ffont-semibold fbg-[#fafafa] ftext-sm fflex fflex-nowrap ftext-nowrap fjustify-between fitems-center fpx-2 fborder-b'>{label}</div>}
-            <div className="fw-full fflex-1 fflex fitems-center fjustify-center fp-2 fbox-border ">
+            <div className="fw-full fflex-1 fflex fitems-center fjustify-center fp-2 fbox-border fgap-2 ">
                 {children}
             </div>
         </div>
@@ -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>
                                         }}
@@ -168,10 +169,24 @@ const Table = ({ children, onTableAddRow, disabled, readonly, onTableRemoveRow,
                                 </TableCol>
                             })}
                             {disabled != true && readonly != true && <TableAction subTableHead={index == 0} key={`row_${index}_action`} subTable={true} subTableIndex={index} label={"操作"}>
-                                <DeleteOutlined className="fcursor-pointer" onClick={() => {
-                                    remove(index)
-                                    typeof onTableRemoveRow === "function" && onTableRemoveRow(childrenIds);
+                                <CopyOutlined className="fcursor-pointer" onClick={() => {
+                                    let tableValues = form.getFieldValue(fieldName)
+                                    const copyRow = {...tableValues[index]}
+                                    tableValues.splice(index + 1, 0, copyRow)
+                                    form?.setFieldValue(fieldName, tableValues)
                                 }} />
+                                <Popconfirm
+                                    title="删除确认"
+                                    description="确定要删除这一行吗？"
+                                    onConfirm={() => {
+                                        remove(index)
+                                        typeof onTableRemoveRow === "function" && onTableRemoveRow(childrenIds);
+                                    }}
+                                    okText="确定"
+                                    cancelText="取消"
+                                >
+                                    <DeleteOutlined className="fcursor-pointer ftext-red-500" />
+                                </Popconfirm>
                             </TableAction>}
                         </div>
                     ))}

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,7 +180,7 @@ const FormContainer = forwardRef(({ cols = 1, children, mode = "view" }, ref) =>
         return needRefresh;
 
     };
-    const removeLastFieldsValues = (name , isTable = false)=>{
+    const removeLastFieldsValues = (name, isTable = false) => {
         if (!lastFormValues.current) return
         if (isTable) {
             const lastFormValuesKeys = Object.keys(lastFormValues.current)
@@ -193,6 +193,23 @@ const FormContainer = forwardRef(({ cols = 1, children, mode = "view" }, ref) =>
         }
         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) => {
         // 获取当前变更的字段数据
@@ -266,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)
@@ -407,7 +417,7 @@ const FormContainer = forwardRef(({ cols = 1, children, mode = "view" }, ref) =>
         }
         return result
     }
-    
+
 
     const changedFieldsState = React.useRef({});
     const debounceHandleFieldsChange = debounce(() => {
@@ -416,7 +426,7 @@ 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];
             if (!isEqual(field.value, getLastFieldValue(field.name))) {
@@ -506,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}
@@ -537,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=""
@@ -556,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