lu-lowcode-package-form 0.9.47 → 0.9.56

package/src/components/field/base.jsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from "react";
+import React, { useEffect, useState, forwardRef } from "react";
 
 const FieldLable = ({ value, onChange }) => {
     const [text, setText] = useState("");
@@ -8,15 +8,19 @@ const FieldLable = ({ value, onChange }) => {
     }, [value]);
     return <>{text}</>
 }
-
-export const BaseWrapper = function BaseWrapper({
+export function withWrap(Component) {
+    return forwardRef((props, ref) => {
+        return <Component {...props} ref={ref} forwardedRef={ref}/>
+    });
+}
+export const BaseWrapper = ({
     label,
     higLabel = false,
     children,
     prompt,
     subTable,
     subTableHead = false,
-    subTableContent=true,
+    subTableContent = true,
     hidePrompt = false,
     subTableIndex,
     addWrapper = true,
@@ -24,12 +28,20 @@ export const BaseWrapper = function BaseWrapper({
     readonly,
     isRequired,
     ...otherProps
-}) {
+}) => {
+    React.useImperativeHandle(ref, () => ({
+        handleChange: ( value )=>{
+            console.log("change", otherProps?.onChange)
+            console.log("value", value)
+            otherProps?.onChange(value)
+        },
+    }), []);
+
     if (!addWrapper) return children;
     // 不接管只读属性的组件
-    const ignoreReadonly = ["UploadImage","UploadFile","Table","WithMultipleSelect","WithSingleSelect"]
-    if (readonly){
-        console.log("children?.type?.displayName",children?.type?.displayName)
+    const ignoreReadonly = ["UploadImage", "UploadFile", "Table", "WithMultipleSelect", "WithSingleSelect"]
+    if (readonly) {
+        console.log("children?.type?.displayName", children?.type?.displayName)
     }
     if (ignoreReadonly.includes(children?.type?.displayName) && readonly) readonly = false
     const formWarpper = (
@@ -55,7 +67,7 @@ export const BaseWrapper = function BaseWrapper({
                 {/* <FieldLable value={otherProps?.value} /> */}
                 {children}
             </div>}
-            
+
         </div>
     )
 

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"  />
-        
+        <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,22 +112,22 @@ 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"   />
+        <SearchSelect addWrapper={false} {...props} onChange={onChange} value={value} mode="multiple" className=" fflex-1 foverflow-hidden" />
     )
 }
 
-// 选择用户组件
+// 选择用户组件 
 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/components/index.jsx

@@ -57,4 +57,6 @@ const Setter = {
 }
 export { Setter }
 
-export { EditorQuill , EditorWang} from './editor'
+export * from './editor'
+export * from "./wangEditor"
+export * from "./wangEditorNext"

package/src/components/wangEditor/index.jsx

@@ -0,0 +1,167 @@
+/**
+ * @description React wangEditor usage
+ * @author wangfupeng
+ */
+
+import React, { useState, useEffect } from 'react'
+import '@wangeditor/editor/dist/css/style.css'
+import { Editor, Toolbar } from '@wangeditor/editor-for-react'
+import { Boot } from '@wangeditor/editor'
+import { DomEditor } from '@wangeditor/editor'
+import CustomMenu from "./menu/custom-menu"
+import { Modal } from 'antd'
+
+
+
+let setSize = null;
+let setRotation = null;
+
+const printSizeConf = {
+    key: 'printSize',
+    factory() {
+        return new CustomMenu("纸张大小", (editor, value) => {
+            typeof setSize === 'function' && setSize(editor, value)
+        })
+    }
+}
+const printRotationConf = {
+    key: 'printRotation',
+    factory() {
+        return new CustomMenu("纸张方向", (editor, value) => {
+            typeof setRotation === 'function' && setRotation(editor, value)
+        })
+    }
+}
+const formParamsConf = {
+    key: 'formParams',
+    factory() {
+        return new CustomMenu("表单参数", (editor, value) => {
+            typeof setRotation === 'function' && setRotation(editor, value)
+        })
+    }
+}
+Boot.registerMenu(printSizeConf)
+Boot.registerMenu(printRotationConf)
+Boot.registerMenu(formParamsConf)
+
+
+
+const WangEditor = () => {
+
+    const [showEdit, setShowEdit] = useState(false)
+    const [modalTitle, setModalTitle] = useState('纸张大小')
+    const [editor, setEditor] = useState(null) // 存储 editor 实例
+    const [html, setHtml] = useState('<p>hello</p>')
+    setSize = (editor, value) => {
+        setModalTitle('设置纸张大小')
+        setShowEdit(true)
+    }
+    setRotation = (editor, value) => {
+        setModalTitle('设置纸张方向')
+        setShowEdit(true)
+
+    }
+    // 模拟 ajax 请求，异步设置 html
+    useEffect(() => {
+
+    }, [])
+    useEffect(() => {
+        if (editor) {
+            
+            console.log("editor.menus ////",editor.menus)
+            editor.on('before-delete', (type, range) => {
+                console.log('before-delete', type, range);
+                const selection = window.getSelection();
+                const anchorNode = selection.anchorNode;
+                if (anchorNode && anchorNode.parentNode.tagName === 'A') {
+                    const aNode = anchorNode.parentNode;
+                    const parent = aNode.parentNode;
+                    if (parent && (parent.tagName === 'P' || parent.tagName === 'DIV')) {
+                        // 移除整个 <a> 标签
+                        parent.removeChild(aNode);
+                        // 更新编辑器的内容
+                        editor.txt.html(parent.innerHTML);
+                        return false; // 阻止默认的删除行为
+                    }
+                }
+            });
+
+            const toolbar = DomEditor.getToolbar(editor)
+
+            const curToolbarConfig = toolbar.getConfig()
+            console.log(curToolbarConfig.toolbarKeys)
+        }
+    }, [editor])
+    const handleWithOk = () => {
+
+    }
+    const toolbarConfig = {
+        insertKeys: {
+            index: 0,
+            keys: ['formParams' ,'printSize', 'printRotation','|' ], // show menu in toolbar
+        },
+        excludeKeys : [
+            'fullScreen' ,"insertLink"
+        ],
+        hoverbar :{
+            table:['insertTable', 'deleteTable', 'insertRowUp', 'insertRowDown', 'insertColLeft', 'insertColRight','formParams' ]
+        }
+    }
+    const editorConfig = {
+        placeholder: '请输入内容...',
+    }
+
+    // 及时销毁 editor
+    useEffect(() => {
+        return () => {
+            if (editor == null) return
+            editor.destroy()
+            setEditor(null)
+        }
+    }, [editor])
+
+    function insertText() {
+        if (editor == null) return
+        editor.insertText(' hello ')
+    }
+
+    function printHtml() {
+        if (editor == null) return
+        console.log(editor.getHtml())
+    }
+
+    return (
+        <>
+            <div className='fflex fflex-col fitems-center fgap-y-2'>
+                <div className='fflex fgap-2 fborder-b'>
+                    <div className='fflex-1 '> <Toolbar
+                        editor={editor}
+                        defaultConfig={toolbarConfig}
+                        mode="default"
+                    /></div>
+                </div>
+                <div className=' frounded fshadow-lg  fw-[960px] fborder fborder-gray-100 '>
+                    <Editor
+                        defaultConfig={editorConfig}
+                        value={html}
+                        onCreated={setEditor}
+                        onChange={editor => setHtml(editor.getHtml())}
+                        mode="default"
+                        style={{ height: '500px' }}
+                    /></div>
+            </div>
+            <Modal
+                destroyOnClose={true}
+                width={500}
+                title={modalTitle}
+                open={showEdit}
+                onCancel={() => setShowEdit(false)}
+                onOk={handleWithOk}
+            >
+                111111111111
+            </Modal>
+        </>
+    )
+}
+
+export { WangEditor }

package/src/components/wangEditor/menu/custom-menu.jsx

@@ -0,0 +1,23 @@
+
+class CustomMenu  {
+    constructor(title, handleClick) {
+        this.title = title
+        this.tag = 'button'
+        this.handleClick = handleClick
+    }
+
+    getValue(editor) {
+        return 'A4' 
+    }
+    isActive(editor) {
+        return false // or true
+    }
+    isDisabled(editor) {
+        return false // or true
+    }
+    exec(editor, value) {
+       typeof this.handleClick === 'function' && this.handleClick(editor,value)
+    }
+}
+
+export default CustomMenu

package/src/components/wangEditorNext/index.jsx

@@ -0,0 +1,62 @@
+import React, { useState, useEffect } from 'react';
+import '@wangeditor-next/editor/dist/css/style.css';
+import { Editor, Toolbar } from '@wangeditor-next/editor-for-react';
+
+function WangEditorNext() {
+  const [editor, setEditor] = useState(null); // 存储 editor 实例
+  const [html, setHtml] = useState('<p>hello</p>');
+
+  // 模拟 ajax 请求，异步设置 html
+  useEffect(() => {
+    setTimeout(() => {
+      setHtml('<p>hello&nbsp;<strong>world</strong>.</p>\n<p><br></p>');
+    }, 1500);
+  }, []);
+
+  const toolbarConfig = {};
+  const editorConfig = {
+    placeholder: '请输入内容...',
+  };
+
+  // 及时销毁 editor
+  useEffect(() => {
+    return () => {
+      if (editor == null) return;
+      editor.destroy();
+      setEditor(null);
+    };
+  }, [editor]);
+
+  function insertText() {
+    if (editor == null) return;
+    editor.insertText(' hello ');
+  }
+
+  function printHtml() {
+    if (editor == null) return;
+    console.log(editor.getHtml());
+  }
+
+  return (
+    <>
+      <div style={{ border: '1px solid #ccc', zIndex: 100, marginTop: '15px' }}>
+        <Toolbar
+          editor={editor}
+          defaultConfig={toolbarConfig}
+          mode="default"
+          style={{ borderBottom: '1px solid #ccc' }}
+        />
+        <Editor
+          defaultConfig={editorConfig}
+          value={html}
+          onCreated={setEditor}
+          onChange={(editor) => setHtml(editor.getHtml())}
+          mode="default"
+          style={{ height: '500px' }}
+        />
+      </div>
+    </>
+  );
+}
+
+export {WangEditorNext} ;

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();
 };