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

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

@@ -0,0 +1,121 @@
+import { EleProFormProps } from '../../ele-app/plus';
+import { ProFormItemProps, ProFormItemTypeData } from '../../ele-pro-form/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: EleProFormProps, showFooterExpand?: boolean): string;
+/**
+ * 生成 ElFormItem 所有属性代码
+ * @param item 表单项
+ * @param indentSize 属性换行的缩进空格数量
+ * @param indentChar 上层代码缩进
+ */
+export declare function generateFormItemProps(item: ProFormItemProps, indentSize?: number, indentChar?: string): string;
+/**
+ * 生成 ElCol 所有属性代码
+ * @param item 表单项
+ * @param grid 父级的 grid 属性
+ * @param indentSize 属性换行的缩进空格数量
+ * @param indentChar 上层代码缩进
+ */
+export declare function generateColProps(item?: ProFormItemProps, grid?: Record<string, any> | boolean, indentSize?: number, indentChar?: string): string;
+/**
+ * 生成容器组件和非单标签组件的所有属性代码
+ * @param item 表单项
+ * @param indentSize 属性换行的缩进空格数量
+ * @param indentChar 上层代码缩进
+ * @param omitKeys 排除的属性名
+ */
+export declare function generateComponentProps(item: ProFormItemProps, indentSize?: number, indentChar?: string, omitKeys?: string[]): string;
+/**
+ * 生成 ElForm 代码时获取组件使用的组件名称
+ * @param item 表单项
+ * @param componentData 组件库数据
+ */
+export declare function getItemComponentTag(item: ProFormItemProps, componentData?: ComponentGroup[]): string;
+/**
+ * 生成展示型组件和单标签组件的完整代码
+ * @param item 表单项
+ * @param indentSize 属性换行的缩进空格数量
+ * @param indentChar 上层代码缩进
+ * @param content 展示型组件的文本内容
+ * @param componentData 组件库数据
+ */
+export declare function generateItemComponentCode(item: ProFormItemProps, indentSize: number | undefined, indentChar: string | undefined, content: string | undefined, componentData?: ComponentGroup[]): string;
+/**
+ * 生成 ElForm 代码时获取 div 容器使用的组件名称
+ * @param item 表单项
+ */
+export declare function getDivTag(item: ProFormItemProps): any;
+/**
+ * 生成 ElForm 内容代码
+ * @param config 表单配置数据
+ * @param showFooterExpand 是否需要展开收起按钮
+ * @param componentData 组件库数据
+ * @param itemTypeData 高级表单组件类型数据
+ */
+export declare function generateContentCode(config: EleProFormProps, showFooterExpand: boolean | undefined, componentData?: ComponentGroup[], itemTypeData?: ProFormItemTypeData[]): string;
+/**
+ * 获取上传组件表单验证方法代码
+ * @param item 表单项
+ */
+export declare function getUploadValidatorCode(item: ProFormItemProps): string;
+/**
+ * 生成 ElForm 验证规则代码
+ * @param items 表单项数据
+ * @param componentData 组件库数据
+ * @param itemTypeData 高级表单组件类型数据
+ * @param requiredLang 默认的必填提示文本
+ */
+export declare function generateRuleCode(items: ProFormItemProps[], componentData?: ComponentGroup[], itemTypeData?: ProFormItemTypeData[], requiredLang?: string): any;
+/**
+ * 获取生成 ElForm 代码时组件的属性
+ * @param item 表单项
+ * @param componentData 组件库数据
+ * @param itemTypeData 高级表单组件类型数据
+ */
+export declare function getComponentProps(item: ProFormItemProps, componentData?: ComponentGroup[], itemTypeData?: ProFormItemTypeData[]): {
+    [x: string]: any;
+};
+/**
+ * 获取导入代码和变量声明代码
+ * @param config 表单配置
+ * @param componentData 组件库数据
+ */
+export declare function getImportAndVarCode(config: EleProFormProps, componentData?: ComponentGroup[]): {
+    imports: string[];
+    codes: string[];
+    proImports: string[];
+    proCodes: string[];
+};
+/**
+ * 取消表单项数据的多余属性
+ * @param formItems 表单项数据
+ * @param componentData 组件库数据
+ * @param itemTypeData 高级表单组件类型数据
+ */
+export declare function getElNormalizeItems(formItems?: ProFormItemProps[], componentData?: ComponentGroup[], itemTypeData?: ProFormItemTypeData[]): ProFormItemProps[];
+/**
+ * 生成 ElForm 代码
+ * @param data 表单配置数据
+ * @param componentData 组件库数据
+ * @param itemTypeData 高级表单组件类型数据
+ * @param requiredLang 默认的必填提示文本
+ */
+export declare function generateElFormCode(data?: EleProFormProps, componentData?: ComponentGroup[], itemTypeData?: ProFormItemTypeData[], requiredLang?: string): string;
+/**
+ * 生成 ProForm 代码
+ * @param data 表单配置数据
+ * @param componentData 组件库数据
+ */
+export declare function generateProFormCode(data?: EleProFormProps, componentData?: ComponentGroup[]): string;

