@fecp/designer 5.3.3 → 5.3.5

package/lib/packages/vue/src/components/forms/form/Form.vue.js

@@ -149,6 +149,9 @@ const _sfc_main = /* @__PURE__ */ Object.assign({
         });
         hiddenFields.value = option.hiddenFields || [];
         await loadFieldDataSources();
+        await loadProductData();
+        applyProductConfigToForm();
+        mergeOptionsToFields();
         loadFormData();
         loadEventFlow();
         if (pageEvents && localConfig.value.pageEventConfig) {
@@ -160,9 +163,6 @@ const _sfc_main = /* @__PURE__ */ Object.assign({
             await pageEvents.executeEvent("onCreated");
           }
         }
-        await loadProductData();
-        applyProductConfigToForm();
-        mergeOptionsToFields();
       } catch (error) {
         console.error("加载配置失败:", error);
         index$5.ElMessage.error("加载配置失败");
@@ -176,7 +176,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 = validation.generateFieldRules(component);
@@ -359,16 +363,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;
@@ -474,7 +468,36 @@ const _sfc_main = /* @__PURE__ */ Object.assign({
         }
       });
     }
-    const gridLayoutDataConfig = vue.ref([]);
+    const gridLayoutFieldsData = vue.ref([]);
+    const oriGridLayoutData = vue.ref([]);
+    const formItemRefs = vue.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 = common.cloneDeep(localConfig.value.fieldsData || []);
       gridLayoutData = gridLayoutData.map((item) => {
@@ -492,125 +515,8 @@ const _sfc_main = /* @__PURE__ */ Object.assign({
         }
         return item;
       });
-      gridLayoutDataConfig.value = gridLayoutData;
+      oriGridLayoutData.value = gridLayoutData;
     }
