lu-lowcode-package-form 0.9.26 → 0.9.29

package/package.json

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

package/src/App.jsx

@@ -1,6 +1,6 @@
 import { FormContainer, Field, FormContainerWrapper, Layout, Setter, EditorQuill, EditorWang } from './components';
 import './App.css';
-import { Button } from 'antd';
+import { Button , Input , Select } from 'antd';
 import React, { useState } from 'react';
 import Draggable from 'react-draggable';
 
@@ -88,11 +88,17 @@ function App() {
         <EditorQuill value={"[{\"insert\":\"sdfsd\"}]"} />
       </div>
       <div className='fw-full fp-4'>
+      <Select
+    mode="tags"
+    style={{ width: '100%' }}
+    placeholder="Tags Mode"
+    options={[ { label: '标签1', value: '1' }, { label: '标签2', value: '2' }]}
+  />
         <Setter.OptionSetter />
       </div>
       <div className='fw-[960px] frounded  fbg-slate-50 fflex fflex-col fitems-center fpb-10'>
 
-
+   
         <FormContainerWrapper cols={cols} className="" ref={formRef} >
           <Layout.FormGroupTitle title={"基本信息"} />
           <Layout.FormRow layout={'1'}>
@@ -170,11 +176,12 @@ function App() {
               ]
             }}
           />
+          <Field.UserSelect label="选择用户" __id="userselect" customComponent={Input} />
           <Field.SearchSelect isRequired={true} label="搜组件" __id="searchuser" option_search="username" option_label="username" setValue={() => { }} option_value="id"></Field.SearchSelect>
