ele-admin-plus 1.3.1-beta.1 → 1.4.0-beta.1

package/es/ele-pro-form-builder/components/outline-tree.js

@@ -1,28 +1,23 @@
-import { defineComponent, ref, watch, openBlock, createElementBlock, Fragment, createElementVNode, createBlock, createCommentVNode, unref, createVNode, Transition, withCtx, withModifiers } from "vue";
+import { defineComponent, ref, watch, createElementBlock, openBlock, Fragment, createBlock, createCommentVNode, unref } from "vue";
 import { ElEmpty } from "element-plus";
-import { findTree } from "../../utils/core";
+import { findTree } from "../../utils/common";
+import { fixedChildTypes } from "./build-core";
 import { generateCopyItemData, generateAddChildData } from "./build-util";
 import OutlineList from "./outline-list";
-import ComponentList from "./component-list";
 const _sfc_main = /* @__PURE__ */ defineComponent({
+  ...{ name: "OutlineTree" },
   __name: "outline-tree",
   props: {
     formItems: {},
     currentFormItemId: {},
-    componentData: {}
+    componentData: {},
+    itemTypeData: {}
   },
-  emits: ["update:currentFormItemId", "updateItems", "updateItemChildren", "openTableTool"],
+  emits: ["update:currentFormItemId", "updateItems", "updateItemChildren", "openTableTool", "openComponentPicker"],
   setup(__props, { emit: __emit }) {
     const props = __props;
     const emit = __emit;
-    const outlineWrapperRef = ref(null);
     const collapseItemIds = ref([]);
-    const isShowComponentList = ref(false);
-    const addParentFormItemId = ref();
-    const hideComponentList = () => {
-      isShowComponentList.value = false;
-      addParentFormItemId.value = void 0;
-    };
     const handleUpdateCurrentFormItemId = (itemId) => {
       emit("update:currentFormItemId", itemId);
     };
@@ -40,21 +35,20 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       handleUpdateItems(generateCopyItemData(formItemId, props.formItems));
     };
     const handleAddChildren = (triggerItem, action) => {
-      if (triggerItem.type && ["tabs", "collapse", "row", "table", "carousel"].includes(
-        triggerItem.type
-      )) {
+      if (triggerItem.type && fixedChildTypes.some((d) => d.type === triggerItem.type)) {
         const result = generateAddChildData(
           triggerItem,
           void 0,
           void 0,
           action,
-          props.formItems
+          props.formItems,
+          void 0,
+          props.componentData
         );
         handleUpdateItems(result);
-        return;
+      } else {
+        emit("openComponentPicker", triggerItem.key);
       }
-      addParentFormItemId.value = triggerItem.key;
-      isShowComponentList.value = true;
     };
     const handleOpenTableTool = (item, e) => {
       var _a, _b;
@@ -65,8 +59,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       );
       emit("openTableTool", item.key, triggerEl);
     };
-    const handleUpdateItemChildren = (children, parent) => {
-      emit("updateItemChildren", children, parent);
+    const handleUpdateItemChildren = (children, parentKey) => {
+      emit("updateItemChildren", children, parentKey);
     };
     const handleToggleItemCollapse = (formItemId) => {
       const index = collapseItemIds.value.indexOf(formItemId);
@@ -84,56 +78,31 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
             collapseItemIds.value.splice(i, 1);
           }
         }
-        hideComponentList();
       },
       { deep: true }
     );
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock(Fragment, null, [
-        createElementVNode("div", {
-          ref_key: "outlineWrapperRef",
-          ref: outlineWrapperRef,
-          class: "ele-pro-form-builder-outline-wrapper"
-        }, [
-          _ctx.formItems ? (openBlock(), createBlock(OutlineList, {
-            key: 0,
-            items: _ctx.formItems,
-            currentFormItemId: _ctx.currentFormItemId,
-            collapseItemIds: collapseItemIds.value,
-            componentData: _ctx.componentData,
-            "onUpdate:currentFormItemId": handleUpdateCurrentFormItemId,
-            onToggleItemCollapse: handleToggleItemCollapse,
-            onDeleteItem: handleDeleteItem,
-            onCopyItem: handleCopyItem,
-            onAddChildren: handleAddChildren,
-            onOpenTableTool: handleOpenTableTool,
-            onUpdateItemChildren: handleUpdateItemChildren
-          }, null, 8, ["items", "currentFormItemId", "collapseItemIds", "componentData"])) : createCommentVNode("", true),
-          !_ctx.formItems || !_ctx.formItems.length ? (openBlock(), createBlock(unref(ElEmpty), {
-            key: 1,
-            imageSize: 58,
-            class: "ele-pro-form-builder-form-empty"
-          })) : createCommentVNode("", true)
-        ], 512),
-        createVNode(Transition, { name: "ele-pro-form-builder-outline-component-anim" }, {
-          default: withCtx(() => [
-            isShowComponentList.value ? (openBlock(), createElementBlock("div", {
-              key: 0,
-              class: "ele-pro-form-builder-outline-component-wrapper",
-              onClick: hideComponentList
-            }, [
-              createVNode(ComponentList, {
-                formItems: _ctx.formItems,
-                parentFormItemId: addParentFormItemId.value,
-                componentData: _ctx.componentData,
-                onUpdateItems: handleUpdateItems,
-                onClick: _cache[0] || (_cache[0] = withModifiers(() => {
-                }, ["stop"]))
-              }, null, 8, ["formItems", "parentFormItemId", "componentData"])
-            ])) : createCommentVNode("", true)
-          ]),
-          _: 1
-        })
+        _ctx.formItems ? (openBlock(), createBlock(OutlineList, {
+          key: 0,
+          items: _ctx.formItems,
+          currentFormItemId: _ctx.currentFormItemId,
+          collapseItemIds: collapseItemIds.value,
+          componentData: _ctx.componentData,
+          itemTypeData: _ctx.itemTypeData,
+          "onUpdate:currentFormItemId": handleUpdateCurrentFormItemId,
+          onToggleItemCollapse: handleToggleItemCollapse,
+          onDeleteItem: handleDeleteItem,
+          onCopyItem: handleCopyItem,
+          onAddChildren: handleAddChildren,
+          onOpenTableTool: handleOpenTableTool,
+          onUpdateItemChildren: handleUpdateItemChildren
+        }, null, 8, ["items", "currentFormItemId", "collapseItemIds", "componentData", "itemTypeData"])) : createCommentVNode("", true),
+        !_ctx.formItems || !_ctx.formItems.length ? (openBlock(), createBlock(unref(ElEmpty), {
+          key: 1,
+          imageSize: 58,
+          class: "ele-pro-form-builder-form-empty"
+        })) : createCommentVNode("", true)
       ], 64);
     };
   }

