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

package/es/ele-pro-form/components/render-util.d.ts

@@ -1,12 +1,32 @@
 import { VNode } from 'vue';
 import { FormItemRule } from 'element-plus';
-import { ProFormItemKey, ProFormItemProps, ProFormItemRenderSlots } from '../types';
+import { ProFormItemKey, ProFormItemProps, ProFormItemTypeData, ProFormItemRenderSlots } from '../types';
 import { RenderProFormItemProps, RenderProFormContentProps } from '../props';
 
 /**
  * 编辑模式拖拽排序分组名称
  */
 export declare const sortableGroupName = "ProFormBuilderBodySortGroup";
+/**
+ * 代码字符串前缀
+ */
+export declare const codeStringPrefix = "/*__PRO_FORM__*/";
+/**
+ * 获取表单项的类型名称
+ * @param item 表单项
+ */
+export declare function getItemTypeName(item: ProFormItemProps): string | undefined;
+/**
+ * 获取表单项类型数据
+ * @param item 表单项
+ * @param itemTypeData 组件类型数据
+ */
+export declare function getItemTypeData(item: ProFormItemProps, itemTypeData?: ProFormItemTypeData[]): ProFormItemTypeData | undefined;
+/**
+ * 生成兼容旧版本的组件默认属性
+ * @param item 表单项
+ */
+export declare function getComponentLegacyProps(item: ProFormItemProps): Record<string, any>;
 /**
  * 获取验证规则提示文本
  * @param label 表单项标题
@@ -14,22 +34,44 @@ export declare const sortableGroupName = "ProFormBuilderBodySortGroup";
  * @param placeholder 组件占位文本
  */
 export declare function getRuleMessage(label?: string, requiredMessage?: string, placeholder?: string): string;
+/**
+ * 获取组件引用名称
+ * @param item 表单项
+ */
+export declare function getComponentRefName(item: ProFormItemProps): string;
+/**
+ * 执行代码字符串
+ * @param code 代码字符串
+ * @param model 表单数据
+ * @param items 全部表单项
+ * @param searchExpand 搜索表单折叠展开状态
+ * @param httpRequest 远程数据源请求工具
+ * @param getProFormRefs 获取表单组件的组件引用数据的方法
+ */
+export declare function getCodeResult(code: string, form: Record<string, any>, items: ProFormItemProps[], searchExpand?: boolean, httpRequest?: any, getProFormRefs?: () => Record<string, any>): any;
 /**
  * 判断表单项是否展示
  * @param item 表单项
  * @param form 表单数据
  * @param items 表单项数据
  * @param searchExpand 搜索表单展开状态
+ * @param editable 是否是编辑模式
  */
-export declare function isShowItem(item: ProFormItemProps, form: Record<string, any>, items: ProFormItemProps[], searchExpand?: boolean): any;
+export declare function isShowItem(item: ProFormItemProps, form: Record<string, any>, items: ProFormItemProps[], searchExpand?: boolean, editable?: boolean): any;
 /**
  * 解析代码字符串
  * @param code 值
  * @param model 表单数据
  * @param items 全部表单项
  * @param searchExpand 搜索表单折叠展开状态
+ * @param httpRequest 远程数据源请求工具
+ * @param getProFormRefs 获取表单组件的组件引用数据的方法
+ * @param getAndCacheCode 获取并缓存代码解析结果方法
  */
-export declare function translateJsCode(code: any, model: Record<string, any>, items: ProFormItemProps[], searchExpand: boolean): any;
+export declare function translateJsCode(code: any, form: Record<string, any>, items: ProFormItemProps[], searchExpand: boolean, httpRequest: any, getProFormRefs?: () => Record<string, any>, getAndCacheCode?: (code: string, codeResult: any) => any): {
+    result: any;
+    isCode: boolean;
+};
 /**
  * 渲染表单项组件
  * @param props 属性
@@ -43,7 +85,7 @@ export declare function renderProFormContent(props: RenderProFormContentProps):
 /**
  * 表单项数据渲染组件
  */