-          <Field.Input  rules={"^(1[3-9]\\d{9})$"}  isRequired={true}  label="商品价格" __id="product_price" />
+          <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})$"} label="商品总价" __id="product_sum"
+          <Field.Input  rules={["^(1[3-9]\\d{9})$","^\\d+$"]} label="商品总价" __id="product_sum"
             withIds={["product_price", "product_num"]}
             withFill={{
               "value": [

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

@@ -1,4 +1,4 @@
 export { default as TreeSelect } from './tree-select.jsx';
-export { Select, WithSingleSelect,WithMultipleSelect , MultipleSelect, SingleSelect} from './select.jsx';
-export { SearchSelect } from './search-select.jsx'
+export * from './select.jsx';
+export * from './search-select.jsx'
 

package/src/components/field/select/select.jsx

@@ -1,7 +1,8 @@
-import { Select as OriginalSelect } from "antd";
+import { Select as OriginalSelect, Tree } from "antd";
 
 import { BaseWrapper } from "../base"
 import React, { useEffect, useState } from 'react';
+import TreeSelect from './tree-select'
 
 const Select = ({ request, option_label = "label", option_value = "id", disabledValue, callError, options, addWrapper = true, ...props }) => {
     // const [firstLoad, setFirstLoad] = React.useState(false)
@@ -124,4 +125,18 @@ const WithMultipleSelect = ({ onChange, value, ...props }) => {
     )
 }
 
-export { WithSingleSelect, WithMultipleSelect, MultipleSelect, SingleSelect, Select };
+// 选择用户组件
+const UserSelect = ({customComponent:CustomComponent,...props})=>{
+    if (!CustomComponent) return  <BaseWrapper {...props}><div className="fflex fitems-center fh-8">未配置组件内容</div></BaseWrapper>
+    else return <BaseWrapper {...props}><CustomComponent {...props} /></BaseWrapper>
+}
+// 选择部门组件
+const DeptSelect = ({FetchDeptList,...props})=>{
+    return <TreeSelect {...props} title={"deptName"} request={FetchDeptList} />
+}
+// 选择岗位组件
+const PostSelect = ({FetchPostList,...props})=>{
+    return <TreeSelect {...props} title={"postName"} request={FetchPostList} />
+}
+
+export { WithSingleSelect, WithMultipleSelect, MultipleSelect, SingleSelect, Select,UserSelect,DeptSelect,PostSelect };

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

@@ -32,7 +32,7 @@ function batchElements(elements, groupSize) {
             }
         }
     }
-   
+
     if (tempArray.length > 0) {
         fillWithReactElement(groupSize, tempArray);
         groupedElements.push(tempArray);
@@ -42,7 +42,7 @@ function batchElements(elements, groupSize) {
 }
 
 
-const FormContainer = forwardRef(({ cols = 1, children , mode="view" }, ref) => {
+const FormContainer = forwardRef(({ cols = 1, children, mode = "view" }, ref) => {
     const [form] = Form.useForm();
     const [formContent, setFormContent] = React.useState(null);
     const dependencyMap = React.useRef(null);
@@ -62,14 +62,14 @@ const FormContainer = forwardRef(({ cols = 1, children , mode="view" }, ref) =>
         function traverse(currentNode) {
             var componentName = currentNode.type?.displayName || currentNode.props?._componentName;
             const { props } = currentNode;
-            if (componentName && (componentName.startsWith('Field.') || componentName.startsWith('Layout.') )) {
+            if (componentName && (componentName.startsWith('Field.') || componentName.startsWith('Layout.'))) {
                 fields.push(currentNode);
             }
-            
-            if (props?.children){
-               let children = React.Children.toArray(props?.children)
-               children.forEach(child => traverse(child));
-            } 
+
+            if (props?.children) {
+                let children = React.Children.toArray(props?.children)
+                children.forEach(child => traverse(child));
+            }
         }
         dependencyMap.current = new Map();
         const childrenArray = React.Children.toArray(children);
@@ -81,7 +81,7 @@ const FormContainer = forwardRef(({ cols = 1, children , mode="view" }, ref) =>
             const { componentId, __id, ...props } = child?.props;
             const identifier = componentId || __id;
             dependencyMap.current.set(identifier, {
-                children: childrenArray.filter(item => item.props.withId === identifier || item.props.withIds?.some(item=>{
+                children: childrenArray.filter(item => item.props.withId === identifier || item.props.withIds?.some(item => {
                     return identifier == item || item.startsWith(identifier + '.')
                 })),
                 show: true,
@@ -183,7 +183,7 @@ const FormContainer = forwardRef(({ cols = 1, children , mode="view" }, ref) =>
                 return result
             })
         }
-        console.log("formula",formula)
+        console.log("formula", formula)
         if (formula && formula.length > 0) {
             const childIdentifier = child.props.componentId || child.props.__id;
             form.setFieldValue(childIdentifier, evalFormula(formula))
@@ -197,7 +197,7 @@ const FormContainer = forwardRef(({ cols = 1, children , mode="view" }, ref) =>
             if (id.indexOf(".") >= 0) {
                 const [parentKey, childKey] = id.split(".");
                 const parentValue = fieldValues?.[parentKey] || [];
-                if (Array.isArray(parentValue)) 
+                if (Array.isArray(parentValue))
                     result = parentValue.map(item => {
                         return item?.[childKey] || ""
                     })
@@ -249,10 +249,16 @@ const FormContainer = forwardRef(({ cols = 1, children , mode="view" }, ref) =>
                     const identifier = componentId || __id;
                     const isLayoutComponent = componentName && componentName.startsWith('Layout.');
                     const rules = []
-                    if (props.isRequired) 
+                    if (props.isRequired)
                         rules.push({ required: true, message: `${props.label}必须填写` });
-                    if (props.rules) 
-                        rules.push ({ pattern:new RegExp(props.rules), message: props.rulesFailMessage? props.rulesFailMessage : `${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 (
                         <Col key={identifier || `col-${index}`} span={isLayoutComponent ? 24 : 24 / group.length} style={{ marginBottom: 0 }}>
                             {isLayoutComponent ? (
@@ -275,7 +281,7 @@ const FormContainer = forwardRef(({ cols = 1, children , mode="view" }, ref) =>
     };
 
     return (
-        <Form form={form} className={"form-container fp-0 fw-full fh-full box-border" + (mode == "desgin" ?" fp-6":"")} onFieldsChange={handleFieldsChange}>
+        <Form form={form} className={"form-container fp-0 fw-full fh-full box-border" + (mode == "desgin" ? " fp-6" : "")} onFieldsChange={handleFieldsChange}>
             {formContent}
         </Form>
     );

package/src/components/index.jsx

@@ -1,6 +1,6 @@
 import { Input, TextArea, Password, Search ,CodeMachine, Number, NumberRange} from './field/input/index.jsx'
 import '../App.css';
-import { TreeSelect, Select, WithSingleSelect,WithMultipleSelect, SingleSelect, MultipleSelect, SearchSelect } from './field/select/index.jsx'
+import { TreeSelect, Select, WithSingleSelect,WithMultipleSelect, SingleSelect, MultipleSelect, SearchSelect, UserSelect, DeptSelect, PostSelect } from './field/select/index.jsx'
 import Custom from './field/custom/index.jsx'
 import { FormContainer, FormContainerWrapper,LayoutFormRow,LayoutFormGroupTitle } from './form-container/index.jsx'
 import { Checkbox ,CheckboxTree, CheckboxGroup } from './field/checkbox/index.jsx'
@@ -34,6 +34,9 @@ const Field = {
     DatePicker,
     Table,
     Custom,
+    UserSelect,
+    DeptSelect,
+    PostSelect,
 }
 Object.keys(Field).forEach(key => {
     Field[key].displayName = `Field.${key}`;