ele-admin-plus 1.2.2-beta.5 → 1.3.0-beta.3

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

@@ -0,0 +1,62 @@
+import { UserComponent } from '../../ele-app/types';
+import { ProFormItemKey, ProFormItemProps, ProFormItemTypeData } from '../../ele-pro-form/types';
+import { TemplateFormConfig, ComponentGroup, UpdateItemsResult } from '../types';
+
+declare function __VLS_template(): Partial<Record<string, (_: any) => any>>;
+declare const __VLS_component: import('vue').DefineComponent<__VLS_TypePropsToRuntimeProps<{
+    /** 表单属性 */
+    formProps?: TemplateFormConfig;
+    /** 选中的表单项 id */
+    currentFormItemId?: ProFormItemKey;
+    /** 当前选中屏幕尺寸 */
+    currentScreen?: string;
+    /** 组件库数据 */
+    componentData?: ComponentGroup[];
+    /** 高级表单组件 */
+    proFormComponent?: UserComponent;
+    /** 高级表单组件类型数据 */
+    itemTypeData?: ProFormItemTypeData[];
+    /** 远程数据源请求工具 */
+    httpRequest?: any;
+}>, {}, unknown, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    "update:currentFormItemId": (formItemId?: string | number | symbol | undefined) => void;
+    updateItems: (result: UpdateItemsResult) => void;
+    openTableTool: (formItemId: string, el: HTMLElement) => void;
+    updateFormItems: (items: ProFormItemProps[]) => void;
+}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<__VLS_TypePropsToRuntimeProps<{
+    /** 表单属性 */
+    formProps?: TemplateFormConfig;
+    /** 选中的表单项 id */
+    currentFormItemId?: ProFormItemKey;
+    /** 当前选中屏幕尺寸 */
+    currentScreen?: string;
+    /** 组件库数据 */
+    componentData?: ComponentGroup[];
+    /** 高级表单组件 */
+    proFormComponent?: UserComponent;
+    /** 高级表单组件类型数据 */
+    itemTypeData?: ProFormItemTypeData[];
+    /** 远程数据源请求工具 */
+    httpRequest?: any;
+}>>> & {
+    onOpenTableTool?: ((formItemId: string, el: HTMLElement) => any) | undefined;
+    onUpdateItems?: ((result: UpdateItemsResult) => any) | undefined;
+    "onUpdate:currentFormItemId"?: ((formItemId?: string | number | symbol | undefined) => any) | undefined;
+    onUpdateFormItems?: ((items: ProFormItemProps[]) => any) | undefined;
+}, {}, {}>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, ReturnType<typeof __VLS_template>>;
+export default _default;
+type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+type __VLS_TypePropsToRuntimeProps<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
+    } : {
+        type: import('vue').PropType<T[K]>;
+        required: true;
+    };
+};
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/es/ele-pro-form-builder/components/body-form.js

