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

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

@@ -0,0 +1,626 @@
+import { eachTree, mapTree, pick } from "../../utils/core";
+import { viewTypes, containerTypes, selectTypes, getRuleTrigger, uploadTypes } from "../../ele-pro-form/util";
+import { getComponentItemByType, getFormInitValue } from "../util";
+import { obj2Str, templateEngine, generatePropsCode, addIndentChar, kebabCase } from "./code-util";
+import { transformJsVar, JsVar, transformProJsVar } from "./code-js-var";
+const proTemplate = `<template>
+  <pro-form
+    :model="form"
+    :items="formItems"<% d.proFormPropsCode %><%# if(d.showFooterExpand){ %>
+    v-model:search-expand="form.searchExpand"<%# } %>
+    @updateValue="setFieldValue"
+    @submit="handleSubmit"
+    @reset="handleReset"
+  />
+</template>
+
+<script setup>
+  <% d.proFormImportCode %>
+
+  /** 表单数据 */
+  const [form, resetFields, _assignFields, setFieldValue] = useFormData(<% d.modelCode %>);
+
+  /** 提交 */
+  const handleSubmit = (form) => {
+    console.log(form);
+  };
+
+  /** 重置 */
+  const handleReset = () => {<%# if(d.showFooterExpand){ %>
+    resetFields(void 0, ['searchExpand']);<%# }else{ %>
+    resetFields();<%# } %>
+  };<%# if(d.proFormVarCode){ %>
+
+  <% d.proFormVarCode %><%# } %>
+
+  /** 表单项 */
+  const formItems = ref(<% d.proFormItemsCode %>);
+<\/script>
+`;
+const formTemplate = `<!-- eslint-disable vue/html-self-closing -->
+<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 <% d.showFooter?'':'_' %>handleSubmit = () => {
+    formRef.value?.validate?.((valid) => {
+      if (!valid) {
+        return;
+      }
+      console.log(form);
+    });
+  };
+
+  /** 重置表单 */
+  const <% d.showFooter?'':'_' %>handleReset = () => {<%# if(d.showFooterExpand){ %>
+    resetFields(void 0, ['searchExpand']);<%# }else{ %>
+    resetFields();<%# } %>
+    nextTick(() => {
+      nextTick(() => {
+        formRef.value?.clearValidate?.();
+      });
+    });
+  };<%# 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.label){ %>
+<% indentChar %>  <<% item.label %> /><%# } getFormContent(item.children,item.grid,item.rowProps,indentSize+2); %>
+<% indentChar %></el-icon><%# }else if(d.viewTypes.includes(item.type)){ %><<% 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 if(item.type=='card'){ %><ele-card<% d.generateComponentProps(item,2,indentChar) %>><%# getFormContent(item.children,item.grid,item.rowProps,indentSize+2); %>
+<% indentChar %></ele-card><%# }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) %>><%# if(item.label){ %>
+<% indentChar %>  <% item.label %><%# } getFormContent(item.children,item.grid,item.rowProps,indentSize+2); %>
+<% indentChar %></<% divTagName %>><%# }else if(d.containerTypes.includes(item.type)){ %><<% d.getComponentTag(item) %><% d.generateComponentProps(item,2,indentChar) %>><%# if(item.label&&!['collapseItem'].includes(item.type)){ %>
+<% 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'){ %><el-select<% d.generateComponentProps(item,4,indentChar) %>><%# (item.options||[]).forEach(function(opt){ %>
+<% indentChar %>    <el-option<% d.generatePropsCode(opt,true) %> /><%# }); %>
+<% indentChar %>  </el-select><%# }else if(item.type=='radio'){ %><el-radio-group<% d.generateComponentProps(item,4,indentChar) %>><%# (item.options||[]).forEach(function(opt){ %>
+<% indentChar %>    <el-radio<% d.generatePropsCode(opt,true) %> /><%# }); %>
+<% indentChar %>  </el-radio-group><%# }else if(item.type=='radioButton'){ %><el-radio-group<% d.generateComponentProps(item,4,indentChar) %>><%# (item.options||[]).forEach(function(opt){ %>
+<% indentChar %>    <el-radio-button<% d.generatePropsCode(opt,true) %> /><%# }); %>
+<% indentChar %>  </el-radio-group><%# }else if(item.type=='checkbox'){ %><el-checkbox-group<% d.generateComponentProps(item,4,indentChar) %>><%# (item.options||[]).forEach(function(opt){ %>
+<% indentChar %>    <el-checkbox<% d.generatePropsCode(opt,true) %> /><%# }); %>
+<% indentChar %>  </el-checkbox-group><%# }else if(item.type=='checkboxButton'){ %><el-checkbox-group<% d.generateComponentProps(item,4,indentChar) %>><%# (item.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"
+      @click="form.searchExpand = !form.searchExpand"
+      style="margin-left: 12px"
+    >
+      <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>`;
+function generateFooterCode(formProps, showFooterExpand) {
+  if (!formProps.footer) {
+    return "";
+  }
+  const style = { flex: 1, display: "flex", alignItems: "center" };
+  const code = obj2Str({ ...style, ...formProps.footerStyle || {} }, true);
+  return templateEngine(footerTemplate, {
+    footerStyleCode: code,
+    footerPropsCode: generatePropsCode(formProps.footerProps),
+    showFooterExpand
+  });
+}
+function generateFormItemProps(item, indentSize, indentChar) {
+  const { vIf, label, prop, itemProps } = item;
+  const props = { label, prop, ...itemProps || {}, vIf };
+  const code = generatePropsCode(props, null, indentSize);
+  return addIndentChar(code, indentChar);
+}
+function generateColProps(item, grid, indentSize, indentChar) {
+  const gridCol = grid === true ? { span: 12 } : grid || {};
+  const { vIf, colProps } = item || {};
+  const props = { ...gridCol, ...colProps || {}, vIf };
+  const code = generatePropsCode(props, null, indentSize);
+  return addIndentChar(code, indentChar);
+}
+function generateComponentProps(item, indentSize, indentChar) {
+  const props = item.type === "div" || item.type === "tableCell" ? { ...item.props || {}, is: void 0 } : item.props || {};
+  const code = generatePropsCode(props, null, indentSize);
+  return addIndentChar(code, indentChar);
+}
+function getItemComponentTag(item, componentData) {
+  var _a, _b;
+  if (item.type === "tableCell" && ((_a = item.props) == null ? void 0 : _a.is) === "th") {
+    return "th";
+  }
+  const name = (_b = getComponentItemByType(item.type, componentData)) == null ? void 0 : _b.componentName;
+  return kebabCase(name || "div");
+}
+function generateItemComponentCode(item, indentSize, indentChar, content, componentData) {
+  const component = getItemComponentTag(item, componentData);
+  const propsCode = generatePropsCode(item.props, null, indentSize);
+  const code = addIndentChar(propsCode, indentChar);
+  if (content == null) {
+    return `<${component}${code}/>`;
+  }
+  if (content === "") {
+    return `<${component}${code}>
+${indentChar}</${component}>`;
+  }
+  return `<${component}${code}>
+${indentChar}  ${content}
+${indentChar}</${component}>`;
+}
+function getDivTag(item) {
+  var _a;
+  const divTag = (_a = item.props) == null ? void 0 : _a.is;
+  const jsVar = transformJsVar(divTag);
+  if (jsVar != null) {
+    return jsVar.name;
+  }
+  return divTag || "div";
+}
+function generateContentCode(items, formProps, showFooterExpand, componentData) {
+  let contentCode = templateEngine(contentTemplate, {
+    items,
+    grid: formProps.grid,
+    rowProps: formProps.rowProps,
+    indentSize: 4,
+    contentExtra: generateFooterCode(formProps, showFooterExpand),
+    contentExtraColProps: formProps.footerColProps || { span: 24 },
+    generateFormItemProps,
+    generateColProps,
+    generateComponentProps,
+    generateComponentCode: (item, indentSize, indentChar, content) => generateItemComponentCode(
+      item,
+      indentSize,
+      indentChar,
+      content,
+      componentData
+    ),
+    getDivTag,
+    getComponentTag: (item) => getItemComponentTag(item, componentData),
+    viewTypes,
+    containerTypes,
+    addIndentChar,
+    generatePropsCode
+  });
+  [
+    "img",
+    "input",
+    "hr",
+    "br",
+    "col",
+    "area",
+    "embed",
+    "source",
+    "track",
+    "wbr"
+  ].forEach((tagName) => {
+    contentCode = contentCode.replace(
+      new RegExp(`>\\s*</${tagName}>`, "g"),
+      "/>"
+    );
+  });
+  return contentCode;
+}
+function getUploadValidatorCode(item) {
+  return `(_rule, value, callback) => {
+  if (value && ${item.prop}UploadRef.value && !${item.prop}UploadRef.value.isDone()) {
+    return callback(new Error('${item.label}还未上传完毕'));
+  }
+  callback();
+}`;
+}
+function generateRuleCode(items) {
+  const rules = {};
+  eachTree(items, (item) => {
+    if (item.type != null && (viewTypes.includes(item.type) || containerTypes.includes(item.type))) {
+      return;
+    }
+    const itemRules = [];
+    if (item.type != null) {
+      if (item.required) {
+        if (selectTypes.includes(item.type)) {
+          itemRules.push({
+            required: true,
+            message: `请选择${item.label}`,
+            trigger: getRuleTrigger(item.type)
+          });
+        } else if (uploadTypes.includes(item.type)) {
+          itemRules.push({
+            required: true,
+            message: `请上传${item.label}`,
+            trigger: getRuleTrigger(item.type)
+          });
+        } else {
+          itemRules.push({
+            required: true,
+            message: `请输入${item.label}`,
+            trigger: getRuleTrigger(item.type)
+          });
+        }
+      }
+      if (uploadTypes.includes(item.type)) {
+        itemRules.push({
+          trigger: getRuleTrigger(item.type),
+          validator: new JsVar({ name: getUploadValidatorCode(item) })
+        });
+      }
+      if (itemRules.length) {
+        rules[item.prop] = itemRules;
+      }
+    }
+  });
+  return obj2Str(rules, false, 2);
+}
+const noPlaceholderTypes = [
+  "radio",
+  "radioButton",
+  "checkbox",
+  "checkboxButton",
+  "daterange",
+  "datetimerange",
+  "timerange",
+  "switch",
+  "rate",
+  "slider",
+  "sliderRange",
+  "checkCard",
+  "multipleCheckCard",
+  "editTag",
+  "dictRadio",
+  "dictCheckbox",
+  "imageUpload",
+  "fileUpload",
+  "editor",
+  "text",
+  ...viewTypes,
+  ...containerTypes
+];
+function getComponentProps(item, componentData) {
+  const config = getComponentItemByType(item.type, componentData);
+  const props = {
+    ...(config == null ? void 0 : config.defaultProps) || {},
+    ...item.props || {},
+    ...(config == null ? void 0 : config.reservedProps) || {}
+  };
+  if (item.type && (viewTypes.includes(item.type) || containerTypes.includes(item.type))) {
+    props.vIf = item.vIf;
+    if (item.type === "alert" && props.title == null) {
+      props.title = item.label;
+      item.label = void 0;
+    }
+    if (item.type === "image" && props.alt == null) {
+      props.alt = item.label;
+      item.label = void 0;
+    }
+    if (item.type === "steps" && props.active == null) {
+      props.active = new JsVar({
+        name: `form.${item.prop} ?? 0`
+      });
+    }
+    if (item.type === "card" && props.header == null) {
+      props.header = item.label;
+      item.label = void 0;
+    }
+    if (item.type === "tabs") {
+      props.vModel = new JsVar({
+        name: `form.${item.prop}`
+      });
+      props.modelValue = void 0;
+      props.items = item.children ? item.children.map((c) => ({ name: c.prop, label: c.label })) : [];
+    }
+    if (item.type === "collapse" && props.modelValue == null) {
+      props.vModel = new JsVar({
+        name: `form.${item.prop}`
+      });
+      props.modelValue = void 0;
+    }
+    if (item.type === "collapseItem") {
+      if (props.title == null) {
+        props.title = item.label;
+        item.label = void 0;
+      }
+      if (props.name == null) {
+        props.name = item.prop;
+      }
+    }
+    if (item.type === "descriptionsItem" && props.label == null) {
+      props.label = item.label;
+      item.label = void 0;
+    }
+  } else if (item.type && item.type !== "text") {
+    if (props.placeholder == null && !noPlaceholderTypes.includes(item.type)) {
+      if (selectTypes.includes(item.type)) {
+        props.placeholder = `请选择${item.label}`;
+      } else if (uploadTypes.includes(item.type)) {
+        props.placeholder = `请上传${item.label}`;
+      } else {
+        props.placeholder = `请输入${item.label}`;
+      }
+    }
+    props.vModel = `form.${item.prop}`;
+  }
+  if (item.type === "autocomplete") {
+    props.fetchSuggestions = new JsVar({
+      name: `${item.prop}FetchSuggestions`,
+      code: `/** ${item.label || item.prop}选项数据 */
+const ${item.prop}FetchSuggestions = (keyword, callback) => {
+  console.log('keyword:', keyword);
+  callback(${obj2Str(item.options || [], false, 2)});
+};`
+    });
+  } else if (item.type === "cascader" || item.type === "multipleCascader") {
+    props.options = new JsVar({
+      name: `${item.prop}CascaderOptions`,
+      code: `/** ${item.label || item.prop}级联数据 */
+const ${item.prop}CascaderOptions = ref(${obj2Str(item.options || [], false, 0)});`
+    });
+    const temp = (item.props || {}).props || {};
+    if (item.type === "multipleCascader") {
+      temp.multiple = true;
+    }
+    props.props = new JsVar({
+      name: `${item.prop}CascaderProps`,
+      code: `/** ${item.label || item.prop}级联配置 */
+const ${item.prop}CascaderProps = reactive(${obj2Str(temp, false, 0)});`
+    });
+  } else if (item.type === "treeSelect" || item.type === "treeMultipleSelect") {
+    props.data = new JsVar({
+      name: `${item.prop}TreeData`,
+      code: `/** ${item.label || item.prop}树数据 */
+const ${item.prop}TreeData = ref(${obj2Str(item.options || [], false, 0)});`
+    });
+  } else if (item.type === "virtualTreeSelect" || item.type === "virtualTreeMultipleSelect") {
+    props.treeProps = new JsVar({
+      name: `${item.prop}TreeProps`,
+      code: `/** ${item.label || item.prop}树配置 */
+const ${item.prop}TreeProps = reactive(${obj2Str((item.props || {}).treeProps || {}, false, 0)});`
+    });
+  } else if (item.type === "tableSelect" || item.type === "tableMultipleSelect") {
+    props.tableProps = new JsVar({
+      name: `${item.prop}TableProps`,
+      code: `/** ${item.label || item.prop}表格配置 */
+const ${item.prop}TableProps = reactive(${obj2Str((item.props || {}).tableProps || {}, false, 0)});`
+    });
+  } else if (item.type === "checkCard" || item.type === "multipleCheckCard") {
+    props.items = new JsVar({
+      name: `${item.prop}CheckCardItems`,
+      code: `/** ${item.label || item.prop}选项数据 */
+const ${item.prop}CheckCardItems = ref(${obj2Str(item.options || [], false, 0)});`
+    });
+  } else if (item.type === "imageUpload" || item.type === "fileUpload") {
+    props.ref = new JsVar({
+      name: `${item.prop}UploadRef`,
+      code: `/** ${item.label || item.prop}上传组件实例 */
+const ${item.prop}UploadRef = ref(null);`
+    });
+  }
+  return props;
+}
+function getImportAndVarCode(items, formProps) {
+  const imports = /* @__PURE__ */ new Set([]);
+  const codes = /* @__PURE__ */ new Set([]);
+  eachTree(items, (item) => {
+    if (item.type === "imageUpload") {
+      imports.add(
+        `import ImageUpload from '@/components/ImageUpload/index';`
+      );
+    } else if (item.type === "fileUpload") {
+      imports.add(
+        `import FileUpload from '@/components/FileUpload/index';`
+      );
+    } else if (item.type === "regions") {
+      imports.add(
+        `import RegionsSelect from '@/components/RegionsSelect/index';`
+      );
+    } else if (item.type === "editor") {
+      imports.add(
+        `import TinymceEditor from '@/components/TinymceEditor/index';`
+      );
+    } else if (item.type === "icon") {
+      if (item.label) {
+        imports.add(`import { ${item.label} } from '@/components/icons';`);
+      }
+    }
+  });
+  if (formProps.showSearchExpand) {
+    imports.add(`import { ArrowUp } from '@/components/icons';`);
+    imports.add(`import { ArrowDown } from '@/components/icons';`);
+  }
+  const proImports = /* @__PURE__ */ new Set([]);
+  const proCodes = /* @__PURE__ */ new Set([]);
+  JSON.stringify({ items, formProps }, (_jk, jv) => {
+    const jsVar = transformJsVar(jv);
+    if (jsVar != null) {
+      if (jsVar.imports) {
+        jsVar.imports.forEach((code) => {
+          imports.add(code);
+        });
+      }
+      if (jsVar.code) {
+        codes.add(jsVar.code);
+      }
+      if (jsVar.proImports) {
+        jsVar.proImports.forEach((code) => {
+          proImports.add(code);
+        });
+      }
+      if (jsVar.proCode) {
+        proCodes.add(jsVar.proCode);
+      }
+    }
+    return jv;
+  });
+  return {
+    imports: [
+      `import { ref, reactive, nextTick } from 'vue';`,
+      `import { useFormData } from '@/utils/use-form-data';`,
+      ...imports
+    ],
+    codes: [...codes],
+    proImports: [
+      `import { ref } from 'vue';`,
+      `import { useFormData } from '@/utils/use-form-data';`,
+      `import ProForm from '@/components/ProForm/index';`,
+      ...proImports
+    ],
+    proCodes: [...proCodes]
+  };
+}
+function getNormalizeItems(formItems, isEl, componentData) {
+  let i = 0;
+  const items = mapTree(formItems, (d) => {
+    i++;
+    const k = `item-${String(i).padStart(4, "0")}`;
+    const item = {
+      ...d,
+      key: k,
+      initValue: void 0
+    };
+    if (isEl) {
+      item.props = getComponentProps(item, componentData);
+      item.key = void 0;
+    }
+    return item;
+  });
+  return JSON.parse(JSON.stringify(items));
+}
+function generateProFormCode(config, componentData) {
+  const formProps = config ? { ...config, items: void 0 } : { showSearchExpand: void 0 };
+  const init = getFormInitValue(config == null ? void 0 : config.items);
+  const items = getNormalizeItems(config == null ? void 0 : config.items, false, componentData);
+  const { proImports, proCodes } = getImportAndVarCode(items, formProps);
+  const sfe = formProps.showSearchExpand;
+  formProps.submitText = sfe ? "搜索" : void 0;
+  const pc = generatePropsCode(formProps, false, 4, false, transformProJsVar);
+  const templateData = {
+    modelCode: obj2Str(init, false, 2, transformProJsVar),
+    proFormItemsCode: obj2Str(items, false, 2, transformProJsVar),
+    proFormPropsCode: pc,
+    proFormImportCode: proImports.join("\n  "),
+    proFormVarCode: addIndentChar(proCodes.join("\n\n"), "  "),
+    showFooterExpand: sfe
+  };
+  return templateEngine(proTemplate, templateData);
+}
+function generateElFormCode(config, componentData) {
+  const formProps = config || { items: [] };
+  const init = getFormInitValue(config == null ? void 0 : config.items);
+  const items = getNormalizeItems(config == null ? void 0 : config.items, true, componentData);
+  const elProps = pick(formProps, [
+    "labelPosition",
+    "labelWidth",
+    "statusIcon",
+    "validateOnRuleChange",
+    "size",
+    "disabled",
+    "scrollToError",
+    "scrollIntoViewOptions",
+    "inline",
+    "labelSuffix",
+    "hideRequiredAsterisk",
+    "requireAsteriskPosition",
+    "showMessage",
+    "inlineMessage",
+    "style",
+    "class"
+  ]);
+  const { imports, codes } = getImportAndVarCode(items, formProps);
+  const sfe = formProps.showSearchExpand;
+  const formContentCode = generateContentCode(
+    items,
+    formProps,
+    sfe,
+    componentData
+  );
+  const formItemsLengthIndex = codes.findIndex(
+    (c) => c === "const formItemsLength = 0;"
+  );
+  if (formItemsLengthIndex !== -1) {
+    codes[formItemsLengthIndex] = `const formItemsLength = ${items.length};  // 表单项数量`;
+  }
+  const templateData = {
+    modelCode: obj2Str(init, false, 2),
+    formContentCode,
+    formPropsCode: generatePropsCode(elProps, false, 4, false),
+    formRuleCode: generateRuleCode(items),
+    formImportCode: imports.join("\n  "),
+    formVarCode: addIndentChar(codes.join("\n\n"), "  "),
+    showFooter: formProps.footer,
+    showFooterExpand: sfe,
+    obj2Str
+  };
+  return templateEngine(formTemplate, templateData);
+}
+export {
+  contentTemplate,
+  footerTemplate,
+  formTemplate,
+  generateColProps,
+  generateComponentProps,
+  generateContentCode,
+  generateElFormCode,
+  generateFooterCode,
+  generateFormItemProps,
+  generateItemComponentCode,
+  generateProFormCode,
+  generateRuleCode,
+  getComponentProps,
+  getDivTag,
+  getImportAndVarCode,
+  getItemComponentTag,
+  getNormalizeItems,
+  getUploadValidatorCode,
+  noPlaceholderTypes,
+  proTemplate
+};

