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

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

@@ -1,23 +1,27 @@
-import { defineComponent, ref, openBlock, createElementBlock, createElementVNode, Fragment, renderList, unref, createBlock, normalizeClass, withCtx, resolveDynamicComponent, normalizeStyle, createVNode, createTextVNode, createCommentVNode, renderSlot, createSlots, normalizeProps, guardReactiveProps } from "vue";
+import { defineComponent, ref, computed, createElementBlock, openBlock, createElementVNode, createBlock, createCommentVNode, Fragment, renderList, unref, normalizeClass, withCtx, resolveDynamicComponent, normalizeStyle, createVNode, renderSlot, createTextVNode, 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 { RollbackOutlined, RecoverOutlined, UploadOutlined, DownloadOutlined, DeleteOutlined, EyeOutlined, CodeOutlined } from "../../icons/index";
+import { defaultHeaderRightTools, screenItems } from "../util";
 import PreviewModal from "./preview-modal";
 import ImportModal from "./import-modal";
+import CodePreview from "./code-preview";
 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: "BodyHeader" },
   __name: "body-header",
   props: {
     currentScreen: {},
     undoDisabled: { type: Boolean },
     redoDisabled: { type: Boolean },
     formProps: {},
-    headerTools: {},
-    proFormComponent: {},
-    jsonEditerComponent: {},
+    headerTools: { type: [Boolean, Array] },
+    proFormComponent: { type: [String, Object, Function] },
+    jsonEditerComponent: { type: [String, Object, Function] },
+    codeViewerComponent: { type: [String, Object, Function] },
+    componentData: {},
     itemTypeData: {},
     httpRequest: {}
   },
@@ -29,6 +33,16 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     const previewVisible = ref(false);
     const importVisible = ref(false);
     const isImport = ref(false);
+    const codeVisible = ref(false);
+    const headerRightToolNames = computed(() => {
+      if (typeof props.headerTools === "undefined" || props.headerTools === true) {
+        return defaultHeaderRightTools;
+      }
+      if (!props.headerTools) {
+        return [];
+      }
+      return props.headerTools;
+    });
     const handleUpdateScreen = (size) => {
       emit("update:currentScreen", size);
     };
@@ -62,6 +76,9 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     const handleImportData = (data) => {
       emit("importData", data);
     };