@@ -0,0 +1,184 @@
+import { defineComponent, ref, reactive, watch, openBlock, createElementBlock, normalizeClass, createBlock, resolveDynamicComponent, mergeProps, createSlots, withCtx, createVNode, renderList, renderSlot, normalizeProps, guardReactiveProps, unref, createCommentVNode } from "vue";
+import { ElEmpty } from "element-plus";
+import { eachTree } from "../../utils/core";
+import { mergeValue, getFormInitValue, setValue } from "../../ele-pro-form/util";
+import EleProForm from "../../ele-pro-form/index";
+import { generateAddChildData, generateCopyItemData } from "./build-util";
+import ComponentName from "./component-name";
+import BuilderTools from "./builder-tools";
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "body-form",
+  props: {
+    formProps: {},
+    currentFormItemId: {},
+    currentScreen: {},
+    componentData: {},
+    proFormComponent: {},
+    itemTypeData: {},
+    httpRequest: {}
+  },
+  emits: ["update:currentFormItemId", "updateItems", "openTableTool", "updateFormItems"],
+  setup(__props, { emit: __emit }) {
+    const ownSlots = ["builderItemHandleContent", "builderItemTools"];
+    const props = __props;
+    const emit = __emit;
+    const proFormRef = ref(null);
+    const formData = reactive({});
+    const cachebuilderFormData = reactive({});
+    const handleUpdateItems = (result) => {
+      emit("updateItems", result);
+    };
+    const handleUpdateCurrentFormItemId = (formItemId) => {
+      emit("update:currentFormItemId", formItemId);
+    };
+    const handleDeleteItem = (item) => {
+      if (item.key != null) {
+        handleUpdateItems({
+          deleteItemIds: [item.key],
+          addItems: [],
+          updateItems: []
+        });
+      }
+    };
+    const handleAddChildrenItem = (formItem, action) => {
+      var _a;
+      if (formItem.key != null) {
+        eachTree((_a = props.formProps) == null ? void 0 : _a.items, (item, cIndex, parent) => {
+          var _a2;
+          if (item.key === formItem.key) {
+            const result = generateAddChildData(
+              item,
+              parent,
+              cIndex,
+              action,
+              (_a2 = props.formProps) == null ? void 0 : _a2.items,
+              void 0,
+              props.componentData
+            );
+            handleUpdateItems(result);
+            return false;
+          }
+        });
+      }
+    };
+    const handleCopyItem = (item) => {
+      var _a;
+      if (item.key != null) {
+        handleUpdateItems(
+          generateCopyItemData(item.key, (_a = props.formProps) == null ? void 0 : _a.items)
+        );
+      }
+    };
+    const handleOpenTableTool = (item, e) => {
+      if (item.key != null) {
+        emit("openTableTool", item.key, e.currentTarget);
+      }
+    };
+    const setBuilderFormDataFieldValue = (field, value) => {
+      setValue(formData, field, value);
+      setValue(cachebuilderFormData, field, value);
+    };
+    const handleUpdateFormItems = (items) => {
+      emit("updateFormItems", items);
+    };
+    watch(
+      () => props.currentFormItemId,
+      (currentFormItemId) => {
+        var _a;
+        eachTree((_a = props.formProps) == null ? void 0 : _a.items, (item, _cIndex, parent) => {
+          if (item.key === currentFormItemId) {
+            if (item.type && ["tabPane", "collapseItem"].includes(item.type) && parent && parent.prop) {
+              setBuilderFormDataFieldValue(parent.prop, item.prop);
+            }
+            return false;
+          }
+        });
+      }
+    );
+    watch(
+      () => props.formProps,
+      () => {
+        var _a;
+        Object.keys(formData).forEach((k) => {
+          formData[k] = void 0;
+        });
+        mergeValue(
+          formData,
+          getFormInitValue((_a = props.formProps) == null ? void 0 : _a.items, props.itemTypeData),
+          cachebuilderFormData
+        );
+      },
+      {
+        deep: true,
+        immediate: true
+      }
+    );
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        class: normalizeClass([
+          "ele-pro-form-builder-body",
+          { "is-pc": _ctx.currentScreen === "pc" },
+          { "is-pad": _ctx.currentScreen === "pad" },
+          { "is-phone": _ctx.currentScreen === "phone" }
+        ])
+      }, [
+        (openBlock(), createBlock(resolveDynamicComponent(_ctx.proFormComponent || EleProForm), mergeProps(_ctx.formProps || {}, {
+          ref_key: "proFormRef",
+          ref: proFormRef,
+          model: formData,
+          searchExpand: formData.searchExpand,
+          "onUpdate:searchExpand": _cache[0] || (_cache[0] = ($event) => formData.searchExpand = $event),
+          activeItemKey: _ctx.currentFormItemId,
+          editable: true,
+          footer: false,
+          validateOnRuleChange: false,
+          scrollToError: false,
+          showMessage: false,
+          itemTypeData: _ctx.itemTypeData,
+          httpRequest: _ctx.httpRequest,
+          class: "ele-pro-form-builder-body-form",
+          onUpdateValue: setBuilderFormDataFieldValue,
+          "onUpdate:items": handleUpdateFormItems,
+          "onUpdate:activeItemKey": handleUpdateCurrentFormItemId
+        }), createSlots({
+          builderItemHandleContent: withCtx(({ item }) => [
+            createVNode(ComponentName, {
+              itemType: item.type,
+              componentData: _ctx.componentData
+            }, null, 8, ["itemType", "componentData"])
+          ]),
+          builderItemTools: withCtx(({ item }) => [
+            createVNode(BuilderTools, {
+              itemType: item.type,
+              onDelete: ($event) => handleDeleteItem(item),
+              onCopy: ($event) => handleCopyItem(item),
+              onAdd: ($event) => handleAddChildrenItem(item),
+              onAddTableRow: ($event) => handleAddChildrenItem(item, "addTableRow"),
+              onAddTableCol: ($event) => handleAddChildrenItem(item, "addTableCol"),
+              onOpenTableTool: (e) => handleOpenTableTool(item, e)
+            }, null, 8, ["itemType", "onDelete", "onCopy", "onAdd", "onAddTableRow", "onAddTableCol", "onOpenTableTool"])
+          ]),
+          _: 2
+        }, [
+          renderList(Object.keys(_ctx.$slots).filter((k) => !ownSlots.includes(k)), (name) => {
+            return {
+              name,
+              fn: withCtx((slotProps) => [
+                renderSlot(_ctx.$slots, name, normalizeProps(guardReactiveProps(slotProps || {})))
+              ])
+            };
+          })
+        ]), 1040, ["model", "searchExpand", "activeItemKey", "itemTypeData", "httpRequest"])),
+        !_ctx.formProps || !_ctx.formProps.items || !_ctx.formProps.items.length ? (openBlock(), createBlock(unref(ElEmpty), {
+          key: 0,
+          imageSize: 80,
+          description: "拖拽左侧组件到此",
+          class: "ele-pro-form-builder-form-empty"
+        })) : createCommentVNode("", true)
+      ], 2);
+    };
+  }
+});
+export {
+  _sfc_main as default
+};

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