package/lib/ele-pro-form-builder/components/code-js-var.cjs

@@ -3,31 +3,11 @@ var __defProp = Object.defineProperty;
 var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
 var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const vue = require("vue");
-const ALL_ICONS = require("../../icons");
-function _interopNamespaceDefault(e) {
-  const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
-  if (e) {
-    for (const k in e) {
-      if (k !== "default") {
-        const d = Object.getOwnPropertyDescriptor(e, k);
-        Object.defineProperty(n, k, d.get ? d : {
-          enumerable: true,
-          get: () => e[k]
-        });
-      }
-    }
-  }
-  n.default = e;
-  return Object.freeze(n);
-}
-const ALL_ICONS__namespace = /* @__PURE__ */ _interopNamespaceDefault(ALL_ICONS);
+const renderCore = require("../../ele-pro-form/components/render-core");
 class JsVar {
   constructor(props) {
-    /** 生成 ElForm 代码时显示的变量名称 */
+    /** 生成代码时显示的变量名称 */
     __publicField(this, "name");
-    /** 生成 ProForm 代码时显示的变量名称 */
-    __publicField(this, "proName");
     /** 生成 ElForm 代码时添加的声明代码 */
     __publicField(this, "code");
     /** 生成 ProForm 代码时添加的声明代码 */
@@ -36,17 +16,16 @@ class JsVar {
     __publicField(this, "imports");
     /** 生成 ProForm 代码时添加的导入代码 */
     __publicField(this, "proImports");
-    /** ProForm 预览界面获取对应的 js 变量 */
-    __publicField(this, "jsCode");
+    /** 原始数据类型 */
+    __publicField(this, "dataType");
     /** 转 JSON 时标识是 JsVar 对象 */
     __publicField(this, "__isJsVar", true);
     this.name = props.name;
-    this.proName = props.proName;
     this.code = props.code;
     this.proCode = props.proCode;
     this.imports = props.imports;
     this.proImports = props.proImports;
-    this.jsCode = props.jsCode;
+    this.dataType = props.dataType;
   }
 }
 function removePrefixStr(content, prefix) {
@@ -63,85 +42,23 @@ function removePrefixStr(content, prefix) {
   return result;
 }
 function transformJsVar(jv) {
-  if (jv == null) {
-    return;
-  }
-  if (typeof jv === "string") {
-    if (jv.startsWith("__PRO_FORM_ICON__") || jv.startsWith("/*__PRO_FORM_ICON__*/")) {
-      const icon = removePrefixStr(jv, [
-        "__PRO_FORM_ICON__",
-        "/*__PRO_FORM_ICON__*/"
-      ]);
-      return new JsVar({
-        name: icon,
-        proName: `markRaw(${icon})`,
-        imports: [`import { ${icon} } from '@/components/icons';`],
-        proImports: [
-          `import { markRaw } from 'vue';`,
-          `import { ${icon} } from '@/components/icons';`
-        ],
-        jsCode: () => vue.markRaw(ALL_ICONS__namespace[icon] ?? ALL_ICONS__namespace.UserOutlined)
-      });
+  if (jv != null) {
+    if (typeof jv === "string") {
+      if (jv.startsWith(renderCore.codeStringPrefix)) {
+        const codeName = removePrefixStr(jv, [renderCore.codeStringPrefix]);
+        return new JsVar({ name: codeName });
+      }
     }
-    if (jv.startsWith("__PRO_FORM__") || jv.startsWith("/*__PRO_FORM__*/")) {
-      const codeName = removePrefixStr(jv, [
-        "__PRO_FORM__",
-        "/*__PRO_FORM__*/"
-      ]);
-      if (codeName === "searchExpand") {
-        return new JsVar({
-          name: `form.${codeName}`,
-          proName: `'${codeName}'`,
-          jsCode: (form) => {
-            return () => form.searchExpand ?? false;
-          }
-        });
+    if (typeof jv === "object") {
+      if (jv instanceof JsVar) {
+        return jv;
+      }
+      if (jv.__isJsVar === true && jv.name != null) {
+        return new JsVar(jv);
       }
-      return new JsVar({
-        name: codeName.replace(/formItems\.length/g, "formItemsLength"),
-        proName: codeName,
-        code: "const formItemsLength = 0;",
-        jsCode: (form, config) => {
-          try {
-            return new Function(
-              "form",
-              "items",
-              "searchExpand",
-              "formItems",
-              "formData",
-              `return (${codeName})`
-            )(
-              form,
-              config.items,
-              form.searchExpand ?? false,
-              config.items,
-              form
-            );
-          } catch (_e) {
-            return codeName;
-          }
-        }
-      });
     }
   }
-  if (typeof jv !== "object") {
-    return;
-  }
-  if (jv instanceof JsVar) {
-    return jv;
-  }
-  if (jv.__isJsVar === true && (jv.name != null || jv.proName != null)) {
-    return new JsVar(jv);
-  }
-}
-function transformProJsVar(jv) {
-  const jsVar = transformJsVar(jv);
-  if (jsVar != null) {
-    return new JsVar({ ...jsVar, name: jsVar.proName });
-  }
-  return jsVar;
 }
 exports.JsVar = JsVar;
 exports.removePrefixStr = removePrefixStr;
 exports.transformJsVar = transformJsVar;
-exports.transformProJsVar = transformProJsVar;

package/lib/ele-pro-form-builder/components/code-js-var.d.ts

@@ -1,17 +1,9 @@
-import { TemplateFormConfig } from '../types';
-
-/**
- * 预览界面获取对应的 js 变量
- */
-export type JsCodeFunc = (form: Record<string, any>, config: TemplateFormConfig) => any;
 /**
  * 标识 js 变量名
  */
 export declare class JsVar {
-    /** 生成 ElForm 代码时显示的变量名称 */
+    /** 生成代码时显示的变量名称 */
     name?: string;
-    /** 生成 ProForm 代码时显示的变量名称 */
-    proName?: string;
     /** 生成 ElForm 代码时添加的声明代码 */
     code?: string;
     /** 生成 ProForm 代码时添加的声明代码 */
@@ -20,8 +12,8 @@ export declare class JsVar {
     imports?: string[];
     /** 生成 ProForm 代码时添加的导入代码 */
     proImports?: string[];
-    /** ProForm 预览界面获取对应的 js 变量 */
-    jsCode?: JsCodeFunc;
+    /** 原始数据类型 */
+    dataType?: string;
     /** 转 JSON 时标识是 JsVar 对象 */
     __isJsVar: boolean;
     constructor(props: Omit<JsVar, '__isJsVar'>);
@@ -33,12 +25,7 @@ export declare class JsVar {
  */
 export declare function removePrefixStr(content: string, prefix: string | string[]): string;
 /**
- * JSON 数据转换 JsVar 对象
+ * JSON 数据值转换 JsVar 对象
  * @param jv JSON 解析后的值
  */
 export declare function transformJsVar(jv: any): JsVar | undefined;
-/**
- * 生成 ProForm 代码时的 JSON 数据转换 JsVar 对象
- * @param jv JSON 解析后的值
- */
-export declare function transformProJsVar(jv: any): JsVar | undefined;

package/lib/ele-pro-form-builder/components/code-preview.cjs

@@ -0,0 +1,122 @@
+"use strict";
+const vue = require("vue");
+const elementPlus = require("element-plus");
+const index = require("../../icons/index");
+const common = require("../../utils/common");
+const hook = require("../../utils/hook");
+const EleModal = require("../../ele-modal/index");
+const EleTabBar = require("../../ele-tab-bar/index");
+const codeGenerator = require("./code-generator");
+const CodeViewer = require("./code-viewer");
+const _hoisted_1 = { class: "ele-pro-form-builder-code-view" };
+const _hoisted_2 = { class: "ele-pro-form-builder-code-body" };
+const _sfc_main = /* @__PURE__ */ vue.defineComponent({
+  ...{ name: "CodePreview" },
+  __name: "code-preview",
+  props: {
+    modelValue: { type: Boolean },
+    config: {},
+    componentData: {},
+    codeViewerComponent: { type: [String, Object, Function] }
+  },
+  emits: ["update:modelValue"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const [setCopied, resetCopied, copied] = hook.useTimer(1e3);
+    const tabItems = [
+      { value: "ProForm", label: "ProForm" },
+      { value: "ElForm", label: "ElForm" }
+    ];
+    const tabActive = vue.ref("ProForm");
+    const codeContent = vue.ref("");
+    const generateData = ["", ""];
+    const handleUpdateModelValue = (visible) => {
+      emit("update:modelValue", visible);
+    };
+    const setCodeContent = () => {
+      codeContent.value = generateData[tabActive.value === "ElForm" ? 1 : 0];
+    };
+    const handleCopy = () => {
+      common.copyText(codeContent.value).then(() => {
+        setCopied();
+      }).catch((error) => {
+        console.error(error);
+        resetCopied();
+      });
+    };
+    const handleDownload = () => {
+      common.download(codeContent.value, "index.vue", "text/plain;charset=utf-8");
+    };
+    vue.watch(
+      () => props.modelValue,
+      (visible) => {
+        if (visible) {
+          const proCode = codeGenerator.generateProFormCode(props.config, props.componentData);
+          const elCode = codeGenerator.generateElFormCode(props.config, props.componentData);
+          generateData[0] = proCode;
+          generateData[1] = elCode;
+          setCodeContent();
+        }
+      }
+    );
+    vue.watch(tabActive, () => {
+      setCodeContent();
+    });
+    return (_ctx, _cache) => {
+      return vue.openBlock(), vue.createBlock(EleModal, {
+        width: 980,
+        maxable: true,
+        position: "center",
+        title: "生成代码",
+        modelValue: _ctx.modelValue,
+        closeOnClickModal: false,
+        destroyOnClose: true,
+        class: "ele-pro-form-builder-code-preview",
+        "onUpdate:modelValue": handleUpdateModelValue
+      }, {
+        default: vue.withCtx(() => [
+          vue.createElementVNode("div", _hoisted_1, [
+            vue.createVNode(EleTabBar, {
+              modelValue: tabActive.value,
+              "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => tabActive.value = $event),
+              items: tabItems
+            }, {
+              extra: vue.withCtx(() => [
+                vue.createVNode(vue.unref(elementPlus.ElIcon), {
+                  class: vue.normalizeClass([
+                    "ele-pro-form-builder-code-icon-tool",
+                    { "is-copied": vue.unref(copied) }
+                  ]),
+                  title: "复制",
+                  onClick: handleCopy
+                }, {
+                  default: vue.withCtx(() => [
+                    vue.unref(copied) ? (vue.openBlock(), vue.createBlock(vue.unref(index.CheckOutlined), { key: 0 })) : (vue.openBlock(), vue.createBlock(vue.unref(index.CopyOutlined), { key: 1 }))
+                  ]),
+                  _: 1
+                }, 8, ["class"]),
+                vue.createVNode(vue.unref(elementPlus.ElIcon), {
+                  class: "ele-pro-form-builder-code-icon-tool",
+                  title: "下载",
+                  onClick: handleDownload
+                }, {
+                  default: vue.withCtx(() => [
+                    vue.createVNode(vue.unref(index.DownloadOutlined))
+                  ]),
+                  _: 1
+                })
+              ]),
+              _: 1
+            }, 8, ["modelValue"]),
+            vue.createElementVNode("div", _hoisted_2, [
+              (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(_ctx.codeViewerComponent || CodeViewer), { code: codeContent.value }, null, 8, ["code"]))
+            ])
+          ])
+        ]),
+        _: 1
+      }, 8, ["modelValue"]);
+    };
+  }
+});
+module.exports = _sfc_main;

package/lib/ele-pro-form-builder/components/code-preview.d.ts

@@ -0,0 +1,37 @@
+import { UserComponent } from '../../ele-app/types';
+import { EleProFormProps } from '../../ele-app/plus';
+import { ComponentGroup } from '../types';
+
+declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<__VLS_TypePropsToRuntimeProps<{
+    /** 弹窗是否打开 */
+    modelValue?: boolean;
+    /** 表单配置数据 */
+    config?: EleProFormProps;
+    /** 组件库数据 */
+    componentData?: ComponentGroup[];
+    /** 代码查看器组件 */
+    codeViewerComponent?: UserComponent;
+}>>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    "update:modelValue": (visible?: boolean | undefined) => void;
+}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<__VLS_TypePropsToRuntimeProps<{
+    /** 弹窗是否打开 */
+    modelValue?: boolean;
+    /** 表单配置数据 */
+    config?: EleProFormProps;
+    /** 组件库数据 */
+    componentData?: ComponentGroup[];
+    /** 代码查看器组件 */
+    codeViewerComponent?: UserComponent;
+}>>> & Readonly<{
+    "onUpdate:modelValue"?: ((visible?: boolean | undefined) => any) | undefined;
+}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+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;
+    };
+};