lu-lowcode-package-form 0.10.36 → 0.10.37

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "lu-lowcode-package-form",
-  "version": "0.10.36",
+  "version": "0.10.37",
   "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';
@@ -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

@@ -489,7 +489,7 @@ 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") {
+                    else if (componentName === "Field.WithSingleSelect" || componentName === "Field.WithMultipleSelect" || componentName === "Show.WithTable") {
                         childComponent = <Form.Item
                             hidden={hidden}
                             style={{ margin: 0 }}
@@ -519,13 +519,14 @@ const FormContainer = forwardRef(({ cols = 1, children, mode = "view" }, ref) =>
                         >
                             {({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>

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