@@ -0,0 +1,76 @@
+import { UserComponent } from '../../ele-app/types';
+import { ProFormItemTypeData } from '../../ele-pro-form/types';
+import { TemplateFormConfig, HeaderRightToolName } from '../types';
+
+declare function __VLS_template(): Partial<Record<string, (_: any) => any>> & {
+    headerTools?(_: {}): any;
+};
+declare const __VLS_component: import('vue').DefineComponent<__VLS_TypePropsToRuntimeProps<{
+    /** 当前选中屏幕尺寸 */
+    currentScreen?: string;
+    /** 是否禁用撤销 */
+    undoDisabled?: boolean;
+    /** 是否禁用恢复 */
+    redoDisabled?: boolean;
+    /** 表单属性 */
+    formProps?: TemplateFormConfig;
+    /** 顶栏右侧操作按钮顺序 */
+    headerTools?: HeaderRightToolName[];
+    /** 高级表单组件 */
+    proFormComponent?: UserComponent;
+    /** JSON 编辑器组件 */
+    jsonEditerComponent?: UserComponent;
+    /** 高级表单组件类型数据 */
+    itemTypeData?: ProFormItemTypeData[];
+    /** 远程数据源请求工具 */
+    httpRequest?: any;
+}>, {}, unknown, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    "update:currentScreen": (size?: string | undefined) => void;
+    undo: () => void;
+    redo: () => void;
+    clear: () => void;
+    previewFormSubmit: (data: Record<string, any>) => void;
+    importData: (data: TemplateFormConfig) => void;
+}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<__VLS_TypePropsToRuntimeProps<{
+    /** 当前选中屏幕尺寸 */
+    currentScreen?: string;
+    /** 是否禁用撤销 */
+    undoDisabled?: boolean;
+    /** 是否禁用恢复 */
+    redoDisabled?: boolean;
+    /** 表单属性 */
+    formProps?: TemplateFormConfig;
+    /** 顶栏右侧操作按钮顺序 */
+    headerTools?: HeaderRightToolName[];
+    /** 高级表单组件 */
+    proFormComponent?: UserComponent;
+    /** JSON 编辑器组件 */
+    jsonEditerComponent?: UserComponent;
+    /** 高级表单组件类型数据 */
+    itemTypeData?: ProFormItemTypeData[];
+    /** 远程数据源请求工具 */
+    httpRequest?: any;
+}>>> & {
+    onClear?: (() => any) | undefined;
+    onPreviewFormSubmit?: ((data: Record<string, any>) => any) | undefined;
+    onImportData?: ((data: TemplateFormConfig) => any) | undefined;
+    "onUpdate:currentScreen"?: ((size?: string | undefined) => any) | undefined;
+    onUndo?: (() => any) | undefined;
+    onRedo?: (() => any) | undefined;
+}, {}, {}>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, ReturnType<typeof __VLS_template>>;
+export default _default;
+type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+type __VLS_TypePropsToRuntimeProps<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
+    } : {
+        type: import('vue').PropType<T[K]>;
+        required: true;
+    };
+};
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/es/ele-pro-form-builder/components/body-header.js

