lu-lowcode-package-form 0.9.96 → 0.9.98

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "lu-lowcode-package-form",
-  "version": "0.9.96",
+  "version": "0.9.98",
   "dependencies": {
     "@ant-design/icons": "^4.8.1",
     "@dnd-kit/core": "^6.1.0",
@@ -15,6 +15,7 @@
     "@wangeditor/editor-for-react": "^1.0.6",
     "antd": "^5.13.2",
     "dayjs": "^1.11.11",
+    "eventemitter3": "^5.0.1",
     "nanoid": "^5.0.7",
     "postcss-modules": "^6.0.0",
     "quill": "^2.0.2",

package/src/App.jsx

@@ -102,7 +102,8 @@ function App() {
     }
   }
   const setFormFields = () => {
-    formRef?.current?.formRef?.setFieldsValue({ "userselect": "1213131", "remark11": { "label": "选项1", "value": "1", "name": "1111", "table": "[{\"price\":1,\"num\":2, \"remark11\":\"{ label: '选项3', value: '3' }\"},{\"price\":2,\"num\":2},{\"price\":3,\"num\":3},{\"price\":3,\"num\":3}]" }, "table": [{ "product_num1": "123", "product_sum1": "", "node_oclxmzswzti": "", "select2": "", "switch_table": false, "remark11": { "label": "选项2", "value": "2" }, "product_price12": "" }, { "product_num1": "213", "product_sum1": "", "node_oclxmzswzti": "", "select2": "", "switch_table": false, "datetime2": "2024-08-22 11:09:07", "product_price13": 1, "product_price14": 2, "product_price12": "", "remark11": { "label": "选项3", "value": "3" } }], "product_total_price": "0.00", "DeptSelect": ["leaf11"], "PostSelect": ["parent 1-1", "leaf11"], "searchuser": [{ "id": 2, "name": "2222", "label": "2222", "value": 2 }, { "id": 4, "name": "4444", "label": "4444", "value": 4 }], "product_price": "213", "product_num": "21", "product_num_range": [1, 22], "product_sum": "4473", "switch": false, "datetime": "2024-08-25", "datetime2": "2024-08-25", "datetime3": "", "datetime4": "2024-08-22 11:09:04", "remark12": [{ "label": "选项1", "value": "1" }, { "label": "选项2", "value": "2" }] })
+    formRef?.current?.setFieldsValue({ "userselect": "1213131","tianchong1":{"label":"选项1","value":"1"}, "remark11": { "label": "选项1", "value": "1", "name": "1111", "table": "[{\"price\":1,\"num\":2, \"remark11\":\"{ label: '选项3', value: '3' }\"},{\"price\":2,\"num\":2},{\"price\":3,\"num\":3},{\"price\":3,\"num\":3}]" }, "table": [{ "product_num1": "123", "product_sum1": "", "node_oclxmzswzti": "", "select2": "", "switch_table": false, "remark11": { "label": "选项2", "value": "2" }, "product_price12": "" }, { "product_num1": "213", "product_sum1": "", "node_oclxmzswzti": "", "select2": "", "switch_table": false, "datetime2": "2024-08-22 11:09:07", "product_price13": 1, "product_price14": 2, "product_price12": "", "remark11": { "label": "选项3", "value": "3" } }], "product_total_price": "0.00", "DeptSelect": ["leaf11"], "PostSelect": ["parent 1-1", "leaf11"], "searchuser": [{ "id": 2, "name": "2222", "label": "2222", "value": 2 }, { "id": 4, "name": "4444", "label": "4444", "value": 4 }], "product_price": "213", "product_num": "21", "product_num_range": [1, 22], "product_sum": "4473", "switch": false, "datetime": "2024-08-25", "datetime2": "2024-08-25", "datetime3": "", "datetime4": "2024-08-22 11:09:04", "remark12": [{ "label": "选项1", "value": "1" }, { "label": "选项2", "value": "2" }] })
+    // formRef?.current?.setFieldsValue({"tianchong1":{"label":"选项1","value":"1"}, })
   }
   const handleCols = () => {
     setCols(cols - 1)
@@ -127,7 +128,7 @@ function App() {
       <div className=" fflex fflex-col fitems-center fflex-1 foverflow-y-auto">
         <DraggableBtn />
         {/* <MyPureComponentWithRef ref={testRef} />; */}
-        <div className=' fp-4 fflex fjustify-center fw-[1336px]'>
+        {/* <div className=' fp-4 fflex fjustify-center fw-[1336px]'>
           <div className='fflex fflex-col'>
             <SortList
               items={sortItems}
@@ -147,13 +148,13 @@ function App() {
                 </div>
               )}
             /></div>
-        </div>
+        </div> */}
         {/* <div className=' fp-4 fflex fjustify-center fw-[1336px]'>
         <WangEditorNext />
       </div> */}
-        <div className='fw-full fp-4 fflex fjustify-center'>
+        {/* <div className='fw-full fp-4 fflex fjustify-center'>
           <TinyMCEEditor />
-        </div>
+        </div> */}
         {/* <div className='fw-full fp-4 fflex fjustify-center'>
         <EditorWang />
       </div> */}
@@ -173,12 +174,67 @@ function App() {
 
 
           <FormContainerWrapper cols={cols} className="" ref={formRef} >
+            <Field.WithSingleSelect
+              isRequired={true} ref={testRef}
+              request={async (params) => {
+                return { code: 0, data: { list: [{ label: '选项1', value: '1', tianchong2: { label: '选项2', value: '2'} ,tcinput1: "1111" ,  }, { label: '选项2', value: '2' }, { label: '选项3', value: '3' }] } }
+              }}
+              option_label="label"
+              option_value="value"
+              fillRules={[
+                {
+                  "id": "636d3924-0298-4e9b-809a-26d4a10d7b19",
+                  "type": 0,
+                  "source": "tianchong2",
+                  "target": "tianchong2",
+                  "subRules": [
+                  ]
+                },
+                {
+                  "id": "636d3924-0298-4e9b-809a-26d4a10d7b11",
+                  "type": 0,
+                  "source": "tcinput1",
+                  "target": "tcinput1",
+                  "subRules": [
+                  ]
+                },
+
+              ]} label="测试填充1" __id="tianchong1" />
+              <Field.WithSingleSelect
+                isRequired={true} ref={testRef}
+                request={async (params) => {
+                  return { code: 0, data: { list: [{ label: '选项1', value: '1', }, { label: '选项2', value: '2' ,tcinput1: "8989",tcinput2: "2222" }, { label: '选项3', value: '3' }] } }
+                }}
+                option_label="label"
+                option_value="value"
+                fillRules={[
+                  {
+                    "id": "636d3924-0298-4e9b-809a-16d4a10d7b29",
+                    "type": 0,
+                    "source": "tcinput1",
+                    "target": "tcinput1",
+                    "subRules": [
+                    ]
+                  },
+                  {
+                    "id": "636d3924-0298-4e9b-809a-26d4a10d7b29",
+                    "type": 0,
+                    "source": "tcinput2",
+                    "target": "tcinput2",
+                    "subRules": [
+                    ]
+                  },
+  
+                ]} label="测试填充2" __id="tianchong2" />
+            <Field.Input label="测试被填充1" __id="tcinput1" />
+            <Field.Input label="测试被填充2" __id="tcinput2" />
+
             <Field.UserSelect label="选择用户" __id="userselect" defaultValue={[{ id: 1, username: "十天" }]} />
             <Layout.FormGroupTitle title={"基本信息"} />
             <Field.WithSingleSelect
               rightIconRender={({ form, fieldName }) => {
-                console.log("rightIconRender form", form,)
-                console.log("rightIconRender fieldName", fieldName)
+                // console.log("rightIconRender form", form,)
+                // console.log("rightIconRender fieldName", fieldName)
                 return <><PrinterOutlined /></>
               }}
               isRequired={true} ref={testRef} fillRules={[
@@ -255,11 +311,11 @@ function App() {
                 <Field.DatePicker defaultNow={true} label="日期时间" prompt="" datetype="date" __id="datetime2" />
 
                 <Field.WithSingleSelect ref={testRef}
-                  request={async (params)=>{
+                  request={async (params) => {
                     console.log("WithSingleSelect params", params)
-                    if (params?.node_ocm009lpxt2 == "111")
-                      return {code:0,data:{ list:[{ label: '选项1', value: '1', product_price11: "1111", product_price12: "2222", product_price1: 111 }, { label: '选项2', value: '2' }, { label: '选项3', value: '3' }]}}
-                    else return {code:0,data:{ list:[{ label: '选项1', value: '1', product_price11: "1111", product_price12: "2222", product_price1: 111 }, { label: '选项2', value: '2' },]}}
+                    if (params?.ruleParams?.node_ocm009lpxt2 == 111)
+                      return { code: 0, data: { list: [{ label: '选项1', value: '1', product_price11: "1111", product_price12: "2222", product_price1: 111 }, { label: '选项2', value: '2' }, { label: '选项3', value: '3' }] } }
+                    else return { code: 0, data: { list: [{ label: '选项1', value: '1', product_price11: "1111", product_price12: "2222", product_price1: 111 }, { label: '选项2', value: '2' },] } }
                   }}
                   option_label="label"
                   option_value="value"
@@ -300,7 +356,7 @@ function App() {
                       ]
                     },
 
-                  ]} label="测试关联单选"  __id="remark11" />
+                  ]} label="测试关联单选" __id="remark11" />
 
                 <Field.Switch label="开关" __id="switch_table"></Field.Switch>
                 <Field.Input defaultValue={3} isRequired={true} label="含税单价" __id="product_price11" />

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

@@ -9,6 +9,17 @@ import { debounce, isEqual } from 'lodash';
 const SearchSelect = ({ 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 }) => {
     const [nOptions, setNOptions] = React.useState([])
     const [fetching, setFetching] = useState(false);
+    useEffect(() => {
+        // console.log("SearchSelect useEffect props", props)
+        // console.log(`SearchSelect ${fieldName} value`, value)
+        if (value && nOptions.length > 0) {
+            let item = nOptions.find(item => item.value == value?.value || item.value == value)
+            if (item && !isEqual(item, value)){
+               console.log("new value /////",item)
+               typeof onChange === 'function' && onChange(item)
+            }
+        }
+    },[value])
     useEffect(() => {
         initData(requestParams)
     }, [requestParams, fieldsValue])
@@ -37,22 +48,14 @@ const SearchSelect = ({ addWrapper = true, form, fieldName, fieldsValue, value,
             }
         }
         if (request && typeof request === 'function') {
-            const list = await fetchOptions(params, ruleParams)
-            if (list && Array.isArray(list)) {
-                item = value ? list.find(item => item.value == value) : null
-                console.log("SearchSelect value", value)
-                console.log("SearchSelect item", item)
-            }
+            await fetchOptions(params, ruleParams)
         }
 
         if (options && options.length > 0) {
-            item = value ? options.find(item => item.value == value) : null
             setNOptions(options)
         }
 
-        if (item) {
-            onChange(item)
-        }
+       
 
     }
 

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

@@ -1,9 +1,10 @@
-import React, { useEffect, useState } from "react";
+import React, { useEffect, useRef, useState } from "react";
 import { Button, Form, Input } from "antd";
 import { 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";
+import {eventEmitter} from '../../../utils/events'
 
 const TableAction = ({ label, subTableIndex, children, subTableHead = false, ...props }) => {
     //fsticky fright-0 
@@ -29,6 +30,9 @@ const TableCol = ({ children, width, ...props }) => {
 }
 
 const Table = ({ children, onTableAddRow, disabled, readonly, onTableRemoveRow, form, fieldName, ...props }) => {
+    useEffect(()=>{
+        console.log("Table form reload",form)
+    },[form])
     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}`)
@@ -37,6 +41,20 @@ const Table = ({ children, onTableAddRow, disabled, readonly, onTableRemoveRow,
         if (!init) setInit(true);
         form?.setFieldValue(fieldName, [{}])
     }
+    const [tableId, setTableId] = useState()
+    const handleReloadTable = (target) => {
+        if(fieldName == target) {
+            setTableId(nanoid()) 
+        }
+    }
+    useEffect(() => {
+        setTableId(nanoid()) 
+        eventEmitter.on('reloadTable', handleReloadTable);
+        return () => {
+            eventEmitter.off('reloadTable', handleReloadTable);
+        }
+
+    },[])
 
     if (props.isRequired)
         rules.push({ required: true, message: `子表[${props.label}]必须填写` });
@@ -60,7 +78,7 @@ const Table = ({ children, onTableAddRow, disabled, readonly, onTableRemoveRow,
                         </TableAction>}
                     </div>}
                     {fields.map((field, index) => (
-                        <div key={field.key} className="fborder-b fflex flex-nowrap fmin-w-full ">
+                        <div key={`${tableId}.${field.key}`} className="fborder-b fflex flex-nowrap fmin-w-full ">
 
                             {React.Children.map(children, (child, childIndex) => {
                                 let { props } = child;

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

@@ -4,7 +4,8 @@ import { Form, Row, Col, message } from "antd";
 import { debounce, isEqual } from 'lodash';
 import { evalFormula } from '../../utils/formula'
 import { nanoid } from 'nanoid';
-
+import {eventEmitter} from '../../utils/events'
+ 
 
 function batchElements(elements, groupSize) {
     const groupedElements = [];
@@ -48,11 +49,12 @@ const FormContainer = forwardRef(({ cols = 1, children, mode = "view" }, ref) =>
     const [formContent, setFormContent] = React.useState(null);
 
     const dependencyMap = React.useRef(null);
-
+    // 调用setFieldsValue时,进入锁定状态,阻止因字段值变化而触发级联处理
+    const lockStatus = React.useRef(0);
     React.useImperativeHandle(ref, () => ({
         formRef: form,
         setFieldsValue: (values) => {
-            changedFieldsState.current = {};
+            lockStatus.current = 1;
             form.setFieldsValue(values)
         },
         initializeFieldVisibility,
@@ -202,6 +204,7 @@ const FormContainer = forwardRef(({ cols = 1, children, mode = "view" }, ref) =>
                     return target_item_value
                 })
                 setValue = target_value
+                eventEmitter.emit('reloadTable', target);
             }
             // 同级字段
             else {
@@ -215,16 +218,18 @@ const FormContainer = forwardRef(({ cols = 1, children, mode = "view" }, ref) =>
                         setValue = current_value[withFillIndex]?.[source]
                     }
                 }
+                changedFields[target] =  { name: [target], value: setValue};
             }
             if (rule?.type == 1) {
                 form.setFieldValue(target, undefined);
             }
-
-            setTimeout(() => {
-                form.setFieldValue(target, setValue)
-                handleFieldsWith(target, form.getFieldsValue())
+            form.setFieldValue(target, setValue)
+            // handleFieldsWith(target, form.getFieldsValue())
+            // setTimeout(() => {
+                // form.setFieldValue(target, setValue)
+                // handleFieldsWith(target, form.getFieldsValue())
                 // if (idGroups.length > 0) handleTableAddRow(idGroups)
-            }, 0);
+            // }, 0);
 
 
             // if (idGroups.length > 0) setTimeout(() => handleTableAddRow(idGroups), 0)
@@ -236,9 +241,10 @@ const FormContainer = forwardRef(({ cols = 1, children, mode = "view" }, ref) =>
                 changedKeys.forEach(key => {
                     changedFieldsState.current[key] = changedFields[key];
                 })
+                // console.log("changedFieldsState",changedFieldsState.current)
                 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) })
         }, 0)
 
@@ -343,7 +349,7 @@ const FormContainer = forwardRef(({ cols = 1, children, mode = "view" }, ref) =>
         }
 
         if (formula && formula.length > 0) {
-            console.log(`${childIdentifier} 计算公式:`, formula)
+            // console.log(`${childIdentifier} 计算公式:`, formula)
             const formulaResult = evalFormula(formula);
             form.setFieldValue(childIdentifier, formulaResult)
             handleFieldsWith(childIdentifier, form.getFieldsValue())
@@ -379,12 +385,18 @@ const FormContainer = forwardRef(({ cols = 1, children, mode = "view" }, ref) =>
     const changedFieldsState = React.useRef({});
     const debounceHandleFieldsChange = debounce(() => {
         const fieldValues = form.getFieldsValue();
+        const lockStatus_ = lockStatus.current;
+        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))) {
-                needRefresh = handleFieldsWith(field.name, fieldValues);
+                if (lockStatus_ !=1){
+                    needRefresh = handleFieldsWith(field.name, fieldValues);
+                }
                 lastFormValues.current[field.name] = field.value;
             }
         }
@@ -393,10 +405,10 @@ const FormContainer = forwardRef(({ cols = 1, children, mode = "view" }, ref) =>
         }
         // lastFormValues.current = form.getFieldsValue();
         changedFieldsState.current = {};
-    }, 200);
+    }, 100);
 
     const handleFieldsChange = (changedFields) => {
-        console.log("changedFields", 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(".")
@@ -527,7 +539,7 @@ 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" : "")} onValuesChange={(changedValues, allValues) => {
-            console.log("changedValues", changedValues)
+            // console.log("changedValues", changedValues)
             // console.log("allValues", allValues)
         }} onFieldsChange={handleFieldsChange}>
             {formContent}

package/src/utils/events.jsx

@@ -0,0 +1,5 @@
+
+import EventEmitter from 'eventemitter3';
+const eventEmitter = new EventEmitter();
+
+export { eventEmitter };