lu-lowcode-package-form 0.11.8 → 0.11.10

package/src/App copy 3.jsx

@@ -0,0 +1,278 @@
+import { FormContainer, Field, FormContainerWrapper, Layout, Setter, EditorQuill, EditorWang, EditorWang2, EditorWang3, WangEditor, WangEditorNext, Show } from './components';
+import './App.css';
+import { Button, Input, Select } from 'antd';
+import React, { useCallback, useEffect, useState } from 'react';
+import Draggable from 'react-draggable';
+import { throttle, debounce } 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" },
+  { id: 3, name: "3333" },
+  { id: 4, name: "4444" },
+  { id: 5, name: "5555" },
+  { id: 6, name: "6666" },
+  { id: 7, name: "7777" },
+  { id: 8, name: "8888" },
+  { id: 9, name: "9999" },
+]
+const searchSelectRequest = async (params) => {
+  // console.log("params", params)
+  return await new Promise((resolve) => {
+    setTimeout(() => {
+      if (params && params?.name) {
+        resolve({ code: 0, data: searchSelectOptions.filter(item => item.name.includes(params.name)) })
+      }
+      resolve({ code: 0, data: searchSelectOptions })
+    }, 20);
+  })
+}
+const DraggableBtn = () => {
+  const [dragging, setDragging] = useState(false);
+
+  const handleStart = (e) => {
+    e.preventDefault();
+    setDragging(false);
+  };
+
+  const handleDrag = () => {
+    setDragging(true);
+  };
+
+  const handleStop = (e) => {
+    e.preventDefault();
+    if (!dragging) {
+      alert('Button clicked!');
+    }
+  };
+
+  return (
+    <Draggable
+      onStart={handleStart}
+      onDrag={handleDrag}
+      onStop={handleStop}
+    >
+      <button className="floating-button">Drag me!</button>
+    </Draggable>
+  );
+}
+
+const treeData = [
+  {
+    title: '0-1',
+    key: '0-1',
+    children: [
+      { title: '0-1-0-0', key: '0-1-0-0' },
+      { title: '0-1-0-1', key: '0-1-0-1' },
+      { title: '0-1-0-2', key: '0-1-0-2' },
+    ],
+  },
+  {
+    title: '0-2',
+    key: '0-2',
+  },
+];
+
+function App() {
+  const formRef = React.createRef();
+  const testRef = React.useRef()
+  const [testCalcHidden, setTestCalcHidden] = useState(false);
+  const [readonly, setReadonly] = useState(true);
+
+  const testdebounce = useCallback(debounce((param1, param2) => {
+    console.log("testdebounce param1", param1)
+    console.log("testdebounce param2", param2)
+  }, 200))
+
+
+  useEffect(() => {
+    testdebounce(1, 2)
+    testdebounce(11, 22)
+    testdebounce(111, 222)
+    // console.log("testRef //////", testRef.current)
+  }, [testRef.current])
+  const [cols, setCols] = React.useState(3);
+
+  const getFormFields = () => {
+    console.log("formRef?.current", formRef)
+    const formData = formRef?.current?.formRef?.getFieldsValue();
+    console.log("formData", JSON.stringify(formData));
+  }
+  // 验证
+  const validateFields = async () => {
+    try {
+      var values = await formRef?.current?.formRef?.validateFields({
+        validateOnly: false,
+      })
+      console.log("values", values)
+
+    } catch (error) {
+      console.log("error", error)
+      console.log(error.errorFields[0].errors[0])
+    }
+  }
+  const setFormFields = () => {
+    formRef?.current?.setFieldsValue({ "__id": 1, "userselect": "1213131", "remark11": { "label": "选项1", "value": "1", "name": "1111", "table": "[{\"price\":1,\"num\":2},{\"price\":2,\"num\":2},{\"price\":3,\"num\":3},{\"price\":3,\"num\":3}]" }, "table2": [{}], "table": [{ "product_num1": "123", "product_sum1": "", "node_oclxmzswzti": "", "select2": "", "switch_table": false, "remark11": { "label": "选项2", "value": "2" }, "product_price12": "", "tianchong1": { "label": "选项1", "value": "1", "tianchong2": { "label": "选项2", "value": "2" }, "tcinput1": "1111" }, "tianchong2": { "label": "选项2", "value": "2", "tcinput1": "8989", "tcinput2": "2222" }, "tcinput1": "8989", "tcinput2": "2222", "tcinput3": "2222" }, { "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_price11": 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": JSON.stringify([{ "label": "选项1", "value": "1" }, { "label": "选项2", "value": "2" }]) })
+    // formRef?.current?.setFieldsValue({"tianchong1":{"label":"选项1","value":"1"}, })
+  }
+  const handleCols = () => {
+
+    setCols(cols == 1 ? 3 : cols - 1)
+  }
+
+  const [items, setItems] = useState(['Item 1', 'Item 2', 'Item 3', 'Item 4']);
+
+  const handleUpdateReadonly = () => {
+    setReadonly(!readonly)
+  }
+
+  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'>
+        <Button type="primary" onClick={() => {
+          setTestCalcHidden(!testCalcHidden)
+        }}>testCalcHidden</Button>
+        <Button type="primary" onClick={validateFields}>validateFields</Button>
+        <Button type="primary" onClick={getFormFields}>GetValues</Button>
+        <Button type="primary" onClick={setFormFields}>SetValues</Button>
+        <Button type="primary" onClick={() => {
+          console.log("testRef.current", testRef.current)
+          testRef.current?.handleChange({ label: '选项1', value: '1', name: "1111", table: "[{\"price\":1,\"num\":2},{\"price\":2,\"num\":2}]" })
+        }}>testwithref</Button>
+        <Button type="primary" onClick={handleCols}>UpdateCol</Button>
+        <Button type="primary" onClick={handleUpdateReadonly}>UpdateReadonly</Button>
+      </div>
+
+      <div className=" fflex fflex-col fitems-center fflex-1 foverflow-y-auto">
+        <div className='fw-[960px] frounded  fbg-slate-50 fflex fflex-col fitems-center fpb-10'>
+
+
+          <FormContainerWrapper cols={cols} className="" ref={formRef} >
+
+            <Field.RadioGroup
+              buttonStyle="solid"
+              label="菜单类型"
+              __id="routeType"
+              defaultValue={2}
+              options={[{ label: "菜单分组", value: 999 }, { label: "URL", value: 1 }, { label: "绑定表单", value: 2 }]} />
+
+
+            <Field.Input label="测试 withVisible" __id="withVisible"
+            isRequired={true}
+              withIds={["routeType"]}
+              withVisible={{
+                "value": [
+                  {
+                    "insert": {
+                      "span": true
+                    },
+                    "attributes": {
+                      "id": "routeType",
+                      "color": "blue",
+                      "tagKey": "fieldsValue",
+                      "content": "当前表单.开关"
+                    }
+                  },
+                  {
+                    "insert": " == 1\n"
+                  }
+                ],
+                "version": 1734400834533,
+                "withData": [
+
+                ]
+              }} 
+            />
+            <Field.Input label="测试 withVisible2" __id="withVisible2"
+            isRequired={true}
+              withIds={["routeType"]}
+              withVisible={{
+                "value": [
+                  {
+                    "insert": {
+                      "span": true
+                    },
+                    "attributes": {
+                      "id": "routeType",
+                      "color": "blue",
+                      "tagKey": "fieldsValue",
+                      "content": "当前表单.开关2"
+                    }
+                  },
+                  {
+                    "insert": " == 2\n"
+                  }
+                ],
+                "version": 1734400834533,
+                "withData": [
+
+                ]
+              }} 
+            />
+            <Field.Input label="测试 withVisible21" __id="withVisible21"
+            isRequired={true}
+              withIds={["routeType"]}
+              withVisible={{
+                "value": [
+                  {
+                    "insert": {
+                      "span": true
+                    },
+                    "attributes": {
+                      "id": "routeType",
+                      "color": "blue",
+                      "tagKey": "fieldsValue",
+                      "content": "当前表单.开关2"
+                    }
+                  },
+                  {
+                    "insert": " == 2\n"
+                  }
+                ],
+                "version": 1734400834533,
+                "withData": [
+
+                ]
+              }} 
+            />
+            <Field.Select label="绑定表单"
+              option_label={"formTitle"}
+              __id="menuFormTemplateId"
+              withIds={["routeType"]}
+              withVisibleFunc={(fieldsValue) => {
+                const result = fieldsValue?.routeType == 2 ? true : false
+                // console.log("withVisibleFunc menuFormTemplateId", fieldsValue)
+                // console.log("withVisibleFunc menuFormTemplateId result", result)
+                return result
+              }} />
+
+
+            <Field.Input label="隐藏字段" __id="hidden1"
+            calcHidden={true}
+            />
+
+            <Field.Input label="菜单URL" __id="route"
+              withIds={["routeType"]}
+              withVisibleFunc={(fieldsValue) => {
+                const result = fieldsValue?.routeType == 1 ? true : false
+                // console.log("withVisibleFunc route", fieldsValue)
+                // console.log("withVisibleFunc route result", result)
+                return result
+              }} />
+     
+          </FormContainerWrapper>
+       
+
+        </div>
+
+      </div>
+    </div>
+  );
+}
+
+export default App;
+
+export { FormContainer, Field, FormContainerWrapper } from './components'

package/src/App.jsx

@@ -87,12 +87,7 @@ function App() {
   }, 200))
 
 
-  useEffect(() => {
-    testdebounce(1, 2)
-    testdebounce(11, 22)
-    testdebounce(111, 222)
-    // console.log("testRef //////", testRef.current)
-  }, [testRef.current])
+ 
   const [cols, setCols] = React.useState(3);
 
   const getFormFields = () => {
@@ -194,7 +189,7 @@ function App() {
         <div className='fw-[960px] frounded  fbg-slate-50 fflex fflex-col fitems-center fpb-10'>
 
 
-          <FormContainerWrapper cols={cols} className="" ref={formRef} >
+          <FormContainerWrapper cols={cols} key={"formc"} className="" ref={formRef} >
 
           <Field.WithSingleSelect
               ref={testRef}
@@ -225,6 +220,7 @@ function App() {
               buttonStyle="solid"
               label="菜单类型"
               __id="routeType"
+              defaultValue={2}
               options={[{ label: "菜单分组", value: 999 }, { label: "URL", value: 1 }, { label: "绑定表单", value: 2 }]} />
 
 

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

@@ -80,17 +80,20 @@ const FormContainer = forwardRef(({ cols = 1, children, mode = "view" }, ref) =>
 
     // 添加节流后的 initializeFormRender
     const throttledInitializeFormRender = React.useCallback(
-        throttle(() => {
+        throttle(async () => {
             console.log("throttledInitializeFormRender")
-            initializeDependencyMap();
-            setFormContent(renderChildren());
+            await initializeDependencyMap();
+            requestAnimationFrame(() => {
+                setFormContent(renderChildren());
+            })
+            console.log("throttledInitializeFormRender end")
+
         }, 300),
         [children, cols]
     );
 
 
     useEffect(() => {
-        console.log("children", children)
         throttledInitializeFormRender();
         return () => {
             throttledInitializeFormRender.cancel();
@@ -113,7 +116,7 @@ const FormContainer = forwardRef(({ cols = 1, children, mode = "view" }, ref) =>
         // }
         // return current;
     }
-    const initializeDependencyMap = () => {
+    const initializeDependencyMap = async () => {
         const fields = [];
         function traverse(currentNode, parentNode = null) {
             var componentName = currentNode.type?.displayName || currentNode.props?._componentName;
@@ -157,19 +160,26 @@ const FormContainer = forwardRef(({ cols = 1, children, mode = "view" }, ref) =>
             });
         });
         console.log("dependencyMap.current", dependencyMap.current)
-        initializeFieldVisibility();
+        await initializeFieldVisibilityImmediate();
     };
-
-    // 初始化字段的级联关系
-    const initializeFieldVisibility = debounce(async (reloadFields = false) => {
+    const initializeFieldVisibilityImmediate = async (reloadFields = false) => {
         console.log("initializeFieldVisibility *************************************")
         const fieldValues = form.getFieldsValue();
-        for (let key of dependencyMap.current.keys()) {
-           await handleFieldsWith(key, fieldValues, true);
-        }
+       
+        await Promise.all(Array.from(dependencyMap.current.keys()).map(async (key) => {
+            await handleFieldsWith(key, fieldValues, true);
+        }))
+        // for (let key of dependencyMap.current.keys()) {
+        //    await handleFieldsWith(key, fieldValues, true);
+        // }
         if (reloadFields) setFormContent(renderChildren());
+    };
+    // 初始化字段的级联关系
+    const initializeFieldVisibility = debounce(async (reloadFields = false) => {
+        await initializeFieldVisibilityImmediate(reloadFields);
     }, 100);
 
+
     // 计算字段级联关系
     const handleFieldsWith = async (identifier, fieldValues, init = false) => {
         // console.log("handleFieldsWith identifier", identifier)
@@ -751,7 +761,7 @@ const FormContainer = forwardRef(({ cols = 1, children, mode = "view" }, ref) =>
                             style={{ marginBottom: 0 }}
                         >
                             {childComponent}
-                        </Col>
+                        </Col> 
                     );
                 })}
             </Row>