lu-lowcode-package-form 0.9.77 → 0.9.79

package/package.json

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

package/src/App.jsx

@@ -100,7 +100,7 @@ function App() {
   }
   const setFormFields = () => {
     formRef?.current?.formRef?.setFieldsValue({ datetime: "2024-08-25",datetime2: "2024-08-25",datetime3: "",
-       "remark11": { "label": "选项2", "value": "2" },
+       "remark11": { "label": "选项2",  value: '1'},
         "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 }],
@@ -278,7 +278,7 @@ function App() {
               <Field.Input isRequired={true}  defaultValue={2} label="商品价格" __id="product_price14" />
               <Field.Input isRequired={true} label="商品价格" __id="product_price1"/>
               <Field.Input isRequired={true} label="商品个数" __id="product_num1" />
-              <Field.Input label="商品总价" __id="product_sum1"
+              <Field.Input disabled={true} label="商品总价" __id="product_sum1"
                 withIds={["table.product_price1", "table.product_num1"]}
                 withFill={{
                   "value": [

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

@@ -3,7 +3,7 @@
 import { Input, Select as OriginalSelect, Spin } from 'antd';
 import React, { useEffect, useState } from 'react';
 import { BaseWrapper } from "../base"
-import { debounce } from 'lodash';
+import { debounce, isEqual } from 'lodash';
 
 
 const SearchSelect = ({ addWrapper = true, 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", rightIcon, rightIconClick, ...props }) => {
@@ -18,8 +18,11 @@ const SearchSelect = ({ addWrapper = true, value, type, defaultValue, onChange,
 
         if (request && typeof request === 'function') {
             const list = await fetchOptions(params)
-            if (list && Array.isArray(list))
+            if (list && Array.isArray(list)) {
                 item = value ? list.find(item => item.value == value) : null
+                console.log("SearchSelect value", value)
+                console.log("SearchSelect item", item)
+            }
         }
 
         if (options && options.length > 0) {
@@ -33,6 +36,27 @@ const SearchSelect = ({ addWrapper = true, value, type, defaultValue, onChange,
 
     }
 
+    useEffect(() => {
+        console.log("useEffect SearchSelect value", value)
+        if (value && nOptions.length > 0) {
+            let item = value
+            if (Array.isArray(value)) {
+                item = nOptions.filter(item => {
+                    return value.filter(v => item.value == v?.value || item.value == v).length > 0
+                })
+            }
+            else {
+                item = nOptions.find(item => item.value == value?.value || item.value == value)
+            }
+
+            if (item && !isEqual(item, value)) {
+                onChange(item)
+                console.log("SearchSelect onChange value", item)
+            }
+
+        }
+    }, [value, nOptions])
+
     const handleSearch = debounce(async (value) => {
         const params = { ...requestParams }
         params[option_search] = value
@@ -88,24 +112,8 @@ const SearchSelect = ({ addWrapper = true, value, type, defaultValue, onChange,
 
     return addWrapper ? (
         <BaseWrapper {...props}>
-                <OriginalSelect
-
-                    notFoundContent={fetching ? <Spin size="small" /> : null}
-                    value={value}
-                    {...props}
-                    filterOption={false}
-                    showSearch={request && option_search ? true : false}
-                    onSearch={request && option_search ? handleSearch : null}
-                    onChange={handleChange}
-                    style={{ width: '100%', flex: 1 }}
-                    options={nOptions}
-                    mode={mode} >
-
-                </OriginalSelect>
-                {!props?.disabled && rightIcon}
-        </BaseWrapper>
-    ) : (<>
             <OriginalSelect
+
                 notFoundContent={fetching ? <Spin size="small" /> : null}
                 value={value}
                 {...props}
@@ -113,12 +121,28 @@ const SearchSelect = ({ addWrapper = true, value, type, defaultValue, onChange,
                 showSearch={request && option_search ? true : false}
                 onSearch={request && option_search ? handleSearch : null}
                 onChange={handleChange}
-                style={{ width: '100%' }}
+                style={{ width: '100%', flex: 1 }}
                 options={nOptions}
-                mode={mode}  >
+                mode={mode} >
 
             </OriginalSelect>
-            {!props?.disabled && rightIcon}</>
+            {!props?.disabled && rightIcon}
+        </BaseWrapper>
+    ) : (<>
+        <OriginalSelect
+            notFoundContent={fetching ? <Spin size="small" /> : null}
+            value={value}
+            {...props}
+            filterOption={false}
+            showSearch={request && option_search ? true : false}
+            onSearch={request && option_search ? handleSearch : null}
+            onChange={handleChange}
+            style={{ width: '100%' }}
+            options={nOptions}
+            mode={mode}  >
+
+        </OriginalSelect>
+        {!props?.disabled && rightIcon}</>
     )
 
 }

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

@@ -28,7 +28,7 @@ const TableCol = ({ children, width, ...props }) => {
     </div>
 }
 
-const Table = ({ children, onTableAddRow, ...props }) => {
+const Table = ({ children, onTableAddRow,onTableRemoveRow, ...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}`)
@@ -96,7 +96,10 @@ const Table = ({ children, onTableAddRow, ...props }) => {
                                 </TableCol>
                             })}
                             {!props?.readonly && <TableAction subTableHead={index == 0} key={`row_${index}_action`} subTable={true} subTableIndex={index} label={"操作"}>
-                                <DeleteOutlined className="fcursor-pointer" onClick={() => remove(index)} />
+                                <DeleteOutlined className="fcursor-pointer" onClick={() =>{
+                                     remove(index)
+                                     typeof onTableRemoveRow === "function" && onTableRemoveRow(childrenIds);
+                                }} />
                             </TableAction>}
                         </div>
                     ))}

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

@@ -219,7 +219,7 @@ const FormContainer = forwardRef(({ cols = 1, children, mode = "view" }, ref) =>
             setTimeout(() => {
                 form.setFieldValue(target, setValue)
                 handleFieldsWith(target, form.getFieldsValue())
-                if (ids.length > 0) onTableAddRow(ids)
+                // if (ids.length > 0) handleTableAddRow(ids)
             }, 0);
 
         }
@@ -233,9 +233,9 @@ const FormContainer = forwardRef(({ cols = 1, children, mode = "view" }, ref) =>
                 debounceHandleFieldsChange();
             }
 
-
+            console.log("ids", ids)
             if (ids.length > 0) handleTableAddRow(ids)
-        }, 100)
+        }, 300)
 
     }
     // 处理级联显示隐藏 @return {boolean} 是否需要重新渲染表单的字段
@@ -421,6 +421,14 @@ const FormContainer = forwardRef(({ cols = 1, children, mode = "view" }, ref) =>
             })
         }, 0);
     }
+    const handleTableRemoveRow = (ids) => {
+        const fieldValues = form.getFieldsValue();
+        setTimeout(() => {
+            ids.forEach(id => {
+                handleFieldsWith(id, fieldValues);
+            })
+        }, 0);
+    }
     const renderChildren = () => {
         const childrenArray = React.Children.toArray(children);
         const groupedChildren = batchElements(
@@ -452,7 +460,7 @@ const FormContainer = forwardRef(({ cols = 1, children, mode = "view" }, ref) =>
                         }
                     let childComponent = child;
                     if (isTable || isLayoutComponent) {
-                        childComponent = React.cloneElement(child, { onTableAddRow: handleTableAddRow })
+                        childComponent = React.cloneElement(child, { onTableAddRow: handleTableAddRow ,onTableRemoveRow: handleTableRemoveRow })
                     }
                     return (
                         <Col key={identifier || `col-${index}`} span={isLayoutComponent ? 24 : 24 / group.length} style={{ marginBottom: 0 }}>

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}) => {
+const LayoutFormRow = ({ children, layout, onTableAddRow,onTableRemoveRow}) => {
   layout = layout || '1';
   const getColSpan = (layoutStr) => {
     const layoutArray = layoutStr.split(',').map(Number);
@@ -20,7 +20,7 @@ const LayoutFormRow = ({ children, layout, onTableAddRow}) => {
       // console.log("initializeDependencyMap componentName", componentName)
       let childComponent = child;
       if (componentName  == 'Field.Table') 
-          childComponent = React.cloneElement(child, { onTableAddRow: onTableAddRow })
+          childComponent = React.cloneElement(child, { onTableAddRow: onTableAddRow, onTableRemoveRow: onTableRemoveRow })
      
       if (name) {
         return (