package/es/ele-pro-form-builder/components/preview-modal.d.ts

@@ -1,26 +1,37 @@
+import { ProFormItemTypeData } from '../../ele-pro-form/types';
 import { UserComponent } from '../../ele-app/types';
-import { TemplateFormConfig } from '../types';
+import { EleProFormProps } from '../../ele-app/plus';
 
 declare function __VLS_template(): Partial<Record<string, (_: any) => any>>;
-declare const __VLS_component: import('vue').DefineComponent<__VLS_TypePropsToRuntimeProps<{
+declare const __VLS_component: import('vue').DefineComponent<import('vue').ExtractPropTypes<__VLS_TypePropsToRuntimeProps<{
     /** 弹窗是否打开 */
     modelValue?: boolean;
     /** 表单属性 */
-    formProps?: TemplateFormConfig;
+    formProps?: EleProFormProps;
     /** 高级表单组件 */
     proFormComponent?: UserComponent;
-}>, {}, unknown, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    /** 高级表单组件类型数据 */
+    itemTypeData?: ProFormItemTypeData[];
+    /** 远程数据源请求工具 */
+    httpRequest?: any;
+}>>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
     "update:modelValue": (visible?: boolean | undefined) => void;
+    previewFormSubmit: (data: Record<string, any>) => void;
 }, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<__VLS_TypePropsToRuntimeProps<{
     /** 弹窗是否打开 */
     modelValue?: boolean;
     /** 表单属性 */
-    formProps?: TemplateFormConfig;
+    formProps?: EleProFormProps;
     /** 高级表单组件 */
     proFormComponent?: UserComponent;
-}>>> & {
+    /** 高级表单组件类型数据 */
+    itemTypeData?: ProFormItemTypeData[];
+    /** 远程数据源请求工具 */
+    httpRequest?: any;
+}>>> & Readonly<{
     "onUpdate:modelValue"?: ((visible?: boolean | undefined) => any) | undefined;
-}, {}, {}>;
+    onPreviewFormSubmit?: ((data: Record<string, any>) => any) | undefined;
+}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
 declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, ReturnType<typeof __VLS_template>>;
 export default _default;
 type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;

package/es/ele-pro-form-builder/components/preview-modal.js

@@ -1,16 +1,22 @@
-import { defineComponent, ref, reactive, watch, nextTick, resolveComponent, openBlock, createBlock, withCtx, createElementVNode, createElementBlock, Fragment, renderList, unref, normalizeClass, resolveDynamicComponent, normalizeStyle, mergeProps, createSlots, renderSlot, normalizeProps, guardReactiveProps } from "vue";
-import { setValue, mergeValue } from "../../ele-pro-form/util";
+import { defineComponent, ref, reactive, watch, nextTick, createBlock, openBlock, withCtx, resolveDynamicComponent, mergeProps, createSlots, renderList, renderSlot, normalizeProps, guardReactiveProps, createElementVNode, createElementBlock, Fragment, unref, normalizeClass, normalizeStyle } from "vue";
+import { ElIcon } from "element-plus";
+import EleModal from "../../ele-modal/index";
+import { setValue, mergeValue, getFormInitValue } from "../../ele-pro-form/util";
 import EleProForm from "../../ele-pro-form/index";