-export declare const ChildrenRender: import('vue').DefineComponent<{
+export declare const ChildrenRender: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
     contentExtraColProps: import('vue').PropType<import('../../ele-app/el').ElColProps>;
     parentItem: import('vue').PropType<ProFormItemProps>;
     formItems: import('vue').PropType<ProFormItemProps[]>;
@@ -51,6 +93,12 @@ export declare const ChildrenRender: import('vue').DefineComponent<{
     sortDisabled: BooleanConstructor;
     containerSelectable: BooleanConstructor;
     slots: import('vue').PropType<ProFormItemRenderSlots>;
+    getProFormRefs: import('vue').PropType<() => Record<string, any>>;
+    getAndCacheCode: import('vue').PropType<(code: string, codeResult: any) => any>;
+    updateItemValue: import('vue').PropType<(prop: string, value: any) => void>;
+    updateItemsData: import('vue').PropType<(items: ProFormItemProps[], parentItem?: ProFormItemProps) => void>;
+    updateActiveItemKey: import('vue').PropType<(activeKey?: ProFormItemKey) => void>;
+    item: import('vue').PropType<ProFormItemProps>;
     model: ObjectConstructor;
     rules: {
         readonly type: import('vue').PropType<Partial<Record<string, import('element-plus/es/utils/typescript').Arrayable<import('element-plus/es/components/form/src/types').FormItemRule>>>>;
@@ -63,12 +111,13 @@ export declare const ChildrenRender: import('vue').DefineComponent<{
     editable: BooleanConstructor;
     items: import('vue').PropType<ProFormItemProps[]>;
     activeItemKey: import('vue').PropType<ProFormItemKey>;
-    itemTypeData: import('vue').PropType<import('../types').ProFormItemTypeData[]>;
-}, () => string | VNode<import('vue').RendererNode, import('vue').RendererElement, {
+    itemTypeData: import('vue').PropType<ProFormItemTypeData[]>;
+    httpRequest: (ObjectConstructor | FunctionConstructor)[];
+}>, () => string | VNode<import('vue').RendererNode, import('vue').RendererElement, {
     [key: string]: any;
 }> | (string | VNode<import('vue').RendererNode, import('vue').RendererElement, {
     [key: string]: any;
-}>)[] | undefined, unknown, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+}>)[] | undefined, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
     updateItemValue: (_prop: string, _value: any) => true;
     updateItemsData: (_items: ProFormItemProps[], _parentItem?: ProFormItemProps) => true;
     'update:activeItemKey': (_activeKey?: ProFormItemKey) => true;
@@ -80,6 +129,12 @@ export declare const ChildrenRender: import('vue').DefineComponent<{
     sortDisabled: BooleanConstructor;
     containerSelectable: BooleanConstructor;
     slots: import('vue').PropType<ProFormItemRenderSlots>;
+    getProFormRefs: import('vue').PropType<() => Record<string, any>>;
+    getAndCacheCode: import('vue').PropType<(code: string, codeResult: any) => any>;
+    updateItemValue: import('vue').PropType<(prop: string, value: any) => void>;
+    updateItemsData: import('vue').PropType<(items: ProFormItemProps[], parentItem?: ProFormItemProps) => void>;
+    updateActiveItemKey: import('vue').PropType<(activeKey?: ProFormItemKey) => void>;
+    item: import('vue').PropType<ProFormItemProps>;
     model: ObjectConstructor;
     rules: {
         readonly type: import('vue').PropType<Partial<Record<string, import('element-plus/es/utils/typescript').Arrayable<import('element-plus/es/components/form/src/types').FormItemRule>>>>;
@@ -92,14 +147,16 @@ export declare const ChildrenRender: import('vue').DefineComponent<{
     editable: BooleanConstructor;
     items: import('vue').PropType<ProFormItemProps[]>;
     activeItemKey: import('vue').PropType<ProFormItemKey>;
-    itemTypeData: import('vue').PropType<import('../types').ProFormItemTypeData[]>;
-}>> & {
-    "onUpdate:activeItemKey"?: ((_activeKey?: string | number | symbol | undefined) => any) | undefined;
+    itemTypeData: import('vue').PropType<ProFormItemTypeData[]>;
+    httpRequest: (ObjectConstructor | FunctionConstructor)[];
+}>> & Readonly<{
     onUpdateItemValue?: ((_prop: string, _value: any) => any) | undefined;
     onUpdateItemsData?: ((_items: ProFormItemProps[], _parentItem?: ProFormItemProps | undefined) => any) | undefined;
-}, {
+    "onUpdate:activeItemKey"?: ((_activeKey?: string | number | symbol | undefined) => any) | undefined;
+}>, {
     editable: boolean;
     searchExpand: boolean;
     sortDisabled: boolean;
     containerSelectable: boolean;
-}, {}>;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+export type ChildrenRenderInstance = InstanceType<typeof ChildrenRender> | null;

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

@@ -10,6 +10,72 @@ function _isSlot(s) {
   return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !isVNode(s);
 }
 const sortableGroupName = "ProFormBuilderBodySortGroup";
+const codeStringPrefix = "/*__PRO_FORM__*/";
+function getItemTypeName(item) {
+  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";
+    }
+  }
+  return itemType;
+}
+function getItemTypeData(item, itemTypeData) {
+  const itemType = getItemTypeName(item);
+  const typeData = [...itemTypeData || [], ...defaultItemTypeData].find((d) => d.type === itemType);
+  return typeData;
+}
+function getComponentLegacyProps(item) {
+  const result = {};
+  const itemType = getItemTypeName(item);
+  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 +85,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 +111,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 +119,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 +229,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 +245,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 +275,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 +295,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 +316,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 +324,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 +332,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 +353,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 +397,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 +425,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 +433,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 +444,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 +472,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 +509,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 +558,28 @@ 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,
+  getItemTypeName,
   getRuleMessage,
   isShowItem,
   renderProFormContent,