lu-lowcode-package-form 0.9.48 → 0.9.56

package/package.json

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

package/src/App.jsx

@@ -1,8 +1,9 @@
 import { FormContainer, Field, FormContainerWrapper, Layout, Setter, EditorQuill, EditorWang , EditorWang2 , EditorWang3 ,WangEditor , WangEditorNext} from './components';
 import './App.css';
 import { Button, Input, Select } from 'antd';
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import Draggable from 'react-draggable';
+import {MyPureComponentWithRef} from "./components/field/select/index"
 
 const searchSelectOptions = [
   {id:1,name:"1111"},
@@ -74,6 +75,10 @@ const treeData = [
 
 function App() {
   const formRef = React.createRef();
+  const testRef = React.useRef()
+  useEffect(() => {
+    console.log("testRef //////", testRef.current)
+  },[testRef.current])
   const [cols, setCols] = React.useState(3);
 
   const getFormFields = () => {
@@ -105,7 +110,8 @@ function App() {
   return (
 
     <div className="App fflex fflex-col fitems-center">
-      <DraggableBtn />
+      <DraggableBtn />  
+      {/* <MyPureComponentWithRef ref={testRef} />; */}
       {/* <div className='fw-full fp-4 fflex fjustify-center'>
         <WangEditorNext />
       </div> */}
@@ -133,9 +139,9 @@ function App() {
         <FormContainerWrapper cols={cols} className="" ref={formRef} >
           <Layout.FormGroupTitle title={"基本信息"} />
           <Layout.FormRow layout={'1'}>
-            <Field.Table label="子表格" __id="table"  readonly={true}>
+            <Field.Table label="子表格" __id="table"  >
             <Field.Switch label="开关" __id="switch_table"></Field.Switch>
-            <Field.Input readOnly={true} isRequired={true} label="商品价格" __id="product_price11" />
+            <Field.Input  isRequired={true} label="商品价格" __id="product_price11" />
             <Field.Input isRequired={true} label="商品价格" __id="product_price12" />
             <Field.Input isRequired={true} label="商品价格" __id="product_price13" />
             <Field.Input isRequired={true} label="商品价格" __id="product_price14" />
@@ -213,8 +219,8 @@ function App() {
               ]
             }}
           />
-          <Field.UserSelect readOnly={true} label="选择用户" __id="userselect" customComponent={Input} />
-          <Field.DeptSelect  readOnly={true} label="DeptSelect"  __id="DeptSelect" treeData={[{
+          <Field.UserSelect  label="选择用户" __id="userselect" customComponent={Input} />
+          <Field.DeptSelect   label="DeptSelect"  __id="DeptSelect" treeData={[{
             value: 'parent 1-1',
             title: 'parent 1-1',
             children: [
@@ -234,7 +240,7 @@ function App() {
               },
             ],
           },]}></Field.PostSelect>
-          <Field.SearchSelect  readOnly={true} mode='multiple' label="搜组件"  __id="searchuser"  request={searchSelectRequest} option_search={"name"}  option_label="name" option_value="id"></Field.SearchSelect>
+          <Field.SearchSelect   mode='multiple' label="搜组件"  __id="searchuser"  request={searchSelectRequest} option_search={"name"}  option_label="name" 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.NumberRange label="数量范围" __id="product_num_range" />
@@ -276,19 +282,19 @@ function App() {
 
               ]
             }} />
-          <Field.SingleSelect  readOnly={true} mode="single" label="测试单选" __id="select1" options={[{ label: '选项1', value: '1' }, { label: '选项2', value: '2' }]}></Field.SingleSelect>
-          <Field.MultipleSelect  readOnly={true} mode="multiple" label="测多选" __id="select2" options={[{ label: '选项1', value: '1' }, { label: '选项2', value: '2' }]}></Field.MultipleSelect>
-          <Field.TreeSelect  readOnly={true} label="分组名" __id="title11"></Field.TreeSelect>
-          <Field.Switch  readOnly={true}  label="开关" __id="switch"></Field.Switch>
+          <Field.SingleSelect   mode="single" label="测试单选" __id="select1" options={[{ label: '选项1', value: '1' }, { label: '选项2', value: '2' }]}></Field.SingleSelect>
+          <Field.MultipleSelect   mode="multiple" label="测多选" __id="select2" options={[{ label: '选项1', value: '1' }, { label: '选项2', value: '2' }]}></Field.MultipleSelect>
+          <Field.TreeSelect   label="分组名" __id="title11"></Field.TreeSelect>
+          <Field.Switch    label="开关" __id="switch"></Field.Switch>
           <Layout.FormGroupTitle title={"嘟嘟嘟嘟嘟"} />
-          <Field.CodeMachine  readOnly={true} label="角色编号" prompt="" __id="code"
+          <Field.CodeMachine   label="角色编号" prompt="" __id="code"
             withIds={["switch"]}
             withFunc={(fieldsValue) => {
               return fieldsValue?.switch ? true : false
             }}
           />
           <Field.DatePicker label="日期时间" prompt="" datetype="month" value='2022-10-22' __id="datetime" />
-          <Field.DatePicker  readOnly={true}  label="日期时间" prompt="" datetype="date" value='2022-10-22' __id="datetime2" />
+          <Field.DatePicker    label="日期时间" prompt="" datetype="date" value='2022-10-22' __id="datetime2" />
           <Field.DatePicker label="日期时间" prompt="" datetype="datetime" value={'2022-10-22'} __id="datetime3" />
           <Field.DatePicker label="年" prompt="" datetype="year" value={'2022-10-22'} __id="datetime4" />
           <Field.Input label="角色名称" __id="name" />
@@ -296,20 +302,39 @@ function App() {
             <Field.Input label="角色名称布局" __id="name1" />
             <Field.Input label="角色名称布局2" __id="name2" />
           </Layout.FormRow>
-          <Field.CheckboxTree  readOnly={true} label="角色权限" __id="permissions" addRoot={false} treeData={treeData} />
+          <Field.CheckboxTree   label="角色权限" __id="permissions" addRoot={false} treeData={treeData} />
           <Layout.FormGroupTitle title={"关联信息"} />
-          <Field.WithSingleSelect readonly={true}  label="测试关联单选" options={[{ label: '选项1', value: '1' }, { label: '选项2', value: '2' }]} __id="remark11" />
-          <Field.WithMultipleSelect readonly={true}  label="测试关联多选" options={[{ label: '选项1', value: '1' }, { label: '选项2', value: '2' }]} __id="remark12" />
+          <Field.WithSingleSelect label="测试关联单选" options={[{ label: '选项1', value: '1' }, { label: '选项2', value: '2' }]} __id="remark11"   />
+          <Field.WithMultipleSelect   label="测试关联多选" options={[{ label: '选项1', value: '1' }, { label: '选项2', value: '2' }]} __id="remark12" />
           <Layout.FormRow > <Field.TextArea label="备注" __id="remark" /></Layout.FormRow>
 
           <Layout.FormRow layout={'1'}>
-            <Field.RadioGroup  readonly={true}  options={[{ label: '选项1', value: '1' }, { label: '选项2', value: '2' }]} label="单选框" __id="radio" ></Field.RadioGroup>
+            <Field.RadioGroup   withIds={["remark11"]}
+                withFill={{
+                  "value": [
+                    {
+                      "insert": {
+                        "span": true
+                      },
+                      "attributes": {
+                        "id": "remark11",
+                        "color": "blue",
+                        "tagKey": "fieldsValue",
+                        "content": "测试关联单选"
+                      }
+                    },
+                  ],
+                  "version": 1719296886283,
+                  "withData": [
+
+                  ]
+                }}   options={[{ label: '选项1', value: '1' }, { label: '选项2', value: '2' }]} label="单选框" __id="radio" ></Field.RadioGroup>
           </Layout.FormRow>
           <Layout.FormRow layout={'1'}>
-            <Field.CheckboxGroup  readonly={true}  options={[{ label: '选项1', value: '1' }, { label: '选项2', value: '2' }]} label="多选框" __id="CheckboxGroup" ></Field.CheckboxGroup>
+            <Field.CheckboxGroup    options={[{ label: '选项1', value: '1' }, { label: '选项2', value: '2' }]} label="多选框" __id="CheckboxGroup" ></Field.CheckboxGroup>
           </Layout.FormRow>
           <Field.UploadFile label="上传文件" __id="UploadFile" ></Field.UploadFile>
-          <Field.UploadImage  readOnly={true} label="上传图片" __id="UploadImage" ></Field.UploadImage>
+          <Field.UploadImage   label="上传图片" __id="UploadImage" ></Field.UploadImage>
 
         </FormContainerWrapper>
         <div class="fgroup">11111

package/src/components/field/base.jsx

@@ -8,8 +8,12 @@ const FieldLable = ({ value, onChange }) => {
     }, [value]);
     return <>{text}</>
 }
-
-export const BaseWrapper = forwardRef(({
+export function withWrap(Component) {
+    return forwardRef((props, ref) => {
+        return <Component {...props} ref={ref} forwardedRef={ref}/>
+    });
+}
+export const BaseWrapper = ({
     label,
     higLabel = false,
     children,
@@ -24,11 +28,12 @@ export const BaseWrapper = forwardRef(({
     readonly,
     isRequired,
     ...otherProps
-}, ref) => {
+}) => {
     React.useImperativeHandle(ref, () => ({
         handleChange: ( value )=>{
             console.log("change", otherProps?.onChange)
             console.log("value", value)
+            otherProps?.onChange(value)
         },
     }), []);
 
@@ -67,4 +72,4 @@ export const BaseWrapper = forwardRef(({
     )
 
     return subTable ? tableWarpper : formWarpper;
-});
+};

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

@@ -1,12 +1,12 @@
 import { Select as OriginalSelect, Tree, Input, Button } from "antd";
 
-import { BaseWrapper } from "../base"
-import {SearchSelect} from "./search-select"
-import React, { useEffect, useState } from 'react';
+import { BaseWrapper, withWrap } from "../base"
+import { SearchSelect } from "./search-select"
+import React, { useEffect, useState, forwardRef } from 'react';
 import TreeSelect from './tree-select'
 import { EditOutlined } from '@ant-design/icons';
 
-const Select = ({ request,  option_label = "label", option_value = "id",disabledValue, callError, options, addWrapper = true, ...props }) => {
+const Select = ({ request, option_label = "label", option_value = "id", disabledValue, callError, options, addWrapper = true, ...props }) => {
     // const [firstLoad, setFirstLoad] = React.useState(false)
     const [nOptions, setNOptions] = React.useState([])
     useEffect(() => {
@@ -71,8 +71,8 @@ const MultipleSelect = ({ onChange, value, ...props }) => {
  * @param {*}  
  * @returns 
  */
-const WithSingleSelect = ({ readItemRender, readonly,onChange, value, ...props }) => {
-   
+const WithSingleSelect = ({ readItemRender, readonly, onChange, value, ...props }) => {
+
     React.useEffect(() => {
         if (value && typeof value === "string") {
             try {
@@ -85,11 +85,11 @@ const WithSingleSelect = ({ readItemRender, readonly,onChange, value, ...props }
 
     }, [value])
     if (readonly) return <div className=" fh-8 fflex fitems-center fgap-2">
-       { value && value.label && <>{readItemRender && typeof readItemRender === "function" ? readItemRender(value) : <span key={`btn_${value?.value}`}>{value?.label}</span>}</>}
+        {value && value.label && <>{readItemRender && typeof readItemRender === "function" ? readItemRender(value) : <span key={`btn_${value?.value}`}>{value?.label}</span>}</>}
     </div>
     return (
-            <SearchSelect addWrapper={false}  {...props} onChange={onChange} value={value} mode="single" className=" fflex-1 foverflow-hidden"  />
-        
+        <SearchSelect addWrapper={false}  {...props} onChange={onChange} value={value} mode="single" className=" fflex-1 foverflow-hidden" />
+
     )
 }
 
@@ -98,8 +98,8 @@ const WithSingleSelect = ({ readItemRender, readonly,onChange, value, ...props }
  * @param {*} 
  * @returns 
  */
-const WithMultipleSelect = ({  readItemRender, readonly, onChange, value, ...props }) => {
-  
+const WithMultipleSelect = ({ readItemRender, readonly, onChange, value, ...props }) => {
+
     React.useEffect(() => {
         if (value && typeof value === "string") {
             try {
@@ -112,13 +112,13 @@ const WithMultipleSelect = ({  readItemRender, readonly, onChange, value, ...pro
 
     }, [value])
     if (readonly) return <div className=" fh-8 fflex fitems-center fgap-2">
-        {Array.isArray(value) && value.map((item,index) => <> {
+        {Array.isArray(value) && value.map((item, index) => <> {
             readItemRender && typeof readItemRender === "function" ? readItemRender(item) : <span key={`btn_${item?.value}`}>{item?.label}</span>
 
-        }{index<value.length-1? <span className=" ftext-gray-400">,</span> : null}</>)}
+        }{index < value.length - 1 ? <span className=" ftext-gray-400">,</span> : null}</>)}
     </div>
     return (
-        <SearchSelect addWrapper={false} {...props} onChange={onChange} value={value} mode="multiple"  className=" fflex-1 foverflow-hidden"   />
+        <SearchSelect addWrapper={false} {...props} onChange={onChange} value={value} mode="multiple" className=" fflex-1 foverflow-hidden" />
     )
 }
 
@@ -127,7 +127,7 @@ 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 ArrayTreeSelect = ({ onChange, value, multiple, ...props }) => {
     const [nValue, setNValue] = React.useState()
     useEffect(() => {
         if (value && typeof value === "string") {
@@ -146,28 +146,53 @@ const ArrayTreeSelect = ( {onChange, value, multiple, ...props} )=>{
             setNValue(value)
         }
     }, [value])
-    const handleChange = (_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 }) => {
+const DeptSelect = ({ FetchDeptList, ...props }) => {
     return <ArrayTreeSelect {...props} title={"deptName"} request={FetchDeptList} />
 }
 // 选择岗位组件
 const PostSelect = ({ FetchPostList, ...props }) => {
-    return <ArrayTreeSelect {...props} title={"postName"}  request={FetchPostList} />
+    return <ArrayTreeSelect {...props} title={"postName"} request={FetchPostList} />
 }
 
 WithSingleSelect.displayName = "WithSingleSelect"
 WithMultipleSelect.displayName = "WithMultipleSelect"
 
-const WithSingleSelectWrapper = (props) => {
-    return <BaseWrapper {...props}><WithSingleSelect {...props} /></BaseWrapper>
-}
-const WithMultipleSelectWrapper = (props) => {
-    return <BaseWrapper {...props}><WithMultipleSelect {...props} /></BaseWrapper>
-}
-export { WithSingleSelectWrapper as WithSingleSelect, WithMultipleSelectWrapper as WithMultipleSelect, MultipleSelect, SingleSelect, Select, UserSelect, DeptSelect, PostSelect };
+// const WithSingleSelectWrapper = withWrap(({ ref, ...props }) => <BaseWrapper ref={ref} {...props}><WithSingleSelect {...props} /></BaseWrapper>);
+// const WithMultipleSelectWrapper = withWrap(({ ref, ...props }) => <BaseWrapper ref={ref} {...props}><WithMultipleSelect {...props} /></BaseWrapper>);
+
+
+// export class WithSingleSelectClass extends React.PureComponent{
+//     render() {
+//         const { forwardedRef, ...otherProps } = this.props;
+//         return  <BaseWrapper  {...otherProps} ref={forwardedRef}><WithSingleSelect {...otherProps} /></BaseWrapper>
+//     }
+// }
+
+const WithSingleSelectForward =  forwardRef((props, ref) => {
+    React.useImperativeHandle(ref, () => ({
+        handleChange: ( value )=>{
+            props?.onChange(value)
+        },
+    }), []);
+
+    return  <BaseWrapper {...props} ><WithSingleSelect {...props} /></BaseWrapper>
+})
+const WithMultipleSelectForward =  forwardRef((props, ref) => {
+    React.useImperativeHandle(ref, () => ({
+        handleChange: ( value )=>{
+            props?.onChange(value)
+        },
+    }), []);
+
+    return  <BaseWrapper {...props} ><WithMultipleSelect {...props} /></BaseWrapper>
+})
+
+export { WithSingleSelectForward as WithSingleSelect, WithMultipleSelectForward as WithMultipleSelect, MultipleSelect, SingleSelect, Select, UserSelect, DeptSelect, PostSelect };
+

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

@@ -73,7 +73,7 @@ const FormContainer = forwardRef(({ cols = 1, children, mode = "view" }, ref) =>
                 if (props?.withIds)
                     withIds = [...withIds, ...props?.withIds]
 
-                fields.push({ identifier, withIds, component: currentNode });
+                fields.push({ identifier, withIds, component: currentNode,componentName });
             }
 
             if (props?.children) {
@@ -96,6 +96,7 @@ const FormContainer = forwardRef(({ cols = 1, children, mode = "view" }, ref) =>
                 // })),
                 children: fields.filter(item => item.withIds.some(item => item == identifier)),
                 show: true,
+                componentName: field.componentName
             });
         });
         // console.log("dependencyMap", dependencyMap.current)
@@ -121,7 +122,8 @@ const FormContainer = forwardRef(({ cols = 1, children, mode = "view" }, ref) =>
         }
         if (dependencyMap.current.has(identifier)) {
             // console.log("dependencyMap.current.get(identifier)",dependencyMap.current.get(identifier))
-            const dependentChildren = dependencyMap.current.get(identifier).children;
+            const dependent =  dependencyMap.current.get(identifier)
+            const dependentChildren = dependent.children;
             // console.log("dependentChildren", dependentChildren)
 
             dependentChildren.forEach(child => {
@@ -130,7 +132,7 @@ const FormContainer = forwardRef(({ cols = 1, children, mode = "view" }, ref) =>
                 }
 
                 if (child.component.props.withFill)
-                    handleFieldsWithFill(fieldValues, child, parentIdentifier)
+                    handleFieldsWithFill(fieldValues, child, parentIdentifier,dependent?.componentName)
 
             });
         }
@@ -154,7 +156,7 @@ const FormContainer = forwardRef(({ cols = 1, children, mode = "view" }, ref) =>
     }
     // 处理级联数据源
     // 处理级联填充
-    const handleFieldsWithFill = async (fieldValues, child, parentIdentifier) => {
+    const handleFieldsWithFill = async (fieldValues, child, parentIdentifier,componentName) => {
         const withFill = child?.component?.props.withFill;
         const withDataFetch = child?.component?.props.withDataFetch;
         let withFillIndex = 0
@@ -165,9 +167,10 @@ const FormContainer = forwardRef(({ cols = 1, children, mode = "view" }, ref) =>
             withFillIndex = parentIdentifier[parentIdentifier.length - 1]
             if (childIdentifier.startsWith(`${withFillGroup}.`)) {
                 childIdentifier = [...parentIdentifier, childIdentifier.replace(`${withFillGroup}.`, "")]
-            }
+            }   
         }
         let withDatas = [];
+        console.log("componentName",componentName)
         // 先处理依赖数据
         if (withFill?.withData && withFill?.withData.length > 0 && withDataFetch && typeof withDataFetch === 'function') {
             for (let index = 0; index < withFill?.withData.length; index++) {
@@ -177,7 +180,14 @@ const FormContainer = forwardRef(({ cols = 1, children, mode = "view" }, ref) =>
                 params.filter = {}
                 for (let index = 0; index < element.withCondition.length; index++) {
                     const { value: condition_value, column: condition_column } = element.withCondition[index];
-                    params.filter[condition_column.column_name] = getParamValue(condition_value.group_key, condition_value.field_key, fieldValues, withDatas)
+                    let filter_value = getParamValue(condition_value.group_key, condition_value.field_key, fieldValues, withDatas)
+                    if (Array.isArray(filter_value)) {
+                        if (Array.isArray(childIdentifier) && filter_value.length > withFillIndex) {
+                            filter_value = filter_value[withFillIndex]
+                        }
+                    }
+                    if (componentName == "Field.WithSingleSelect" && filter_value && filter_value?.value) filter_value = filter_value.value
+                    params.filter[condition_column.column_name] = filter_value
                 }
 
                 // 访问接口获取数据

package/src/utils/formula.js

@@ -6,6 +6,7 @@ const evalFormula =(formula) => {
     } catch (error) {
         console.error("formula error", error);
     }
+    console.log("formula result", result);
     return result.toString();
 };