ele-admin-plus 1.3.0-beta.2 → 1.3.0-beta.3

package/es/ele-pro-form/components/render-util.js

@@ -10,6 +10,68 @@ function _isSlot(s) {
   return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !isVNode(s);
 }
 const sortableGroupName = "ProFormBuilderBodySortGroup";
+const codeStringPrefix = "/*__PRO_FORM__*/";
+function getItemTypeData(item, itemTypeData) {
+  var _a;
+  let itemType = item.type;
+  const divTag = (_a = item.props) == null ? void 0 : _a.is;
+  if (itemType === "div" && divTag) {
+    if (divTag === "tr") {
+      itemType = "tableRow";
+    } else if (divTag === "td") {
+      itemType = "tableCell";
+    } else if (divTag === "ele-table" || divTag === "EleTable") {
+      itemType = "table";
+    } else if (divTag === "el-carousel" || divTag === "ElCarousel") {
+      itemType = "carousel";
+    } else if (divTag === "el-carousel-item" || divTag === "ElCarouselItem") {
+      itemType = "carouselItem";
+    } else if (divTag === "el-icon" || divTag === "ElIcon") {
+      itemType = "icon";
+    } else if (divTag === "ele-admin-layout" || divTag === "EleAdminLayout") {
+      itemType = "adminLayout";
+    } else if (divTag === "el-alert" || divTag === "EleAlert") {
+      itemType = "alert";
+    }
+  }
+  const typeData = [...itemTypeData || [], ...defaultItemTypeData].find((d) => d.type === itemType);
+  return typeData;
+}
+function getComponentLegacyProps(item) {
+  const result = {};
+  const itemType = item.type;
+  if (itemType) {
+    const options = item.options;
+    if (options) {
+      if (["select", "multipleSelect", "radio", "radioButton", "checkbox", "checkboxButton", "cascader", "multipleCascader", "mention"].includes(itemType)) {
+        result.options = options;
+      } else if (["treeSelect", "treeMultipleSelect"].includes(itemType)) {
+        result.data = options;
+      } else if (["checkCard", "multipleCheckCard"].includes(itemType)) {
+        result.items = options;
+      } else if (itemType === "autocomplete") {
+        result.fetchSuggestions = options;
+      }
+    }
+    if (item.label != null) {
+      if (["descriptionsItem", "carouselItem"].includes(itemType)) {
+        result.label = item.label;
+      } else if (["alert", "collapseItem", "descriptions"].includes(itemType)) {
+        result.title = item.label;
+      } else if (itemType === "card") {
+        result.header = item.label;
+      } else if (itemType === "image") {
+        result.alt = item.label;
+      }
+    }
+    if (item.prop != null) {
+      if (["collapseItem", "carouselItem"].includes(itemType)) {
+        result.name = item.prop;
+      }
+    }
+  }
+  return result;
+}
 function getRuleMessage(label, requiredMessage, placeholder) {
   if (typeof requiredMessage === "string" && requiredMessage) {
     return requiredMessage;
@@ -19,8 +81,25 @@ function getRuleMessage(label, requiredMessage, placeholder) {
   }
   return `${label ?? ""}必填`;
 }
-function isShowItem(item, form, items, searchExpand) {
-  if (!item.prop) {
+function getComponentRefName(item) {
+  const prop = item.prop;
+  if (prop == null || prop === "" || String(prop).trim() === "") {
+    return `${String(item.key)}Ref`;
+  }
+  return `${String(prop)}Ref`;
+}
+function getCodeResult(code, form, items, searchExpand, httpRequest, getProFormRefs) {
+  try {
+    return new Function("form", "items", "searchExpand", "httpRequest", "getProFormRefs", `return (${code})`)(form, items, searchExpand, httpRequest, getProFormRefs);
+  } catch (e) {
+    console.error(e);
+  }
+}
+function isShowItem(item, form, items, searchExpand, editable) {
+  if (editable) {
+    return true;
+  }
+  if (item.prop == null && item.key == null) {
     return false;
   }
   if (item.vIf != null) {
@@ -28,12 +107,7 @@ function isShowItem(item, form, items, searchExpand) {
       return item.vIf(form, items, searchExpand);
     }
     if (typeof item.vIf === "string" && item.vIf.trim().length) {
-      try {
-        return new Function("form", "items", "searchExpand", "formItems", "formData", `return (${item.vIf})`)(form, items, searchExpand, items, form);
-      } catch (e) {
-        console.error(e);
-        return false;
-      }
+      return getCodeResult(item.vIf, form, items, searchExpand);
     }
     if (item.vIf === false) {
       return false;
@@ -41,49 +115,100 @@ function isShowItem(item, form, items, searchExpand) {
   }
   return true;
 }
-function translateJsCode(code, model, items, searchExpand) {
+function translateJsCode(code, form, items, searchExpand, httpRequest, getProFormRefs, getAndCacheCode) {
   if (code != null) {
     if (typeof code === "string") {
-      if (code.startsWith("/*__PRO_FORM__*/")) {
-        try {
-          return new Function("form", "items", "searchExpand", "formData", "formItems", `return (${code})`)(model, items, searchExpand, model, items);
-        } catch (e) {
-          console.error(e);
+      if (code.startsWith(codeStringPrefix)) {
+        const result = getCodeResult(code, form, items, searchExpand, httpRequest, getProFormRefs);
+        if (getAndCacheCode && typeof result === "function") {
+          return {
+            result: getAndCacheCode(code, result),
+            isCode: true
+          };
         }
+        return {
+          result,
+          isCode: true
+        };
       }
-      return code;
+      return {
+        result: code,
+        isCode: false
+      };
     } else if (Array.isArray(code)) {
-      return code.map((c) => translateJsCode(c, model, items, searchExpand));
+      const arrayResult = [];
+      let arrayIsCode = false;
+      code.forEach((c) => {
+        const {
+          result,
+          isCode
+        } = translateJsCode(c, form, items, searchExpand, httpRequest, getProFormRefs, getAndCacheCode);
+        arrayResult.push(result);
+        if (isCode) {
+          arrayIsCode = true;
+        }
+      });
+      if (arrayIsCode) {
+        return {
+          result: arrayResult,
+          isCode: true
+        };
+      }
+      return {
+        result: code,
+        isCode: false
+      };
     } else if (typeof code === "object") {
-      const result = {};
+      const objectResult = {};
+      let objectIsCode = false;
       Object.keys(code).forEach((k) => {
-        result[k] = translateJsCode(code[k], model, items, searchExpand);
+        const {
+          result,
+          isCode
+        } = translateJsCode(code[k], form, items, searchExpand, httpRequest, getProFormRefs, getAndCacheCode);
+        objectResult[k] = result;
+        if (isCode) {
+          objectIsCode = true;
+        }
       });
-      return result;
+      if (objectIsCode) {
+        return {
+          result: objectResult,
+          isCode: true
+        };
+      }
+      return {
+        result: code,
+        isCode: false
+      };
     }
   }
-  return code;
+  return {
+    result: code,
+    isCode: false
+  };
 }
 function renderProFormItem(props) {
-  var _a, _b, _c;
+  var _a, _b, _c, _d;
   const slots = props.slots || {};
-  const itemType = props.item.type;
   const formData = props.model || {};
-  const typeSlot = itemType ? slots[itemType] : void 0;
-  const typeData = [...props.itemTypeData || [], ...defaultItemTypeData].find((d) => d.type === itemType);
+  const typeData = getItemTypeData(props.item, props.itemTypeData);
+  const typeSlot = ((_a = props.item) == null ? void 0 : _a.type) ? slots[props.item.type] : void 0;
   if (!typeSlot && !typeData) {
     return;
   }
   const modelValue = props.item.prop == null ? void 0 : getValue(formData, props.item.prop);
   const handleUpdateModelValue = (value) => {
     const propName = props.item.prop;
-    props.updateItemValue(propName, value);
+    if (propName != null && props.updateItemValue) {
+      props.updateItemValue(propName, value);
+    }
   };
   const propsFunctionParams = {
     item: props.item,
     modelValue,
     updateModelValue: handleUpdateModelValue,
-    isShowFormItem: (cItem) => isShowItem(cItem, formData, props.formItems || [], props.searchExpand),
+    isShowFormItem: (cItem) => isShowItem(cItem, formData, props.formItems || [], props.searchExpand, props.editable),
     renderChildren: (cItem, cSortDisabled, cContainerSelectable) => renderProFormContent({
       model: formData,
       items: cItem.children,
@@ -100,8 +225,11 @@ function renderProFormItem(props) {
       updateItemValue: props.updateItemValue,
       updateItemsData: props.updateItemsData,
       updateActiveItemKey: props.updateActiveItemKey,
-      slots,
-      itemTypeData: props.itemTypeData
+      getAndCacheCode: props.getAndCacheCode,
+      itemTypeData: props.itemTypeData,
+      httpRequest: props.httpRequest,
+      getProFormRefs: props.getProFormRefs,
+      slots
     })
   };
   const slotProFormParams = {
@@ -113,6 +241,8 @@ function renderProFormItem(props) {
     editable: props.editable,
     activeItemKey: props.activeItemKey,
     itemTypeData: props.itemTypeData,
+    httpRequest: props.httpRequest,
+    getProFormRefs: props.getProFormRefs,
     updateItemValue: props.updateItemValue,
     updateItemsData: props.updateItemsData,
     updateActiveItemKey: props.updateActiveItemKey,
@@ -141,10 +271,10 @@ function renderProFormItem(props) {
       });
     }
     if (!itemSlots.default) {
+      const csd = !(props.item.containerDraggable ?? !(typeData == null ? void 0 : typeData.sortDisabled));
       const isRenderLabel = (typeData == null ? void 0 : typeData.renderLabelText) && props.item.label != null && props.item.label !== "";
-      const isRenderChildren = (!typeData || typeData.isContainer) && (!(typeData == null ? void 0 : typeData.sortDisabled) && props.editable || props.item.children && props.item.children.length);
-      const isRenderOptions = props.item.options && (typeData == null ? void 0 : typeData.optionsComponent);
-      if (isRenderLabel || isRenderChildren || isRenderOptions) {
+      const isRenderChildren = (!typeData || typeData.isContainer) && (!csd && props.editable || props.item.children && props.item.children.length);
+      if (isRenderLabel || isRenderChildren) {
         itemSlots.default = () => {
           const nodes = [];
           if (isRenderLabel && props.item.label != null) {
@@ -161,14 +291,17 @@ function renderProFormItem(props) {
               formItems: props.formItems,
               searchExpand: props.searchExpand,
               editable: props.editable,
-              sortDisabled: !!(typeData == null ? void 0 : typeData.sortDisabled),
+              sortDisabled: csd,
               containerSelectable: !!(typeData == null ? void 0 : typeData.containerSelectable),
               activeItemKey: props.activeItemKey,
               updateItemValue: props.updateItemValue,
               updateItemsData: props.updateItemsData,
               updateActiveItemKey: props.updateActiveItemKey,
-              slots,
-              itemTypeData: props.itemTypeData
+              getAndCacheCode: props.getAndCacheCode,
+              itemTypeData: props.itemTypeData,
+              httpRequest: props.httpRequest,
+              getProFormRefs: props.getProFormRefs,
+              slots
             });
             if (contentNode) {
               if (Array.isArray(contentNode)) {
@@ -179,16 +312,6 @@ function renderProFormItem(props) {
                 nodes.push(contentNode);
               }
             }
-          } else if (isRenderOptions && (typeData == null ? void 0 : typeData.optionsComponent)) {
-            const optionsComponent = typeData.optionsComponent;
-            (props.item.options || []).forEach((option) => {
-              var _a2;
-              const defaultProps = {
-                key: option.key ?? option.value
-              };
-              const userProps = (_a2 = typeData.optionsComponentProps) == null ? void 0 : _a2.call(typeData, option);
-              nodes.push(h(optionsComponent, userProps ? mergeProps(defaultProps, userProps) : defaultProps));
-            });
           }
           return nodes;
         };
@@ -197,7 +320,7 @@ function renderProFormItem(props) {
   }
   const componentTag = (typeData == null ? void 0 : typeData.component) || "div";
   const isDivTag = componentTag === "div" || componentTag === "td";
-  const componentPropsData = translateJsCode(props.item.props || {}, formData, props.formItems || [], props.searchExpand);
+  const componentPropsData = translateJsCode(props.item.props || {}, formData, props.formItems || [], props.searchExpand, props.httpRequest, props.getProFormRefs, props.getAndCacheCode).result;
   const componentNode = typeSlot ? typeSlot({
     item: props.item,
     model: formData,
@@ -205,13 +328,15 @@ function renderProFormItem(props) {
     updateValue: handleUpdateModelValue,
     updatePropValue: props.updateItemValue,
     proForm: slotProFormParams
-  }) : h((isDivTag ? (_a = props.item.props) == null ? void 0 : _a.is : void 0) || componentTag, mergeProps({
+  }) : h((isDivTag ? (_b = props.item.props) == null ? void 0 : _b.is : void 0) || componentTag, mergeProps({
     key: props.key
-  }, ((_b = typeData == null ? void 0 : typeData.defaultProps) == null ? void 0 : _b.call(typeData, propsFunctionParams)) || {}, isDivTag ? omit(componentPropsData, ["is"]) : componentPropsData, ((_c = typeData == null ? void 0 : typeData.reservedProps) == null ? void 0 : _c.call(typeData, propsFunctionParams)) || {}), itemSlots);
+  }, getComponentLegacyProps(props.item), ((_c = typeData == null ? void 0 : typeData.defaultProps) == null ? void 0 : _c.call(typeData, propsFunctionParams)) || {}, isDivTag ? omit(componentPropsData, ["is"]) : componentPropsData, ((_d = typeData == null ? void 0 : typeData.reservedProps) == null ? void 0 : _d.call(typeData, propsFunctionParams)) || {}, {
+    ref: getComponentRefName(props.item)
+  }), itemSlots);
   if ((typeData == null ? void 0 : typeData.isContainer) || props.item.itemType === "container" || props.item.itemType === "view") {
     return componentNode;
   }
-  const itemPropsData = translateJsCode(props.item.itemProps || {}, formData, props.formItems || [], props.searchExpand);
+  const itemPropsData = translateJsCode(props.item.itemProps || {}, formData, props.formItems || [], props.searchExpand, props.httpRequest, props.getProFormRefs, props.getAndCacheCode).result;
   const labelWidth = itemPropsData.labelWidth;
   const formItemLabelWidth = typeof labelWidth === "number" ? `${labelWidth}px` : labelWidth;
   const formItemSlots = {};
@@ -224,7 +349,7 @@ function renderProFormItem(props) {
   formItemSlots.default = () => componentNode;
   const iRule = itemPropsData.rules;
   const iRules = iRule ? Array.isArray(iRule) ? iRule : [iRule] : void 0;
-  const fRule = props.rules ? props.rules[props.item.prop] : void 0;
+  const fRule = props.rules && props.item.prop ? getValue(props.rules, props.item.prop) : void 0;
   const fRules = fRule ? Array.isArray(fRule) ? fRule : [fRule] : void 0;
   const formItemRules = iRules || fRules || [];
   const trigger = (typeData == null ? void 0 : typeData.requiredTrigger) ?? "change";
@@ -268,8 +393,11 @@ function renderProFormContent(props) {
         updateItemValue: props.updateItemValue,
         updateItemsData: props.updateItemsData,
         updateActiveItemKey: props.updateActiveItemKey,
-        slots: omit(slots, ownSlots),
-        itemTypeData: props.itemTypeData
+        getAndCacheCode: props.getAndCacheCode,
+        itemTypeData: props.itemTypeData,
+        httpRequest: props.httpRequest,
+        getProFormRefs: props.getProFormRefs,
+        slots: omit(slots, ownSlots)
       });
     };
     if (!editable) {
@@ -293,7 +421,7 @@ function renderProFormContent(props) {
       const gridColProps = props.grid === true ? {
         span: 12
       } : props.grid;
-      const itemColProps = translateJsCode(item.colProps || {}, formData, props.formItems || [], props.searchExpand);
+      const itemColProps = translateJsCode(item.colProps || {}, formData, props.formItems || [], props.searchExpand, props.httpRequest, props.getProFormRefs, props.getAndCacheCode).result;
       if (props.editable && !props.sortDisabled) {
         let _slot;
         nodes.push(createVNode(ElCol, mergeProps({
@@ -301,7 +429,7 @@ function renderProFormContent(props) {
         }, gridColProps, itemColProps), _isSlot(_slot = getProFormItemNode(item, true, true)) ? _slot : {
           default: () => [_slot]
         }));
-      } else if (isShowItem(item, formData, props.formItems || [], props.searchExpand)) {
+      } else if (isShowItem(item, formData, props.formItems || [], props.searchExpand, props.editable)) {
         let _slot2;
         nodes.push(createVNode(ElCol, mergeProps({
           "key": itemKey
@@ -312,11 +440,11 @@ function renderProFormContent(props) {
     });
     if (slots.contentExtra) {
       let _slot3;
-      nodes.push(createVNode(ElCol, translateJsCode(props.contentExtraColProps || {}, formData, props.formItems || [], props.searchExpand), _isSlot(_slot3 = slots.contentExtra()) ? _slot3 : {
+      nodes.push(createVNode(ElCol, translateJsCode(props.contentExtraColProps || {}, formData, props.formItems || [], props.searchExpand, props.httpRequest, props.getProFormRefs, props.getAndCacheCode).result, _isSlot(_slot3 = slots.contentExtra()) ? _slot3 : {
         default: () => [_slot3]
       }));
     }
-    return createVNode(ElRow, translateJsCode(props.rowProps || {}, formData, props.formItems || [], props.searchExpand), _isSlot(nodes) ? nodes : {
+    return createVNode(ElRow, translateJsCode(props.rowProps || {}, formData, props.formItems || [], props.searchExpand, props.httpRequest, props.getProFormRefs, props.getAndCacheCode).result, _isSlot(nodes) ? nodes : {
       default: () => [nodes]
     });
   }
@@ -340,14 +468,18 @@ function renderProFormContent(props) {
       }) : void 0])]);
     };
     const handleUpdateModelValue = (data) => {
-      props.updateItemsData(data, props.parentItem);
+      if (props.updateItemsData) {
+        props.updateItemsData(data, props.parentItem);
+      }
     };
     const handleContainerBuilderWrapperClick = (e) => {
       var _a;
       const parentItemKey = (_a = props.parentItem) == null ? void 0 : _a.key;
       if (props.containerSelectable && parentItemKey != null) {
         e.stopPropagation();
-        props.updateActiveItemKey(parentItemKey);
+        if (props.updateActiveItemKey) {
+          props.updateActiveItemKey(parentItemKey);
+        }
       }
     };
     nodes.push(createVNode(VueDraggable, {
@@ -373,7 +505,7 @@ function renderProFormContent(props) {
     }));
   } else {
     itemsData.forEach((item) => {
-      if (isShowItem(item, formData, props.formItems || [], props.searchExpand)) {
+      if (isShowItem(item, formData, props.formItems || [], props.searchExpand, props.editable)) {
         const proFormItemNode = getProFormItemNode(item);
         if (proFormItemNode) {
           if (Array.isArray(proFormItemNode)) {
@@ -422,17 +554,27 @@ const ChildrenRender = /* @__PURE__ */ defineComponent({
     const handleUpdateActiveItemKey = (activeKey) => {
       emit("update:activeItemKey", activeKey);
     };
-    return () => renderProFormContent({
-      ...props,
-      updateItemValue: handleUpdateItemValue,
-      updateItemsData: handleUpdateItemsData,
-      updateActiveItemKey: handleUpdateActiveItemKey,
-      slots: props.slots ?? slots
-    });
+    return () => {
+      var _a;
+      return renderProFormContent({
+        ...omit(props, ["item"]),
+        items: props.items ?? ((_a = props.item) == null ? void 0 : _a.children),
+        // 兼容旧版
+        updateItemValue: props.updateItemValue ?? handleUpdateItemValue,
+        updateItemsData: props.updateItemsData ?? handleUpdateItemsData,
+        updateActiveItemKey: props.updateActiveItemKey ?? handleUpdateActiveItemKey,
+        slots: props.slots ?? slots
+      });
+    };
   }
 });
 export {
   ChildrenRender,
+  codeStringPrefix,
+  getCodeResult,
+  getComponentLegacyProps,
+  getComponentRefName,
+  getItemTypeData,
   getRuleMessage,
   isShowItem,
   renderProFormContent,

package/es/ele-pro-form/index.d.ts

@@ -1,4 +1,5 @@
 import { ElFormInstance, ElFormItemProp } from '../ele-app/el';
+import { ChildrenRenderInstance } from './components/render-util';
 import { ProFormItemProps, ProFormItemKey } from './types';
 
 declare const _default: import('vue').DefineComponent<{
@@ -47,6 +48,7 @@ declare const _default: import('vue').DefineComponent<{
     editable: BooleanConstructor;
     activeItemKey: import('vue').PropType<ProFormItemKey>;
     itemTypeData: import('vue').PropType<import('./types').ProFormItemTypeData[]>;
+    httpRequest: (ObjectConstructor | FunctionConstructor)[];
     model: ObjectConstructor;
     rules: {
         readonly type: import('vue').PropType<Partial<Record<string, import('element-plus/es/utils/typescript').Arrayable<import('element-plus').FormItemRule>>>>;
@@ -82,6 +84,7 @@ declare const _default: import('vue').DefineComponent<{
     footerSlotExcludes: string[];
     formItems: import('vue').ModelRef<ProFormItemProps[] | undefined, PropertyKey>;
     formRef: import('vue').Ref<ElFormInstance>;
+    childrenRef: import('vue').Ref<ChildrenRenderInstance>;
     formSearchExpand: import('vue').Ref<boolean>;
     currentActiveKey: import('vue').Ref<string | number | symbol | undefined>;
     footerStyleData: import('vue').ComputedRef<any>;
@@ -93,6 +96,8 @@ declare const _default: import('vue').DefineComponent<{
     handleReset: () => void;
     handleFormSubmit: (e: MouseEvent) => void;
     handleFormValidate: (prop: ElFormItemProp, isValid: boolean, message: string) => void;
+    getProFormRefs: () => Record<string, any>;
+    getAndCacheCode: (code: string, codeResult: any) => any;
     validate: (callback?: import('element-plus').FormValidateCallback | undefined) => import('element-plus').FormValidationResult;
     validateField: (props?: import('element-plus/es/utils/typescript').Arrayable<import('element-plus').FormItemProp> | undefined, callback?: import('element-plus').FormValidateCallback | undefined) => import('element-plus').FormValidationResult;
     resetFields: (props?: import('element-plus/es/utils/typescript').Arrayable<import('element-plus').FormItemProp> | undefined) => void;
@@ -152,6 +157,7 @@ declare const _default: import('vue').DefineComponent<{
     editable: BooleanConstructor;
     activeItemKey: import('vue').PropType<ProFormItemKey>;
     itemTypeData: import('vue').PropType<import('./types').ProFormItemTypeData[]>;
+    httpRequest: (ObjectConstructor | FunctionConstructor)[];
     model: ObjectConstructor;
     rules: {
         readonly type: import('vue').PropType<Partial<Record<string, import('element-plus/es/utils/typescript').Arrayable<import('element-plus').FormItemRule>>>>;
@@ -205,13 +211,13 @@ declare const _default: import('vue').DefineComponent<{
     hideRequiredAsterisk: boolean;
     scrollToError: boolean;
     editable: boolean;
-    footerColProps: import('../ele-app/el').ElColProps;
-    submitText: string;
     resetText: string;
+    submitText: string;
     showSearchExpand: boolean;
+    searchExpand: boolean;
     searchExpandText: string;
     searchShrinkText: string;
-    searchExpand: boolean;
+    footerColProps: import('../ele-app/el').ElColProps;
     preventFormSubmit: boolean;
 }, {}>;
 export default _default;

package/es/ele-pro-form/index.js

@@ -1,4 +1,4 @@
-import { defineComponent, useModel, ref, computed, watch, nextTick, resolveComponent, openBlock, createBlock, normalizeClass, withCtx, renderSlot, createVNode, createSlots, renderList, normalizeProps, guardReactiveProps } from "vue";
+import { defineComponent, useModel, ref, computed, watch, onBeforeUnmount, nextTick, resolveComponent, openBlock, createBlock, normalizeClass, withCtx, renderSlot, createVNode, createSlots, renderList, normalizeProps, guardReactiveProps } from "vue";
 import { ElForm } from "element-plus";
 import { eachTree } from "../utils/core";
 import { ChildrenRender, translateJsCode } from "./components/render-util";
@@ -34,18 +34,20 @@ const _sfc_main = defineComponent({
     });
     const formItems = useModel(props, "items");
     const formRef = ref(null);
+    const childrenRef = ref(null);
     const formSearchExpand = ref(!!props.searchExpand);
     const currentActiveKey = ref(
       props.activeItemKey
     );
-    const footerStyleData = computed(
-      () => translateJsCode(
+    const footerStyleData = computed(() => {
+      return translateJsCode(
         props.footerStyle || {},
         props.model || {},
         formItems.value || [],
-        formSearchExpand.value
-      )
-    );
+        formSearchExpand.value,
+        props.httpRequest
+      ).result;
+    });
     const updateSearchExpand = (expand) => {
       formSearchExpand.value = expand;
       if (props.searchExpand !== expand) {
@@ -86,6 +88,7 @@ const _sfc_main = defineComponent({
       }
     };
     const handleReset = () => {
+      clearCodeCache();
       emit("reset");
       exposeMethods.clearValidate();
       nextTick(() => {
@@ -119,12 +122,32 @@ const _sfc_main = defineComponent({
         }
       }
     );
+    const getProFormRefs = () => {
+      var _a;
+      return ((_a = childrenRef.value) == null ? void 0 : _a.$refs) || {};
+    };
+    const codeCache = /* @__PURE__ */ new Map();
+    const getAndCacheCode = (code, codeResult) => {
+      const cacheResult = codeCache.get(code);
+      if (cacheResult) {
+        return cacheResult;
+      }
+      codeCache.set(code, codeResult);
+      return codeResult;
+    };
+    const clearCodeCache = () => {
+      codeCache.clear();
+    };
+    onBeforeUnmount(() => {
+      clearCodeCache();
+    });
     return {
       ...exposeMethods,
       slotExcludes,
       footerSlotExcludes,
       formItems,
       formRef,
+      childrenRef,
       formSearchExpand,
       currentActiveKey,
       footerStyleData,
@@ -135,7 +158,9 @@ const _sfc_main = defineComponent({
       handleSubmit,
       handleReset,
       handleFormSubmit,
-      handleFormValidate
+      handleFormValidate,
+      getProFormRefs,
+      getAndCacheCode
     };
   }
 });
@@ -174,6 +199,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
     default: withCtx(() => [
       renderSlot(_ctx.$slots, "topExtra"),
       createVNode(_component_ChildrenRender, {
+        ref: "childrenRef",
         model: _ctx.model,
         items: _ctx.formItems,
         rules: _ctx.rules,
@@ -185,6 +211,9 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
         editable: _ctx.editable,
         activeItemKey: _ctx.currentActiveKey,
         itemTypeData: _ctx.itemTypeData,
+        httpRequest: _ctx.httpRequest,
+        getProFormRefs: _ctx.getProFormRefs,
+        getAndCacheCode: _ctx.getAndCacheCode,
         onUpdateItemValue: _ctx.updateValue,
         onUpdateItemsData: _ctx.handleUpdateItemsData,
         "onUpdate:activeItemKey": _ctx.handleUpdateActiveItemKey
@@ -233,7 +262,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
           ]),
           key: "0"
         } : void 0
-      ]), 1032, ["model", "items", "rules", "grid", "rowProps", "contentExtraColProps", "formItems", "searchExpand", "editable", "activeItemKey", "itemTypeData", "onUpdateItemValue", "onUpdateItemsData", "onUpdate:activeItemKey"]),
+      ]), 1032, ["model", "items", "rules", "grid", "rowProps", "contentExtraColProps", "formItems", "searchExpand", "editable", "activeItemKey", "itemTypeData", "httpRequest", "getProFormRefs", "getAndCacheCode", "onUpdateItemValue", "onUpdateItemsData", "onUpdate:activeItemKey"]),
       renderSlot(_ctx.$slots, "bottomExtra")
     ]),
     _: 3

package/es/ele-pro-form/props.d.ts

@@ -73,6 +73,8 @@ export declare const proFormProps: {
     activeItemKey: PropType<ProFormItemKey>;
     /** 组件类型数据 */
     itemTypeData: PropType<ProFormItemTypeData[]>;
+    /** 远程数据源请求工具 */
+    httpRequest: (ObjectConstructor | FunctionConstructor)[];
     model: ObjectConstructor;
     rules: {
         readonly type: import('vue').PropType<Partial<Record<string, import('element-plus/es/utils/typescript').Arrayable<import('element-plus').FormItemRule>>>>;
@@ -135,6 +137,18 @@ export declare const childrenRenderProps: {
     containerSelectable: BooleanConstructor;
     /** 直接传递插槽数据 */
     slots: PropType<ProFormItemRenderSlots>;
+    /** 获取表单组件的组件引用数据方法 */
+    getProFormRefs: PropType<() => Record<string, any>>;
+    /** 获取并缓存代码解析结果方法 */
+    getAndCacheCode: PropType<(code: string, codeResult: any) => any>;
+    /** 更新表单数据属性值方法 */
+    updateItemValue: PropType<(prop: string, value: any) => void>;
+    /** 编辑模式更新表单项数据方法 */
+    updateItemsData: PropType<(items: ProFormItemProps[], parentItem?: ProFormItemProps) => void>;
+    /** 更新编辑模式选中项方法 */
+    updateActiveItemKey: PropType<(activeKey?: ProFormItemKey) => void>;
+    /** 兼容旧版 */
+    item: PropType<ProFormItemProps>;
     model: ObjectConstructor;
     rules: {
         readonly type: import('vue').PropType<Partial<Record<string, import('element-plus/es/utils/typescript').Arrayable<import('element-plus').FormItemRule>>>>;
@@ -148,23 +162,17 @@ export declare const childrenRenderProps: {
     items: PropType<ProFormItemProps[]>;
     activeItemKey: PropType<ProFormItemKey>;
     itemTypeData: PropType<ProFormItemTypeData[]>;
+    httpRequest: (ObjectConstructor | FunctionConstructor)[];
 };
 export type ChildrenRenderProps = ExtractPropTypes<typeof childrenRenderProps>;
 /**
  * 渲染表单项数据方法参数
  */
-export interface RenderProFormContentProps extends ChildrenRenderProps {
-    /** 更新表单数据属性值方法 */
-    updateItemValue: (prop: string, value: any) => void;
-    /** 编辑模式更新表单项数据方法 */
-    updateItemsData: (items: ProFormItemProps[], parentItem?: ProFormItemProps) => void;
-    /** 更新编辑模式选中项方法 */
-    updateActiveItemKey: (activeKey?: ProFormItemKey) => void;
-}
+export type RenderProFormContentProps = Omit<ChildrenRenderProps, 'item'>;
 /**
  * 渲染表单项组件方法参数
  */
-export interface RenderProFormItemProps extends Pick<RenderProFormContentProps, 'model' | 'rules' | 'formItems' | 'searchExpand' | 'editable' | 'activeItemKey' | 'updateItemValue' | 'updateItemsData' | 'updateActiveItemKey' | 'slots' | 'itemTypeData'> {
+export interface RenderProFormItemProps extends Pick<RenderProFormContentProps, 'model' | 'rules' | 'formItems' | 'searchExpand' | 'editable' | 'activeItemKey' | 'updateItemValue' | 'updateItemsData' | 'updateActiveItemKey' | 'getProFormRefs' | 'getAndCacheCode' | 'itemTypeData' | 'httpRequest' | 'slots'> {
     /** 循环的 key */
     key?: ProFormItemKey;
     /** 表单项 */