@@ -0,0 +1,201 @@
+import { defineComponent, ref, openBlock, createElementBlock, createElementVNode, Fragment, renderList, unref, createBlock, normalizeClass, withCtx, resolveDynamicComponent, normalizeStyle, createVNode, createTextVNode, createCommentVNode, renderSlot, createSlots, normalizeProps, guardReactiveProps } from "vue";
+import { ElIcon, ElButton } from "element-plus";
+import { RollbackOutlined, RecoverOutlined, UploadOutlined, DownloadOutlined, DeleteOutlined, EyeOutlined } from "../../icons";
+import { screenItems } from "../util";
+import PreviewModal from "./preview-modal";
+import ImportModal from "./import-modal";
+const _hoisted_1 = { class: "ele-pro-form-builder-header" };
+const _hoisted_2 = { class: "ele-pro-form-builder-screen-radio" };
+const _hoisted_3 = { class: "ele-pro-form-builder-header-left" };
+const _hoisted_4 = { class: "ele-pro-form-builder-header-tools" };
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "body-header",
+  props: {
+    currentScreen: {},
+    undoDisabled: { type: Boolean },
+    redoDisabled: { type: Boolean },
+    formProps: {},
+    headerTools: {},
+    proFormComponent: {},
+    jsonEditerComponent: {},
+    itemTypeData: {},
+    httpRequest: {}
+  },
+  emits: ["update:currentScreen", "undo", "redo", "clear", "previewFormSubmit", "importData"],
+  setup(__props, { emit: __emit }) {
+    const ownSlots = ["headerTools"];
+    const props = __props;
+    const emit = __emit;
+    const previewVisible = ref(false);
+    const importVisible = ref(false);
+    const isImport = ref(false);
+    const handleUpdateScreen = (size) => {
+      emit("update:currentScreen", size);
+    };
+    const handleUndo = () => {
+      if (!props.undoDisabled) {
+        emit("undo");
+      }
+    };
+    const handleRedo = () => {
+      if (!props.redoDisabled) {
+        emit("redo");
+      }
+    };
+    const handleClear = () => {
+      emit("clear");
+    };
+    const handleOpenPreview = () => {
+      previewVisible.value = true;
+    };
+    const handlePreviewFormSubmit = (data) => {
+      emit("previewFormSubmit", data);
+    };
+    const handleOpenImport = () => {
+      importVisible.value = true;
+      isImport.value = true;
+    };
+    const handleOpenExport = () => {
+      importVisible.value = true;
+      isImport.value = false;
+    };
+    const handleImportData = (data) => {
+      emit("importData", data);
+    };
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", _hoisted_1, [
+        createElementVNode("div", _hoisted_2, [
+          (openBlock(true), createElementBlock(Fragment, null, renderList(unref(screenItems), (item) => {
+            return openBlock(), createBlock(unref(ElIcon), {
+              key: item.value,
+              class: normalizeClass([
+                "ele-pro-form-builder-header-tool",
+                "ele-pro-form-builder-screen-icon",
+                { "is-active": item.value === _ctx.currentScreen }
+              ]),
+              onClick: ($event) => handleUpdateScreen(item.value)
+            }, {
+              default: withCtx(() => [
+                (openBlock(), createBlock(resolveDynamicComponent(item.icon), {
+                  style: normalizeStyle(item.iconStyle)
+                }, null, 8, ["style"]))
+              ]),
+              _: 2
+            }, 1032, ["class", "onClick"]);
+          }), 128))
+        ]),
+        createElementVNode("div", _hoisted_3, [
+          createVNode(unref(ElIcon), {
+            class: normalizeClass([
+              "ele-pro-form-builder-header-tool",
+              "ele-pro-form-builder-header-tool-undo",
+              { "is-disabled": _ctx.undoDisabled }
+            ]),
+            title: "撤销",
+            onClick: handleUndo
+          }, {
+            default: withCtx(() => [
+              createVNode(unref(RollbackOutlined))
+            ]),
+            _: 1
+          }, 8, ["class"]),
+          createVNode(unref(ElIcon), {
+            class: normalizeClass([
+              "ele-pro-form-builder-header-tool",
+              "ele-pro-form-builder-header-tool-redo",
+              { "is-disabled": _ctx.redoDisabled }
+            ]),
+            title: "恢复",
+            onClick: handleRedo
+          }, {
+            default: withCtx(() => [
+              createVNode(unref(RecoverOutlined))
+            ]),
+            _: 1
+          }, 8, ["class"])
+        ]),
+        createElementVNode("div", _hoisted_4, [
+          (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.headerTools || [], (toolName) => {
+            return openBlock(), createElementBlock(Fragment, { key: toolName }, [
+              toolName === "import" ? (openBlock(), createBlock(unref(ElButton), {
+                key: 0,
+                text: true,
+                icon: unref(UploadOutlined),
+                onClick: handleOpenImport
+              }, {
+                default: withCtx(() => [
+                  createTextVNode(" 导入 ")
+                ]),
+                _: 1
+              }, 8, ["icon"])) : toolName === "export" ? (openBlock(), createBlock(unref(ElButton), {
+                key: 1,
+                text: true,
+                icon: unref(DownloadOutlined),
+                onClick: handleOpenExport
+              }, {
+                default: withCtx(() => [
+                  createTextVNode(" 导出 ")
+                ]),
+                _: 1
+              }, 8, ["icon"])) : toolName === "clear" ? (openBlock(), createBlock(unref(ElButton), {
+                key: 2,
+                text: true,
+                type: "danger",
+                icon: unref(DeleteOutlined),
+                onClick: handleClear
+              }, {
+                default: withCtx(() => [
+                  createTextVNode(" 清空 ")
+                ]),
+                _: 1
+              }, 8, ["icon"])) : toolName === "preview" ? (openBlock(), createBlock(unref(ElButton), {
+                key: 3,
+                text: true,
+                type: "primary",
+                icon: unref(EyeOutlined),
+                onClick: handleOpenPreview
+              }, {
+                default: withCtx(() => [
+                  createTextVNode(" 预览 ")
+                ]),
+                _: 1
+              }, 8, ["icon"])) : createCommentVNode("", true)
+            ], 64);
+          }), 128)),
+          renderSlot(_ctx.$slots, "headerTools")
+        ]),
+        _ctx.headerTools && _ctx.headerTools.includes("preview") ? (openBlock(), createBlock(PreviewModal, {
+          key: 0,
+          modelValue: previewVisible.value,
+          "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => previewVisible.value = $event),
+          formProps: _ctx.formProps,
+          proFormComponent: _ctx.proFormComponent,
+          itemTypeData: _ctx.itemTypeData,
+          httpRequest: _ctx.httpRequest,
+          onPreviewFormSubmit: handlePreviewFormSubmit
+        }, createSlots({ _: 2 }, [
+          renderList(Object.keys(_ctx.$slots).filter((k) => !ownSlots.includes(k)), (name) => {
+            return {
+              name,
+              fn: withCtx((slotProps) => [
+                renderSlot(_ctx.$slots, name, normalizeProps(guardReactiveProps(slotProps || {})))
+              ])
+            };
+          })
+        ]), 1032, ["modelValue", "formProps", "proFormComponent", "itemTypeData", "httpRequest"])) : createCommentVNode("", true),
+        _ctx.headerTools && (_ctx.headerTools.includes("import") || _ctx.headerTools.includes("export")) ? (openBlock(), createBlock(ImportModal, {
+          key: 1,
+          modelValue: importVisible.value,
+          "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => importVisible.value = $event),
+          config: _ctx.formProps,
+          isImport: isImport.value,
+          jsonEditerComponent: _ctx.jsonEditerComponent,
+          onImportData: handleImportData
+        }, null, 8, ["modelValue", "config", "isImport", "jsonEditerComponent"])) : createCommentVNode("", true)
+      ]);
+    };
+  }
+});
+export {
+  _sfc_main as default
+};

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

