lu-lowcode-package-form 0.9.97 → 0.10.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "lu-lowcode-package-form",
-  "version": "0.9.97",
+  "version": "0.10.1",
   "dependencies": {
     "@ant-design/icons": "^4.8.1",
     "@dnd-kit/core": "^6.1.0",
@@ -15,6 +15,7 @@
     "@wangeditor/editor-for-react": "^1.0.6",
     "antd": "^5.13.2",
     "dayjs": "^1.11.11",
+    "eventemitter3": "^5.0.1",
     "nanoid": "^5.0.7",
     "postcss-modules": "^6.0.0",
     "quill": "^2.0.2",

package/src/App.jsx

@@ -283,6 +283,9 @@ function App() {
                 ]
               }
             ]} label="测试关联单选" options={[{ label: '选项1', value: '1', name: "1111", table: "[{\"price\":1,\"num\":2},{\"price\":2,\"num\":2},{\"price\":3,\"num\":3},{\"price\":3,\"num\":3}]" }, { label: '选项2', value: '2' }]} __id="remark11" />
+            <Layout.FormRow layout={'1'}>
+            <Field.Number label="测试规则" isRequired={true} __id="ceshi_rule1" />
+            </Layout.FormRow>
             <Layout.FormRow layout={'1'}>
               <Field.Table label="子表格" __id="table"  >
                 <Field.Number label="税率（%）" __id="shuilv_table" withIds={[

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

@@ -1,9 +1,10 @@
-import React, { useEffect, useState } from "react";
+import React, { useEffect, useRef, useState } from "react";
 import { Button, Form, Input } from "antd";
 import { DeleteOutlined } from "@ant-design/icons";
 import { BaseWrapper } from "../base.jsx"
 import { type } from "@testing-library/user-event/dist/type/index.js";
 import { nanoid } from "nanoid";
+import {eventEmitter} from '../../../utils/events'
 
 const TableAction = ({ label, subTableIndex, children, subTableHead = false, ...props }) => {
     //fsticky fright-0 
@@ -29,6 +30,9 @@ const TableCol = ({ children, width, ...props }) => {
 }
 
 const Table = ({ children, onTableAddRow, disabled, readonly, onTableRemoveRow, form, fieldName, ...props }) => {
+    useEffect(()=>{
+        console.log("Table form reload",form)
+    },[form])
     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}`)
@@ -37,6 +41,20 @@ const Table = ({ children, onTableAddRow, disabled, readonly, onTableRemoveRow,
         if (!init) setInit(true);
         form?.setFieldValue(fieldName, [{}])
     }
+    const [tableId, setTableId] = useState()
+    const handleReloadTable = (target) => {
+        if(fieldName == target) {
+            setTableId(nanoid()) 
+        }
+    }
+    useEffect(() => {
+        setTableId(nanoid()) 
+        eventEmitter.on('reloadTable', handleReloadTable);
+        return () => {
+            eventEmitter.off('reloadTable', handleReloadTable);
+        }
+
+    },[])
 
     if (props.isRequired)
         rules.push({ required: true, message: `子表[${props.label}]必须填写` });
@@ -60,7 +78,7 @@ const Table = ({ children, onTableAddRow, disabled, readonly, onTableRemoveRow,
                         </TableAction>}
                     </div>}
                     {fields.map((field, index) => (
-                        <div key={field.key} className="fborder-b fflex flex-nowrap fmin-w-full ">
+                        <div key={`${tableId}.${field.key}`} className="fborder-b fflex flex-nowrap fmin-w-full ">
 
                             {React.Children.map(children, (child, childIndex) => {
                                 let { props } = child;

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

@@ -4,7 +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'
+ 
 
 function batchElements(elements, groupSize) {
     const groupedElements = [];
@@ -203,6 +204,7 @@ const FormContainer = forwardRef(({ cols = 1, children, mode = "view" }, ref) =>
                     return target_item_value
                 })
                 setValue = target_value
+                eventEmitter.emit('reloadTable', target);
             }
             // 同级字段
             else {
@@ -239,10 +241,10 @@ const FormContainer = forwardRef(({ cols = 1, children, mode = "view" }, ref) =>
                 changedKeys.forEach(key => {
                     changedFieldsState.current[key] = changedFields[key];
                 })
-                console.log("changedFieldsState",changedFieldsState.current)
+                // console.log("changedFieldsState",changedFieldsState.current)
                 debounceHandleFieldsChange();
             }
-            console.log("idGroups", idGroups)
+            // console.log("idGroups", idGroups)
             if (idGroups.length > 0) idGroups.forEach(ids => { if (Array.isArray(ids) && ids.length > 0) handleTableAddRow(ids) })
         }, 0)
 
@@ -406,7 +408,7 @@ const FormContainer = forwardRef(({ cols = 1, children, mode = "view" }, ref) =>
     }, 100);
 
     const handleFieldsChange = (changedFields) => {
-        console.log("changedFields", changedFields)
+        // console.log("changedFields", changedFields)
         changedFields.filter(field => {
             if (field.name && field.name.length > 0) {
                 // const fieldKey = field.name.filter(item => typeof item == "string").join(".")

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

@@ -31,6 +31,17 @@ const LayoutFormRow = ({ children, layout, onTableAddRow, onTableRemoveRow, form
       else childComponent = child
 
       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
@@ -38,7 +49,7 @@ const LayoutFormRow = ({ children, layout, onTableAddRow, onTableRemoveRow, form
               label=""
               key={`${name}-form-item`}
               name={name}
-              rules={[{ required: props.isRequired, message: `${props.title}不能为空！` }]}
+              rules={rules}
             >
               {childComponent}
             </Form.Item>

package/src/utils/events.jsx

@@ -0,0 +1,5 @@
+
+import EventEmitter from 'eventemitter3';
+const eventEmitter = new EventEmitter();
+
+export { eventEmitter };