-    const gridLayoutFieldsData = vue.computed(() => {
-      initGridLayoutDataConfig();
-      let gridLayoutData = common.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 (parseFilterConfig.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.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 (parseFilterConfig.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 (parseFilterConfig.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 = validation.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 (parseFilterConfig.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 (parseFilterConfig.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 "";
@@ -748,13 +654,199 @@ const _sfc_main = /* @__PURE__ */ Object.assign({
     vue.onMounted(() => {
       loadConfig();
     });
+    vue.onBeforeUnmount(() => {
+      formItemRefs.value.clear();
+    });
+    const prevFormData = vue.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) => parseFilterConfig.checkFieldInFilterConfig(item.filterConfig, fieldId) || parseFilterConfig.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) => {
+      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 (parseFilterConfig.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.calculate({
+                text: formulaText,
+                marks: [],
+                value: formData.value
+              });
+              formData.value[field.fieldName] = calcResult;
+            }
+          });
+        }
+      });
+      const updatedLayoutData = common.cloneDeep(oriGridLayoutData.value || []);
+      relevantConfigs.visibility.forEach((item) => {
+        const dataLinkFieldList = item.dataLinkFieldList || [];
+        if (parseFilterConfig.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 (parseFilterConfig.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 = validation.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 (parseFilterConfig.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 (parseFilterConfig.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);
+    };
     vue.watch(
       formData,
-      (newVal) => {
+      (newVal, oldVal) => {
+        initGridLayoutDataConfig();
+        const changedFields = findChangedFields(newVal, prevFormData.value);
+        if (changedFields.length > 0) {
+          applyLinkageEffectsForChangedFields(changedFields);
+        }
+        prevFormData.value = { ...newVal };
         emit("update:modelValue", newVal);
       },
       { deep: true }
     );
+    function setFormItemHeight(id, h) {
+      const item = gridLayoutFieldsData.value.find((item2) => item2.id == id);
+      if (item) {
+        item.h = h;
+      }
+    }
     vue.provide("formData", formData);
     vue.provide("localConfig", localConfig);
     vue.provide("fieldsData", fieldsData);
@@ -762,12 +854,14 @@ const _sfc_main = /* @__PURE__ */ Object.assign({
     vue.provide("rowHeight", rowHeight);
     vue.provide("gridLayout", gridLayout);
     vue.provide("gridLayoutFieldsData", gridLayoutFieldsData);
+    vue.provide("setFormItemHeight", setFormItemHeight);
     vue.provide("formCtx", ctx);
     __expose({
       validate,
       resetFields,
       getFormData,
       setFormData,
+      getFormItemRef,
       formRef,
       localConfig
     });
@@ -803,8 +897,8 @@ const _sfc_main = /* @__PURE__ */ Object.assign({
                     key: 0,
                     ref_key: "gridLayout",
                     ref: gridLayout,
-                    layout: vue.unref(gridLayoutFieldsData),
-                    "onUpdate:layout": _cache[0] || (_cache[0] = ($event) => vue.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,
@@ -814,6 +908,7 @@ const _sfc_main = /* @__PURE__ */ Object.assign({
                   }, {
                     item: vue.withCtx(({ item: { component } }) => [
                       vue.createVNode(FormItem.default, {
+                        ref: (el) => setFormItemRef(el, component),
                         modelValue: formData.value[component.fieldName],
                         "onUpdate:modelValue": ($event) => formData.value[component.fieldName] = $event,
                         config: component,
@@ -852,5 +947,5 @@ const _sfc_main = /* @__PURE__ */ Object.assign({
     };
   }
 });
-const _Form = /* @__PURE__ */ _pluginVue_exportHelper.default(_sfc_main, [["__scopeId", "data-v-f1c90d7c"]]);
+const _Form = /* @__PURE__ */ _pluginVue_exportHelper.default(_sfc_main, [["__scopeId", "data-v-5e8468de"]]);
 exports.default = _Form;

package/lib/packages/vue/src/components/forms/formItem/FormItem.vue.js

@@ -56,7 +56,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) {
@@ -90,6 +90,7 @@ const _sfc_main = /* @__PURE__ */ Object.assign({
         }
       });
     }, 300);
+    const innerComponentRef = vue.ref(null);
     const compValue = vue.computed({
       get: () => props.modelValue,
       set: (val) => {
@@ -99,6 +100,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 = index$8.ElTooltip;
       const _component_el_form_item = index$7.ElFormItem;
@@ -110,15 +119,21 @@ const _sfc_main = /* @__PURE__ */ Object.assign({
         config: __props.config
       }, null, 8, ["config"])) : __props.config.fieldType == "subForm" ? (vue.openBlock(), vue.createBlock(vue.unref(index$4.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" ? (vue.openBlock(), vue.createBlock(vue.unref(index$5.SubTable), {
         key: 3,
+        ref_key: "innerComponentRef",
+        ref: innerComponentRef,
         config: __props.config,
         localConfig: __props.localConfig
       }, null, 8, ["config", "localConfig"])) : __props.config.fieldType == "approvalHistory" ? (vue.openBlock(), vue.createBlock(vue.unref(index$6.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" ? (vue.openBlock(), vue.createElementBlock("div", {
@@ -134,6 +149,8 @@ const _sfc_main = /* @__PURE__ */ Object.assign({
         default: vue.withCtx(() => [
           __props.config.labelMode != "label" ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(componentType.value), vue.mergeProps({
             key: 0,
+            ref_key: "innerComponentRef",
+            ref: innerComponentRef,
             modelValue: compValue.value,
             "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => compValue.value = $event)
           }, componentProps.value, {
@@ -172,5 +189,5 @@ const _sfc_main = /* @__PURE__ */ Object.assign({
     };
   }
 });
-const _FormItem = /* @__PURE__ */ _pluginVue_exportHelper.default(_sfc_main, [["__scopeId", "data-v-c5553ecf"]]);
+const _FormItem = /* @__PURE__ */ _pluginVue_exportHelper.default(_sfc_main, [["__scopeId", "data-v-1fbcd248"]]);
 exports.default = _FormItem;

package/lib/packages/vue/src/components/forms/subForm/SubForm.vue.js

@@ -50,8 +50,8 @@ const _sfc_main = /* @__PURE__ */ Object.assign({
     const props = __props;
     const formData = vue.inject("formData");
     vue.inject("rowHeight");
-    const gridLayout = vue.inject("gridLayout");
-    vue.inject("gridLayoutFieldsData");
+    vue.inject("gridLayout");
+    const setFormItemHeight = vue.inject("setFormItemHeight");
     function subFormLoaded(subOption) {
       const fieldsData = subOption.fieldsData;
       console.log("🚀 ~ loaded ~ subOption:", subOption);
@@ -62,10 +62,10 @@ const _sfc_main = /* @__PURE__ */ Object.assign({
         (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();
+        setFormItemHeight(props.config.id, maxY + y + titleHeight);
       }
     }
     return (_ctx, _cache) => {

package/lib/packages/vue/src/components/forms/subTable/SubTable.vue.js

@@ -46,12 +46,12 @@ const _sfc_main = /* @__PURE__ */ Object.assign({
     //     default: false,
     //   },
   },
-  setup(__props) {
+  setup(__props, { expose: __expose }) {
     const props = __props;
     const formData = vue.inject("formData");
     vue.inject("rowHeight");
-    const gridLayout = vue.inject("gridLayout");
-    vue.inject("gridLayoutFieldsData");
+    vue.inject("gridLayout");
+    const setFormItemHeight = vue.inject("setFormItemHeight");
     const subTableData = vue.computed(() => {
       if (props.config.dataSourceFrom == "main") {
         return formData.value[props.config.fieldName];
@@ -85,11 +85,14 @@ 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 = props.config.subTableHeight + titleHeight;
-        gridLayout.value.resizeEvent();
+        setFormItemHeight(
+          props.config.id,
+          props.config.subTableHeight + titleHeight
+        );
       }
     }
     const tableRef = vue.ref();
@@ -101,6 +104,9 @@ const _sfc_main = /* @__PURE__ */ Object.assign({
         type: "custom"
       });
     };
+    __expose({
+      subTableRef: tableRef
+    });
     return (_ctx, _cache) => {
       const _component_el_button = index$1.ElButton;
       return vue.openBlock(), vue.createElementBlock(vue.Fragment, null, [

package/lib/packages/vue/src/components/table/CustomButtons.vue.js

@@ -29,6 +29,14 @@ const _sfc_main = {
     localConfig: {
       type: Object,
       default: {}
+    },
+    readOnly: {
+      type: Boolean,
+      default: false
+    },
+    isSubTable: {
+      type: Boolean,
+      default: false
     }
   },
   emits: ["click"],
@@ -90,10 +98,10 @@ const _sfc_main = {
           })
         ])) : vue.createCommentVNode("", true),
         __props.localConfig.showTitle ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2, vue.toDisplayString(__props.localConfig.templateName), 1)) : vue.createCommentVNode("", true),
-        hasButtons.value ? (vue.openBlock(), vue.createBlock(vue.unref(index$2.VxeToolbar), {
+        !__props.readOnly && !__props.isSubTable && hasButtons.value ? (vue.openBlock(), vue.createBlock(vue.unref(index$2.VxeToolbar), {
           key: 2,
           ref: "toolbarRef",
-          style: { "flex": "1" }
+          style: { "flex": "1", "margin-bottom": "8px" }
         }, {
           buttons: vue.withCtx(() => [
             leftButtons.value.length ? (vue.openBlock(true), vue.createElementBlock(vue.Fragment, { key: 0 }, vue.renderList(leftButtons.value, (btn) => {
@@ -131,5 +139,5 @@ const _sfc_main = {
     };
   }
 };
-const CustomButtons = /* @__PURE__ */ _pluginVue_exportHelper.default(_sfc_main, [["__scopeId", "data-v-827a5895"]]);
+const CustomButtons = /* @__PURE__ */ _pluginVue_exportHelper.default(_sfc_main, [["__scopeId", "data-v-4a702348"]]);
 exports.default = CustomButtons;

package/lib/packages/vue/src/components/table/DynamicQuery.vue.js

@@ -52,7 +52,10 @@ const _hoisted_5 = {
   class: "tab-display-section"
 };
 const _hoisted_6 = { class: "search-display-section" };
-const _hoisted_7 = { class: "search-input-group" };
+const _hoisted_7 = {
+  key: 0,
+  class: "search-input-group"
+};
 const _hoisted_8 = { class: "expand-filter-section" };
 const _hoisted_9 = { class: "filter-form-section" };
 const _hoisted_10 = { class: "form-items-draggable" };
@@ -74,6 +77,10 @@ const _sfc_main = {
     isSubTable: {
       type: Boolean,
       default: false
+    },
+    readOnly: {
+      type: Boolean,
+      default: false
     }
   },
   emits: ["click", "search"],
@@ -251,7 +258,7 @@ const _sfc_main = {
             })
           ])) : vue.createCommentVNode("", true),
           __props.localConfig.showTitle ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_4, vue.toDisplayString(__props.localConfig.templateName), 1)) : vue.createCommentVNode("", true),
-          tabConfigs.value.length > 0 ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_5, [
+          queryConfig.value.enabled && tabConfigs.value.length > 0 ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_5, [
             vue.createVNode(_component_el_tabs, {
               modelValue: activeTab.value,
               "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => activeTab.value = $event),
@@ -270,7 +277,7 @@ const _sfc_main = {
             }, 8, ["modelValue"])
           ])) : vue.createCommentVNode("", true),
           vue.createElementVNode("div", _hoisted_6, [
-            vue.createElementVNode("div", _hoisted_7, [
+            queryConfig.value.enabled ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_7, [
               vue.createVNode(_component_el_input, {
                 modelValue: searchInputValue.value,
                 "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => searchInputValue.value = $event),
@@ -295,10 +302,11 @@ const _sfc_main = {
                   key: "0"
                 } : void 0
               ]), 1032, ["modelValue", "prefix-icon"])
-            ]),
-            rightButtons.value.length > 0 ? (vue.openBlock(), vue.createBlock(vue.unref(index$5.VxeToolbar), {
-              key: 0,
-              ref: "toolbarRef"
+            ])) : vue.createCommentVNode("", true),
+            !__props.readOnly && !__props.isSubTable && rightButtons.value.length > 0 ? (vue.openBlock(), vue.createBlock(vue.unref(index$5.VxeToolbar), {
+              key: 1,
+              ref: "toolbarRef",
+              style: { "margin-bottom": "8px" }
             }, {
               tools: vue.withCtx(() => [
                 !__props.isSubTable && rightButtons.value.length ? (vue.openBlock(true), vue.createElementBlock(vue.Fragment, { key: 0 }, vue.renderList(rightButtons.value, (btn) => {
@@ -425,5 +433,5 @@ const _sfc_main = {
     };
   }
 };
-const DynamicQuery = /* @__PURE__ */ _pluginVue_exportHelper.default(_sfc_main, [["__scopeId", "data-v-ba091c4f"]]);
+const DynamicQuery = /* @__PURE__ */ _pluginVue_exportHelper.default(_sfc_main, [["__scopeId", "data-v-cc8f1fb6"]]);
 exports.default = DynamicQuery;