@fecp/designer 5.3.4 → 5.3.6

package/es/packages/vue/src/components/bus/approvalHistory/ApprovalHistory.vue.mjs

@@ -36,8 +36,9 @@ const _sfc_main = /* @__PURE__ */ Object.assign({
     const traceNo = ref("");
     const formData = inject("formData");
     inject("rowHeight");
-    const gridLayout = inject("gridLayout");
+    inject("gridLayout");
     inject("gridLayoutFieldsData");
+    const setFormItemHeight = inject("setFormItemHeight");
     const fieldsData = props.localConfig.fieldsData.map((item) => {
       return item.component;
     });
@@ -63,11 +64,11 @@ const _sfc_main = /* @__PURE__ */ Object.assign({
       const foundItem = props.localConfig.fieldsData.find(
         (item) => item.id == props.config.id
       );
-      const titleHeight = config.titleMode != "none" ? 60 : 0;
+      const titleHeight = props.config.titleMode != "none" ? 60 : 0;
       if (foundItem) {
         foundItem.fixedH = true;
         foundItem.h = dom.offsetHeight + titleHeight;
-        gridLayout.value.resizeEvent();
+        setFormItemHeight(props.config.id, true, dom.offsetHeight + titleHeight);
       }
     }
     return (_ctx, _cache) => {
@@ -124,7 +125,7 @@ const _sfc_main = /* @__PURE__ */ Object.assign({
     };
   }
 });
-const _ApprovalHistory = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-7be2a6d2"]]);
+const _ApprovalHistory = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-f7d02612"]]);
 export {
   _ApprovalHistory as default
 };

package/es/packages/vue/src/components/forms/form/Form.vue.mjs

@@ -5,7 +5,7 @@
 /* empty css                                                                                                                                         */
 /* empty css                                                                                                                                       */
 /* empty css                                                                                                                                       */
-import { getCurrentInstance, ref, computed, onMounted, watch, provide, createBlock, openBlock, withCtx, createCommentVNode, createVNode, unref, normalizeStyle, createElementBlock, isRef, Fragment, renderList } from "vue";
+import { getCurrentInstance, ref, onMounted, onBeforeUnmount, watch, provide, createBlock, openBlock, withCtx, createCommentVNode, createVNode, unref, normalizeStyle, createElementBlock, Fragment, renderList } from "vue";
 import "../../../../../../node_modules/.pnpm/grid-layout-plus@1.1.1_vue@3.5.13_typescript@5.7.3_/node_modules/grid-layout-plus/es/index.mjs";
 import { getCurrentVueInstance } from "../../../utils/getInstance.mjs";
 import getJsonAsyncUtil from "../../../utils/getJsonAsyncUtil.mjs";
@@ -31,7 +31,7 @@ import { usePageEvents } from "../../../composables/usePageEvents.mjs";
 import { header } from "../../details/header/index.mjs";
 import { main } from "../../details/main/index.mjs";
 import { footer } from "../../details/footer/index.mjs";
-import { checkFilterMatch } from "../../../utils/parseFilterConfig.mjs";
+import { checkFilterMatch, checkFieldInFilterConfig, checkFieldInResultConfig } from "../../../utils/parseFilterConfig.mjs";
 import hooks from "../../../../../../node_modules/.pnpm/moment@2.30.1/node_modules/moment/dist/moment.mjs";
 /* empty css           */
 import { ElContainer } from "../../../../../../node_modules/.pnpm/element-plus@2.13.2_vue@3.5.13_typescript@5.7.3_/node_modules/element-plus/es/components/container/index.mjs";
@@ -147,8 +147,12 @@ const _sfc_main = /* @__PURE__ */ Object.assign({
         });
         hiddenFields.value = option.hiddenFields || [];
         await loadFieldDataSources();
+        await loadProductData();
+        applyProductConfigToForm();
+        mergeOptionsToFields();
         loadFormData();
         loadEventFlow();
+        initGridLayoutDataConfig();
         if (pageEvents && localConfig.value.pageEventConfig) {
           const onCreatedEvent = localConfig.value.pageEventConfig.find(
             (e) => e.name === "onCreated"
@@ -158,9 +162,6 @@ const _sfc_main = /* @__PURE__ */ Object.assign({
             await pageEvents.executeEvent("onCreated");
           }
         }
-        await loadProductData();
-        applyProductConfigToForm();
-        mergeOptionsToFields();
       } catch (error) {
         console.error("加载配置失败:", error);
         ElMessage.error("加载配置失败");
@@ -174,7 +175,11 @@ const _sfc_main = /* @__PURE__ */ Object.assign({
       if (fieldsData.value) {
         fieldsData.value.forEach((component) => {
           if (component.fieldName) {
-            defaultData[component.fieldName] = component.defaultValue ? component.defaultValue : null;
+            let defaultValue = component.defaultValue || null;
+            if (component.fieldType == "number") {
+              defaultValue = Number(defaultValue || 0);
+            }
+            defaultData[component.fieldName] = defaultValue;
           }
           if (component.fieldName) {
             const fieldRules = generateFieldRules(component);
@@ -357,16 +362,6 @@ const _sfc_main = /* @__PURE__ */ Object.assign({
                 prodRules.value[formField.fieldName] = [];
               }
               const customValidator = (rule, value, callback) => {
-                console.log(
-                  "🚀 ~ customValidator 被调用 ~ 字段:",
-                  formField == null ? void 0 : formField.fieldName,
-                  "值:",
-                  value,
-                  "minValue:",
-                  minValue,
-                  "maxValue:",
-                  maxValue
-                );
                 if (value === null || value === void 0 || value === "") {
                   callback();
                   return;
@@ -472,7 +467,36 @@ const _sfc_main = /* @__PURE__ */ Object.assign({
         }
       });
     }
-    const gridLayoutDataConfig = ref([]);
+    const gridLayoutFieldsData = ref([]);
+    const oriGridLayoutData = ref([]);
+    const formItemRefs = ref(/* @__PURE__ */ new Map());
+    const setFormItemRef = (el, component) => {
+      if (!el) {
+        if (component && component.id) {
+          formItemRefs.value.delete(component.id);
+        }
+        return;
+      }
+      if (component && component.id) {
+        formItemRefs.value.set(String(component.id), el);
+      }
+    };
+    const getFormItemRef = (fieldId) => {
+      const formItem = formItemRefs.value.get(fieldId);
+      if (!formItem) {
+        console.log(`未找到 fieldId: ${fieldId} 的 FormItem 组件`);
+        return null;
+      }
+      console.log(`找到 FormItem 组件:`, formItem);
+      if (typeof formItem.getInnerComponentRef === "function") {
+        const innerRef = formItem.getInnerComponentRef();
+        console.log(`内部组件 ref:`, innerRef);
+        return innerRef;
+      } else {
+        console.log(`FormItem 组件没有 getInnerComponentRef 方法`);
+        return null;
+      }
+    };
     function initGridLayoutDataConfig() {
       let gridLayoutData = cloneDeep(localConfig.value.fieldsData || []);
       gridLayoutData = gridLayoutData.map((item) => {
@@ -490,125 +514,8 @@ const _sfc_main = /* @__PURE__ */ Object.assign({
         }
         return item;
       });
-      gridLayoutDataConfig.value = gridLayoutData;
+      oriGridLayoutData.value = gridLayoutData;
     }
-    const gridLayoutFieldsData = computed(() => {
-      initGridLayoutDataConfig();
-      let gridLayoutData = cloneDeep(gridLayoutDataConfig.value || []);
-      const linkedConfig = localConfig.value.linkedConfig || {};
-      const dataLink = (linkedConfig == null ? void 0 : linkedConfig.dataLink) || [];
-      const fields = [...fieldsData.value, ...hiddenFields.value];
-      dataLink.forEach((item) => {
-        if (checkFilterMatch(item.filterConfig, formData.value, fields)) {
-          const fieldAssignments = item.fieldAssignments || [];
-          fieldAssignments.forEach((assignment) => {
-            var _a, _b;
-            const fieldId = assignment.fieldId;
-            const formulaText = (_b = (_a = assignment.formula) == null ? void 0 : _a.value) == null ? void 0 : _b.text;
-            const field = fields.find((f) => f.id == fieldId);
-            if (field && formulaText) {
-              const calcResult = calculate({
-                text: formulaText,
-                marks: [],
-                value: formData.value
-              });
-              formData.value[field.fieldName] = calcResult;
-            }
-          });
-        }
-      });
-      const visibility = (linkedConfig == null ? void 0 : linkedConfig.visibility) || [];
-      visibility.forEach((item) => {
-        const dataLinkFieldList = item.dataLinkFieldList || [];
-        if (checkFilterMatch(item.filterConfig, formData.value, fields)) {
-          dataLinkFieldList.forEach((fieldId) => {
-            const layoutFieldItem = gridLayoutData.find((g) => g.id == fieldId);
-            if (layoutFieldItem) {
-              layoutFieldItem.hidden = false;
-            }
-          });
-        } else {
-          dataLinkFieldList.forEach((fieldId) => {
-            const layoutFieldItem = gridLayoutData.find((g) => g.id == fieldId);
-            if (layoutFieldItem) {
-              layoutFieldItem.hidden = true;
-            }
-          });
-        }
-      });
-      gridLayoutData = gridLayoutData.filter((item) => !item.hidden);
-      const requiredArr = (linkedConfig == null ? void 0 : linkedConfig.required) || [];
-      requiredArr.forEach((item) => {
-        const dataLinkFieldList = item.dataLinkFieldList || [];
-        if (checkFilterMatch(item.filterConfig, formData.value, fields)) {
-          dataLinkFieldList.forEach((fieldId) => {
-            const layoutFieldItem = gridLayoutData.find((g) => g.id == fieldId);
-            if (layoutFieldItem) {
-              layoutFieldItem.component.required = true;
-            }
-          });
-        } else {
-          dataLinkFieldList.forEach((fieldId) => {
-            const layoutFieldItem = gridLayoutData.find((g) => g.id == fieldId);
-            if (layoutFieldItem) {
-              layoutFieldItem.component.required = false;
-            }
-          });
-        }
-      });
-      const rules = {};
-      gridLayoutData.forEach(({ component }) => {
-        if (component.fieldName) {
-          const fieldRules = generateFieldRules(component);
-          if (fieldRules.length > 0) {
-            rules[component.fieldName] = fieldRules;
-          }
-        }
-      });
-      for (let fieldName in prodRules.value) {
-        rules[fieldName] = prodRules.value[fieldName];
-      }
-      formRules.value = rules;
-      const readonlyArr = (linkedConfig == null ? void 0 : linkedConfig.readonly) || [];
-      readonlyArr.forEach((item) => {
-        const dataLinkFieldList = item.dataLinkFieldList || [];
-        if (checkFilterMatch(item.filterConfig, formData.value, fields)) {
-          dataLinkFieldList.forEach((fieldId) => {
-            const layoutFieldItem = gridLayoutData.find((g) => g.id == fieldId);
-            if (layoutFieldItem) {
-              layoutFieldItem.component.readOnly = true;
-            }
-          });
-        } else {
-          dataLinkFieldList.forEach((fieldId) => {
-            const layoutFieldItem = gridLayoutData.find((g) => g.id == fieldId);
-            if (layoutFieldItem) {
-              layoutFieldItem.component.readOnly = false;
-            }
-          });
-        }
-      });
-      const disabledArr = (linkedConfig == null ? void 0 : linkedConfig.disabled) || [];
-      disabledArr.forEach((item) => {
-        const dataLinkFieldList = item.dataLinkFieldList || [];
-        if (checkFilterMatch(item.filterConfig, formData.value, fields)) {
-          dataLinkFieldList.forEach((fieldId) => {
-            const layoutFieldItem = gridLayoutData.find((g) => g.id == fieldId);
-            if (layoutFieldItem) {
-              layoutFieldItem.component.disabled = true;
-            }
-          });
-        } else {
-          dataLinkFieldList.forEach((fieldId) => {
-            const layoutFieldItem = gridLayoutData.find((g) => g.id == fieldId);
-            if (layoutFieldItem) {
-              layoutFieldItem.component.disabled = false;
-            }
-          });
-        }
-      });
-      return gridLayoutData;
-    });
     const getFieldError = (fieldName) => {
       var _a;
       if (!formRef.value) return "";
@@ -746,13 +653,210 @@ const _sfc_main = /* @__PURE__ */ Object.assign({
     onMounted(() => {
       loadConfig();
     });
+    onBeforeUnmount(() => {
+      formItemRefs.value.clear();
+    });
+    const prevFormData = ref({});
+    const findChangedFields = (newData, oldData) => {
+      const changedFields = [];
+      const allKeys = /* @__PURE__ */ new Set([
+        ...Object.keys(newData || {}),
+        ...Object.keys(oldData || {})
+      ]);
+      for (const key of allKeys) {
+        const newVal = newData[key];
+        const oldVal = oldData[key];
+        if (newVal !== oldVal) {
+          changedFields.push(key);
+        }
+      }
+      return changedFields;
+    };
+    const filterRelevantLinkageConfigs = (changedFieldNames, linkedConfig, fields) => {
+      const result = {
+        dataLink: [],
+        visibility: [],
+        required: [],
+        readonly: [],
+        disabled: []
+      };
+      if (!linkedConfig || changedFieldNames.length === 0) {
+        return result;
+      }
+      const changedFieldIds = changedFieldNames.map((fieldName) => {
+        const field = fields.find((f) => f.fieldName == fieldName);
+        return field ? field.id : null;
+      }).filter((id) => id !== null);
+      if (linkedConfig.dataLink) {
+        result.dataLink = linkedConfig.dataLink.filter((item) => {
+          return changedFieldIds.some(
+            (fieldId) => checkFieldInFilterConfig(item.filterConfig, fieldId) || checkFieldInResultConfig(item.fieldAssignments, fieldId, fields)
+          );
+        });
+      }
+      if (linkedConfig.visibility) {
+        result.visibility = linkedConfig.visibility;
+      }
+      if (linkedConfig.required) {
+        result.required = linkedConfig.required;
+      }
+      if (linkedConfig.readonly) {
+        result.readonly = linkedConfig.readonly;
+      }
+      if (linkedConfig.disabled) {
+        result.disabled = linkedConfig.disabled;
+      }
+      return result;
+    };
+    const applyLinkageEffectsForChangedFields = (changedFieldNames) => {
+      var _a;
+      console.log(
+        "🚀 ~ applyLinkageEffectsForChangedFields ~ 变化的字段:",
+        changedFieldNames
+      );
+      const linkedConfig = localConfig.value.linkedConfig || {};
+      const fields = [...fieldsData.value, ...hiddenFields.value];
+      const relevantConfigs = filterRelevantLinkageConfigs(
+        changedFieldNames,
+        linkedConfig,
+        fields
+      );
+      relevantConfigs.dataLink.forEach((item) => {
+        if (checkFilterMatch(item.filterConfig, formData.value, fields)) {
+          const fieldAssignments = item.fieldAssignments || [];
+          fieldAssignments.forEach((assignment) => {
+            var _a2, _b;
+            const fieldId = assignment.fieldId;
+            const formulaText = (_b = (_a2 = assignment.formula) == null ? void 0 : _a2.value) == null ? void 0 : _b.text;
+            const field = fields.find((f) => f.id == fieldId);
+            if (field && formulaText) {
+              const calcResult = calculate({
+                text: formulaText,
+                marks: [],
+                value: formData.value
+              });
+              formData.value[field.fieldName] = calcResult;
+            }
+          });
+        }
+      });
+      const updatedLayoutData = cloneDeep(oriGridLayoutData.value || []);
+      relevantConfigs.visibility.forEach((item) => {
+        const dataLinkFieldList = item.dataLinkFieldList || [];
+        if (checkFilterMatch(item.filterConfig, formData.value, fields)) {
+          dataLinkFieldList.forEach((fieldId) => {
+            const layoutFieldItem = updatedLayoutData.find((g) => g.id == fieldId);
+            if (layoutFieldItem) {
+              layoutFieldItem.hidden = false;
+            }
+          });
+        } else {
+          dataLinkFieldList.forEach((fieldId) => {
+            const layoutFieldItem = updatedLayoutData.find((g) => g.id == fieldId);
+            if (layoutFieldItem) {
+              layoutFieldItem.hidden = true;
+            }
+          });
+        }
+      });
+      relevantConfigs.required.forEach((item) => {
+        const dataLinkFieldList = item.dataLinkFieldList || [];
+        if (checkFilterMatch(item.filterConfig, formData.value, fields)) {
+          dataLinkFieldList.forEach((fieldId) => {
+            const layoutFieldItem = updatedLayoutData.find((g) => g.id == fieldId);
+            if (layoutFieldItem) {
+              layoutFieldItem.component.required = true;
+            }
+          });
+        } else {
+          dataLinkFieldList.forEach((fieldId) => {
+            const layoutFieldItem = updatedLayoutData.find((g) => g.id == fieldId);
+            if (layoutFieldItem) {
+              layoutFieldItem.component.required = false;
+            }
+          });
+        }
+      });
+      const rules = {};
+      updatedLayoutData.forEach(({ component }) => {
+        if (component.fieldName) {
+          const fieldRules = generateFieldRules(component);
+          if (fieldRules.length > 0) {
+            rules[component.fieldName] = fieldRules;
+          }
+        }
+      });
+      for (let fieldName in prodRules.value) {
+        rules[fieldName] = prodRules.value[fieldName];
+      }
+      formRules.value = rules;
+      relevantConfigs.readonly.forEach((item) => {
+        const dataLinkFieldList = item.dataLinkFieldList || [];
+        if (checkFilterMatch(item.filterConfig, formData.value, fields)) {
+          dataLinkFieldList.forEach((fieldId) => {
+            const layoutFieldItem = updatedLayoutData.find((g) => g.id == fieldId);
+            if (layoutFieldItem) {
+              layoutFieldItem.component.readOnly = true;
+            }
+          });
+        } else {
+          dataLinkFieldList.forEach((fieldId) => {
+            const layoutFieldItem = updatedLayoutData.find((g) => g.id == fieldId);
+            if (layoutFieldItem) {
+              layoutFieldItem.component.readOnly = false;
+            }
+          });
+        }
+      });
+      relevantConfigs.disabled.forEach((item) => {
+        const dataLinkFieldList = item.dataLinkFieldList || [];
+        if (checkFilterMatch(item.filterConfig, formData.value, fields)) {
+          dataLinkFieldList.forEach((fieldId) => {
+            const layoutFieldItem = updatedLayoutData.find((g) => g.id == fieldId);
+            if (layoutFieldItem) {
+              layoutFieldItem.component.disabled = true;
+            }
+          });
+        } else {
+          dataLinkFieldList.forEach((fieldId) => {
+            const layoutFieldItem = updatedLayoutData.find((g) => g.id == fieldId);
+            if (layoutFieldItem) {
+              layoutFieldItem.component.disabled = false;
+            }
+          });
+        }
+      });
+      gridLayoutFieldsData.value = updatedLayoutData.filter((item) => !item.hidden);
+      (_a = gridLayout == null ? void 0 : gridLayout.value) == null ? void 0 : _a.resizeEvent();
+    };
     watch(
       formData,
-      (newVal) => {
+      (newVal, oldVal) => {
+        const changedFields = findChangedFields(newVal, prevFormData.value);
+        if (changedFields.length > 0) {
+          applyLinkageEffectsForChangedFields(changedFields);
+        }
+        prevFormData.value = { ...newVal };
         emit("update:modelValue", newVal);
       },
       { deep: true }
     );
+    function setFormItemHeight(id, fixedH, h) {
+      var _a;
+      const item = gridLayoutFieldsData.value.find((item2) => item2.id == id);
+      if (!fixedH) {
+        item.h = h * 60;
+      } else if (fixedH) {
+        item.h = h / (localConfig.value.labelPosition == "top" ? 1.5 : 1);
+      }
+      const oriItem = oriGridLayoutData.value.find((item2) => item2.id == id);
+      if (!fixedH) {
+        oriItem.h = h * 60;
+      } else if (fixedH) {
+        oriItem.h = h / (localConfig.value.labelPosition == "top" ? 1.5 : 1);
+      }
+      (_a = gridLayout == null ? void 0 : gridLayout.value) == null ? void 0 : _a.resizeEvent();
+    }
     provide("formData", formData);
     provide("localConfig", localConfig);
     provide("fieldsData", fieldsData);
@@ -760,12 +864,14 @@ const _sfc_main = /* @__PURE__ */ Object.assign({
     provide("rowHeight", rowHeight);
     provide("gridLayout", gridLayout);
     provide("gridLayoutFieldsData", gridLayoutFieldsData);
+    provide("setFormItemHeight", setFormItemHeight);
     provide("formCtx", ctx);
     __expose({
       validate,
       resetFields,
       getFormData,
       setFormData,
+      getFormItemRef,
       formRef,
       localConfig
     });
@@ -801,8 +907,8 @@ const _sfc_main = /* @__PURE__ */ Object.assign({
                     key: 0,
                     ref_key: "gridLayout",
                     ref: gridLayout,
-                    layout: unref(gridLayoutFieldsData),
-                    "onUpdate:layout": _cache[0] || (_cache[0] = ($event) => isRef(gridLayoutFieldsData) ? gridLayoutFieldsData.value = $event : null),
+                    layout: gridLayoutFieldsData.value,
+                    "onUpdate:layout": _cache[0] || (_cache[0] = ($event) => gridLayoutFieldsData.value = $event),
                     "row-height": rowHeight.value,
                     margin: [0, 0],
                     "use-css-transforms": false,
@@ -812,6 +918,7 @@ const _sfc_main = /* @__PURE__ */ Object.assign({
                   }, {
                     item: withCtx(({ item: { component } }) => [
                       createVNode(_FormItem, {
+                        ref: (el) => setFormItemRef(el, component),
                         modelValue: formData.value[component.fieldName],
                         "onUpdate:modelValue": ($event) => formData.value[component.fieldName] = $event,
                         config: component,
@@ -850,7 +957,7 @@ const _sfc_main = /* @__PURE__ */ Object.assign({
     };
   }
 });
-const _Form = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-f1c90d7c"]]);
+const _Form = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-a3082b55"]]);
 export {
   _Form as default
 };

package/es/packages/vue/src/components/forms/formItem/FormItem.vue.mjs

@@ -2,7 +2,7 @@
 /* empty css                                                                                                                                            */
 import "../../../../../../node_modules/.pnpm/element-plus@2.13.2_vue@3.5.13_typescript@5.7.3_/node_modules/element-plus/theme-chalk/el-tooltip.css.mjs";
 /* empty css                                                                                                                                         */
-import { computed, createBlock, createElementBlock, openBlock, unref, normalizeClass, createSlots, withCtx, createCommentVNode, resolveDynamicComponent, mergeProps, createElementVNode, toDisplayString } from "vue";
+import { computed, ref, createBlock, createElementBlock, openBlock, unref, normalizeClass, createSlots, withCtx, createCommentVNode, resolveDynamicComponent, mergeProps, createElementVNode, toDisplayString } from "vue";
 import { debounce } from "../form/debounce.mjs";
 import { SubTitle } from "../subTitle/index.mjs";
 import { H2 } from "../h2/index.mjs";
@@ -54,7 +54,7 @@ const _sfc_main = /* @__PURE__ */ Object.assign({
     }
   },
   emits: ["update:modelValue", "change"],
-  setup(__props, { emit: __emit }) {
+  setup(__props, { expose: __expose, emit: __emit }) {
     const props = __props;
     const emit = __emit;
     function handleChange(config, val) {
@@ -88,6 +88,7 @@ const _sfc_main = /* @__PURE__ */ Object.assign({
         }
       });
     }, 300);
+    const innerComponentRef = ref(null);
     const compValue = computed({
       get: () => props.modelValue,
       set: (val) => {
@@ -97,6 +98,14 @@ const _sfc_main = /* @__PURE__ */ Object.assign({
         }
       }
     });
+    const getInnerComponentRef = () => {
+      debugger;
+      return innerComponentRef.value;
+    };
+    __expose({
+      config: props.config,
+      getInnerComponentRef
+    });
     return (_ctx, _cache) => {
       const _component_el_tooltip = ElTooltip;
       const _component_el_form_item = ElFormItem;
@@ -108,15 +117,21 @@ const _sfc_main = /* @__PURE__ */ Object.assign({
         config: __props.config
       }, null, 8, ["config"])) : __props.config.fieldType == "subForm" ? (openBlock(), createBlock(unref(SubForm), {
         key: 2,
+        ref_key: "innerComponentRef",
+        ref: innerComponentRef,
         config: __props.config,
         localConfig: __props.localConfig,
         formMode: __props.formMode
       }, null, 8, ["config", "localConfig", "formMode"])) : __props.config.fieldType == "subTable" ? (openBlock(), createBlock(unref(SubTable), {
         key: 3,
+        ref_key: "innerComponentRef",
+        ref: innerComponentRef,
         config: __props.config,
         localConfig: __props.localConfig
       }, null, 8, ["config", "localConfig"])) : __props.config.fieldType == "approvalHistory" ? (openBlock(), createBlock(unref(ApprovalHistory), {
         key: 4,
+        ref_key: "innerComponentRef",
+        ref: innerComponentRef,
         config: __props.config,
         localConfig: __props.localConfig
       }, null, 8, ["config", "localConfig"])) : __props.config.fieldType == "blank" || __props.config.fieldType == "divider" ? (openBlock(), createElementBlock("div", {
@@ -132,6 +147,8 @@ const _sfc_main = /* @__PURE__ */ Object.assign({
         default: withCtx(() => [
           __props.config.labelMode != "label" ? (openBlock(), createBlock(resolveDynamicComponent(componentType.value), mergeProps({
             key: 0,
+            ref_key: "innerComponentRef",
+            ref: innerComponentRef,
             modelValue: compValue.value,
             "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => compValue.value = $event)
           }, componentProps.value, {
@@ -170,7 +187,7 @@ const _sfc_main = /* @__PURE__ */ Object.assign({
     };
   }
 });
-const _FormItem = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-c5553ecf"]]);
+const _FormItem = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-1fbcd248"]]);
 export {
   _FormItem as default
 };

package/es/packages/vue/src/components/forms/subForm/SubForm.vue.mjs

@@ -48,8 +48,8 @@ const _sfc_main = /* @__PURE__ */ Object.assign({
     const props = __props;
     const formData = inject("formData");
     inject("rowHeight");
-    const gridLayout = inject("gridLayout");
-    inject("gridLayoutFieldsData");
+    inject("gridLayout");
+    const setFormItemHeight = inject("setFormItemHeight");
     function subFormLoaded(subOption) {
       const fieldsData = subOption.fieldsData;
       console.log("🚀 ~ loaded ~ subOption:", subOption);
@@ -59,11 +59,10 @@ const _sfc_main = /* @__PURE__ */ Object.assign({
       const foundItem = props.localConfig.fieldsData.find(
         (item) => item.id == props.config.id
       );
-      const y = 1;
-      const titleHeight = config.titleMode != "none" ? 1 : 0;
+      const titleHeight = props.config.titleMode != "none" ? 1 : 0;
       if (foundItem) {
-        foundItem.h = maxY + y + titleHeight;
-        gridLayout.value.resizeEvent();
+        foundItem.h = maxY + titleHeight;
+        setFormItemHeight(props.config.id, false, maxY + titleHeight);
       }
     }
     return (_ctx, _cache) => {

package/es/packages/vue/src/components/forms/subTable/SubTable.vue.mjs

@@ -44,12 +44,12 @@ const _sfc_main = /* @__PURE__ */ Object.assign({
     //     default: false,
     //   },
   },
-  setup(__props) {
+  setup(__props, { expose: __expose }) {
     const props = __props;
     const formData = inject("formData");
     inject("rowHeight");
-    const gridLayout = inject("gridLayout");
-    inject("gridLayoutFieldsData");
+    inject("gridLayout");
+    const setFormItemHeight = inject("setFormItemHeight");
     const subTableData = computed(() => {
       if (props.config.dataSourceFrom == "main") {
         return formData.value[props.config.fieldName];
@@ -79,15 +79,18 @@ const _sfc_main = /* @__PURE__ */ Object.assign({
     });
     function subTableLoaded(subOption) {
       subTableOption.value = subOption;
-      console.log("🚀 ~ subTableLoaded ~ subOption:", subOption);
       const foundItem = props.localConfig.fieldsData.find(
         (item) => item.id == props.config.id
       );
-      const titleHeight = config.titleMode != "none" ? 60 : 0;
+      const titleHeight = props.config.titleMode != "none" ? 60 : 0;
       if (foundItem) {
         foundItem.fixedH = true;
         foundItem.h = props.config.subTableHeight + titleHeight;
-        gridLayout.value.resizeEvent();
+        setFormItemHeight(
+          props.config.id,
+          true,
+          props.config.subTableHeight + titleHeight
+        );
       }
     }
     const tableRef = ref();
@@ -99,6 +102,9 @@ const _sfc_main = /* @__PURE__ */ Object.assign({
         type: "custom"
       });
     };
+    __expose({
+      subTableRef: tableRef
+    });
     return (_ctx, _cache) => {
       const _component_el_button = ElButton;
       return openBlock(), createElementBlock(Fragment, null, [