+    const handleOpenCode = () => {
+      codeVisible.value = true;
+    };
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", _hoisted_1, [
         createElementVNode("div", _hoisted_2, [
@@ -115,7 +132,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           }, 8, ["class"])
         ]),
         createElementVNode("div", _hoisted_4, [
-          (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.headerTools || [], (toolName) => {
+          (openBlock(true), createElementBlock(Fragment, null, renderList(headerRightToolNames.value, (toolName) => {
             return openBlock(), createElementBlock(Fragment, { key: toolName }, [
               toolName === "import" ? (openBlock(), createBlock(unref(ElButton), {
                 key: 0,
@@ -123,20 +140,22 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                 icon: unref(UploadOutlined),
                 onClick: handleOpenImport
               }, {
-                default: withCtx(() => _cache[2] || (_cache[2] = [
+                default: withCtx(() => _cache[3] || (_cache[3] = [
                   createTextVNode(" 导入 ")
                 ])),
-                _: 1
+                _: 1,
+                __: [3]
               }, 8, ["icon"])) : toolName === "export" ? (openBlock(), createBlock(unref(ElButton), {
                 key: 1,
                 text: true,
                 icon: unref(DownloadOutlined),
                 onClick: handleOpenExport
               }, {
-                default: withCtx(() => _cache[3] || (_cache[3] = [
+                default: withCtx(() => _cache[4] || (_cache[4] = [
                   createTextVNode(" 导出 ")
                 ])),
-                _: 1
+                _: 1,
+                __: [4]
               }, 8, ["icon"])) : toolName === "clear" ? (openBlock(), createBlock(unref(ElButton), {
                 key: 2,
                 text: true,
@@ -144,10 +163,11 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                 icon: unref(DeleteOutlined),
                 onClick: handleClear
               }, {
-                default: withCtx(() => _cache[4] || (_cache[4] = [
+                default: withCtx(() => _cache[5] || (_cache[5] = [
                   createTextVNode(" 清空 ")
                 ])),
-                _: 1
+                _: 1,
+                __: [5]
               }, 8, ["icon"])) : toolName === "preview" ? (openBlock(), createBlock(unref(ElButton), {
                 key: 3,
                 text: true,
@@ -155,16 +175,29 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                 icon: unref(EyeOutlined),
                 onClick: handleOpenPreview
               }, {
-                default: withCtx(() => _cache[5] || (_cache[5] = [
+                default: withCtx(() => _cache[6] || (_cache[6] = [
                   createTextVNode(" 预览 ")
                 ])),
-                _: 1
+                _: 1,
+                __: [6]
+              }, 8, ["icon"])) : toolName === "code" ? (openBlock(), createBlock(unref(ElButton), {
+                key: 4,
+                text: true,
+                type: "primary",
+                icon: unref(CodeOutlined),
+                onClick: handleOpenCode
+              }, {
+                default: withCtx(() => _cache[7] || (_cache[7] = [
+                  createTextVNode(" 生成代码 ")
+                ])),
+                _: 1,
+                __: [7]
               }, 8, ["icon"])) : createCommentVNode("", true)
             ], 64);
           }), 128)),
           renderSlot(_ctx.$slots, "headerTools")
         ]),
-        _ctx.headerTools && _ctx.headerTools.includes("preview") ? (openBlock(), createBlock(PreviewModal, {
+        headerRightToolNames.value && headerRightToolNames.value.includes("preview") ? (openBlock(), createBlock(PreviewModal, {
           key: 0,
           modelValue: previewVisible.value,
           "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => previewVisible.value = $event),
@@ -183,7 +216,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
             };
           })
         ]), 1032, ["modelValue", "formProps", "proFormComponent", "itemTypeData", "httpRequest"])) : createCommentVNode("", true),
-        _ctx.headerTools && (_ctx.headerTools.includes("import") || _ctx.headerTools.includes("export")) ? (openBlock(), createBlock(ImportModal, {
+        headerRightToolNames.value && (headerRightToolNames.value.includes("import") || headerRightToolNames.value.includes("export")) ? (openBlock(), createBlock(ImportModal, {
           key: 1,
           modelValue: importVisible.value,
           "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => importVisible.value = $event),
@@ -191,7 +224,15 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           isImport: isImport.value,
           jsonEditerComponent: _ctx.jsonEditerComponent,
           onImportData: handleImportData
-        }, null, 8, ["modelValue", "config", "isImport", "jsonEditerComponent"])) : createCommentVNode("", true)
+        }, null, 8, ["modelValue", "config", "isImport", "jsonEditerComponent"])) : createCommentVNode("", true),
+        headerRightToolNames.value && headerRightToolNames.value.includes("code") ? (openBlock(), createBlock(CodePreview, {
+          key: 2,
+          modelValue: codeVisible.value,
+          "onUpdate:modelValue": _cache[2] || (_cache[2] = ($event) => codeVisible.value = $event),
+          config: _ctx.formProps,
+          componentData: _ctx.componentData,
+          codeViewerComponent: _ctx.codeViewerComponent
+        }, null, 8, ["modelValue", "config", "componentData", "codeViewerComponent"])) : createCommentVNode("", true)
       ]);
     };
   }

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

@@ -24,6 +24,12 @@ export declare function generateUniqueItemKey(items?: ProFormItemProps[], keys?:
  * @param componentData 组件库数据
  */
 export declare function getComponentItemByType(type: string | undefined, componentData?: ComponentGroup[]): import('../types').ComponentItem | undefined;
+/**
+ * 深度克隆对象
+ * @param data 对象
+ * @param excludeUndefined 排除未定义值
+ */
+export declare function deepCloneObject<T extends Record<string, any>>(data?: T, excludeUndefined?: boolean): T;
 /**
  * 生成子级表单项数据
  * @param parentType 父组件类型

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

@@ -1,6 +1,6 @@
-import { uuid, findTree } from "../../utils/core";
+import { uuid, findTree } from "../../utils/common";
 import { isContainerType, mergeValue } from "../../ele-pro-form/util";
-import { defaultItemTypeData } from "../../ele-pro-form/components/item-type-data";
+import { getItemTypeData } from "../../ele-pro-form/components/render-util";
 const fixedChildTypes = [
   { type: "tabs", childType: "tabPane" },
   { type: "collapse", childType: "collapseItem" },
@@ -15,7 +15,8 @@ function generateItemKey() {
 }
 function generateUniqueItemKey(items, keys) {
   let itemKey = generateItemKey();
-  while (true) {
+  const flag = true;
+  while (flag) {
     if (!findTree(items, (d) => d.key === itemKey) && (!keys || !keys.includes(itemKey))) {
       break;
     }
@@ -29,6 +30,22 @@ function getComponentItemByType(type, componentData) {
   }
   return componentData.map((groupItem) => groupItem.items).flat().find((item) => item.type === type);
 }
+function deepCloneObject(data, excludeUndefined) {
+  if (!data) {
+    return {};
+  }
+  const result = JSON.parse(JSON.stringify(data));
+  if (!excludeUndefined) {
+    const keys = Object.keys(data);
+    const resultKeys = Object.keys(result);
+    keys.forEach((key) => {
+      if (!resultKeys.includes(key)) {
+        result[key] = void 0;
+      }
+    });
+  }
+  return result;
+}
 function generateChildFormItem(parentType, childNo, childKey, componentData) {
   var _a, _b;
   let child;
@@ -46,7 +63,7 @@ function generateChildFormItem(parentType, childNo, childKey, componentData) {
     child.prop = childKey;
   }
   const componentItem = getComponentItemByType(child.type, componentData);
-  const initialProps = (componentItem == null ? void 0 : componentItem.initialProps) ? JSON.parse(JSON.stringify(componentItem.initialProps)) : void 0;
+  const initialProps = (componentItem == null ? void 0 : componentItem.initialProps) ? deepCloneObject(componentItem.initialProps) : void 0;
   if (initialProps) {
     child.props = initialProps;
   }
@@ -79,11 +96,9 @@ function generateBuildFormItem(type, formItems, componentData, itemTypeData) {
     type: componentItem.type,
     required: false,
     ...componentItem.initialData || {},
-    props: componentItem.initialProps ? JSON.parse(JSON.stringify(componentItem.initialProps)) : void 0
+    props: componentItem.initialProps ? deepCloneObject(componentItem.initialProps) : void 0
   };
-  const typeData = item.type ? [...itemTypeData || [], ...defaultItemTypeData].find(
-    (d) => d.type === item.type
-  ) : void 0;
+  const typeData = getItemTypeData(item, itemTypeData);
   if (!item.type || item.type === "div" || isContainerType(item, itemTypeData) && !(typeData == null ? void 0 : typeData.renderLabelText)) {
     item.label = "";
   }
@@ -137,7 +152,7 @@ function generateBuildFormItem(type, formItems, componentData, itemTypeData) {
   return item;
 }
 function getFormDataAndItems(item, componentData) {
-  const data = item ? JSON.parse(JSON.stringify(item)) : item;
+  const data = item ? deepCloneObject(item) : item;
   if (!data) {
     return { data: {}, items: [] };
   }
@@ -185,6 +200,7 @@ function getPropertyPath(data, excludeKeys, prefix) {
   return keys;
 }
 export {
+  deepCloneObject,
   fixedChildTypes,
   generateBuildFormItem,
   generateChildFormItem,

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

@@ -17,7 +17,6 @@ export declare function generateAddChildData(triggerItem: ProFormItemProps, trig
  * @param items 表单项数据
  * @param formItems 当前的全部表单项数据
  * @param overwriteProp prop 是否也重新生成
- * @param generateTypeName 是否生成类型名称到数据
  */
 export declare function itemsGenerateNewKey(items?: ProFormItemProps[] | ProFormItemProps, formItems?: ProFormItemProps[], overwriteProp?: boolean): void;
 /**

package/es/ele-pro-form-builder/components/build-util.js

@@ -1,5 +1,5 @@
-import { eachTree } from "../../utils/core";
-import { generateChildFormItem, generateUniqueItemKey } from "./build-core";
+import { eachTree } from "../../utils/common";
+import { generateChildFormItem, generateUniqueItemKey, deepCloneObject } from "./build-core";
 import { generateAddTableColData, generateAddTableRowData } from "./table-util";
 function generateAddChildData(triggerItem, triggerParent, triggerItemIndex, actionType, formItems, position, componentData) {
   if (!triggerItem.type) {
@@ -88,7 +88,7 @@ function generateCopyItemData(formItemId, formItems) {
   };
   eachTree(formItems, (item, index, parent) => {
     if (item.key === formItemId) {
-      const newItem = JSON.parse(JSON.stringify(item));
+      const newItem = deepCloneObject(item);
       itemsGenerateNewKey(newItem, formItems, true);
       result.addItems.push({
         item: newItem,

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

@@ -1,7 +1,8 @@
-import { defineComponent, openBlock, createElementBlock, Fragment, createBlock, unref, createCommentVNode } from "vue";
-import { InsertRowOutlined, InsertColumnOutlined, PlusSquareDashOutlined, CopyOutlined, DeleteOutlined, AppstoreAddOutlined } from "../../icons";
+import { defineComponent, createElementBlock, openBlock, Fragment, createBlock, createCommentVNode, unref } from "vue";
+import { InsertRowOutlined, InsertColumnOutlined, PlusSquareDashOutlined, CopyOutlined, DeleteOutlined, AppstoreAddOutlined } from "../../icons/index";
 import ToolButton from "./tool-button";
 const _sfc_main = /* @__PURE__ */ defineComponent({
+  ...{ name: "BuilderTools" },
   __name: "builder-tools",
   props: {
     itemType: {}
@@ -78,7 +79,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
             carouselItem: "插入走马灯",
             descriptions: "添加描述列表",
             descriptionsItem: "插入描述列表"
-          }[_ctx.itemType] || "添加",
+          }[_ctx.itemType],
           onClick: handleAdd
         }, null, 8, ["buttonProps", "tooltip"])) : createCommentVNode("", true),
         _ctx.itemType !== "tableCell" ? (openBlock(), createBlock(ToolButton, {

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

@@ -22,11 +22,11 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
     /** 组件库数据 */
     componentData: ComponentGroup[];
 }>>> & Readonly<{
+    onAddChildren?: ((parent: ProFormItemProps) => any) | undefined;
     "onUpdate:currentFormItemId"?: ((formItemId?: string | undefined) => any) | undefined;
     onUpdateChildLabel?: ((label: string, child: ProFormItemProps, field: string) => any) | undefined;
     onSortChildren?: ((children: ProFormItemProps[]) => any) | undefined;
     onDeleteChildren?: ((child: ProFormItemProps) => any) | undefined;
-    onAddChildren?: ((parent: ProFormItemProps) => any) | undefined;
 }>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
 export default _default;
 type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;

package/es/ele-pro-form-builder/components/children-edit.js

@@ -1,7 +1,8 @@
-import { defineComponent, openBlock, createElementBlock, Fragment, createBlock, unref, withCtx, createElementVNode, createVNode, withModifiers, toDisplayString, createCommentVNode, createSlots, createTextVNode } from "vue";
+import { defineComponent, computed, createElementBlock, openBlock, Fragment, createBlock, createCommentVNode, createVNode, unref, withCtx, createElementVNode, withModifiers, toDisplayString, createSlots, createTextVNode } from "vue";
 import VueDraggable from "vuedraggable";
 import { ElIcon, ElInput, ElButton } from "element-plus";
-import { DragOutlined, DeleteOutlined, PlusOutlined } from "../../icons";
+import { DragOutlined, DeleteOutlined, PlusSquareDashOutlined, PlusOutlined } from "../../icons/index";
+import { fixedChildTypes } from "./build-core";
 import ComponentName from "./component-name";
 const _hoisted_1 = { class: "ele-pro-form-builder-children-edit-item" };
 const _hoisted_2 = {
@@ -15,6 +16,7 @@ const _hoisted_3 = {
 const _hoisted_4 = ["onClick"];
 const _hoisted_5 = { class: "ele-pro-form-builder-children-edit-item-text" };
 const _sfc_main = /* @__PURE__ */ defineComponent({
+  ...{ name: "ChildrenEdit" },
   __name: "children-edit",
   props: {
     addBtnText: {},
@@ -25,6 +27,11 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
   setup(__props, { emit: __emit }) {
     const props = __props;
     const emit = __emit;
+    const isFixedChildType = computed(() => {
+      var _a;
+      const parentType = (_a = props.formItem) == null ? void 0 : _a.type;
+      return !!(parentType && fixedChildTypes.some((d) => d.type === parentType));
+    });
     const handleUpdateLabel = (value, item, field) => {
       emit("updateChildLabel", value, item, field);
     };
@@ -103,8 +110,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         }, 8, ["modelValue"])) : createCommentVNode("", true),
         createVNode(unref(ElButton), {
           size: "small",
-          icon: unref(PlusOutlined),
-          style: { width: "100%" },
+          icon: isFixedChildType.value ? unref(PlusSquareDashOutlined) : unref(PlusOutlined),
+          class: "ele-pro-form-builder-props-fluid-btn is-small-icon",
           onClick: handleAdd
         }, createSlots({ _: 2 }, [
           _ctx.addBtnText ? {

package/es/ele-pro-form-builder/components/code-editer.js

@@ -1,6 +1,7 @@
-import { defineComponent, openBlock, createBlock, unref } from "vue";
+import { defineComponent, createBlock, openBlock, unref } from "vue";
 import { ElInput } from "element-plus";
 const _sfc_main = /* @__PURE__ */ defineComponent({
+  ...{ name: "CodeEditer" },
   __name: "code-editer",
   props: {
     modelValue: {}

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

@@ -1,12 +1,19 @@
+import { EleProFormProps } from '../../ele-app/plus';
 import { ProFormItemProps, ProFormItemTypeData } from '../../ele-pro-form/types';
-import { ComponentGroup, TemplateFormConfig } from '../types';
+import { ComponentGroup } from '../types';
 
+/**
+ * 判断选项数据是否是数组类型
+ * @param item 表单项
+ * @param options 选项数据
+ */
+export declare function isArrayOptions(item?: ProFormItemProps, options?: any): boolean;
 /**
  * 生成 ElForm 底栏代码
  * @param config 表单配置数据
  * @param showFooterExpand 是否需要展开收起按钮
  */
-export declare function generateFooterCode(config: TemplateFormConfig, showFooterExpand?: boolean): string;
+export declare function generateFooterCode(config: EleProFormProps, showFooterExpand?: boolean): string;
 /**
  * 生成 ElFormItem 所有属性代码
  * @param item 表单项
@@ -57,7 +64,7 @@ export declare function getDivTag(item: ProFormItemProps): any;
  * @param componentData 组件库数据
  * @param itemTypeData 高级表单组件类型数据
  */
-export declare function generateContentCode(config: TemplateFormConfig, showFooterExpand: boolean | undefined, componentData?: ComponentGroup[], itemTypeData?: ProFormItemTypeData[]): string;
+export declare function generateContentCode(config: EleProFormProps, showFooterExpand: boolean | undefined, componentData?: ComponentGroup[], itemTypeData?: ProFormItemTypeData[]): string;
 /**
  * 获取上传组件表单验证方法代码
  * @param item 表单项
@@ -68,8 +75,9 @@ export declare function getUploadValidatorCode(item: ProFormItemProps): string;
  * @param items 表单项数据
  * @param componentData 组件库数据
  * @param itemTypeData 高级表单组件类型数据
+ * @param requiredLang 默认的必填提示文本
  */
-export declare function generateRuleCode(items: ProFormItemProps[], componentData?: ComponentGroup[], itemTypeData?: ProFormItemTypeData[]): any;
+export declare function generateRuleCode(items: ProFormItemProps[], componentData?: ComponentGroup[], itemTypeData?: ProFormItemTypeData[], requiredLang?: string): any;
 /**
  * 获取生成 ElForm 代码时组件的属性
  * @param item 表单项
@@ -82,8 +90,9 @@ export declare function getComponentProps(item: ProFormItemProps, componentData?
 /**
  * 获取导入代码和变量声明代码
  * @param config 表单配置
+ * @param componentData 组件库数据
  */
-export declare function getImportAndVarCode(config: TemplateFormConfig): {
+export declare function getImportAndVarCode(config: EleProFormProps, componentData?: ComponentGroup[]): {
     imports: string[];
     codes: string[];
     proImports: string[];
@@ -101,10 +110,12 @@ export declare function getElNormalizeItems(formItems?: ProFormItemProps[], comp
  * @param data 表单配置数据
  * @param componentData 组件库数据
  * @param itemTypeData 高级表单组件类型数据
+ * @param requiredLang 默认的必填提示文本
  */
-export declare function generateElFormCode(data?: TemplateFormConfig, componentData?: ComponentGroup[], itemTypeData?: ProFormItemTypeData[]): string;
+export declare function generateElFormCode(data?: EleProFormProps, componentData?: ComponentGroup[], itemTypeData?: ProFormItemTypeData[], requiredLang?: string): string;
 /**
  * 生成 ProForm 代码
  * @param data 表单配置数据
+ * @param componentData 组件库数据
  */
-export declare function generateProFormCode(data?: TemplateFormConfig): string;
+export declare function generateProFormCode(data?: EleProFormProps, componentData?: ComponentGroup[]): string;