lu-lowcode-package-form 0.9.56 → 0.9.58

package/package.json

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

package/src/App.jsx

@@ -1,30 +1,29 @@
-import { FormContainer, Field, FormContainerWrapper, Layout, Setter, EditorQuill, EditorWang , EditorWang2 , EditorWang3 ,WangEditor , WangEditorNext} from './components';
+import { FormContainer, Field, FormContainerWrapper, Layout, Setter, EditorQuill, EditorWang, EditorWang2, EditorWang3, WangEditor, WangEditorNext } from './components';
 import './App.css';
 import { Button, Input, Select } from 'antd';
 import React, { useEffect, useState } from 'react';
 import Draggable from 'react-draggable';
-import {MyPureComponentWithRef} from "./components/field/select/index"
 
 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"},
+  { 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);
+    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 = () => {
@@ -78,7 +77,7 @@ function App() {
   const testRef = React.useRef()
   useEffect(() => {
     console.log("testRef //////", testRef.current)
-  },[testRef.current])
+  }, [testRef.current])
   const [cols, setCols] = React.useState(3);
 
   const getFormFields = () => {
@@ -100,7 +99,7 @@ function App() {
     }
   }
   const setFormFields = () => {
-    formRef?.current?.formRef?.setFieldsValue({"remark11":{"label":"选项2","value":"2"},"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}],"PostSelect":'["parent 1-1","leaf11"]', "table": [{ "product_price1": "12", "product_num1": "123", "product_sum1": "1476", "node_oclxmzswzti": "", "select2": "" }, { "product_price1": "123", "product_num1": "213", "product_sum1": "26199", "node_oclxmzswzti": "", "select2": "" }], "product_total_price": "0.00", "product_price": "213", "product_num": "21", "product_num_range": [1, 22], "product_sum": "4473", "switch": false })
+    formRef?.current?.formRef?.setFieldsValue({ "remark11": { "label": "选项2", "value": "2" }, "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 }], "PostSelect": '["parent 1-1","leaf11"]', "table": [{ "product_price1": "12", "product_num1": "123", "product_sum1": "1476", "node_oclxmzswzti": "", "select2": "" }, { "product_price1": "123", "product_num1": "213", "product_sum1": "26199", "node_oclxmzswzti": "", "select2": "" }], "product_total_price": "0.00", "product_price": "213", "product_num": "21", "product_num_range": [1, 22], "product_sum": "4473", "switch": false })
   }
   const handleCols = () => {
     setCols(cols - 1)
@@ -110,7 +109,7 @@ function App() {
   return (
 
     <div className="App fflex fflex-col fitems-center">
-      <DraggableBtn />  
+      <DraggableBtn />
       {/* <MyPureComponentWithRef ref={testRef} />; */}
       {/* <div className='fw-full fp-4 fflex fjustify-center'>
         <WangEditorNext />
@@ -140,11 +139,11 @@ function App() {
           <Layout.FormGroupTitle title={"基本信息"} />
           <Layout.FormRow layout={'1'}>
             <Field.Table label="子表格" __id="table"  >
-            <Field.Switch label="开关" __id="switch_table"></Field.Switch>
-            <Field.Input  isRequired={true} label="商品价格" __id="product_price11" />
-            <Field.Input isRequired={true} label="商品价格" __id="product_price12" />
-            <Field.Input isRequired={true} label="商品价格" __id="product_price13" />
-            <Field.Input isRequired={true} label="商品价格" __id="product_price14" />
+              <Field.Switch label="开关" __id="switch_table"></Field.Switch>
+              <Field.Input isRequired={true} label="商品价格" __id="product_price11" />
+              <Field.Input isRequired={true} label="商品价格" __id="product_price12" />
+              <Field.Input isRequired={true} label="商品价格" __id="product_price13" />
+              <Field.Input isRequired={true} 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"
@@ -219,8 +218,8 @@ function App() {
               ]
             }}
           />
-          <Field.UserSelect  label="选择用户" __id="userselect" customComponent={Input} />
-          <Field.DeptSelect   label="DeptSelect"  __id="DeptSelect" treeData={[{
+          <Field.UserSelect label="选择用户" __id="userselect" customComponent={Input} />
+          <Field.DeptSelect label="DeptSelect" __id="DeptSelect" treeData={[{
             value: 'parent 1-1',
             title: 'parent 1-1',
             children: [
@@ -230,7 +229,7 @@ function App() {
               },
             ],
           },]}></Field.DeptSelect>
-           <Field.PostSelect multiple={true} label="PostSelect"  __id="PostSelect" treeData={[{
+          <Field.PostSelect multiple={true} label="PostSelect" __id="PostSelect" treeData={[{
             value: 'parent 1-1',
             title: 'parent 1-1',
             children: [
@@ -240,8 +239,8 @@ function App() {
               },
             ],
           },]}></Field.PostSelect>
-          <Field.SearchSelect   mode='multiple' label="搜组件"  __id="searchuser"  request={searchSelectRequest} option_search={"name"}  option_label="name" option_value="id"></Field.SearchSelect>
-          <Field.Input  rules={"^(1[3-9]\\d{9})$"} isRequired={true} label="商品价格" __id="product_price" />
+          <Field.SearchSelect mode='multiple' label="搜组件" __id="searchuser" request={searchSelectRequest} option_search={"name"} option_label="name" option_value="id"></Field.SearchSelect>
+          <Field.Input rules={"^(1[3-9]\\d{9})$"} isRequired={true} label="商品价格" __id="product_price" />
           <Field.Input label="商品数量" __id="product_num" />
           <Field.NumberRange label="数量范围" __id="product_num_range" />
           <Field.Input rules={["^(1[3-9]\\d{9})$", "^\\d+$"]} label="商品总价" __id="product_sum"
@@ -282,19 +281,19 @@ function App() {
 
               ]
             }} />
-          <Field.SingleSelect   mode="single" label="测试单选" __id="select1" options={[{ label: '选项1', value: '1' }, { label: '选项2', value: '2' }]}></Field.SingleSelect>
-          <Field.MultipleSelect   mode="multiple" label="测多选" __id="select2" options={[{ label: '选项1', value: '1' }, { label: '选项2', value: '2' }]}></Field.MultipleSelect>
-          <Field.TreeSelect   label="分组名" __id="title11"></Field.TreeSelect>
-          <Field.Switch    label="开关" __id="switch"></Field.Switch>
+          <Field.SingleSelect mode="single" label="测试单选" __id="select1" options={[{ label: '选项1', value: '1' }, { label: '选项2', value: '2' }]}></Field.SingleSelect>
+          <Field.MultipleSelect mode="multiple" label="测多选" __id="select2" options={[{ label: '选项1', value: '1' }, { label: '选项2', value: '2' }]}></Field.MultipleSelect>
+          <Field.TreeSelect label="分组名" __id="title11"></Field.TreeSelect>
+          <Field.Switch label="开关" __id="switch"></Field.Switch>
           <Layout.FormGroupTitle title={"嘟嘟嘟嘟嘟"} />
-          <Field.CodeMachine   label="角色编号" prompt="" __id="code"
+          <Field.CodeMachine label="角色编号" prompt="" __id="code"
             withIds={["switch"]}
             withFunc={(fieldsValue) => {
               return fieldsValue?.switch ? true : false
             }}
           />
           <Field.DatePicker label="日期时间" prompt="" datetype="month" value='2022-10-22' __id="datetime" />
-          <Field.DatePicker    label="日期时间" prompt="" datetype="date" value='2022-10-22' __id="datetime2" />
+          <Field.DatePicker label="日期时间" prompt="" datetype="date" value='2022-10-22' __id="datetime2" />
           <Field.DatePicker label="日期时间" prompt="" datetype="datetime" value={'2022-10-22'} __id="datetime3" />
           <Field.DatePicker label="年" prompt="" datetype="year" value={'2022-10-22'} __id="datetime4" />
           <Field.Input label="角色名称" __id="name" />
@@ -302,39 +301,70 @@ function App() {
             <Field.Input label="角色名称布局" __id="name1" />
             <Field.Input label="角色名称布局2" __id="name2" />
           </Layout.FormRow>
-          <Field.CheckboxTree   label="角色权限" __id="permissions" addRoot={false} treeData={treeData} />
+          <Field.CheckboxTree label="角色权限" __id="permissions" addRoot={false} treeData={treeData} />
           <Layout.FormGroupTitle title={"关联信息"} />
-          <Field.WithSingleSelect label="测试关联单选" options={[{ label: '选项1', value: '1' }, { label: '选项2', value: '2' }]} __id="remark11"   />
-          <Field.WithMultipleSelect   label="测试关联多选" options={[{ label: '选项1', value: '1' }, { label: '选项2', value: '2' }]} __id="remark12" />
+          <Field.WithSingleSelect fillRules={[
+            {
+              "id": "636d3924-0298-4e9b-809a-26d4a10d7b89",
+              "type": 0,
+              "source": "name",
+              "target": "name",
+              "subRules": [
+
+              ]
+            },
+            {
+              "id": "93401e38-60a4-4acf-84a6-8958785a4a30",
+              "type": 1,
+              "source": "table",
+              "target": "table",
+              "subRules": [
+                {
+                  "id": "c4a65ae5-58ff-4d7f-8738-a04de1acab61",
+                  "type": 0,
+                  "source": "price",
+                  "target": "product_price1"
+                },
+               
+                {
+                  "id": "c4a65ae5-58ff-4d7f-8738-a04de1acab61",
+                  "type": 0,
+                  "source": "num",
+                  "target": "product_num1"
+                },
+              ]
+            }
+          ]} label="测试关联单选" options={[{ label: '选项1', value: '1', name:"1111",table:[{"price":1,"num":2,},{"price":2,"num":2,}] }, { label: '选项2', value: '2' }]} __id="remark11" />
+          <Field.WithMultipleSelect label="测试关联多选" options={[{ label: '选项1', value: '1' }, { label: '选项2', value: '2' }]} __id="remark12" />
           <Layout.FormRow > <Field.TextArea label="备注" __id="remark" /></Layout.FormRow>
 
           <Layout.FormRow layout={'1'}>
-            <Field.RadioGroup   withIds={["remark11"]}
-                withFill={{
-                  "value": [
-                    {
-                      "insert": {
-                        "span": true
-                      },
-                      "attributes": {
-                        "id": "remark11",
-                        "color": "blue",
-                        "tagKey": "fieldsValue",
-                        "content": "测试关联单选"
-                      }
+            <Field.RadioGroup withIds={["remark11"]}
+              withFill={{
+                "value": [
+                  {
+                    "insert": {
+                      "span": true
                     },
-                  ],
-                  "version": 1719296886283,
-                  "withData": [
+                    "attributes": {
+                      "id": "remark11",
+                      "color": "blue",
+                      "tagKey": "fieldsValue",
+                      "content": "测试关联单选"
+                    }
+                  },
+                ],
+                "version": 1719296886283,
+                "withData": [
 
-                  ]
-                }}   options={[{ label: '选项1', value: '1' }, { label: '选项2', value: '2' }]} label="单选框" __id="radio" ></Field.RadioGroup>
+                ]
+              }} options={[{ label: '选项1', value: '1' }, { label: '选项2', value: '2' }]} label="单选框" __id="radio" ></Field.RadioGroup>
           </Layout.FormRow>
           <Layout.FormRow layout={'1'}>
-            <Field.CheckboxGroup    options={[{ label: '选项1', value: '1' }, { label: '选项2', value: '2' }]} label="多选框" __id="CheckboxGroup" ></Field.CheckboxGroup>
+            <Field.CheckboxGroup options={[{ label: '选项1', value: '1' }, { label: '选项2', value: '2' }]} label="多选框" __id="CheckboxGroup" ></Field.CheckboxGroup>
           </Layout.FormRow>
           <Field.UploadFile label="上传文件" __id="UploadFile" ></Field.UploadFile>
-          <Field.UploadImage   label="上传图片" __id="UploadImage" ></Field.UploadImage>
+          <Field.UploadImage label="上传图片" __id="UploadImage" ></Field.UploadImage>
 
         </FormContainerWrapper>
         <div class="fgroup">11111

package/src/components/field/base.jsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState, forwardRef } from "react";
+import React, { useEffect, useState } from "react";
 
 const FieldLable = ({ value, onChange }) => {
     const [text, setText] = useState("");
@@ -29,13 +29,6 @@ export const BaseWrapper = ({
     isRequired,
     ...otherProps
 }) => {
-    React.useImperativeHandle(ref, () => ({
-        handleChange: ( value )=>{
-            console.log("change", otherProps?.onChange)
-            console.log("value", value)
-            otherProps?.onChange(value)
-        },
-    }), []);
 
     if (!addWrapper) return children;
     // 不接管只读属性的组件

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

@@ -62,6 +62,7 @@ const FormContainer = forwardRef(({ cols = 1, children, mode = "view" }, ref) =>
         function traverse(currentNode, parentNode = null) {
             var componentName = currentNode.type?.displayName || currentNode.props?._componentName;
             const { props } = currentNode;
+            console.log("props ///////////", props)
             if (componentName && (componentName.startsWith('Field.') || componentName.startsWith('Layout.'))) {
                 let identifier = props?.componentId || props?.__id;
                 let withIds = []
@@ -73,7 +74,7 @@ const FormContainer = forwardRef(({ cols = 1, children, mode = "view" }, ref) =>
                 if (props?.withIds)
                     withIds = [...withIds, ...props?.withIds]
 
-                fields.push({ identifier, withIds, component: currentNode,componentName });
+                fields.push({ identifier, withIds, component: currentNode,componentName, fillRules:props?.fillRules });
             }
 
             if (props?.children) {
@@ -87,7 +88,6 @@ const FormContainer = forwardRef(({ cols = 1, children, mode = "view" }, ref) =>
             const element = childrenArray[index];
             traverse(element)
         }
-        // console.log("fields", fields)
         fields.forEach(field => {
             const { identifier } = field;
             dependencyMap.current.set(identifier, {
@@ -96,7 +96,7 @@ const FormContainer = forwardRef(({ cols = 1, children, mode = "view" }, ref) =>
                 // })),
                 children: fields.filter(item => item.withIds.some(item => item == identifier)),
                 show: true,
-                componentName: field.componentName
+                ...field
             });
         });
         // console.log("dependencyMap", dependencyMap.current)
@@ -121,11 +121,13 @@ const FormContainer = forwardRef(({ cols = 1, children, mode = "view" }, ref) =>
             identifier = identifier.filter(item => typeof item == "string").join(".")
         }
         if (dependencyMap.current.has(identifier)) {
-            // console.log("dependencyMap.current.get(identifier)",dependencyMap.current.get(identifier))
             const dependent =  dependencyMap.current.get(identifier)
+            console.log("dependent",dependent)
             const dependentChildren = dependent.children;
             // console.log("dependentChildren", dependentChildren)
-
+            if (dependent?.fillRules && Array.isArray(dependent?.fillRules) && dependent?.fillRules.length > 0) {
+                handleFillRules(identifier,parentIdentifier, fieldValues, dependent?.fillRules)
+            }
             dependentChildren.forEach(child => {
                 if (child.component.props.withFunc && typeof child.component.props.withFunc === 'function') {
                     needRefresh = handleFieldsVisible(fieldValues, child, parentIdentifier)
@@ -139,6 +141,33 @@ const FormContainer = forwardRef(({ cols = 1, children, mode = "view" }, ref) =>
         return needRefresh;
     };
 
+    // 处理填充规则
+    const handleFillRules = (current_identifier,parentIdentifier, fieldValues, fillRules) => {
+        // 获取当前变更的字段数据
+        let current_value = getParamValue("fieldsValue", current_identifier, fieldValues, null) 
+        for (let index = 0; index < fillRules.length; index++) {
+            const rule = fillRules[index];
+            const { source , target } = rule 
+            const source_value =  current_value?.[source]
+            // 子表
+            if (rule?.type == 1) {
+                if (!Array.isArray(source_value)) return 
+                let target_value = source_value.map(item => {
+                    let target_value = {}
+                    if (rule?.subRules && Array.isArray(rule?.subRules) && rule?.subRules.length > 0)
+                        for (let index = 0; index < rule?.subRules.length; index++) {
+                            const { source:subSource, target:subTarget } = rule?.subRules[index];
+                            target_value[subTarget] = item?.[subSource]
+                        }
+                    return target_value
+                })
+                form.setFieldValue(target,target_value)
+            }
+            // 同级字段
+            else form.setFieldValue(target,source_value)
+        }
+        console.log("current value",current_value )
+    }
     // 处理级联显示隐藏 @return {boolean} 是否需要重新渲染表单的字段
     const handleFieldsVisible = (fieldValues, child, parentIdentifier) => {
         let needRefresh = false;