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

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

@@ -0,0 +1,110 @@
+import { ProFormItemProps, ProFormItemTypeData } from '../../ele-pro-form/types';
+import { ComponentGroup, TemplateFormConfig } from '../types';
+
+/**
+ * 生成 ElForm 底栏代码
+ * @param config 表单配置数据
+ * @param showFooterExpand 是否需要展开收起按钮
+ */
+export declare function generateFooterCode(config: TemplateFormConfig, 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: TemplateFormConfig, showFooterExpand: boolean | undefined, componentData?: ComponentGroup[], itemTypeData?: ProFormItemTypeData[]): string;
+/**
+ * 获取上传组件表单验证方法代码
+ * @param item 表单项
+ */
+export declare function getUploadValidatorCode(item: ProFormItemProps): string;
+/**
+ * 生成 ElForm 验证规则代码
+ * @param items 表单项数据
+ * @param componentData 组件库数据
+ * @param itemTypeData 高级表单组件类型数据
+ */
+export declare function generateRuleCode(items: ProFormItemProps[], componentData?: ComponentGroup[], itemTypeData?: ProFormItemTypeData[]): any;
+/**
+ * 获取生成 ElForm 代码时组件的属性
+ * @param item 表单项
+ * @param componentData 组件库数据
+ * @param itemTypeData 高级表单组件类型数据
+ */
+export declare function getComponentProps(item: ProFormItemProps, componentData?: ComponentGroup[], itemTypeData?: ProFormItemTypeData[]): {
+    [x: string]: any;
+};
+/**
+ * 获取导入代码和变量声明代码
+ * @param config 表单配置
+ */
+export declare function getImportAndVarCode(config: TemplateFormConfig): {
+    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 高级表单组件类型数据
+ */
+export declare function generateElFormCode(data?: TemplateFormConfig, componentData?: ComponentGroup[], itemTypeData?: ProFormItemTypeData[]): string;
+/**
+ * 生成 ProForm 代码
+ * @param data 表单配置数据
+ */
+export declare function generateProFormCode(data?: TemplateFormConfig): string;

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

@@ -0,0 +1,61 @@
+"use strict";
+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 renderUtil = require("../../ele-pro-form/components/render-util");
+class JsVar {
+  constructor(props) {
+    /** 生成代码时显示的变量名称 */
+    __publicField(this, "name");
+    /** 生成 ElForm 代码时添加的声明代码 */
+    __publicField(this, "code");
+    /** 生成 ProForm 代码时添加的声明代码 */
+    __publicField(this, "proCode");
+    /** 生成 ElForm 代码时添加的导入代码 */
+    __publicField(this, "imports");
+    /** 生成 ProForm 代码时添加的导入代码 */
+    __publicField(this, "proImports");
+    /** 转 JSON 时标识是 JsVar 对象 */
+    __publicField(this, "__isJsVar", true);
+    this.name = props.name;
+    this.code = props.code;
+    this.proCode = props.proCode;
+    this.imports = props.imports;
+    this.proImports = props.proImports;
+  }
+}
+function removePrefixStr(content, prefix) {
+  if (typeof prefix === "string") {
+    if (content.startsWith(prefix)) {
+      return content.slice(prefix.length);
+    }
+    return content;
+  }
+  let result = content;
+  prefix.forEach((temp) => {
+    result = removePrefixStr(result, temp);
+  });
+  return result;
+}
+function transformJsVar(jv) {
+  if (jv != null) {
+    if (typeof jv === "string") {
+      if (jv.startsWith(renderUtil.codeStringPrefix)) {
+        const codeName = removePrefixStr(jv, [renderUtil.codeStringPrefix]);
+        return new JsVar({ name: codeName });
+      }
+    }
+    if (typeof jv === "object") {
+      if (jv instanceof JsVar) {
+        return jv;
+      }
+      if (jv.__isJsVar === true && jv.name != null) {
+        return new JsVar(jv);
+      }
+    }
+  }
+}
+exports.JsVar = JsVar;
+exports.removePrefixStr = removePrefixStr;
+exports.transformJsVar = transformJsVar;

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

@@ -0,0 +1,29 @@
+/**
+ * 标识 js 变量名
+ */
+export declare class JsVar {
+    /** 生成代码时显示的变量名称 */
+    name?: string;
+    /** 生成 ElForm 代码时添加的声明代码 */
+    code?: string;
+    /** 生成 ProForm 代码时添加的声明代码 */
+    proCode?: string;
+    /** 生成 ElForm 代码时添加的导入代码 */
+    imports?: string[];
+    /** 生成 ProForm 代码时添加的导入代码 */
+    proImports?: string[];
+    /** 转 JSON 时标识是 JsVar 对象 */
+    __isJsVar: boolean;
+    constructor(props: Omit<JsVar, '__isJsVar'>);
+}
+/**
+ * 移除字符串前缀
+ * @param content 字符串
+ * @param prefix 一个或多个前缀
+ */
+export declare function removePrefixStr(content: string, prefix: string | string[]): string;
+/**
+ * JSON 数据值转换 JsVar 对象
+ * @param jv JSON 解析后的值
+ */
+export declare function transformJsVar(jv: any): JsVar | undefined;

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

@@ -0,0 +1,150 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const proTemplate = `<template>
+  <pro-form
+    v-bind="config"
+    :model="form"<%# if(d.showFooterExpand){ %>
+    v-model:search-expand="form.searchExpand"<%# } %>
+    @updateValue="setFieldValue"
+    @submit="handleSubmit"
+    @reset="handleReset"
+  />
+</template>
+
+<script setup>
+  <% d.proFormImportCode %><%# if(d.proFormVarCode){ %>
+
+  <% d.proFormVarCode %><%# } %>
+
+  /** 表单配置 */
+  const config = reactive(<% d.proFormConfigCode %>);
+
+  /** 表单数据 */
+  const [form, resetFields, _assignFields, setFieldValue] = useFormData(
+    getFormInitValue(config.items)
+  );
+
+  /** 提交表单 */
+  const handleSubmit = (form) => {
+    console.log(form);
+  };
+
+  /** 重置表单 */
+  const handleReset = () => {<%# if(d.showFooterExpand){ %>
+    resetFields(void 0, ['searchExpand']);<%# }else{ %>
+    resetFields();<%# } %>
+  };
+<\/script>
+`;
+const formTemplate = `<template>
+  <el-form
+    ref="formRef"
+    :model="form"
+    :rules="rules"<% d.formPropsCode %>
+    @submit.prevent=""
+  ><% d.formContentCode %>
+  </el-form>
+</template>
+
+<script setup>
+  <% d.formImportCode %>
+
+  /** 表单组件 */
+  const formRef = ref(null);
+
+  /** 表单数据 */
+  const [form, resetFields, _assignFields] = useFormData(<% d.modelCode %>);
+
+  /** 表单验证规则 */
+  const rules = reactive(<% d.formRuleCode %>);
+
+  /** 提交表单 */
+  const handleSubmit = () => {
+    formRef.value?.validate?.((valid) => {
+      if (!valid) {
+        return;
+      }
+      console.log(form);
+    });
+  };
+
+  /** 重置表单 */
+  const handleReset = () => {<%# if(d.showFooterExpand){ %>
+    resetFields(void 0, ['searchExpand']);<%# }else{ %>
+    resetFields();<%# } %>
+    nextTick(() => {
+      nextTick(() => {
+        formRef.value?.clearValidate?.();
+      });
+    });
+  };
+
+  /** 搜索表单是否展开 */
+  const searchExpand = computed(() => form.searchExpand);<%# if(d.formVarCode){ %>
+
+  <% d.formVarCode %><%# } %>
+<\/script>
+`;
+const contentTemplate = `<%# getFormContent(d.items,d.grid,d.rowProps,d.indentSize,d.contentExtra,d.contentExtraColProps); function getFormContent(items,grid,rowProps,indentSize,contentExtra,contentExtraColProps){ var indentChar = Array.from({length:indentSize||0}).fill(' ').join(''); if(!grid){ (items||[]).forEach(function(item){ %>
+<% indentChar %><%# getFormItem(item,indentSize); }); if(contentExtra){ %>
+<% indentChar %><% d.addIndentChar(contentExtra,indentChar) %><%# } }else if(items&&items.length){ %>
+<% indentChar %><el-row<% d.addIndentChar(d.generatePropsCode(rowProps,null,2,true),indentChar) %>><%# items.forEach(function(item){ %>
+<% indentChar %>  <el-col<% d.generateColProps(item,grid,4,indentChar) %>>
+<% indentChar %>    <%# getFormItem(item,(indentSize||0)+4); %>
+<% indentChar %>  </el-col><%# }); if(contentExtra){ %>
+<% indentChar %>  <el-col<% d.generateColProps(null,contentExtraColProps,4,indentChar) %>>
+<% indentChar %>    <% d.addIndentChar(contentExtra,'    '+indentChar) %>
+<% indentChar %>  </el-col><%# } %>
+<% indentChar %></el-row><%# } } function getFormItem(item,indentSize){ var indentChar = Array.from({length:indentSize||0}).fill(' ').join(''); if(item.type=='icon'){ %><el-icon<% d.generateComponentProps(item,2,indentChar) %>><%# if(item.props&&item.props.name){ %>
+<% indentChar %>  <<% item.props.name %> /><%# } getFormContent(item.children,item.grid,item.rowProps,indentSize+2); %>
+<% indentChar %></el-icon><%# }else if(item.type=='tabs'){ %><ele-tabs<% d.generateComponentProps(item,2,indentChar) %>><%# (item.children||[]).forEach(function(tabItem){ %>
+<% indentChar %>  <template #<% tabItem.prop %>><%# getFormContent(tabItem.children,tabItem.grid,tabItem.rowProps,indentSize+4); %>
+<% indentChar %>  </template><%# }); %>
+<% indentChar %></ele-tabs><%# }else if(item.type=='div'){ var divTagName = d.getDivTag(item); %><<% divTagName %><% d.generateComponentProps(item,2,indentChar) %>><%# const divHTML = (item.props||{}).innerHTML||item.label; if(divHTML){ %>
+<% indentChar %>  <% divHTML %><%# } getFormContent(item.children,item.grid,item.rowProps,indentSize+2); %>
+<% indentChar %></<% divTagName %>><%# }else if(d.isContainerType(item)){ %><<% d.getComponentTag(item) %><% d.generateComponentProps(item,2,indentChar) %>><%# if(item.label){ %>
+<% indentChar %>  <% item.label %><%# } getFormContent(item.children,item.grid,item.rowProps,indentSize+2); %>
+<% indentChar %></<% d.getComponentTag(item) %>><%# }else{ %><el-form-item<% d.generateFormItemProps(item,2,indentChar) %>>
+<% indentChar %>  <%# if((item.type=='select'||item.type=='multipleSelect')&&Array.isArray((item.props||{}).options||[])){ %><el-select<% d.generateComponentProps(item,4,indentChar,['options']) %>><%# ((item.props||{}).options||[]).forEach(function(opt){ %>
+<% indentChar %>    <el-option<% d.generatePropsCode(opt,true) %> /><%# }); %>
+<% indentChar %>  </el-select><%# }else if(item.type=='radio'&&Array.isArray((item.props||{}).options||[])){ %><el-radio-group<% d.generateComponentProps(item,4,indentChar,['options']) %>><%# ((item.props||{}).options||[]).forEach(function(opt){ %>
+<% indentChar %>    <el-radio<% d.generatePropsCode(opt,true) %> /><%# }); %>
+<% indentChar %>  </el-radio-group><%# }else if(item.type=='radioButton'&&Array.isArray((item.props||{}).options||[])){ %><el-radio-group<% d.generateComponentProps(item,4,indentChar,['options']) %>><%# ((item.props||{}).options||[]).forEach(function(opt){ %>
+<% indentChar %>    <el-radio-button<% d.generatePropsCode(opt,true) %> /><%# }); %>
+<% indentChar %>  </el-radio-group><%# }else if(item.type=='checkbox'&&Array.isArray((item.props||{}).options||[])){ %><el-checkbox-group<% d.generateComponentProps(item,4,indentChar,['options']) %>><%# ((item.props||{}).options||[]).forEach(function(opt){ %>
+<% indentChar %>    <el-checkbox<% d.generatePropsCode(opt,true) %> /><%# }); %>
+<% indentChar %>  </el-checkbox-group><%# }else if(item.type=='checkboxButton'&&Array.isArray((item.props||{}).options||[])){ %><el-checkbox-group<% d.generateComponentProps(item,4,indentChar,['options']) %>><%# ((item.props||{}).options||[]).forEach(function(opt){ %>
+<% indentChar %>    <el-checkbox-button<% d.generatePropsCode(opt,true) %> /><%# }); %>
+<% indentChar %>  </el-checkbox-group><%# }else if(item.type=='text'){ %><ele-text<% d.generateComponentProps(item,4,indentChar) %>>
+<% indentChar %>    {{ form.<% item.prop %> }}
+<% indentChar %>  </ele-text><%# }else{ %><% d.generateComponentCode(item,4,indentChar) %><%# } %>
+<% indentChar %></el-form-item><%# } } %>`;
+const footerTemplate = `<el-form-item<% d.footerPropsCode %>>
+  <div :style="<% d.footerStyleCode %>">
+    <el-button type="primary" @click="handleSubmit"><% d.showFooterExpand?'搜索':'提交' %></el-button>
+    <el-button @click="handleReset">重置</el-button><%# if(d.showFooterExpand){ %>
+    <el-link
+      type="primary"
+      :underline="false"
+      style="margin-left: 12px"
+      @click="form.searchExpand = !form.searchExpand"
+    >
+      <template v-if="form.searchExpand">
+        <span>收起</span>
+        <el-icon style="vertical-align: -1px">
+          <ArrowUp />
+        </el-icon>
+      </template>
+      <template v-else>
+        <span>展开</span>
+        <el-icon style="vertical-align: -2px">
+          <ArrowDown />
+        </el-icon>
+      </template>
+    </el-link><%# } %>
+  </div>
+</el-form-item>`;
+exports.contentTemplate = contentTemplate;
+exports.footerTemplate = footerTemplate;
+exports.formTemplate = formTemplate;
+exports.proTemplate = proTemplate;

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

@@ -0,0 +1,16 @@
+/**
+ * ProForm 代码生成模板
+ */
+export declare const proTemplate = "<template>\n  <pro-form\n    v-bind=\"config\"\n    :model=\"form\"<%# if(d.showFooterExpand){ %>\n    v-model:search-expand=\"form.searchExpand\"<%# } %>\n    @updateValue=\"setFieldValue\"\n    @submit=\"handleSubmit\"\n    @reset=\"handleReset\"\n  />\n</template>\n\n<script setup>\n  <% d.proFormImportCode %><%# if(d.proFormVarCode){ %>\n\n  <% d.proFormVarCode %><%# } %>\n\n  /** \u8868\u5355\u914D\u7F6E */\n  const config = reactive(<% d.proFormConfigCode %>);\n\n  /** \u8868\u5355\u6570\u636E */\n  const [form, resetFields, _assignFields, setFieldValue] = useFormData(\n    getFormInitValue(config.items)\n  );\n\n  /** \u63D0\u4EA4\u8868\u5355 */\n  const handleSubmit = (form) => {\n    console.log(form);\n  };\n\n  /** \u91CD\u7F6E\u8868\u5355 */\n  const handleReset = () => {<%# if(d.showFooterExpand){ %>\n    resetFields(void 0, ['searchExpand']);<%# }else{ %>\n    resetFields();<%# } %>\n  };\n</script>\n";
+/**
+ * ElForm 代码生成模板
+ */
+export declare const formTemplate = "<template>\n  <el-form\n    ref=\"formRef\"\n    :model=\"form\"\n    :rules=\"rules\"<% d.formPropsCode %>\n    @submit.prevent=\"\"\n  ><% d.formContentCode %>\n  </el-form>\n</template>\n\n<script setup>\n  <% d.formImportCode %>\n\n  /** \u8868\u5355\u7EC4\u4EF6 */\n  const formRef = ref(null);\n\n  /** \u8868\u5355\u6570\u636E */\n  const [form, resetFields, _assignFields] = useFormData(<% d.modelCode %>);\n\n  /** \u8868\u5355\u9A8C\u8BC1\u89C4\u5219 */\n  const rules = reactive(<% d.formRuleCode %>);\n\n  /** \u63D0\u4EA4\u8868\u5355 */\n  const handleSubmit = () => {\n    formRef.value?.validate?.((valid) => {\n      if (!valid) {\n        return;\n      }\n      console.log(form);\n    });\n  };\n\n  /** \u91CD\u7F6E\u8868\u5355 */\n  const handleReset = () => {<%# if(d.showFooterExpand){ %>\n    resetFields(void 0, ['searchExpand']);<%# }else{ %>\n    resetFields();<%# } %>\n    nextTick(() => {\n      nextTick(() => {\n        formRef.value?.clearValidate?.();\n      });\n    });\n  };\n\n  /** \u641C\u7D22\u8868\u5355\u662F\u5426\u5C55\u5F00 */\n  const searchExpand = computed(() => form.searchExpand);<%# if(d.formVarCode){ %>\n\n  <% d.formVarCode %><%# } %>\n</script>\n";
+/**
+ * ElForm 内容代码生成模板
+ */
+export declare const contentTemplate = "<%# getFormContent(d.items,d.grid,d.rowProps,d.indentSize,d.contentExtra,d.contentExtraColProps); function getFormContent(items,grid,rowProps,indentSize,contentExtra,contentExtraColProps){ var indentChar = Array.from({length:indentSize||0}).fill(' ').join(''); if(!grid){ (items||[]).forEach(function(item){ %>\n<% indentChar %><%# getFormItem(item,indentSize); }); if(contentExtra){ %>\n<% indentChar %><% d.addIndentChar(contentExtra,indentChar) %><%# } }else if(items&&items.length){ %>\n<% indentChar %><el-row<% d.addIndentChar(d.generatePropsCode(rowProps,null,2,true),indentChar) %>><%# items.forEach(function(item){ %>\n<% indentChar %>  <el-col<% d.generateColProps(item,grid,4,indentChar) %>>\n<% indentChar %>    <%# getFormItem(item,(indentSize||0)+4); %>\n<% indentChar %>  </el-col><%# }); if(contentExtra){ %>\n<% indentChar %>  <el-col<% d.generateColProps(null,contentExtraColProps,4,indentChar) %>>\n<% indentChar %>    <% d.addIndentChar(contentExtra,'    '+indentChar) %>\n<% indentChar %>  </el-col><%# } %>\n<% indentChar %></el-row><%# } } function getFormItem(item,indentSize){ var indentChar = Array.from({length:indentSize||0}).fill(' ').join(''); if(item.type=='icon'){ %><el-icon<% d.generateComponentProps(item,2,indentChar) %>><%# if(item.props&&item.props.name){ %>\n<% indentChar %>  <<% item.props.name %> /><%# } getFormContent(item.children,item.grid,item.rowProps,indentSize+2); %>\n<% indentChar %></el-icon><%# }else if(item.type=='tabs'){ %><ele-tabs<% d.generateComponentProps(item,2,indentChar) %>><%# (item.children||[]).forEach(function(tabItem){ %>\n<% indentChar %>  <template #<% tabItem.prop %>><%# getFormContent(tabItem.children,tabItem.grid,tabItem.rowProps,indentSize+4); %>\n<% indentChar %>  </template><%# }); %>\n<% indentChar %></ele-tabs><%# }else if(item.type=='div'){ var divTagName = d.getDivTag(item); %><<% divTagName %><% d.generateComponentProps(item,2,indentChar) %>><%# const divHTML = (item.props||{}).innerHTML||item.label; if(divHTML){ %>\n<% indentChar %>  <% divHTML %><%# } getFormContent(item.children,item.grid,item.rowProps,indentSize+2); %>\n<% indentChar %></<% divTagName %>><%# }else if(d.isContainerType(item)){ %><<% d.getComponentTag(item) %><% d.generateComponentProps(item,2,indentChar) %>><%# if(item.label){ %>\n<% indentChar %>  <% item.label %><%# } getFormContent(item.children,item.grid,item.rowProps,indentSize+2); %>\n<% indentChar %></<% d.getComponentTag(item) %>><%# }else{ %><el-form-item<% d.generateFormItemProps(item,2,indentChar) %>>\n<% indentChar %>  <%# if((item.type=='select'||item.type=='multipleSelect')&&Array.isArray((item.props||{}).options||[])){ %><el-select<% d.generateComponentProps(item,4,indentChar,['options']) %>><%# ((item.props||{}).options||[]).forEach(function(opt){ %>\n<% indentChar %>    <el-option<% d.generatePropsCode(opt,true) %> /><%# }); %>\n<% indentChar %>  </el-select><%# }else if(item.type=='radio'&&Array.isArray((item.props||{}).options||[])){ %><el-radio-group<% d.generateComponentProps(item,4,indentChar,['options']) %>><%# ((item.props||{}).options||[]).forEach(function(opt){ %>\n<% indentChar %>    <el-radio<% d.generatePropsCode(opt,true) %> /><%# }); %>\n<% indentChar %>  </el-radio-group><%# }else if(item.type=='radioButton'&&Array.isArray((item.props||{}).options||[])){ %><el-radio-group<% d.generateComponentProps(item,4,indentChar,['options']) %>><%# ((item.props||{}).options||[]).forEach(function(opt){ %>\n<% indentChar %>    <el-radio-button<% d.generatePropsCode(opt,true) %> /><%# }); %>\n<% indentChar %>  </el-radio-group><%# }else if(item.type=='checkbox'&&Array.isArray((item.props||{}).options||[])){ %><el-checkbox-group<% d.generateComponentProps(item,4,indentChar,['options']) %>><%# ((item.props||{}).options||[]).forEach(function(opt){ %>\n<% indentChar %>    <el-checkbox<% d.generatePropsCode(opt,true) %> /><%# }); %>\n<% indentChar %>  </el-checkbox-group><%# }else if(item.type=='checkboxButton'&&Array.isArray((item.props||{}).options||[])){ %><el-checkbox-group<% d.generateComponentProps(item,4,indentChar,['options']) %>><%# ((item.props||{}).options||[]).forEach(function(opt){ %>\n<% indentChar %>    <el-checkbox-button<% d.generatePropsCode(opt,true) %> /><%# }); %>\n<% indentChar %>  </el-checkbox-group><%# }else if(item.type=='text'){ %><ele-text<% d.generateComponentProps(item,4,indentChar) %>>\n<% indentChar %>    {{ form.<% item.prop %> }}\n<% indentChar %>  </ele-text><%# }else{ %><% d.generateComponentCode(item,4,indentChar) %><%# } %>\n<% indentChar %></el-form-item><%# } } %>";
+/**
+ * ElForm 底栏代码生成模板
+ */
+export declare const footerTemplate = "<el-form-item<% d.footerPropsCode %>>\n  <div :style=\"<% d.footerStyleCode %>\">\n    <el-button type=\"primary\" @click=\"handleSubmit\"><% d.showFooterExpand?'\u641C\u7D22':'\u63D0\u4EA4' %></el-button>\n    <el-button @click=\"handleReset\">\u91CD\u7F6E</el-button><%# if(d.showFooterExpand){ %>\n    <el-link\n      type=\"primary\"\n      :underline=\"false\"\n      style=\"margin-left: 12px\"\n      @click=\"form.searchExpand = !form.searchExpand\"\n    >\n      <template v-if=\"form.searchExpand\">\n        <span>\u6536\u8D77</span>\n        <el-icon style=\"vertical-align: -1px\">\n          <ArrowUp />\n        </el-icon>\n      </template>\n      <template v-else>\n        <span>\u5C55\u5F00</span>\n        <el-icon style=\"vertical-align: -2px\">\n          <ArrowDown />\n        </el-icon>\n      </template>\n    </el-link><%# } %>\n  </div>\n</el-form-item>";

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

@@ -0,0 +1,225 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const codeJsVar = require("./code-js-var");
+function templateEngine(template, data = {}) {
+  if (typeof template !== "string" || !template) {
+    return "";
+  }
+  const openCode = "<%";
+  const closeCode = "%>";
+  try {
+    const jss = new RegExp("^" + openCode + "#", "g");
+    const jsse = new RegExp(closeCode + "$", "g");
+    const result = template.replace(new RegExp(openCode + "#", "g"), openCode + "# ").replace(new RegExp(closeCode + "}", "g"), "} " + closeCode).replace(/\\/g, "\\\\").replace(new RegExp(openCode + "!(.+?)!" + closeCode, "g"), (str) => {
+      return str.replace(new RegExp("^" + openCode + "!", "g"), "").replace(new RegExp("!" + closeCode, "g"), "").replace(new RegExp(openCode + "|" + closeCode, "g"), (tag) => {
+        return tag.replace(/(.)/g, "\\$1");
+      });
+    }).replace(/(?="|')/g, "\\").replace(
+      new RegExp(openCode + "#([\\s\\S])+?" + closeCode, "g"),
+      (str) => {
+        return '";' + str.replace(jss, "").replace(jsse, "").replace(/\\/g, "") + ';view+="';
+      }
+    ).replace(new RegExp(openCode + "([^{#}])*?" + closeCode, "g"), (str) => {
+      if (str.replace(/\s/g, "") === openCode + closeCode) {
+        return "";
+      }
+      let start = '"+(';
+      str = str.replace(new RegExp(openCode + "|" + closeCode, "g"), "");
+      if (/^=/.test(str)) {
+        str = str.replace(/^=/, "");
+        start = '"+_escape_(';
+      }
+      return start + str.replace(/\\/g, "") + ')+"';
+    }).replace(/\r\n/g, '\\r\\n" + "').replace(/\n/g, '\\n" + "').replace(/\r/g, '\\r" + "');
+    return new Function(
+      "d, _escape_",
+      '"use strict";var view = "' + result + '";return view;'
+    )(data, (str) => {
+      return String(str || "").replace(/&(?!#?[a-zA-Z0-9]+;)/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/'/g, "&#39;").replace(/"/g, "&quot;");
+    });
+  } catch (e) {
+    console.error("TemplateEngine Error: ", e, "\n" + (template || ""));
+    return "";
+  }
+}
+function escapeStr(str) {
+  const escapes = {
+    "'": "\\'",
+    "\\": "\\\\",
+    "\n": "\\n",
+    "\r": "\\r",
+    "	": "\\t",
+    "\b": "\\b",
+    "\f": "\\f"
+  };
+  return str.replace(/['\\\n\r\t\b\f]/g, (char) => escapes[char]);
+}
+function isValidKey(name) {
+  const pattern = /^[a-zA-Z_$][0-9a-zA-Z_$]*$/;
+  if (!pattern.test(name)) {
+    return false;
+  }
+  const keywords = [
+    "break",
+    "case",
+    "catch",
+    "class",
+    "const",
+    "continue",
+    "debugger",
+    "default",
+    "delete",
+    "do",
+    "else",
+    "enum",
+    "export",
+    "extends",
+    "finally",
+    "for",
+    "function",
+    "if",
+    "goto",
+    "implements",
+    "import",
+    "in",
+    "instanceof",
+    "interface",
+    "let",
+    "new",
+    "package",
+    "private",
+    "protected",
+    "public",
+    "return",
+    "static",
+    "super",
+    "switch",
+    "this",
+    "throw",
+    "try",
+    "typeof",
+    "var",
+    "void",
+    "while",
+    "with",
+    "yield",
+    "as",
+    "async",
+    "await",
+    "of",
+    "static",
+    "from",
+    "null",
+    "true",
+    "false"
+  ];
+  return !keywords.includes(name);
+}
+function kebabCase(name) {
+  return name.replace(/([A-Z])/g, " $1").trim().split(" ").join("-").toLowerCase();
+}
+function addIndentChar(code, indentChar) {
+  if (code == null || !indentChar) {
+    return code ?? "";
+  }
+  return code.split("\n").join("\n" + indentChar);
+}
+function obj2Str(obj, singleLine, indentSize, transformJsVarFunc) {
+  if (typeof obj === "undefined") {
+    return "void 0";
+  }
+  if (obj === null) {
+    return "null";
+  }
+  const indent = indentSize ?? 0;
+  const indentChar = Array.from({ length: indent }).fill(" ").join("");
+  const jsVar = (transformJsVarFunc ?? codeJsVar.transformJsVar)(obj);
+  if (jsVar != null && jsVar.name) {
+    if (singleLine) {
+      return jsVar.name;
+    }
+    return addIndentChar(jsVar.name, indentChar);
+  }
+  if (typeof obj === "string") {
+    return `'${escapeStr(obj)}'`;
+  }
+  if (Array.isArray(obj)) {
+    if (!obj.length) {
+      return "[]";
+    }
+    const result = obj.map(
+      (v) => obj2Str(v, singleLine, indent + 2, transformJsVarFunc)
+    );
+    if (singleLine) {
+      return `[ ${result.join(", ")} ]`;
+    }
+    const code = result.join(",\n  " + indentChar);
+    return "[\n  " + indentChar + code + "\n" + indentChar + "]";
+  }
+  if (typeof obj === "object") {
+    const result = [];
+    Object.keys(obj).forEach((k) => {
+      const code2 = obj2Str(obj[k], singleLine, indent + 2, transformJsVarFunc);
+      result.push(isValidKey(k) ? `${k}: ${code2}` : `'${k}': ${code2}`);
+    });
+    if (!result.length) {
+      return "{}";
+    }
+    if (singleLine) {
+      return `{ ${result.join(", ")} }`;
+    }
+    const code = result.join(",\n  " + indentChar);
+    return "{\n  " + indentChar + code + "\n" + indentChar + "}";
+  }
+  return JSON.stringify(obj) || "";
+}
+function generatePropsCode(props, singleLine, indentSize, isAllProps, transformJsVarFunc) {
+  if (!props) {
+    return "";
+  }
+  const keys = Object.keys(props).filter(
+    (k) => typeof props[k] !== "undefined"
+  );
+  if (!keys.length) {
+    return "";
+  }
+  const codes = keys.map((k) => {
+    const key = kebabCase(k);
+    const jsVar = (transformJsVarFunc ?? codeJsVar.transformJsVar)(props[k]);
+    if (jsVar != null && jsVar.name) {
+      if (key === "ref" || key === "v-model" || key === "v-if") {
+        return `${key}="${jsVar.name}"`;
+      }
+      if (key.startsWith("on-")) {
+        return `@${key.slice(3)}="${jsVar.name}"`;
+      }
+      return `:${key}="${jsVar.name}"`;
+    }
+    if (typeof props[k] === "string") {
+      if (key === "v-if") {
+        return `${key}="${props[k]}"`;
+      }
+      const str = escapeStr(props[k]);
+      if (str.includes("\\n") && !str.includes("`")) {
+        return `:${key}="\`${str}\`"`;
+      }
+      return `${key}="${str}"`;
+    }
+    return `:${key}="${obj2Str(props[k], true, void 0, transformJsVarFunc)}"`;
+  });
+  const isAll = isAllProps ?? true;
+  if (singleLine ?? keys.length <= 2) {
+    return (isAll ? " " : "") + codes.join(" ");
+  }
+  const indent = indentSize ?? 2;
+  const indentChar = Array.from({ length: indent }).fill(" ").join("");
+  const code = "\n" + indentChar + codes.join("\n" + indentChar);
+  return isAll ? code + "\n" + indentChar.slice(2) : code;
+}
+exports.addIndentChar = addIndentChar;
+exports.escapeStr = escapeStr;
+exports.generatePropsCode = generatePropsCode;
+exports.isValidKey = isValidKey;
+exports.kebabCase = kebabCase;
+exports.obj2Str = obj2Str;
+exports.templateEngine = templateEngine;

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

@@ -0,0 +1,46 @@
+import { JsVar } from './code-js-var';
+
+/**
+ * 模板引擎
+ * @param template 模板
+ * @param data 数据
+ */
+export declare function templateEngine(template: string, data?: {}): string;
+/**
+ * 转义字符串
+ * @param str 字符串
+ */
+export declare function escapeStr(str: string): string;
+/**
+ * 判断是否是合法的属性名
+ * @param name 属性名
+ */
+export declare function isValidKey(name: string): boolean;
+/**
+ * 驼峰转中划线
+ * @param name 驼峰风格名称
+ */
+export declare function kebabCase(name: string): string;
+/**
+ * 代码增加缩进
+ * @param code 代码
+ * @param indentChar 缩进字符
+ */
+export declare function addIndentChar(code?: string, indentChar?: string): string;
+/**
+ * 对象转 js 字符串
+ * @param obj 对象
+ * @param singleLine 是否单行显示
+ * @param indentSize 多行时缩进空格数量
+ * @param transformJsVarFunc 转换 JsVar 对象的方法
+ */
+export declare function obj2Str(obj: any, singleLine?: boolean, indentSize?: number, transformJsVarFunc?: (jv: any) => JsVar | undefined): any;
+/**
+ * 生成组件属性的代码
+ * @param props 属性
+ * @param singleLine 是否单行显示
+ * @param indentSize 多行时缩进空格数量
+ * @param isAllProps 是否是全部属性, 会考虑标签结束符的换行和缩进
+ * @param transformJsVarFunc 转换 JsVar 对象的方法
+ */
+export declare function generatePropsCode(props?: Record<string, any>, singleLine?: boolean | null, indentSize?: number, isAllProps?: boolean, transformJsVarFunc?: (jv: any) => JsVar | undefined): string;