lu-lowcode-package-form 0.9.30 → 0.9.31

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "lu-lowcode-package-form",
-  "version": "0.9.30",
+  "version": "0.9.31",
   "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 , Input , Select } from 'antd';
+import { Button, Input, Select } from 'antd';
 import React, { useState } from 'react';
 import Draggable from 'react-draggable';
 
@@ -61,19 +61,19 @@ function App() {
   }
   // 验证
   const validateFields = async () => {
-   try {
-    var values = await formRef?.current?.formRef?.validateFields({
-      validateOnly: false,
-    })
-    console.log("values", values)
-    
-   } catch (error) {
-      console.log("error",error)
+    try {
+      var values = await formRef?.current?.formRef?.validateFields({
+        validateOnly: false,
+      })
+      console.log("values", values)
+
+    } catch (error) {
+      console.log("error", error)
       console.log(error.errorFields[0].errors[0])
-   }
+    }
   }
   const setFormFields = () => {
-    formRef?.current?.formRef?.setFieldsValue({ "userselect":"1213131","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({ "userselect": "1213131","DeptSelect":["leaf11"],"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)
@@ -89,22 +89,22 @@ 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' }]}
-  />
+        <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'}>
             <Field.Table label="子表格" __id="table" >
-              <Field.Input isRequired={true}  label="商品价格" __id="product_price1" />
+              <Field.Input isRequired={true} label="商品价格" __id="product_price1" />
               <Field.Input label="商品总价" __id="product_sum1"
                 withIds={["table.product_price1", "table.product_num1"]}
                 withFill={{
@@ -178,11 +178,31 @@ function App() {
             }}
           />
           <Field.UserSelect label="选择用户" __id="userselect" customComponent={Input} />
+          <Field.DeptSelect label="DeptSelect"  __id="DeptSelect" treeData={[{
+            value: 'parent 1-1',
+            title: 'parent 1-1',
+            children: [
+              {
+                value: 'leaf11',
+                title: <b style={{ color: '#08c' }}>leaf11</b>,
+              },
+            ],
+          },]}></Field.DeptSelect>
+           <Field.PostSelect multiple={true} label="PostSelect"  __id="PostSelect" treeData={[{
+            value: 'parent 1-1',
+            title: 'parent 1-1',
+            children: [
+              {
+                value: 'leaf11',
+                title: <b style={{ color: '#08c' }}>leaf11</b>,
+              },
+            ],
+          },]}></Field.PostSelect>
           <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  label="商品数量" __id="product_num" />
+          <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"
+          <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/select.jsx

@@ -1,4 +1,4 @@
-import { Select as OriginalSelect, Tree , Input} from "antd";
+import { Select as OriginalSelect, Tree, Input } from "antd";
 
 import { BaseWrapper } from "../base"
 import React, { useEffect, useState } from 'react';
@@ -30,35 +30,35 @@ const Select = ({ request, option_label = "label", option_value = "id", disabled
 
         // setFirstLoad(true)
     }
-    return addWrapper ?(
+    return addWrapper ? (
         <BaseWrapper {...props}>
             <OriginalSelect {...props} options={nOptions} style={{ width: '100%' }} />
         </BaseWrapper>
     ) : <OriginalSelect {...props} options={nOptions} style={{ width: '100%' }} />
 }
 
-const SingleSelect =  ({ ...props }) => {
+const SingleSelect = ({ ...props }) => {
     return (
         <Select {...props} mode="single" />
     )
 }
 
-const MultipleSelect =  ({ onChange, value, ...props }) => {
+const MultipleSelect = ({ onChange, value, ...props }) => {
     const [nValue, setNValue] = React.useState([])
 
-    useEffect(()=>{
+    useEffect(() => {
         if (value && typeof value === "string") {
             try {
                 value = JSON.parse(value)
                 onChange(value)
             } catch (error) {
-                
+
             }
         }
-       
-        if(value) setNValue(value)
-    },[value])
-  
+
+        if (value) setNValue(value)
+    }, [value])
+
     return (
         <Select {...props} onChange={onChange} mode="multiple" value={nValue} />
     )
@@ -80,7 +80,7 @@ const WithSingleSelect = ({ onChange, value, ...props }) => {
 
             }
         }
-        if(value) setNValue(value)
+        if (value) setNValue(value)
     }, [value])
 
 
@@ -111,7 +111,7 @@ const WithMultipleSelect = ({ onChange, value, ...props }) => {
 
             }
         }
-        
+
         if (Array.isArray(value)) setNValue(value)
     }, [value])
 
@@ -126,17 +126,42 @@ const WithMultipleSelect = ({ onChange, value, ...props }) => {
 }
 
 // 选择用户组件
-const UserSelect = ({customComponent:CustomComponent,...props})=>{
-    if (!CustomComponent) return  <BaseWrapper {...props}><Input {...props} /></BaseWrapper>
+const UserSelect = ({ customComponent: CustomComponent, ...props }) => {
+    if (!CustomComponent) return <BaseWrapper {...props}><Input {...props} /></BaseWrapper>
     else return <BaseWrapper {...props}><CustomComponent {...props} /></BaseWrapper>
 }
+const ArrayTreeSelect = ( {onChange, value, multiple, ...props} )=>{
+    const [nValue, setNValue] = React.useState()
+    useEffect(() => {
+        if (value && typeof value === "string") {
+            try {
+                value = JSON.parse(value)
+                onChange(value)
+                return
+            }
+            catch (error) { }
+        }
+        if (multiple) {
+            if (Array.isArray(value)) setNValue(value)
+        } else {
+            if (Array.isArray(value))
+                value = value[0]
+            setNValue(value)
+        }
+    }, [value])
+    const handleChange = (_value)=>{
+        if (!Array.isArray(_value)) _value = [_value]
+        onChange && typeof onChange == "function" && onChange(_value)
+    }
+    return <TreeSelect {...props} onChange={handleChange} value={nValue} multiple={multiple} />
+}
 // 选择部门组件
-const DeptSelect = ({FetchDeptList,...props})=>{
-    return <TreeSelect {...props} title={"deptName"} request={FetchDeptList} />
+const DeptSelect = ({ FetchDeptList,...props }) => {
+    return <ArrayTreeSelect {...props} title={"deptName"} request={FetchDeptList} />
 }
 // 选择岗位组件
-const PostSelect = ({FetchPostList,...props})=>{
-    return <TreeSelect {...props} title={"postName"} request={FetchPostList} />
+const PostSelect = ({ FetchPostList, ...props }) => {
+    return <ArrayTreeSelect {...props} title={"postName"}  request={FetchPostList} />
 }
 
-export { WithSingleSelect, WithMultipleSelect, MultipleSelect, SingleSelect, Select,UserSelect,DeptSelect,PostSelect };
+export { WithSingleSelect, WithMultipleSelect, MultipleSelect, SingleSelect, Select, UserSelect, DeptSelect, PostSelect };