package/es/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 code 代码
+ * @param indentChar 缩进字符
+ */
+export declare function addIndentChar(code?: string, indentChar?: string): string;
+/**
+ * 转义字符串
+ * @param str 字符串
+ */
+export declare function escapeStr(str: string): string;
+/**
+ * 判断是否是合法的属性名
+ * @param name 属性名
+ */
+export declare function isValidKey(name: string): boolean;
+/**
+ * 对象转 js 字符串
+ * @param obj 对象
+ * @param singleLine 是否单行显示
+ * @param indentSize 多行时缩进空格数量 TODO
+ * @param transformJsVarFunc 转换 JsVar 对象的方法
+ */
+export declare function obj2Str(obj: any, singleLine?: boolean, indentSize?: number, transformJsVarFunc?: (jv: any) => JsVar | undefined): any;
+/**
+ * 驼峰转中划线
+ * @param name 驼峰风格名称
+ */
+export declare function kebabCase(name: string): string;
+/**
+ * 生成组件属性的代码
+ * @param props 属性
+ * @param singleLine 是否单行显示
+ * @param indentSize 多行时缩进空格数量
+ * @param isAll 是否是全部属性, 会考虑标签结束符的换行和缩进
+ * @param transformJsVarFunc 转换 JsVar 对象的方法
+ */
+export declare function generatePropsCode(props?: Record<string, any>, singleLine?: boolean | null, indentSize?: number, isAllProps?: boolean, transformJsVarFunc?: (jv: any) => JsVar | undefined): string;