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

package/es/ele-pro-form/components/item-type-data.js

@@ -1,4 +1,4 @@
-import { ElDivider, ElButton, ElImage, ElCollapse, ElCollapseItem, ElCarousel, ElCarouselItem, ElDescriptions, ElDescriptionsItem, ElRow, ElCol, ElInput, ElRadioGroup, ElRadio, ElRadioButton, ElCheckboxGroup, ElCheckbox, ElCheckboxButton, ElDatePicker, ElTimePicker, ElTimeSelect, ElSwitch, ElInputNumber, ElAutocomplete, ElRate, ElSlider, ElMention, ElColorPicker, ElTransfer, ElTreeSelect } from "element-plus";
+import { ElDivider, ElButton, ElImage, ElCollapse, ElCollapseItem, ElCarousel, ElCarouselItem, ElDescriptions, ElDescriptionsItem, ElRow, ElCol, ElInput, ElDatePicker, ElTimePicker, ElTimeSelect, ElSwitch, ElInputNumber, ElRate, ElSlider, ElColorPicker } from "element-plus";
 import EleIcon from "../../ele-icon/index";
 import EleText from "../../ele-text/index";
 import EleAlert from "../../ele-alert/index";
@@ -7,12 +7,19 @@ import EleProTable from "../../ele-pro-table/index";
 import EleCard from "../../ele-card/index";
 import EleTabs from "../../ele-tabs/index";
 import EleTable from "../../ele-table/index";
+import EleAdminLayout from "../../ele-admin-layout/index";
 import EleTreeSelect from "../../ele-tree-select/index";
 import EleTableSelect from "../../ele-table-select/index";
 import EleCheckCard from "../../ele-check-card/index";
 import EleEditTag from "../../ele-edit-tag/index";
 import EleSelect from "../../ele-select/index";
 import EleCascader from "../../ele-cascader/index";
