lu-lowcode-package-form 0.10.36 → 0.10.38

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "lu-lowcode-package-form",
-  "version": "0.10.36",
+  "version": "0.10.38",
   "dependencies": {
     "@ant-design/icons": "^4.8.1",
     "@dnd-kit/core": "^6.1.0",

package/src/App.jsx

@@ -1,4 +1,4 @@
-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, Show } from './components';
 import './App.css';
 import { Button, Input, Select } from 'antd';
 import React, { useEffect, useState } from 'react';
@@ -103,7 +103,7 @@ function App() {
     }
   }
   const setFormFields = () => {
-    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({"id":1, "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 = () => {
@@ -179,7 +179,7 @@ function App() {
 
           <FormContainerWrapper cols={cols} className="" ref={formRef} >
           <Layout.FormRow layout={'1'}>
-            <Field.WithTable label="测试关联子表" __id="withtable1" 
+            <Show.WithTable label="测试关联子表" __id="withtable1" 
                   filterRules={[
                     {
                       "value": {

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

@@ -4,8 +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'
- 
+import { eventEmitter } from '../../utils/events'
+
 
 function batchElements(elements, groupSize) {
     const groupedElements = [];
@@ -14,7 +14,7 @@ function batchElements(elements, groupSize) {
     const fillWithReactElement = (size, array) => {
         const missingElementsCount = size - array.length;
         if (missingElementsCount > 0)
-        array.push(...new Array(missingElementsCount).fill(React.createElement('div')));
+            array.push(...new Array(missingElementsCount).fill(React.createElement('div')));
     };
 
     for (const element of elements) {
@@ -57,7 +57,7 @@ const FormContainer = forwardRef(({ cols = 1, children, mode = "view" }, ref) =>
         formRef: form,
         setFieldsValue: (values) => {
             lockStatus.current = 1;
-            form.setFieldsValue(values)
+            form.setFieldsValue({...values,__id: values?.id })
         },
         initializeFieldVisibility,
     }), []);
@@ -66,7 +66,7 @@ const FormContainer = forwardRef(({ cols = 1, children, mode = "view" }, ref) =>
         initializeFormRender();
     }, [children, cols]);
 
-    const initializeFormRender = ()=>{
+    const initializeFormRender = () => {
         initializeDependencyMap();
         setFormContent(renderChildren());
     }
@@ -224,7 +224,7 @@ const FormContainer = forwardRef(({ cols = 1, children, mode = "view" }, ref) =>
                         setValue = current_value[withFillIndex]?.[source]
                     }
                 }
-                changedFields[target] =  { name: [target], value: setValue};
+                changedFields[target] = { name: [target], value: setValue };
             }
             if (rule?.type == 1) {
                 form.setFieldValue(target, undefined);
@@ -232,9 +232,9 @@ const FormContainer = forwardRef(({ cols = 1, children, mode = "view" }, ref) =>
             form.setFieldValue(target, setValue)
             // handleFieldsWith(target, form.getFieldsValue())
             // setTimeout(() => {
-                // form.setFieldValue(target, setValue)
-                // handleFieldsWith(target, form.getFieldsValue())
-                // if (idGroups.length > 0) handleTableAddRow(idGroups)
+            // form.setFieldValue(target, setValue)
+            // handleFieldsWith(target, form.getFieldsValue())
+            // if (idGroups.length > 0) handleTableAddRow(idGroups)
             // }, 0);
 
 
@@ -400,7 +400,7 @@ const FormContainer = forwardRef(({ cols = 1, children, mode = "view" }, ref) =>
             // console.log("field",field.value)
             // console.log("getLastFieldValue(field.name)",getLastFieldValue(field.name))
             if (!isEqual(field.value, getLastFieldValue(field.name))) {
-                if (lockStatus_ !=1){
+                if (lockStatus_ != 1) {
                     needRefresh = handleFieldsWith(field.name, fieldValues);
                 }
                 lastFormValues.current[field.name] = field.value;
@@ -471,7 +471,7 @@ const FormContainer = forwardRef(({ cols = 1, children, mode = "view" }, ref) =>
                     const isLayoutComponent = componentName && componentName.startsWith('Layout.');
                     const isTable = componentName && componentName == 'Field.Table';
                     const hidden = props.calcHidden && mode != "desgin";
-                   
+
                     const rules = []
                     if (props.isRequired)
                         rules.push({ required: true, message: `${props.label}必须填写` });
@@ -488,13 +488,13 @@ const FormContainer = forwardRef(({ cols = 1, children, mode = "view" }, ref) =>
                     }
                     let childComponent
                     if (isTable || isLayoutComponent)
-                        childComponent = React.cloneElement(child, { onTableAddRow: handleTableAddRow, onTableRemoveRow: handleTableRemoveRow, form: form, fieldName: identifier, onCustomChange,initializeFormRender,mode })
-                    else if (componentName === "Field.WithSingleSelect" || componentName === "Field.WithMultipleSelect" || componentName === "Field.WithTable") {
+                        childComponent = React.cloneElement(child, { onTableAddRow: handleTableAddRow, onTableRemoveRow: handleTableRemoveRow, form: form, fieldName: identifier, onCustomChange, initializeFormRender, mode })
+                    else if (componentName === "Field.WithSingleSelect" || componentName === "Field.WithMultipleSelect" || componentName === "Show.WithTable") {
                         childComponent = <Form.Item
                             hidden={hidden}
                             style={{ margin: 0 }}
                             shouldUpdate={(prevValues, curValues) => {
-                                console.log(`componentName:${componentName}; identifier:${identifier};`,props.filterRules)
+                                console.log(`componentName:${componentName}; identifier:${identifier};`, props.filterRules)
                                 let result = false;
                                 if (Array.isArray(props.filterRules) &&
                                     props.filterRules.length > 0
@@ -507,25 +507,26 @@ const FormContainer = forwardRef(({ cols = 1, children, mode = "view" }, ref) =>
                                         prevFieldValue = prevValues?.[rule.value.field_key];
                                         curFieldValue = curValues?.[rule.value.field_key];
                                         if (prevFieldValue !== curFieldValue) {
-                                            result = true; 
+                                            result = true;
                                             break;
                                         }
                                     }
                                 }
-                                
+
                                 console.log(`componentName:${componentName}; identifier:${identifier}; result:`, result)
                                 return result;
                             }}
                         >
-                            {({getFieldsValue}) => {
+                            {({ getFieldsValue }) => {
                                 const fieldsValue = getFieldsValue();
-                                return <Form.Item
+                                let element = React.cloneElement(child, { onTableAddRow: handleTableAddRow, onTableRemoveRow: handleTableRemoveRow, form: form, fieldName: identifier, onCustomChange, fieldsValue, initializeFormRender })
+                                return componentName === "show.WithTable" ? <>{element}</> : <Form.Item
                                     style={{ marginBottom: 0 }}
                                     label=""
                                     name={identifier}
                                     rules={rules}
                                 >
-                                    {React.cloneElement(child, { onTableAddRow: handleTableAddRow, onTableRemoveRow: handleTableRemoveRow, form: form, fieldName: identifier, onCustomChange, fieldsValue,initializeFormRender })}
+                                    {element}
                                 </Form.Item>
                             }}
                         </Form.Item>
@@ -537,17 +538,17 @@ const FormContainer = forwardRef(({ cols = 1, children, mode = "view" }, ref) =>
                             name={identifier}
                             rules={rules}
                         >
-                            {React.cloneElement(child, { form: form, fieldName: identifier, onCustomChange,initializeFormRender })}
+                            {React.cloneElement(child, { form: form, fieldName: identifier, onCustomChange, initializeFormRender })}
                         </Form.Item>
                     }
                     return (
                         <Col
-                        key={identifier || `col-${index}`}
-                        span={props.calcHidden ? 0 : (isLayoutComponent ? 24 : 24 / cols)}
-                        style={{ marginBottom: 0 }}
-                    >
-                        {childComponent}
-                    </Col>
+                            key={identifier || `col-${index}`}
+                            span={props.calcHidden ? 0 : (isLayoutComponent ? 24 : 24 / cols)}
+                            style={{ marginBottom: 0 }}
+                        >
+                            {childComponent}
+                        </Col>
                     );
                 })}
             </Row>
@@ -559,6 +560,9 @@ const FormContainer = forwardRef(({ cols = 1, children, mode = "view" }, ref) =>
             // console.log("changedValues", changedValues)
             // console.log("allValues", allValues)
         }} onFieldsChange={handleFieldsChange}>
+            <Form.Item name="__id" hidden={true}>
+                <input type="hidden" />
+            </Form.Item>
             {formContent}
         </Form>
     );

package/src/components/form-container/layout/form-row.jsx

@@ -41,7 +41,7 @@ const LayoutFormRow = ({ children, layout, onTableAddRow, onTableRemoveRow, form
       let childComponent = null
       if (componentName == 'Field.Table')
         childComponent = React.cloneElement(child, { onTableAddRow: onTableAddRow, onTableRemoveRow: onTableRemoveRow, form: form, fieldName: name, initializeFormRender, mode })
-      else if (componentName === "Field.WithSingleSelect" || componentName === "Field.WithMultipleSelect" || componentName === "Field.WithTable") {
+      else if (componentName === "Field.WithSingleSelect" || componentName === "Field.WithMultipleSelect" || componentName === "Show.WithTable") {
         childComponent = <Form.Item
           hidden={hidden}
           style={{ margin: 0 }}
@@ -68,13 +68,14 @@ const LayoutFormRow = ({ children, layout, onTableAddRow, onTableRemoveRow, form
         >
           {({ getFieldsValue }) => {
             const fieldsValue = getFieldsValue();
-            return <Form.Item
+            let element = React.cloneElement(child, { onTableAddRow: onTableAddRow, onTableRemoveRow: onTableRemoveRow, form: form, fieldName: identifier, onCustomChange, fieldsValue, initializeFormRender })
+            return componentName === "Show.WithTable" ? <>{element}</> : <Form.Item
               style={{ marginBottom: 0 }}
               label=""
               name={identifier}
               rules={rules}
             >
-              {React.cloneElement(child, { onTableAddRow: onTableAddRow, onTableRemoveRow: onTableRemoveRow, form: form, fieldName: identifier, onCustomChange, fieldsValue, initializeFormRender })}
+              {element}
             </Form.Item>
           }}
         </Form.Item>
@@ -99,38 +100,6 @@ const LayoutFormRow = ({ children, layout, onTableAddRow, onTableRemoveRow, form
       );
 
 
-      if (name) {
-        const rules = []
-        if (props.isRequired)
-          rules.push({ required: true, message: `${props.label}必须填写` });
-        if (props.rules)
-          if (Array.isArray(props.rules)) {
-            const pattern = props.rules.join("|")
-            rules.push({ pattern: new RegExp(pattern), message: props.rulesFailMessage ? props.rulesFailMessage : `${props.label}格式错误` })
-          }
-          else {
-            rules.push({ pattern: new RegExp(props.rules), message: props.rulesFailMessage ? props.rulesFailMessage : `${props.label}格式错误` })
-          }
-        return (
-          colSpans?.[index] && <Col span={colSpans[index]} key={index}>
-            <Form.Item
-              style={{ marginBottom: 0 }}
-              label=""
-              key={`${name}-form-item`}
-              name={name}
-              rules={rules}
-            >
-              {childComponent}
-            </Form.Item>
-          </Col>
-        );
-      } else {
-        return (
-          colSpans?.[index] && <Col span={colSpans[index]} key={index}>
-            {childComponent}
-          </Col>
-        );
-      }
     });
   }, [children, colSpans]);
 

package/src/components/index.jsx

@@ -36,8 +36,7 @@ const Field = {
     Custom,
     UserSelect,
     DeptSelect,
-    PostSelect,
-    WithTable
+    PostSelect
 }
 Object.keys(Field).forEach(key => {
     Field[key].displayName = `Field.${key}`;
@@ -50,10 +49,19 @@ const Layout = {
     FormGroupTitle: LayoutFormGroupTitle,
     TableCol
 }
+
 Object.keys(Layout).forEach(key => {
     Layout[key].displayName = `Layout.${key}`;
 });
-export { FormContainer, Field ,FormContainerWrapper,Layout }
+// 纯显示类型的组件
+const Show = {
+    WithTable
+}
+Object.keys(Show).forEach(key => {
+    Show[key].displayName = `Show.${key}`;
+});
+
+export { FormContainer, Field ,FormContainerWrapper,Layout,Show }
 import { default as OptionSetter} from './setter/optionsetter'
 const Setter = {
     OptionSetter