lu-lowcode-package-form 0.11.33 → 0.11.35

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

@@ -1,5 +1,6 @@
 import React, { forwardRef, useEffect } from "react";
 import { Form, Row, Col, message } from "antd";
+import { ConfigProvider } from 'antd';
 
 import { debounce, isEqual, throttle } from 'lodash';
 import { evalFormula } from '../../utils/formula'
@@ -799,12 +800,28 @@ const FormContainer = forwardRef(({ cols = 1, children, mode = "view" }, ref) =>
     };
 
     return (
-        <Form form={form} className={"form-container fp-0 fw-full fh-full box-border  fflex fflex-col fgap-y-2" + (mode == "desgin" ? " fp-6" : "")} onFieldsChange={handleFieldsChange}>
+        <ConfigProvider
+        theme={{
+          components: {
+            Table: {
+              rowHoverBg: '#ebebeb',
+              // "fontSize": 14,
+              // "cellPaddingBlock": 6
+            },
+          },
+          token: {
+            colorBgContainerDisabled: 'rgba(0, 0, 0, 0.02)', // 设置更浅的灰色背景
+            colorTextDisabled: '#000',
+          }
+        }}
+      >
+        <Form form={form} className={"form-container fp-0 fw-full fh-full box-border  fflex fflex-col " + (mode == "desgin" ? " fp-6" : "")} onFieldsChange={handleFieldsChange}>
             <Form.Item name="__id" hidden={true}>
                 <input type="hidden" />
             </Form.Item>
             {formContent}
         </Form>
+        </ConfigProvider>
     );
 });
 

package/src/components/index.jsx

@@ -3,6 +3,7 @@ import '../App.css';
 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 OptimizedFormContainer from './optimized-form-container/index.jsx'
 import { Checkbox ,CheckboxTree, CheckboxGroup } from './field/checkbox/index.jsx'
 import { default as RadioGroup } from './field/radio/index.jsx'
 import { UploadFile,UploadImage } from './field/upload'
@@ -61,7 +62,7 @@ Object.keys(Show).forEach(key => {
     Show[key].displayName = `Show.${key}`;
 });
 