+import EleRadioGroup from "../../ele-radio-group/index";
+import EleCheckboxGroup from "../../ele-checkbox-group/index";
+import EleSelectTree from "../../ele-select-tree/index";
+import EleTransfer from "../../ele-transfer/index";
+import EleMention from "../../ele-mention/index";
+import EleAutocomplete from "../../ele-autocomplete/index";
 const defaultItemTypeData = [
   {
     type: "label",
@@ -42,28 +49,19 @@ const defaultItemTypeData = [
     type: "icon",
     component: EleIcon,
     isContainer: true,
-    sortDisabled: true,
-    defaultProps: ({ item }) => ({
-      name: item.label
-    })
+    sortDisabled: true
   },
   {
     type: "image",
     component: ElImage,
     isContainer: true,
-    sortDisabled: true,
-    defaultProps: ({ item }) => ({
-      alt: item.label
-    })
+    sortDisabled: true
   },
   {
     type: "alert",
     component: EleAlert,
     isContainer: true,
-    sortDisabled: true,
-    defaultProps: ({ item }) => ({
-      title: item.label
-    })
+    sortDisabled: true
   },
   {
     type: "steps",
@@ -84,8 +82,7 @@ const defaultItemTypeData = [
     type: "card",
     component: EleCard,
     isContainer: true,
-    defaultProps: ({ item }) => ({
-      header: item.label,
+    defaultProps: () => ({
       bordered: true
     })
   },
@@ -101,12 +98,18 @@ const defaultItemTypeData = [
       };
     },
     reservedProps: ({ item, isShowFormItem }) => ({
-      items: (item.children || []).filter((c) => isShowFormItem(c)).map((c) => ({
-        name: c.prop,
-        label: c.label,
-        slot: "itemContent",
-        meta: c
-      }))
+      items: (item.children || []).filter((c) => isShowFormItem(c)).map((c) => {
+        var _a, _b, _c, _d, _e;
+        return {
+          name: ((_a = c.props) == null ? void 0 : _a.name) ?? c.prop,
+          label: ((_b = c.props) == null ? void 0 : _b.label) ?? c.label,
+          disabled: (_c = c.props) == null ? void 0 : _c.disabled,
+          closable: (_d = c.props) == null ? void 0 : _d.closable,
+          lazy: (_e = c.props) == null ? void 0 : _e.lazy,
+          slot: "itemContent",
+          meta: c
+        };
+      })
     }),
     reservedSlots: ({ renderChildren }) => ({
       itemContent: (slotProps) => {
@@ -159,11 +162,7 @@ const defaultItemTypeData = [
     type: "collapseItem",
     component: ElCollapseItem,
     isContainer: true,
-    containerSelectable: true,
-    defaultProps: ({ item }) => ({
-      title: item.label,
-      name: item.prop
-    })
+    containerSelectable: true
   },
   {
     type: "carousel",
@@ -175,30 +174,19 @@ const defaultItemTypeData = [
     type: "carouselItem",
     component: ElCarouselItem,
     isContainer: true,
-    containerSelectable: true,
-    defaultProps: ({ item }) => ({
-      title: item.label,
-      name: item.prop
-    })
+    containerSelectable: true
   },
   {
     type: "descriptions",
     component: ElDescriptions,
     isContainer: true,
-    sortDisabled: true,
-    defaultProps: ({ item }) => ({
-      title: item.label
-    })
+    sortDisabled: true
   },
   {
     type: "descriptionsItem",
     component: ElDescriptionsItem,
     isContainer: true,
-    containerSelectable: true,
-    defaultProps: ({ item }) => ({
-      key: item.key ?? item.prop,
-      label: item.label
-    })
+    containerSelectable: true
   },
   {
     type: "row",
@@ -212,6 +200,11 @@ const defaultItemTypeData = [
     isContainer: true,
     containerSelectable: true
   },
+  {
+    type: "adminLayout",
+    component: EleAdminLayout,
+    isContainer: true
+  },
   {
     type: "div",
     component: "div",
@@ -252,8 +245,7 @@ const defaultItemTypeData = [
     defaultProps: ({ item }) => ({
       class: "ele-fluid",
       clearable: true,
-      placeholder: `请输入${item.label ?? ""}`,
-      options: item.options
+      placeholder: `请输入${item.label ?? ""}`
     }),
     reservedProps: ({ modelValue, updateModelValue }) => ({
       modelValue,
@@ -266,8 +258,7 @@ const defaultItemTypeData = [
     defaultProps: ({ item }) => ({
       class: "ele-fluid",
       clearable: true,
-      placeholder: `请输入${item.label ?? ""}`,
-      options: item.options
+      placeholder: `请输入${item.label ?? ""}`
     }),
     reservedProps: ({ modelValue, updateModelValue }) => ({
       multiple: true,
@@ -277,60 +268,36 @@ const defaultItemTypeData = [
   },
   {
     type: "radio",
-    component: ElRadioGroup,
+    component: EleRadioGroup,
     reservedProps: ({ modelValue, updateModelValue }) => ({
       modelValue,
       "onUpdate:modelValue": updateModelValue
-    }),
-    optionsComponent: ElRadio,
-    optionsComponentProps: (option) => ({
-      value: option.value,
-      label: option.label,
-      disabled: option.disabled,
-      border: option.border
     })
   },
   {
     type: "radioButton",
-    component: ElRadioGroup,
+    component: EleRadioGroup,
     reservedProps: ({ modelValue, updateModelValue }) => ({
+      type: "button",
       modelValue,
       "onUpdate:modelValue": updateModelValue
-    }),
-    optionsComponent: ElRadioButton,
-    optionsComponentProps: (option) => ({
-      value: option.value,
-      label: option.label,
-      disabled: option.disabled
     })
   },
   {
     type: "checkbox",
-    component: ElCheckboxGroup,
+    component: EleCheckboxGroup,
     reservedProps: ({ modelValue, updateModelValue }) => ({
       modelValue,
       "onUpdate:modelValue": updateModelValue
-    }),
-    optionsComponent: ElCheckbox,
-    optionsComponentProps: (option) => ({
-      value: option.value,
-      label: option.label,
-      disabled: option.disabled,
-      border: option.border
     })
   },
   {
     type: "checkboxButton",
-    component: ElCheckboxGroup,
+    component: EleCheckboxGroup,
     reservedProps: ({ modelValue, updateModelValue }) => ({
+      type: "button",
       modelValue,
       "onUpdate:modelValue": updateModelValue
-    }),
-    optionsComponent: ElCheckboxButton,
-    optionsComponentProps: (option) => ({
-      value: option.value,
-      label: option.label,
-      disabled: option.disabled
     })
   },
   {
@@ -462,14 +429,9 @@ const defaultItemTypeData = [
   },
   {
     type: "autocomplete",
-    component: ElAutocomplete,
+    component: EleAutocomplete,
     defaultProps: ({ item }) => ({
       class: "ele-fluid",
-      fetchSuggestions: (keyword, callback) => callback(
-        (item.options || []).filter(
-          (d) => keyword == null || !keyword.length || (d.value ?? "").toLowerCase().includes((keyword ?? "").toLowerCase())
-        )
-      ),
       placeholder: `请输入${item.label ?? ""}`
     }),
     reservedProps: ({ modelValue, updateModelValue }) => ({
@@ -483,7 +445,6 @@ const defaultItemTypeData = [
     defaultProps: ({ item }) => ({
       class: "ele-fluid",
       clearable: true,
-      options: item.options || [],
       placeholder: `请选择${item.label ?? ""}`
     }),
     reservedProps: ({ modelValue, updateModelValue }) => ({
@@ -497,7 +458,6 @@ const defaultItemTypeData = [
     defaultProps: ({ item }) => ({
       class: "ele-fluid",
       clearable: true,
-      options: item.options || [],
       placeholder: `请选择${item.label ?? ""}`
     }),
     reservedProps: ({ modelValue, updateModelValue }) => ({
@@ -533,10 +493,9 @@ const defaultItemTypeData = [
   },
   {
     type: "mention",
-    component: ElMention,
+    component: EleMention,
     defaultProps: ({ item }) => ({
       clearable: true,
-      options: item.options || [],
       placeholder: `请输入${item.label ?? ""}`
     }),
     reservedProps: ({ modelValue, updateModelValue }) => ({
@@ -554,7 +513,7 @@ const defaultItemTypeData = [
   },
   {
     type: "transfer",
-    component: ElTransfer,
+    component: EleTransfer,
     reservedProps: ({ modelValue, updateModelValue }) => ({
       modelValue,
       "onUpdate:modelValue": updateModelValue
@@ -562,11 +521,10 @@ const defaultItemTypeData = [
   },
   {
     type: "treeSelect",
-    component: ElTreeSelect,
+    component: EleSelectTree,
     defaultProps: ({ item }) => ({
       class: "ele-fluid",
       clearable: true,
-      data: item.options || [],
       placeholder: `请选择${item.label ?? ""}`
     }),
     reservedProps: ({ modelValue, updateModelValue }) => ({
@@ -576,11 +534,10 @@ const defaultItemTypeData = [
   },
   {
     type: "treeMultipleSelect",
-    component: ElTreeSelect,
+    component: EleSelectTree,
     defaultProps: ({ item }) => ({
       class: "ele-fluid",
       clearable: true,
-      data: item.options || [],
       showCheckbox: true,
       placeholder: `请选择${item.label ?? ""}`
     }),
@@ -644,9 +601,6 @@ const defaultItemTypeData = [
   {
     type: "checkCard",
     component: EleCheckCard,
-    defaultProps: ({ item }) => ({
-      items: item.options || []
-    }),
     reservedProps: ({ modelValue, updateModelValue }) => ({
       modelValue,
       "onUpdate:modelValue": updateModelValue
@@ -655,9 +609,6 @@ const defaultItemTypeData = [
   {
     type: "multipleCheckCard",
     component: EleCheckCard,
-    defaultProps: ({ item }) => ({
-      items: item.options || []
-    }),
     reservedProps: ({ modelValue, updateModelValue }) => ({
       multiple: true,
       modelValue,

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

@@ -1,12 +1,27 @@
 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 表单项
+ * @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 +29,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 属性
@@ -51,6 +88,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,7 +106,8 @@ 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[]>;
+    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, {
@@ -80,6 +124,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 +142,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[]>;
+    itemTypeData: import('vue').PropType<ProFormItemTypeData[]>;
+    httpRequest: (ObjectConstructor | FunctionConstructor)[];
 }>> & {
-    "onUpdate:activeItemKey"?: ((_activeKey?: string | number | symbol | undefined) => any) | undefined;
     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;
 }, {}>;
+export type ChildrenRenderInstance = InstanceType<typeof ChildrenRender> | null;