ele-admin-plus 1.2.2-beta.4 → 1.3.1-beta.1

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

@@ -0,0 +1,130 @@
+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);
+import { markRaw } from "vue";
+import * as ALL_ICONS from "../../icons";
+class JsVar {
+  constructor(props) {
+    /** 生成 ElForm 代码时显示的变量名称 */
+    __publicField(this, "name");
+    /** 生成 ProForm 代码时显示的变量名称 */
+    __publicField(this, "proName");
+    /** 生成 ElForm 代码时添加的声明代码 */
+    __publicField(this, "code");
+    /** 生成 ProForm 代码时添加的声明代码 */
+    __publicField(this, "proCode");
+    /** 生成 ElForm 代码时添加的导入代码 */
+    __publicField(this, "imports");
+    /** 生成 ProForm 代码时添加的导入代码 */
+    __publicField(this, "proImports");
+    /** ProForm 预览界面获取对应的 js 变量 */
+    __publicField(this, "jsCode");
+    /** 转 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;
+  }
+}
+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) {
+    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: () => markRaw(ALL_ICONS[icon] ?? ALL_ICONS.UserOutlined)
+      });
+    }
+    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;
+          }
+        });
+      }
+      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;
+}
+export {
+  JsVar,
+  removePrefixStr,
+  transformJsVar,
+  transformProJsVar
+};

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

@@ -0,0 +1,127 @@
+import { ProFormItemProps } from '../../ele-pro-form/types';
+import { BuildFormProps, ComponentGroup, BuildFormItem, TemplateFormConfig } from '../types';
+
+/**
+ * ProForm 代码生成模板
+ */
+export declare const proTemplate = "<template>\n  <pro-form\n    :model=\"form\"\n    :items=\"formItems\"<% d.proFormPropsCode %><%# 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 %>\n\n  /** \u8868\u5355\u6570\u636E */\n  const [form, resetFields, _assignFields, setFieldValue] = useFormData(<% d.modelCode %>);\n\n  /** \u63D0\u4EA4 */\n  const handleSubmit = (form) => {\n    console.log(form);\n  };\n\n  /** \u91CD\u7F6E */\n  const handleReset = () => {<%# if(d.showFooterExpand){ %>\n    resetFields(void 0, ['searchExpand']);<%# }else{ %>\n    resetFields();<%# } %>\n  };<%# if(d.proFormVarCode){ %>\n\n  <% d.proFormVarCode %><%# } %>\n\n  /** \u8868\u5355\u9879 */\n  const formItems = ref(<% d.proFormItemsCode %>);\n</script>\n";
+/**
+ * ElForm 代码生成模板
+ */
+export declare const formTemplate = "<!-- eslint-disable vue/html-self-closing -->\n<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\u5B9E\u4F8B */\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  /** \u4FDD\u5B58\u7F16\u8F91 */\n  const <% d.showFooter?'':'_' %>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 <% d.showFooter?'':'_' %>handleReset = () => {<%# if(d.showFooterExpand){ %>\n    resetFields(void 0, ['searchExpand']);<%# }else{ %>\n    resetFields();<%# } %>\n    nextTick(() => {\n      nextTick(() => {\n        formRef.value?.clearValidate?.();\n      });\n    });\n  };<%# 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.label){ %>\n<% indentChar %>  <<% item.label %> /><%# } getFormContent(item.children,item.grid,item.rowProps,indentSize+2); %>\n<% indentChar %></el-icon><%# }else if(d.viewTypes.includes(item.type)){ %><<% 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 if(item.type=='card'){ %><ele-card<% d.generateComponentProps(item,2,indentChar) %>><%# getFormContent(item.children,item.grid,item.rowProps,indentSize+2); %>\n<% indentChar %></ele-card><%# }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) %>><%# if(item.label){ %>\n<% indentChar %>  <% item.label %><%# } getFormContent(item.children,item.grid,item.rowProps,indentSize+2); %>\n<% indentChar %></<% divTagName %>><%# }else if(d.containerTypes.includes(item.type)){ %><<% d.getComponentTag(item) %><% d.generateComponentProps(item,2,indentChar) %>><%# if(item.label&&!['collapseItem'].includes(item.type)){ %>\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'){ %><el-select<% d.generateComponentProps(item,4,indentChar) %>><%# (item.options||[]).forEach(function(opt){ %>\n<% indentChar %>    <el-option<% d.generatePropsCode(opt,true) %> /><%# }); %>\n<% indentChar %>  </el-select><%# }else if(item.type=='radio'){ %><el-radio-group<% d.generateComponentProps(item,4,indentChar) %>><%# (item.options||[]).forEach(function(opt){ %>\n<% indentChar %>    <el-radio<% d.generatePropsCode(opt,true) %> /><%# }); %>\n<% indentChar %>  </el-radio-group><%# }else if(item.type=='radioButton'){ %><el-radio-group<% d.generateComponentProps(item,4,indentChar) %>><%# (item.options||[]).forEach(function(opt){ %>\n<% indentChar %>    <el-radio-button<% d.generatePropsCode(opt,true) %> /><%# }); %>\n<% indentChar %>  </el-radio-group><%# }else if(item.type=='checkbox'){ %><el-checkbox-group<% d.generateComponentProps(item,4,indentChar) %>><%# (item.options||[]).forEach(function(opt){ %>\n<% indentChar %>    <el-checkbox<% d.generatePropsCode(opt,true) %> /><%# }); %>\n<% indentChar %>  </el-checkbox-group><%# }else if(item.type=='checkboxButton'){ %><el-checkbox-group<% d.generateComponentProps(item,4,indentChar) %>><%# (item.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      @click=\"form.searchExpand = !form.searchExpand\"\n      style=\"margin-left: 12px\"\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>";
+/**
+ * 生成 ElForm 底栏代码
+ * @param formProps 表单配置
+ * @param showFooterExpand 是否需要展开收起按钮
+ */
+export declare function generateFooterCode(formProps: BuildFormProps, showFooterExpand?: boolean): string;
+/**
+ * 生成 ElFormItem 所有属性代码
+ * @param item 表单项
+ * @param indentChar 上层代码缩进
+ * @param indentSize 属性换行的缩进空格数量
+ */
+export declare function generateFormItemProps(item: ProFormItemProps, indentSize?: number, indentChar?: string): string;
+/**
+ * 生成 ElCol 所有属性代码
+ * @param item 表单项
+ * @param grid 父级的 grid 属性
+ * @param indentChar 上层代码缩进
+ * @param indentSize 属性换行的缩进空格数量
+ */
+export declare function generateColProps(item?: ProFormItemProps, grid?: Record<string, any> | boolean, indentSize?: number, indentChar?: string): string;
+/**
+ * 生成容器组件和非单标签组件的所有属性代码
+ * @param item 表单项
+ * @param indentSize 属性换行的缩进空格数量
+ * @param indentChar 上层代码缩进
+ */
+export declare function generateComponentProps(item: ProFormItemProps, indentSize?: number, indentChar?: 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 items 表单项数据
+ * @param formProps 表单配置
+ * @param showFooterExpand 是否需要展开收起按钮
+ * @param componentData 组件库数据
+ */
+export declare function generateContentCode(items: ProFormItemProps[], formProps: BuildFormProps, showFooterExpand: boolean | undefined, componentData?: ComponentGroup[]): string;
+/**
+ * 获取上传组件表单验证方法代码
+ * @param item 表单项
+ */
+export declare function getUploadValidatorCode(item: ProFormItemProps): string;
+/**
+ * 生成 ElForm 验证规则代码
+ * @param items 表单项数据
+ */
+export declare function generateRuleCode(items: ProFormItemProps[]): any;
+/**
+ * 没有 placeholder 属性的类型
+ */
+export declare const noPlaceholderTypes: string[];
+/**
+ * 获取生成 ElForm 代码时组件的属性
+ * @param item 表单项
+ * @param componentData 组件库数据
+ */
+export declare function getComponentProps(item: ProFormItemProps, componentData?: ComponentGroup[]): {
+    [x: string]: any;
+};
+/**
+ * 获取导入代码和变量声明代码
+ * @param items 表单项
+ * @param formProps 表单其它属性
+ */
+export declare function getImportAndVarCode(items: ProFormItemProps[], formProps: BuildFormProps): {
+    imports: string[];
+    codes: string[];
+    proImports: string[];
+    proCodes: string[];
+};
+/**
+ * 取消表单项数据的多余属性
+ * @param items 表单项数据
+ * @param isEl 是否是生成 ElForm 代码
+ * @param componentData 组件库数据
+ */
+export declare function getNormalizeItems(formItems?: BuildFormItem[], isEl?: boolean, componentData?: ComponentGroup[]): any;
+/**
+ * 生成 ProForm 代码
+ * @param config 表单配置数据
+ * @param componentData 组件库数据
+ */
+export declare function generateProFormCode(config?: TemplateFormConfig, componentData?: ComponentGroup[]): string;
+/**
+ * 生成 ElForm 代码
+ * @param config 表单配置数据
+ * @param componentData 组件库数据
+ */
+export declare function generateElFormCode(config?: TemplateFormConfig, componentData?: ComponentGroup[]): string;