lu-lowcode-package-form 0.9.93 → 0.9.94

package/src/App.jsx

@@ -3,7 +3,10 @@ import './App.css';
 import { Button, Input, Select } from 'antd';
 import React, { useEffect, useState } from 'react';
 import Draggable from 'react-draggable';
-
+import { throttle } from 'lodash';
+import { SortList } from "./components"
+import { TinyMCEEditor } from './components'
+import { PrinterOutlined } from '@ant-design/icons';
 const searchSelectOptions = [
   { id: 1, name: "1111" },
   { id: 2, name: "2222" },
@@ -99,13 +102,16 @@ 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?.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" }] })
   }
   const handleCols = () => {
     setCols(cols - 1)
   }
 
+  const [items, setItems] = useState(['Item 1', 'Item 2', 'Item 3', 'Item 4']);
+
 
+  const [sortItems, setSortItems] = useState([{ id: 1, content: "sdfsfd" }, { id: 2, content: "sdfsfd2" }, { id: 3, content: "sdfsfd3" }]);
   return (
     <div className='fflex fflex-col fitems-center fh-screen '>
       <div className='fflex fgap-2 fitems-center fjustify-center  fw-full'>
@@ -121,12 +127,33 @@ 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-[960px]'>
+        <div className=' fp-4 fflex fjustify-center fw-[1336px]'>
+          <div className='fflex fflex-col'>
+            <SortList
+              items={sortItems}
+              setItems={setSortItems}
+              renderItem={(item, index, isDragging) => (
+                <div
+                  style={{
+                    padding: '8px',
+                    margin: '4px',
+                    border: '1px solid gray',
+                    cursor: 'move',
+                    opacity: isDragging ? 0.2 : 1,
+
+                  }}
+                >
+                  {item.content}
+                </div>
+              )}
+            /></div>
+        </div>
+        {/* <div className=' fp-4 fflex fjustify-center fw-[1336px]'>
         <WangEditorNext />
       </div> */}
-        {/* <div className='fw-full fp-4 fflex fjustify-center'>
-        <WangEditor />
-      </div> */}
+        <div className='fw-full fp-4 fflex fjustify-center'>
+          <TinyMCEEditor />
+        </div>
         {/* <div className='fw-full fp-4 fflex fjustify-center'>
         <EditorWang />
       </div> */}
@@ -148,6 +175,24 @@ function App() {
           <FormContainerWrapper cols={cols} className="" ref={formRef} >
             <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)
+                return <><PrinterOutlined /></>
+              }}
+              isRequired={true} ref={testRef} fillRules={[
+                {
+                  "id": "636d3924-0298-4e9b-809a-26d4a10d7b89",
+                  "type": 0,
+                  "source": "shuilv",
+                  "target": "shuilv",
+                  "subRules": [
+                  ]
+                },
+
+              ]} label="发票类型" options={[{ label: '选项1', value: '1', shuilv: 15, }, { label: '选项2', value: '2', shuilv: 50 }, { label: '选项3', value: '3', shuilv: 2 }]} __id="fapiaoleixing" />
+
             <Field.Number label="税率（%）" __id="shuilv" />
 
             <Field.WithSingleSelect isRequired={true} ref={testRef} fillRules={[
@@ -209,27 +254,53 @@ function App() {
                   }} />
                 <Field.DatePicker defaultNow={true} label="日期时间" prompt="" datetype="date" __id="datetime2" />
 
-                <Field.WithSingleSelect ref={testRef} fillRules={[
-                  {
-                    "id": "636d3924-0298-4e9b-809a-26d4a10d7b89",
-                    "type": 0,
-                    "source": "product_price11",
-                    "target": "product_price11",
-                    "subRules": [
+                <Field.WithSingleSelect ref={testRef}
+                  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' },]}}
+                  }}
+                  option_label="label"
+                  option_value="value"
+                  filterRules={[
+                    {
+                      "value": {
+                        "parent": "",
+                        "field_key": "shuilv",
+                        "group_key": "fieldsValue",
+                        "field_name": "当前表单.税率"
+                      },
+                      "column": {
+                        "label": "库存表.所在仓库",
+                        "value": "node_ocm009lpxt2",
+                        "column_name": "node_ocm009lpxt2",
+                        "column_type": ""
+                      }
+                    }
+                  ]}
 
-                    ]
-                  },
-                  {
-                    "id": "636d3924-0298-4e9b-809a-26d4a10d7b89",
-                    "type": 0,
-                    "source": "product_price1",
-                    "target": "product_price1",
-                    "subRules": [
+                  fillRules={[
+                    {
+                      "id": "636d3924-0298-4e9b-809a-26d4a10d7b89",
+                      "type": 0,
+                      "source": "product_price11",
+                      "target": "product_price11",
+                      "subRules": [
 
-                    ]
-                  },
+                      ]
+                    },
+                    {
+                      "id": "636d3924-0298-4e9b-809a-26d4a10d7b89",
+                      "type": 0,
+                      "source": "product_price1",
+                      "target": "product_price1",
+                      "subRules": [
+
+                      ]
+                    },
 
-                ]} label="测试关联单选" options={[{ label: '选项1', value: '1', product_price11: "1111", product_price12: "2222", product_price1: 111 }, { label: '选项2', value: '2' }, { label: '选项3', value: '3' }]} __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/TinyMCEEditor/index.jsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import { Editor } from '@tinymce/tinymce-react';
+
+const TinyMCEEditor = () => {
+  return (
+    <Editor
+      initialValue="<p>一些内容。</p>"
+      tinymceScriptSrc="/tinymce/tinymce.min.js"
+      init={{
+        height: 500,
+        menubar: false,
+        plugins: 'lists link image table',
+        toolbar: 'undo redo | styleselect | bold italic | link image | table',
+        language: 'zh_CN', // 设置中文
+      }}
+      onEditorChange={(content, editor) => {
+        console.log(content);
+      }}
+    />
+  );
+};
+
+export {TinyMCEEditor};

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

@@ -6,18 +6,37 @@ import { BaseWrapper } from "../base"
 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 }) => {
+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(() => {
         initData(requestParams)
-    }, [requestParams])
-
+    }, [requestParams, fieldsValue])
+    // useEffect(() => {
+    //     console.log("WithSingleSelect useEffect fieldsValue",fieldsValue)
+    //     if(fieldsValue)
+    //     {
+    //         form.setFieldValue(fieldName,value )
+    //         console.log("onChange undefined")
+    //         onChange(undefined)
+    //     }
+    // },[fieldsValue])
     const initData = async (params) => {
         let item = null
-
+        const ruleParams = {}
+        if (Array.isArray(props?.filterRules)) {
+            // 验证关联表字段是否需要重新渲染
+            for (let rule of props?.filterRules) {
+                let ruleValue;
+                if (rule.value.parent === "")
+                    ruleValue = fieldsValue?.[rule.value.field_key];
+                else
+                    ruleValue = fieldsValue?.[rule.value.parent]?.[fieldName?.[1]]?.[rule.value.field_key];
+                ruleParams[rule.column.column_name] = ruleValue ?? "##norequest##";
+            }
+        }
         if (request && typeof request === 'function') {
-            const list = await fetchOptions(params)
+            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)
@@ -30,9 +49,9 @@ const SearchSelect = ({ addWrapper = true, value, type, defaultValue, onChange,
             setNOptions(options)
         }
 
-        if (item) {
-            onChange(item)
-        }
+        // if (item) {
+        //     onChange(item)
+        // }
 
     }
 
@@ -63,15 +82,19 @@ const SearchSelect = ({ addWrapper = true, value, type, defaultValue, onChange,
         await fetchOptions(params)
     }, 200)
 
-    const fetchOptions = async (params) => {
+    const fetchOptions = async (params, ruleParams) => {
         try {
-            setFetching(true)
-            const response = await request(params);
-            if (response.code > 0) {
-                callError && typeof callError === 'function' && callError(response.message);
-                return
+            let list = []
+            if (!(ruleParams && Object.values(ruleParams).some(value => value === "##norequest##"))) {
+                setFetching(true)
+                const response = await request({ ...params, ...ruleParams });
+                setFetching(false)
+                if (response.code > 0) {
+                    callError && typeof callError === 'function' && callError(response.message);
+                }
+                else list = response.data?.list || response.data
             }
-            let list = response.data?.list || response.data
+
             if (Array.isArray(list)) {
                 for (let index = 0; index < list.length; index++) {
                     const item = list[index];
@@ -84,19 +107,20 @@ const SearchSelect = ({ addWrapper = true, value, type, defaultValue, onChange,
                         list[index] = { ...item, label: item[option_label], title: item[option_label], options: subList }
                     }
                     list[index] = { ...item, label: item[option_label], value: item[option_value] }
-
                 }
-
+                if (nOptions.length > 0 && !isEqual(nOptions, list)) 
+                {
+                    typeof onChange === 'function' && onChange(undefined)
+                }
                 setNOptions(list)
             }
-
             else setNOptions([])
             return list
         } catch (error) {
             console.error("fetchOptions", error)
+            setFetching(false)
         }
         finally {
-            setFetching(false)
         }
     }
 
@@ -127,6 +151,7 @@ const SearchSelect = ({ addWrapper = true, value, type, defaultValue, onChange,
 
             </OriginalSelect>
             {!props?.disabled && rightIcon}
+            {!props?.disabled && typeof rightIconRender === 'function' && rightIconRender({ value, onChange, form, fieldName })}
         </BaseWrapper>
     ) : (<>
         <OriginalSelect
@@ -142,7 +167,9 @@ const SearchSelect = ({ addWrapper = true, value, type, defaultValue, onChange,
             mode={mode}  >
 
         </OriginalSelect>
-        {!props?.disabled && rightIcon}</>
+        {!props?.disabled && rightIcon}
+        {!props?.disabled && typeof rightIconRender === 'function' && rightIconRender({ value, onChange, form, fieldName })}
+    </>
     )
 
 }

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

@@ -71,8 +71,9 @@ const MultipleSelect = ({ onChange, value, ...props }) => {
  * @param {*}  
  * @returns 
  */
-const WithSingleSelect = ({ readItemRender, readonly, onChange, onCustomChange,value, form,fieldName, ...props }) => {
+const WithSingleSelect = ({ readItemRender, readonly, onChange, onCustomChange,value, form,fieldName,...props }) => {
 
+  
     React.useEffect(() => {
         if (value && typeof value === "string") {
             try {
@@ -93,7 +94,7 @@ const WithSingleSelect = ({ readItemRender, readonly, onChange, onCustomChange,v
         {value && value.label && <>{readItemRender && typeof readItemRender === "function" ? readItemRender(value) : <span key={`btn_${value?.value}`}>{value?.label}</span>}</>}
     </div>
     return (
-        <SearchSelect addWrapper={false}  {...props} onChange={onChange} value={value} mode="single" className=" fflex-1 foverflow-hidden" />
+        <SearchSelect addWrapper={false} form={form} fieldName={fieldName} {...props} onChange={onChange} value={value} mode="single" className=" fflex-1 foverflow-hidden" />
 
     )
 }
@@ -103,7 +104,7 @@ const WithSingleSelect = ({ readItemRender, readonly, onChange, onCustomChange,v
  * @param {*} 
  * @returns 
  */
-const WithMultipleSelect = ({ readItemRender, readonly, onChange, value, ...props }) => {
+const WithMultipleSelect = ({ readItemRender, readonly, onChange, value, form,fieldName, ...props }) => {
 
     React.useEffect(() => {
         if (value && typeof value === "string") {
@@ -123,7 +124,7 @@ const WithMultipleSelect = ({ readItemRender, readonly, onChange, value, ...prop
         }{index < value.length - 1 ? <span className=" ftext-gray-400">,</span> : null}</>)}
     </div>
     return (
-        <SearchSelect addWrapper={false} {...props} onChange={onChange} value={value} mode="multiple" className=" fflex-1 foverflow-hidden" />
+        <SearchSelect addWrapper={false}  form={form} fieldName={fieldName} {...props} onChange={onChange} value={value} mode="multiple" className=" fflex-1 foverflow-hidden" />
     )
 }
 

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

@@ -28,14 +28,14 @@ const TableCol = ({ children, width, ...props }) => {
     </div>
 }
 
-const Table = ({ children, onTableAddRow,disabled,readonly,onTableRemoveRow, form, fieldName,...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 = () => {
         if (!init) setInit(true);
-        form?.setFieldValue(fieldName, [{}] )
+        form?.setFieldValue(fieldName, [{}])
     }
 
     if (props.isRequired)
@@ -56,12 +56,12 @@ const Table = ({ children, onTableAddRow,disabled,readonly,onTableRemoveRow, for
                                 })}
                             </TableCol>
                         })}
-                        {disabled != true  && readonly != true && <TableAction subTableHead={true} key={`row_${0}_action`} subTable={true} subTableIndex={0} label={"操作"}>
+                        {disabled != true && readonly != true && <TableAction subTableHead={true} key={`row_${0}_action`} subTable={true} subTableIndex={0} label={"操作"}>
                         </TableAction>}
                     </div>}
                     {fields.map((field, index) => (
                         <div key={field.key} className="fborder-b fflex flex-nowrap fmin-w-full ">
-                           
+
                             {React.Children.map(children, (child, childIndex) => {
                                 let { props } = child;
                                 const col_id = child?.props?.componentId || child?.props?.__id || childIndex;
@@ -78,36 +78,74 @@ const Table = ({ children, onTableAddRow,disabled,readonly,onTableRemoveRow, for
                                         rules.push({ pattern: new RegExp(props.rules), message: props.rulesFailMessage ? props.rulesFailMessage : `${props.label}格式错误` })
                                     }
 
+                                const { componentId, __id, _componentName, ...otherProps } = child.props;
+                                const componentName = child.type?.displayName || _componentName;
+                                const identifier = componentId || __id;
                                 return <TableCol width={150} key={`row_${field.key}_col_${childIndex}`}>
                                     <Form.Item
-                                        style={{ marginBottom: 0 }}
-                                        label=""
-                                        name={[field.name, col_id]}
-                                        rules={rules}
-                                        
+                                        style={{ margin: 0 }}
+                                        shouldUpdate={(prevValues, curValues) => {
+                                            let result = false;
+                                            if (
+                                                (componentName === "Field.WithSingleSelect" || componentName === "Field.WithMultipleSelect") &&
+                                                Array.isArray(otherProps.filterRules) &&
+                                                otherProps.filterRules.length > 0
+                                            ) {
+                                                // 验证关联表字段是否需要重新渲染
+                                                for (let rule of otherProps.filterRules) {
+                                                    let prevFieldValue, curFieldValue;
+
+                                                    if (rule.value.parent === "") {
+                                                        prevFieldValue = prevValues?.[rule.value.field_key];
+                                                        curFieldValue = curValues?.[rule.value.field_key];
+                                                    } else {
+                                                        prevFieldValue = prevValues?.[rule.value.parent]?.[field.name]?.[rule.value.field_key];
+                                                        curFieldValue = curValues?.[rule.value.parent]?.[field.name]?.[rule.value.field_key];
+                                                    }
+
+                                                    if (prevFieldValue !== curFieldValue) {
+                                                        result = true;
+                                                        break;  
+                                                    }
+                                                }
+                                            }
+                                            return result;
+                                        }}
                                     >
-                                        {React.cloneElement(child, {
-                                            key: `row_${field.key}_child_${childIndex}`,
-                                            subTable: true,
-                                            subTableIndex: index,
-                                            subTableHead: index == 0,
-                                            form, 
-                                            fieldName: [fieldName,field.name, col_id],
-                                        })}
+                                        {( {getFieldsValue}) => {
+                                            const fieldsValue = getFieldsValue();
+                                             return <Form.Item
+                                                label=""
+                                                style={{ marginBottom: 0 }}
+                                                name={[field.name, col_id]}
+                                                rules={rules}
+                                            >
+                                                {React.cloneElement(child, {
+                                                    key: `row_${field.key}_child_${childIndex}`,
+                                                    subTable: true,
+                                                    subTableIndex: index,
+                                                    subTableHead: index === 0,
+                                                    form,
+                                                    fieldName: [fieldName, field.name, col_id],
+                                                    fieldsValue:fieldsValue,
+                                                })}
+                                            </Form.Item>
+                                        }}
                                     </Form.Item>
+
                                 </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);
+                            {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);
                                 }} />
                             </TableAction>}
                         </div>
                     ))}
                 </div>
-                {disabled != true  && readonly != true && <Button onClick={() => {
-                    add({ key: nanoid() }) 
+                {disabled != true && readonly != true && <Button onClick={() => {
+                    add({ key: nanoid() })
                     typeof onTableAddRow === "function" && onTableAddRow(childrenIds);
                 }} className="fmy-2">新增一行</Button>}
             </div>

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

@@ -51,7 +51,7 @@ const FormContainer = forwardRef(({ cols = 1, children, mode = "view" }, ref) =>
 
     React.useImperativeHandle(ref, () => ({
         formRef: form,
-        setFieldsValue: (values)=>{
+        setFieldsValue: (values) => {
             changedFieldsState.current = {};
             form.setFieldsValue(values)
         },
@@ -463,25 +463,61 @@ const FormContainer = forwardRef(({ cols = 1, children, mode = "view" }, ref) =>
                         else {
                             rules.push({ pattern: new RegExp(props.rules), message: props.rulesFailMessage ? props.rulesFailMessage : `${props.label}格式错误` })
                         }
-                    const onCustomChange = (value) =>{
-                        form.setFieldValue(identifier,value)
+                    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})
+                    if (isTable || isLayoutComponent)
+                        childComponent = React.cloneElement(child, { onTableAddRow: handleTableAddRow, onTableRemoveRow: handleTableRemoveRow, form: form, fieldName: identifier, onCustomChange })
+                    else if (componentName === "Field.WithSingleSelect" || componentName === "Field.WithMultipleSelect") {
+                        childComponent = <Form.Item
+                            style={{ margin: 0 }}
+                            shouldUpdate={(prevValues, curValues) => {
+                                let result = false;
+                                if (Array.isArray(props.filterRules) &&
+                                    props.filterRules.length > 0
+                                ) {
+                                    // 验证关联表字段是否需要重新渲染
+                                    for (let rule of props.filterRules) {
+                                        if (rule.value.parent != "") continue
+                                        let prevFieldValue, curFieldValue;
+
+                                        prevFieldValue = prevValues?.[rule.value.field_key];
+                                        curFieldValue = curValues?.[rule.value.field_key];
+                                        if (prevFieldValue !== curFieldValue) {
+                                            result = true;
+                                            break;
+                                        }
+                                    }
+                                }
+                                return result;
+                            }}
+                        >
+                            {({getFieldsValue}) => {
+                                const fieldsValue = getFieldsValue();
+                                return <Form.Item
+                                    style={{ marginBottom: 0 }}
+                                    label=""
+                                    name={identifier}
+                                    rules={rules}
+                                >
+                                    {React.cloneElement(child, { onTableAddRow: handleTableAddRow, onTableRemoveRow: handleTableRemoveRow, form: form, fieldName: identifier, onCustomChange, fieldsValue })}
+                                </Form.Item>
+                            }}
+                        </Form.Item>
+                    } else {
+                        childComponent = <Form.Item
+                            style={{ marginBottom: 0 }}
+                            label=""
+                            name={identifier}
+                            rules={rules}
+                        >
+                            {React.cloneElement(child, { form: form, fieldName: identifier, onCustomChange })}
+                        </Form.Item>
                     }
                     return (
                         <Col key={identifier || `col-${index}`} span={isLayoutComponent ? 24 : 24 / group.length} style={{ marginBottom: 0 }}>
-                            {(isLayoutComponent || isTable) ? childComponent : <Form.Item
-                                style={{ marginBottom: 0 }}
-                                label=""
-                                name={identifier}
-                                rules={rules}
-                            >
-                                {childComponent}
-                            </Form.Item>}
+                            {childComponent}
                         </Col>
                     );
                 })}
@@ -490,7 +526,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)=>{
+        <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}>

package/src/components/index.jsx

@@ -61,4 +61,6 @@ export { Setter }
 
 export * from './editor'
 export * from "./wangEditor"
-export * from "./wangEditorNext"
+export * from "./wangEditorNext"
+export * from "./sortList"
+export * from "./TinyMCEEditor"