-import { screenItems, getFormInitValue } from "../util";
+import { screenItems } from "../util";
+import { deepCloneObject } from "./build-core";
 const _hoisted_1 = { class: "ele-pro-form-builder-screen-radio" };
 const _sfc_main = /* @__PURE__ */ defineComponent({
+  ...{ name: "PreviewModal" },
   __name: "preview-modal",
   props: {
     modelValue: { type: Boolean },
     formProps: {},
-    proFormComponent: {}
+    proFormComponent: { type: [String, Object, Function] },
+    itemTypeData: {},
+    httpRequest: {}
   },
-  emits: ["update:modelValue"],
+  emits: ["update:modelValue", "previewFormSubmit"],
   setup(__props, { emit: __emit }) {
     const props = __props;
     const emit = __emit;
@@ -25,13 +31,17 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       setValue(formData, field, value);
     };
     const handlePreviewFormSubmit = () => {
+      emit("previewFormSubmit", formData);
     };
     const handlePreviewFormReset = () => {
       var _a;
       Object.keys(formData).forEach((k) => {
         formData[k] = void 0;
       });
-      mergeValue(formData, getFormInitValue((_a = previewFormProps.value) == null ? void 0 : _a.items));
+      mergeValue(
+        formData,
+        getFormInitValue((_a = previewFormProps.value) == null ? void 0 : _a.items, props.itemTypeData, true)
+      );
     };
     const handleUpdatePreviewScreen = (size) => {
       previewScreen.value = size;
@@ -40,35 +50,40 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       () => props.modelValue,
       (visible) => {
         if (visible) {
-          previewFormProps.value = JSON.parse(
-            JSON.stringify(props.formProps || { items: [] })
+          previewFormProps.value = deepCloneObject(
+            props.formProps || { items: [] }
           );
           handlePreviewFormReset();
           nextTick(() => {
+            var _a, _b;
+            (_b = (_a = previewFormRef.value) == null ? void 0 : _a.clearValidate) == null ? void 0 : _b.call(_a);
             nextTick(() => {
-              var _a, _b;
-              (_b = (_a = previewFormRef.value) == null ? void 0 : _a.clearValidate) == null ? void 0 : _b.call(_a);
+              var _a2, _b2;
+              (_b2 = (_a2 = previewFormRef.value) == null ? void 0 : _a2.clearValidate) == null ? void 0 : _b2.call(_a2);
             });
           });
         }
       }
     );
     return (_ctx, _cache) => {
-      const _component_ElIcon = resolveComponent("ElIcon");
-      const _component_EleModal = resolveComponent("EleModal");
-      return openBlock(), createBlock(_component_EleModal, {
-        width: 800,
+      return openBlock(), createBlock(EleModal, {
+        width: 980,
         maxable: true,
         draggable: false,
         position: "center",
         closeOnClickModal: false,
+        destroyOnClose: true,
+        modalBodyClass: [
+          "ele-pro-form-builder-preview",
+          previewScreen.value === "pad" ? "is-pad" : previewScreen.value === "phone" ? "is-phone" : "is-pc"
+        ].join(" "),
         modelValue: _ctx.modelValue,
         "onUpdate:modelValue": handleUpdateModelValue
       }, {
         header: withCtx(() => [
           createElementVNode("div", _hoisted_1, [
             (openBlock(true), createElementBlock(Fragment, null, renderList(unref(screenItems), (item) => {
-              return openBlock(), createBlock(_component_ElIcon, {
+              return openBlock(), createBlock(unref(ElIcon), {
                 key: item.value,
                 class: normalizeClass([
                   "ele-pro-form-builder-header-tool",
@@ -88,22 +103,15 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           ])
         ]),
         default: withCtx(() => [
-          (openBlock(), createBlock(resolveDynamicComponent(_ctx.proFormComponent || EleProForm), mergeProps({
-            footer: true,
-            validateOnRuleChange: false
-          }, previewFormProps.value, {
+          (openBlock(), createBlock(resolveDynamicComponent(_ctx.proFormComponent || EleProForm), mergeProps({ validateOnRuleChange: false }, previewFormProps.value, {
             ref_key: "previewFormRef",
             ref: previewFormRef,
             model: formData,
-            searchExpand: formData.searchExpand,
-            "onUpdate:searchExpand": _cache[0] || (_cache[0] = ($event) => formData.searchExpand = $event),
             editable: false,
-            class: [
-              "ele-pro-form-builder-preview-form",
-              { "is-pc": previewScreen.value === "pc" },
-              { "is-pad": previewScreen.value === "pad" },
-              { "is-phone": previewScreen.value === "phone" }
-            ],
+            screenSize: previewScreen.value,
+            itemTypeData: _ctx.itemTypeData,
+            httpRequest: _ctx.httpRequest,
+            class: "ele-pro-form-builder-preview-form",
             onUpdateValue: setPreviewFormDataFieldValue,
             onSubmit: handlePreviewFormSubmit,
             onReset: handlePreviewFormReset
@@ -116,10 +124,10 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                 ])
               };
             })
-          ]), 1040, ["model", "searchExpand", "class"]))
+          ]), 1040, ["model", "screenSize", "itemTypeData", "httpRequest"]))
         ]),
         _: 3
-      }, 8, ["modelValue"]);
+      }, 8, ["modalBodyClass", "modelValue"]);
     };
   }
 });

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

@@ -1,41 +1,64 @@
 import { UserComponent } from '../../ele-app/types';
-import { ProFormItemKey } from '../../ele-pro-form/types';
-import { TemplateFormConfig, ComponentGroup, UpdateItemsResult } from '../types';
+import { EleProFormProps } from '../../ele-app/plus';
+import { ProFormItemKey, ProFormItemTypeData } from '../../ele-pro-form/types';
+import { ComponentGroup, UpdateItemsResult } from '../types';
 
 declare function __VLS_template(): Partial<Record<string, (_: any) => any>>;
-declare const __VLS_component: import('vue').DefineComponent<__VLS_TypePropsToRuntimeProps<{
+declare const __VLS_component: import('vue').DefineComponent<import('vue').ExtractPropTypes<__VLS_TypePropsToRuntimeProps<{
     /** 选中的表单项 id */
     currentFormItemId?: ProFormItemKey;
     /** 表单属性 */
-    formProps?: TemplateFormConfig;
+    formProps?: EleProFormProps;
     /** 表单属性设置的组件预设属性值 */
     configFormPresetProps?: Record<string, any>;
     /** 组件库数据 */
     componentData?: ComponentGroup[];
     /** 高级表单组件 */
     proFormComponent?: UserComponent;
-}>, {}, unknown, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    /** 代码编辑器组件 */
+    codeEditerComponent?: UserComponent;
+    /** JSON 编辑器组件 */
+    jsonEditerComponent?: UserComponent;
+    /** 富文本编辑器组件 */
+    htmlEditerComponent?: UserComponent;
+    /** 高级表单组件类型数据 */
+    itemTypeData?: ProFormItemTypeData[];
+    /** 远程数据源请求工具 */
+    httpRequest?: any;
+}>>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
     "update:currentFormItemId": (formItemId?: string | undefined) => void;
     updateItem: (formItemId: string | number | symbol, field: string, value: any) => void;
     updateItems: (result: UpdateItemsResult) => void;
     sortItemChildren: (childIds: string[], formItemId: string | number | symbol) => void;
+    openComponentPicker: (formItemId: string, formItemType?: string | undefined) => void;
 }, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<__VLS_TypePropsToRuntimeProps<{
     /** 选中的表单项 id */
     currentFormItemId?: ProFormItemKey;
     /** 表单属性 */
-    formProps?: TemplateFormConfig;
+    formProps?: EleProFormProps;
     /** 表单属性设置的组件预设属性值 */
     configFormPresetProps?: Record<string, any>;
     /** 组件库数据 */
     componentData?: ComponentGroup[];
     /** 高级表单组件 */
     proFormComponent?: UserComponent;
-}>>> & {
-    "onUpdate:currentFormItemId"?: ((formItemId?: string | undefined) => any) | undefined;
+    /** 代码编辑器组件 */
+    codeEditerComponent?: UserComponent;
+    /** JSON 编辑器组件 */
+    jsonEditerComponent?: UserComponent;
+    /** 富文本编辑器组件 */
+    htmlEditerComponent?: UserComponent;
+    /** 高级表单组件类型数据 */
+    itemTypeData?: ProFormItemTypeData[];
+    /** 远程数据源请求工具 */
+    httpRequest?: any;
+}>>> & Readonly<{
     onUpdateItems?: ((result: UpdateItemsResult) => any) | undefined;
+    "onUpdate:currentFormItemId"?: ((formItemId?: string | undefined) => any) | undefined;
+    onOpenComponentPicker?: ((formItemId: string, formItemType?: string | undefined) => any) | undefined;
     onUpdateItem?: ((formItemId: string | number | symbol, field: string, value: any) => any) | undefined;
     onSortItemChildren?: ((childIds: string[], formItemId: string | number | symbol) => any) | undefined;
-}, {}, {}>;
+}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
 declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, ReturnType<typeof __VLS_template>>;
 export default _default;
 type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;