lu-lowcode-package-form 0.9.8 → 0.9.18

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

@@ -1,7 +1,8 @@
 import React, { forwardRef, useEffect } from "react";
 import { Form, Row, Col } from "antd";
 
-import {debounce } from 'lodash';
+import { debounce } from 'lodash';
+import { evalFormula } from '../../utils/formula'
 
 
 function batchElements(elements, groupSize) {
@@ -15,8 +16,8 @@ function batchElements(elements, groupSize) {
 
     for (const element of elements) {
         const { _componentName } = element?.props || {};
-
-        if (_componentName && _componentName.startsWith('Layout.')) {
+        const componentName = element.type?.displayName || _componentName;
+        if (componentName && componentName.startsWith('Layout.')) {
             if (tempArray.length > 0) {
                 fillWithReactElement(groupSize, tempArray);
                 groupedElements.push(tempArray);
@@ -57,67 +58,177 @@ const FormContainer = forwardRef(({ cols = 1, children }, ref) => {
     }, [children, cols]);
 
     const initializeDependencyMap = () => {
+        const fields = [];
+        function traverse(currentNode) {
+            var componentName = currentNode.type?.displayName || currentNode.props?._componentName;
+            const { props } = currentNode;
+            if (componentName && componentName.startsWith('Field.')) {
+                fields.push(currentNode);
+            }
+            
+            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);
-
-        childrenArray.forEach(child => {
-            const { componentId, __id, ...props } = child.props;
+        for (let index = 0; index < childrenArray.length; index++) {
+            const element = childrenArray[index];
+            traverse(element)
+        }
+        fields.forEach(child => {
+            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?.includes(identifier)),
+                children: childrenArray.filter(item => item.props.withId === identifier || item.props.withIds?.some(item=>{
+                    return identifier == item || item.startsWith(identifier + '.')
+                })),
                 show: true,
             });
         });
-
+        console.log("dependencyMap", dependencyMap.current)
         initializeFieldVisibility();
     };
 
-    // 初始化字段的显示状态
+    // 初始化字段的级联关系
     const initializeFieldVisibility = (reloadFields = false) => {
         const fieldValues = form.getFieldsValue();
         for (let key of dependencyMap.current.keys()) {
-            updateFieldVisibility(key, fieldValues);
+            handleFieldsWith(key, fieldValues);
         }
-
         if (reloadFields) setFormContent(renderChildren());
     };
 
-    // 计算是否显示
-    const updateFieldVisibility = (identifier, fieldValues) => {
+    // 计算字段级联关系
+    const handleFieldsWith = (identifier, fieldValues) => {
         let needRefresh = false;
         if (dependencyMap.current.has(identifier)) {
             const dependentChildren = dependencyMap.current.get(identifier).children;
             dependentChildren.forEach(child => {
-                if (child.props.__withFunc && typeof child.props.__withFunc === 'function') {
-                    const childShouldBeVisible = child.props.__withFunc(fieldValues);
-                    const childIdentifier = child.props.componentId || child.props.__id;
-                    if (dependencyMap.current.has(childIdentifier)) {
-                        const childData = dependencyMap.current.get(childIdentifier);
-                        if (childData.show !== childShouldBeVisible) {
-                            childData.show = childShouldBeVisible;
-                            dependencyMap.current.set(childIdentifier, childData);
-                            needRefresh = true;
-                        }
-                    }
+                if (child.props.withFunc && typeof child.props.withFunc === 'function') {
+                    needRefresh = handleFieldsVisible(fieldValues, child)
                 }
+
+                if (child.props.withFill)
+                    handleFieldsWithFill(fieldValues, child)
+
             });
         }
         return needRefresh;
     };
 
+    // 处理级联显示隐藏 @return {boolean} 是否需要重新渲染表单的字段
+    const handleFieldsVisible = (fieldValues, child) => {
+        let needRefresh = false;
+        const childShouldBeVisible = child.props.withFunc(fieldValues);
+        const childIdentifier = child.props.componentId || child.props.__id;
+        if (dependencyMap.current.has(childIdentifier)) {
+            const childData = dependencyMap.current.get(childIdentifier);
+            if (childData.show !== childShouldBeVisible) {
+                childData.show = childShouldBeVisible;
+                dependencyMap.current.set(childIdentifier, childData);
+                needRefresh = true;
+            }
+        }
+        return needRefresh
+    }
+    // 处理级联数据源
+    // 处理级联填充
+    const handleFieldsWithFill = async (fieldValues, child) => {
+        const withFill = child.props.withFill;
+        const withDataFetch = child.props.withDataFetch;
+        console.log("withFill", withFill)
+        console.log("fieldValues", fieldValues)
+        console.log("child", child)
+
+        let withDatas = [];
+        // 先处理依赖数据
+        if (withFill?.withData && withFill?.withData.length > 0 && withDataFetch && typeof withDataFetch === 'function') {
+            for (let index = 0; index < withFill?.withData.length; index++) {
+                const element = withFill?.withData[index];
+                let params = {}
+                params.tableName = element.withTable.table_name
+                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)
+                }
+
+                // 访问接口获取数据
+                const response = await withDataFetch(params)
+                if (response.code === 0 && response.data.list) {
+                    withDatas.push({
+                        id: element.id,
+                        data: response.data.list
+                    })
+                }
+            }
+        }
+
+        // 构造计算公式
+        let formula;
+        if (withFill.value && withFill.value.length > 0) {
+            formula = withFill.value.map(item => {
+                let result = "";
+                const { insert, attributes } = item
+                if (typeof insert !== "string") {
+                    if (insert?.span && attributes && attributes.tagKey && attributes.id) {
+                        result = getParamValue(attributes.tagKey, attributes.id, fieldValues, withDatas)
+                        if (Array.isArray(result)) result = JSON.stringify(result)
+                        else if (result) result = `"${result}"`
+                    }
+                }
+                else result = insert
+                return result
+            })
+        }
+        console.log("formula",formula)
+        if (formula && formula.length > 0) {
+            const childIdentifier = child.props.componentId || child.props.__id;
+            form.setFieldValue(childIdentifier, evalFormula(formula))
+        }
+    }
+
+    const getParamValue = (tagKey, id, fieldValues, withDatas) => {
+        let result = "";
+        // 从当前表单字段取值
+        if (tagKey == "fieldsValue") {
+            if (id.indexOf(".") >= 0) {
+                const [parentKey, childKey] = id.split(".");
+                const parentValue = fieldValues?.[parentKey] || [];
+                if (Array.isArray(parentValue)) 
+                    result = parentValue.map(item => {
+                        return item?.[childKey] || ""
+                    })
+                else result = parentValue?.[childKey] || ""
+            }
+            else result = fieldValues?.[id] || ""
+        }
+        // 从依赖数据取值
+        else {
+            let withData = withDatas.find(item => item.id === tagKey)
+            if (withData && withData.data && withData.data.length > 0) {
+                // 暂时只取一条数据，后续再想 sum 函数等问题
+                result = withData.data[0]?.[id] || ""
+            }
+        }
+        return result
+    }
+
     const handleFieldsChange = debounce((changedFields, allFields) => {
         const fieldValues = form.getFieldsValue();
         let needRefresh = false;
         changedFields.forEach(field => {
             if (field.name && field.name.length > 0) {
-                needRefresh = updateFieldVisibility(field.name[0], fieldValues);
+                needRefresh = handleFieldsWith(field.name[0], fieldValues);
             }
         });
 
         if (needRefresh) {
             setFormContent(renderChildren());
         }
-    }, 100);
+    }, 200);
 
     const renderChildren = () => {
         const childrenArray = React.Children.toArray(children);
@@ -129,12 +240,13 @@ const FormContainer = forwardRef(({ cols = 1, children }, ref) => {
             cols
         );
 
-        return groupedChildren.map((group,index) => (
+        return groupedChildren.map((group, index) => (
             <Row key={`row-${index}`} gutter={[24, 24]}>
                 {group.map((child, index) => {
                     const { componentId, __id, _componentName, ...props } = child.props;
+                    const componentName = child.type?.displayName || _componentName;
                     const identifier = componentId || __id;
-                    const isLayoutComponent = _componentName && _componentName.startsWith('Layout.');
+                    const isLayoutComponent = componentName && componentName.startsWith('Layout.');
 
                     return (
                         <Col key={identifier || `col-${index}`} span={isLayoutComponent ? 24 : 24 / group.length} style={{ marginBottom: 0 }}>
@@ -168,7 +280,7 @@ export function withWrap(Component) {
     return forwardRef((props, ref) => <Component {...props} ref={ref} forwardedRef={ref} />);
 }
 
-export class FormContainerClass extends React.PureComponent{
+export class FormContainerClass extends React.PureComponent {
     render() {
         const { forwardedRef, ...otherProps } = this.props;
         return <FormContainer {...otherProps} ref={forwardedRef} />

package/src/components/form-container/layout/form-group-title.jsx

@@ -1,5 +1,5 @@
 const FormGroupTitle = ({ title }) => {
-  return (title? <div className="fh-11  fflex fitems-center ftext-lg ffont-medium fmb-5  "><span className="fborder-l-4 fborder-slate-300  fpl-2 ">{title}</span></div>: null ) 
+  return (title? <div className="fh-11  fflex fitems-center ftext-lg ffont-medium "><span className="fborder-l-4 fborder-slate-300  fpl-2 ">{title}</span></div>: null ) 
 };
 
 export default FormGroupTitle;

package/src/components/index.jsx

@@ -1,6 +1,6 @@
-import { Input, TextArea, Password, Search ,CodeMachine} from './field/input/index.jsx'
+import { Input, TextArea, Password, Search ,CodeMachine, Number} from './field/input/index.jsx'
 import '../App.css';
-import { TreeSelect, Select, WithSingleSelect,WithMultipleSelect, SingleSelect, MultipleSelect } from './field/select/index.jsx'
+import { TreeSelect, Select, WithSingleSelect,WithMultipleSelect, SingleSelect, MultipleSelect, SearchSelect } 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'
@@ -14,8 +14,10 @@ const Field = {
     TextArea,
     Password,
     Search,
+    Number,
     TreeSelect,
     Select,
+    SearchSelect,
     WithSingleSelect,
     WithMultipleSelect,
     SingleSelect,
@@ -29,17 +31,26 @@ const Field = {
     UploadImage,
     Switch,
     DatePicker,
+    Table,
     Custom,
 }
+Object.keys(Field).forEach(key => {
+    Field[key].displayName = `Field.${key}`;
+});
+
 const Layout = {
     FormRow: LayoutFormRow,
     FormGroupTitle: LayoutFormGroupTitle,
-    Table,
     TableCol
 }
+Object.keys(Layout).forEach(key => {
+    Layout[key].displayName = `Layout.${key}`;
+});
 export { FormContainer, Field ,FormContainerWrapper,Layout }
 import { default as OptionSetter} from './setter/optionsetter'
 const Setter = {
     OptionSetter
 }
-export { Setter }
+export { Setter }
+
+export { EditorQuill , EditorWang} from './editor'

package/src/utils/formula.js

@@ -0,0 +1,12 @@
+// 不安全的eval函数，有时间的话需要重新编写公式编译器
+const evalFormula =(formula) => {
+    let result = "";
+    try {
+        result = eval(formula.join(""));
+    } catch (error) {
+        console.error("formula error", error);
+    }
+    return result.toString();
+};
+
+export {evalFormula};