@@ -0,0 +1,58 @@
+import { ProFormItemProps, ProFormItemTypeData } from '../../ele-pro-form/types';
+import { ComponentGroup } from '../types';
+
+/**
+ * 有固定子级的组件类型
+ */
+export declare const fixedChildTypes: {
+    type: string;
+    childType: string;
+}[];
+/**
+ * 生成表单项 id
+ */
+export declare function generateItemKey(): string;
+/**
+ * 生成表单项 id 并检查重复
+ * @param items 当前表单项数据
+ * @param keys 新生成还未添加的表单项 id
+ */
+export declare function generateUniqueItemKey(items?: ProFormItemProps[], keys?: string[]): string;
+/**
+ * 根据组件类型名称获取对应组件定义
+ * @param type 组件类型名称
+ * @param componentData 组件库数据
+ */
+export declare function getComponentItemByType(type: string | undefined, componentData?: ComponentGroup[]): import('../types').ComponentItem | undefined;
+/**
+ * 生成子级表单项数据
+ * @param parentType 父组件类型
+ * @param childNo 子组件编号
+ * @param childKey 子组件 id
+ * @param componentData 组件库数据
+ */
+export declare function generateChildFormItem(parentType?: string, childNo?: string, childKey?: string, componentData?: ComponentGroup[]): ProFormItemProps;
+/**
+ * 生成表单项数据
+ * @param type 组件类型或组件数据
+ * @param formItems 当前的全部表单项数据
+ * @param componentData 组件库数据
+ * @param itemTypeData 高级表单组件类型数据
+ */
+export declare function generateBuildFormItem(type: string | undefined, formItems: ProFormItemProps[] | undefined, componentData?: ComponentGroup[], itemTypeData?: ProFormItemTypeData[]): ProFormItemProps | undefined;
+/**
+ * 获取表单项的属性值和对应的属性配置表单项数据
+ * @param item 表单项
+ * @param componentData 组件库数据
+ */
+export declare function getFormDataAndItems(item: ProFormItemProps | undefined, componentData?: ComponentGroup[]): {
+    data: Record<string, any>;
+    items: ProFormItemProps[];
+};
+/**
+ * 获取数据所有属性的路径数组
+ * @param data 数据
+ * @param excludeKeys 排除的属性名
+ * @param prefix 前缀
+ */
+export declare function getPropertyPath(data: any, excludeKeys?: string[], prefix?: string): string[];