-export { FormContainer, Field ,FormContainerWrapper,Layout,Show }
+export { FormContainer, Field ,FormContainerWrapper,Layout,Show,OptimizedFormContainer }
 import { default as OptionSetter} from './setter/optionsetter'
 const Setter = {
     OptionSetter

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

@@ -0,0 +1,281 @@
+import React, { forwardRef, useState, useEffect, useRef, useCallback } from "react";
+import { Form, Row, Col, message } from "antd";
+import { debounce } from "lodash";
+import { evalFormula } from "../../utils/formula";
+import { nanoid } from "nanoid";
+
+/**
+ * 简化版的分组方法，将子组件按列数分组，并对不可见项补位
+ */
+function batchElements(elements, groupSize, dependencyMap) {
+  const groupedElements = [];
+  let tempArray = [];
+
+  const fillWithPlaceholder = (size, array) => {
+    while (array.length < size) {
+      array.push(<div key={nanoid()} />);
+    }
+  };
+
+  elements.forEach(element => {
+    const compName = element.type?.displayName || element.props?._componentName;
+    // Layout 组件单独一组
+    if (compName && compName.startsWith("Layout.")) {
+      if (tempArray.length > 0) {
+        fillWithPlaceholder(groupSize, tempArray);
+        groupedElements.push(tempArray);
+        tempArray = [];
+      }
+      groupedElements.push([element]);
+    } else {
+      tempArray.push(element);
+      // 计算当前分组中可见的字段数量
+      const visibleCount = tempArray.filter(el => {
+        const identifier = el.props?.componentId || el.props?.__id;
+        const isVisible =
+          !dependencyMap?.has(identifier) || dependencyMap.get(identifier)?.show;
+        return isVisible && !el.props?.calcHidden;
+      }).length;
+
+      if (visibleCount === groupSize) {
+        groupedElements.push(tempArray);
+        tempArray = [];
+      }
+    }
+  });
+
+  if (tempArray.length > 0) {
+    fillWithPlaceholder(groupSize, tempArray);
+    groupedElements.push(tempArray);
+  }
+  return groupedElements;
+}
+
+/**
+ * 构建字段依赖关系 Map
+ * 针对每个组件，根据其 props 中的信息记录 identifier、级联规则、显隐函数等信息
+ */
+const buildDependencyMap = (children) => {
+  const dependencyMap = new Map();
+  const fields = [];
+
+  // 递归遍历生成 fields 数组
+  const traverse = (node, parentIdentifier = "") => {
+    const compName = node.type?.displayName || node.props?._componentName;
+    const { props } = node;
+    if (compName && (compName.startsWith("Field.") || compName.startsWith("Layout."))) {
+      let identifier = props?.componentId || props?.__id;
+      if (parentIdentifier) {
+        identifier = `${parentIdentifier}.${identifier}`;
+      }
+      const withIds = props.withId
+        ? [props.withId]
+        : (props.withIds ? [...props.withIds] : []);
+      fields.push({ identifier, withIds, compName, fillRules: props?.fillRules, visibleFunc: props?.withVisibleFunc });
+    }
+    if (props?.children) {
+      React.Children.forEach(props.children, child => {
+        traverse(child, compName && compName.startsWith("Field.") ? (props?.componentId || props?.__id) : "");
+      });
+    }
+  };
+
+  React.Children.forEach(children, child => traverse(child));
+
+  fields.forEach(field => {
+    dependencyMap.set(field.identifier, {
+      ...field,
+      show: true, // 默认全部显示，后续根据 visibleFunc 或计算公式更新
+      children: fields.filter(item => item.withIds.includes(field.identifier))
+    });
+  });
+  return dependencyMap;
+};
+
+/**
+ * 根据当前表单值和指定公式更新字段显示状态（返回 true 表示状态发生了变化）
+ */
+const computeFieldVisibility = (identifier, dependencyMap, fieldValues, withDatas = []) => {
+  if (!dependencyMap.has(identifier)) return false;
+  const dep = dependencyMap.get(identifier);
+  if (dep.visibleFunc && typeof dep.visibleFunc === "function") {
+    const visible = dep.visibleFunc(fieldValues);
+    if (dep.show !== visible) {
+      dep.show = visible;
+      return true;
+    }
+  }
+  // 可以加入根据 fillRules 计算公式的逻辑：这里简化为仅支持 evalFormula 计算
+  if (dep.fillRules && Array.isArray(dep.fillRules) && dep.fillRules.length > 0) {
+    const formula = dep.fillRules.map(rule => {
+      // 此处只处理简单字符串和取值逻辑，复杂情况可以在此扩展
+      return typeof rule === "string" ? rule : "";
+    });
+    const result = evalFormula(formula) === "true";
+    if (dep.show !== result) {
+      dep.show = result;
+      return true;
+    }
+  }
+  return false;
+};
+
+/**
+ * 完全实现原有依赖、级联更新和动态布局的表单组件
+ */
+const OptimizedFormContainer = forwardRef(({ cols = 1, children, mode = "view" }, ref) => {
+  const [form] = Form.useForm();
+  const [formContent, setFormContent] = useState(null);
+
+  // 存储依赖关系的 Map
+  const dependencyMap = useRef(new Map());
+  // 记录上一次字段值，用于判断是否需要更新
+  const lastFormValues = useRef({});
+  // 暂存所有字段变化
+  const changedFieldsRef = useRef({});
+
+  // 初始化依赖 map（当 children 发生变化时重新计算）
+  const initDependencyMap = useCallback(() => {
+    dependencyMap.current = buildDependencyMap(children);
+  }, [children]);
+
+  // 统一更新依赖显示状态，并根据需要重新渲染
+  const updateDependencies = useCallback(() => {
+    const fieldValues = form.getFieldsValue();
+    let needUpdate = false;
+    dependencyMap.current.forEach((_, identifier) => {
+      const changed = computeFieldVisibility(identifier, dependencyMap.current, fieldValues);
+      needUpdate = needUpdate || changed;
+    });
+    if (needUpdate) {
+      setFormContent(renderChildren());
+    }
+  }, [form]);
+
+  // 针对字段变化的统一处理函数（加去抖）
+  const handleFieldsChangeDebounced = useCallback(
+    debounce(() => {
+      const fieldValues = form.getFieldsValue();
+      Object.keys(changedFieldsRef.current).forEach(key => {
+        // 简单比较变化值
+        if (changedFieldsRef.current[key] !== fieldValues[key]) {
+          lastFormValues.current[key] = fieldValues[key];
+        }
+      });
+      changedFieldsRef.current = {};
+      updateDependencies();
+    }, 200),
+    [form, updateDependencies]
+  );
+
+  // 字段变化时记录变化
+  const onFieldsChange = (...[, allValues]) => {
+    // allValues 为整个表单的值
+    Object.assign(changedFieldsRef.current, allValues);
+    handleFieldsChangeDebounced();
+  };
+
+  // 生成实际渲染的子组件结构
+  const renderChildren = useCallback(() => {
+    const childrenArray = React.Children.toArray(children);
+    const groupedChildren = batchElements(childrenArray, cols, dependencyMap.current);
+    return groupedChildren.map((group, rowIndex) => (
+      <Row key={`row-${rowIndex}`} gutter={[24, 24]}>
+        {group.map((child, colIndex) => {
+          const { componentId, __id, _componentName, calcHidden, ...props } = child.props;
+          const compName = child.type?.displayName || _componentName;
+          // 标识字段ID，用于依赖管理
+          const identifier = componentId || __id;
+          // 缓存更新 key 避免受不必要的渲染影响
+          const updateKey = nanoid();
+          const isLayoutComponent = compName && compName.startsWith("Layout.");
+          const isVisible =
+            !dependencyMap.current.has(identifier) ||
+            dependencyMap.current.get(identifier)?.show;
+          // 不在设计模式下，对 calcHidden 或依赖为 false 时隐藏
+          const hidden = (calcHidden || !isVisible) && mode !== "desgin";
+          const rules = [];
+          if (props.isRequired) {
+            rules.push({ required: true, message: `${props.label}必须填写` });
+          }
+          if (props.rules) {
+            // 支持数组与正则字符串
+            const pattern =
+              Array.isArray(props.rules) && props.rules.length > 0
+                ? props.rules.join("|")
+                : props.rules;
+            rules.push({
+              pattern: new RegExp(pattern),
+              message: props.rulesFailMessage || `${props.label}格式错误`
+            });
+          }
+          let childComponent = null;
+          // 针对表格、布局组件做特殊处理
+          if (isLayoutComponent) {
+            childComponent = React.cloneElement(child, {
+              form,
+              fieldName: identifier,
+              updateKey
+            });
+          } else {
+            childComponent = (
+              <Form.Item
+                hidden={hidden}
+                label={props.label || ""}
+                name={identifier}
+                rules={isVisible ? rules : []}
+              >
+                {React.cloneElement(child, { form, fieldName: identifier, updateKey })}
+              </Form.Item>
+            );
+          }
+          return (
+            <Col key={identifier || `col-${colIndex}`} span={hidden ? 0 : (isLayoutComponent ? 24 : 24 / cols)}>
+              {childComponent}
+            </Col>
+          );
+        })}
+      </Row>
+    ));
+  }, [children, cols, form, mode]);
+
+  // 初始时构建依赖 map，以及第一次渲染
+  useEffect(() => {
+    initDependencyMap();
+    setFormContent(renderChildren());
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [initDependencyMap, renderChildren]);
+
+  // 对外暴露一些方法
+  React.useImperativeHandle(ref, () => ({
+    formRef: form,
+    setFieldsValue: (values) => {
+      form.setFieldsValue(values);
+      // 立即处理字段更新
+      handleFieldsChangeDebounced();
+    },
+    refreshDependencies: () => {
+      initDependencyMap();
+      updateDependencies();
+    }
+  }));
+
+  return (
+    <Form
+      form={form}
+      className={`form-container fp-0 fw-full fh-full box-border fflex fflex-col fgap-y-2${mode === "desgin" ? " fp-6" : ""}`}
+      onValuesChange={onFieldsChange}
+    >
+      <Form.Item name="__id" hidden>
+        <input type="hidden" />
+      </Form.Item>
+      {formContent}
+    </Form>
+  );
+});
+
+export function withWrap(Component) {
+  return forwardRef((props, ref) => <Component {...props} ref={ref} forwardedRef={ref} />);
+}
+
+export default OptimizedFormContainer; 

package/src/utils/formula.js

@@ -1,23 +1,46 @@
+import memoizee from 'memoizee';
+
 // 不安全的Function函数，有时间的话需要重新编写公式编译器
 // 可以使用库 expr-eval 来替换（undo)
-const evalFormula =(formula) => {
+const evalFormula = memoizee((formula) => {
     let result = "";
-    let  funcCode = "";
+    let funcCode = "";
     try {
         funcCode =`return ${formula.join("")}`
-        // console.log("funcCode",funcCode)
+        console.log("funcCode",funcCode)
         const func = new Function(funcCode);
         result = func()
         // result = eval(formula.join(""));
         if (!(typeof result === "object" && result !== null))
-        result = result.toString();
+            result = result.toString();
     } catch (error) {
         console.error(`formula (${funcCode}) error`, error);
     }
     // console.log("formula result", result);
     return result
-};
-
+}, {
+    // 配置缓存选项
+    primitive: true, // 使用基本类型作为缓存key
+    max: 1000,      // 最大缓存数量
+    maxAge: 1000 * 60 * 1  // 缓存1分钟
+});
+// const evalFormula =(formula) => {
+//     let result = "";
+//     let funcCode = "";
+//     try {
+//         funcCode =`return ${formula.join("")}`
+//         // console.log("funcCode",funcCode)
+//         const func = new Function(funcCode);
+//         result = func()
+//         // result = eval(formula.join(""));
+//         if (!(typeof result === "object" && result !== null))
+//             result = result.toString();
+//     } catch (error) {
+//         console.error(`formula (${funcCode}) error`, error);
+//     }
+//     // console.log("formula result", result);
+//     return result
+// }
 
 // let demo = ["JSON.parse(`","{\"label\":\"1111\",\"value\":1}","`)\n\n"]