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

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

@@ -1,12 +1,21 @@
-import { omit, eachTree, mapTree, pick } from "../../utils/core";
+import { omit, eachTree, mapTree, pick } from "../../utils/common";
 import { isContainerType, getFormInitValue } from "../../ele-pro-form/util";
-import { defaultItemTypeData } from "../../ele-pro-form/components/item-type-data";
-import { getComponentRefName, getRuleMessage } from "../../ele-pro-form/components/render-util";
-import { getComponentItemByType } from "./build-core";
+import { getComponentRefName, getItemTypeData, getRuleMessage } from "../../ele-pro-form/components/render-util";
+import { computeContentExtraCol } from "../../ele-pro-form/components/render-core";
+import { getComponentItemByType, deepCloneObject } from "./build-core";
 import { transformJsVar, JsVar } from "./code-js-var";
 import { obj2Str, templateEngine, generatePropsCode, addIndentChar, kebabCase } from "./code-util";
 import { footerTemplate, contentTemplate, formTemplate, proTemplate } from "./code-template";
 const uploadTypes = ["imageUpload", "fileUpload"];
+function isArrayOptions(item, options) {
+  var _a;
+  const optionData = (options ?? ((_a = item == null ? void 0 : item.props) == null ? void 0 : _a.options)) || [];
+  const jsVar = transformJsVar(optionData);
+  if (jsVar != null) {
+    return jsVar.dataType === "array";
+  }
+  return Array.isArray(optionData);
+}
 function generateFooterCode(config, showFooterExpand) {
   if (!config.footer) {
     return "";
@@ -16,12 +25,23 @@ function generateFooterCode(config, showFooterExpand) {
   return templateEngine(footerTemplate, {
     footerStyleCode: code,
     footerPropsCode: generatePropsCode(config.footerProps),
-    showFooterExpand
+    showFooterExpand,
+    submitText: config.submitText,
+    resetText: config.resetText,
+    searchExpandText: config.searchExpandText,
+    searchShrinkText: config.searchShrinkText
   });
 }
 function generateFormItemProps(item, indentSize, indentChar) {
   const { vIf, label, prop, itemProps } = item;
-  const props = { label, prop, ...itemProps || {}, vIf };
+  const labelWidth = itemProps == null ? void 0 : itemProps.labelWidth;
+  const props = {
+    label,
+    prop,
+    ...itemProps || {},
+    labelWidth: typeof labelWidth === "number" ? `${labelWidth}px` : labelWidth,
+    vIf
+  };
   const code = generatePropsCode(props, null, indentSize);
   return addIndentChar(code, indentChar);
 }
@@ -48,27 +68,27 @@ function getItemComponentTag(item, componentData) {
     }
   } else if (item.type === "autocomplete") {
     const fetchSuggestions = ((_b = item.props) == null ? void 0 : _b.fetchSuggestions) ?? [];
-    if (Array.isArray(fetchSuggestions)) {
+    if (isArrayOptions(item, fetchSuggestions)) {
       return "el-autocomplete";
     }
   } else if (item.type === "mention") {
     const options = ((_c = item.props) == null ? void 0 : _c.options) ?? [];
-    if (Array.isArray(options)) {
+    if (isArrayOptions(item, options)) {
       return "el-mention";
     }
   } else if (item.type === "transfer") {
     const data = ((_d = item.props) == null ? void 0 : _d.data) ?? [];
-    if (Array.isArray(data)) {
+    if (isArrayOptions(item, data)) {
       return "el-transfer";
     }
   } else if (item.type === "treeSelect" || item.type === "treeMultipleSelect") {
     const data = ((_e = item.props) == null ? void 0 : _e.data) ?? [];
-    if (Array.isArray(data)) {
+    if (isArrayOptions(item, data)) {
       return "el-tree-select";
     }
   } else if (item.type === "cascader" || item.type === "multipleCascader") {
     const options = ((_f = item.props) == null ? void 0 : _f.options) ?? [];
-    if (Array.isArray(options)) {
+    if (isArrayOptions(item, options)) {
       return "el-cascader";
     }
   }
@@ -106,7 +126,13 @@ function generateContentCode(config, showFooterExpand, componentData, itemTypeDa
     rowProps: config.rowProps,
     indentSize: 4,
     contentExtra: generateFooterCode(config, showFooterExpand),
-    contentExtraColProps: config.footerColProps || { span: 24 },
+    contentExtraColProps: {
+      ...config.autoFooterCol ? computeContentExtraCol(
+        config.grid === true ? { span: 12 } : config.grid || {},
+        (config.items || []).filter((d) => d.vIf == null).length
+      ) : { span: 24 },
+      ...config.footerColProps || {}
+    },
     generateFormItemProps,
     generateColProps,
     generateComponentProps,
@@ -121,7 +147,8 @@ function generateContentCode(config, showFooterExpand, componentData, itemTypeDa
     getComponentTag: (item) => getItemComponentTag(item, componentData),
     isContainerType: (item) => isContainerType(item, itemTypeData),
     addIndentChar,
-    generatePropsCode
+    generatePropsCode,
+    isArrayOptions
   });
   [
     "img",
@@ -145,22 +172,21 @@ function generateContentCode(config, showFooterExpand, componentData, itemTypeDa
 function getUploadValidatorCode(item) {
   const refName = getComponentRefName(item);
   return `(_rule, value, callback) => {
-  if (value && ${refName}.value && !${refName}.value.isDone()) {
+  const compRef = getProFormRefs()['${refName}'];
+  if (compRef && compRef.isDone && !compRef.isDone()) {
     return callback(new Error('${item.label}还未上传完毕'));
   }
   callback();
 }`;
 }
-function generateRuleCode(items, componentData, itemTypeData) {
+function generateRuleCode(items, componentData, itemTypeData, requiredLang) {
   const rules = {};
   eachTree(items, (item) => {
     if (isContainerType(item, itemTypeData)) {
       return;
     }
     const itemRules = [];
-    const typeData = item.type ? [...itemTypeData || [], ...defaultItemTypeData].find(
-      (d) => d.type === item.type
-    ) : void 0;
+    const typeData = getItemTypeData(item, itemTypeData);
     if (item.required) {
       const config = getComponentItemByType(item.type, componentData);
       const componentPropsData = {
@@ -173,7 +199,8 @@ function generateRuleCode(items, componentData, itemTypeData) {
         message: getRuleMessage(
           item.label,
           item.requiredMessage,
-          componentPropsData.placeholder
+          componentPropsData.placeholder,
+          requiredLang
         ),
         trigger: (typeData == null ? void 0 : typeData.requiredTrigger) ?? "change"
       });
@@ -191,18 +218,14 @@ function generateRuleCode(items, componentData, itemTypeData) {
   return obj2Str(rules, false, 2);
 }
 function getComponentProps(item, componentData, itemTypeData) {
-  const data = getComponentItemByType(item.type, componentData);
+  const typeData = getComponentItemByType(item.type, componentData);
   const props = {
-    ...(data == null ? void 0 : data.defaultProps) || {},
+    ...(typeData == null ? void 0 : typeData.defaultProps) || {},
     ...item.props || {},
-    ...(data == null ? void 0 : data.reservedProps) || {}
+    ...(typeData == null ? void 0 : typeData.reservedProps) || {}
   };
   const refName = getComponentRefName(item);
-  props.ref = new JsVar({
-    name: refName,
-    code: `/** ${item.label || item.prop}引用 */
-const ${refName} = ref(null);`
-  });
+  props.ref = new JsVar({ name: refName });
   if (item.type && isContainerType(item, itemTypeData)) {
     props.vIf = item.vIf;
     if (item.type === "steps") {
@@ -243,7 +266,8 @@ const ${refName} = ref(null);`
     props.options = new JsVar({
       name: `${keyName}CascaderOptions`,
       code: `/** ${labelName}级联数据 */
-const ${keyName}CascaderOptions = ref(${obj2Str(props.options || [], false, 0)});`
+const ${keyName}CascaderOptions = ref(${obj2Str(props.options || [], false, 0)});`,
+      dataType: Array.isArray(props.options || []) ? "array" : void 0
     });
     const temp = props.props || {};
     if (item.type === "multipleCascader") {
@@ -254,12 +278,6 @@ const ${keyName}CascaderOptions = ref(${obj2Str(props.options || [], false, 0)})
       code: `/** ${labelName}级联配置 */
 const ${keyName}CascaderProps = reactive(${obj2Str(temp, false, 0)});`
     });
-  } else if (item.type === "virtualTreeSelect" || item.type === "virtualTreeMultipleSelect") {
-    props.treeProps = new JsVar({
-      name: `${keyName}TreeProps`,
-      code: `/** ${labelName}树配置 */
-const ${keyName}TreeProps = reactive(${obj2Str(props.treeProps || {}, false, 0)});`
-    });
   } else if (item.type === "tableSelect" || item.type === "tableMultipleSelect") {
     props.tableProps = new JsVar({
       name: `${keyName}TableProps`,
@@ -282,11 +300,12 @@ const ${keyName}TreeProps = ref(${obj2Str(props.treeProps || {}, false, 0)});`
     props.data = new JsVar({
       name: `${keyName}Data`,
       code: `/** ${labelName}数据 */
-const ${keyName}Data = ref(${obj2Str(props.data || [], false, 0)});`
+const ${keyName}Data = ref(${obj2Str(props.data || [], false, 0)});`,
+      dataType: Array.isArray(props.data || []) ? "array" : void 0
     });
   } else if (item.type === "select" || item.type === "multipleSelect" || item.type === "radio" || item.type === "radioButton" || item.type === "checkbox" || item.type === "checkboxButton") {
     const options = props.options || [];
-    if (!Array.isArray(data)) {
+    if (!Array.isArray(options)) {
       props.options = new JsVar({
         name: `${keyName}Options`,
         code: `/** ${labelName}选项数据 */
@@ -297,37 +316,30 @@ const ${keyName}Options = ref(${obj2Str(options, false, 0)});`
     props.options = new JsVar({
       name: `${keyName}Options`,
       code: `/** ${labelName}选项数据 */
-const ${keyName}Options = ref(${obj2Str(props.options || [], false, 0)});`
+const ${keyName}Options = ref(${obj2Str(props.options || [], false, 0)});`,
+      dataType: Array.isArray(props.options || []) ? "array" : void 0
     });
   } else if (item.type === "autocomplete") {
     props.fetchSuggestions = new JsVar({
       name: `${keyName}FetchSuggestions`,
       code: `/** ${labelName}建议数据 */
-const ${keyName}FetchSuggestions = ref(${obj2Str(props.fetchSuggestions || [], false, 0)});`
+const ${keyName}FetchSuggestions = ref(${obj2Str(props.fetchSuggestions || [], false, 0)});`,
+      dataType: Array.isArray(props.fetchSuggestions || []) ? "array" : void 0
     });
   }
   return props;
 }
-function getImportAndVarCode(config) {
+function getImportAndVarCode(config, componentData) {
   const imports = /* @__PURE__ */ new Set([]);
   const codes = /* @__PURE__ */ new Set([]);
   eachTree(config.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';`
-      );
+    var _a;
+    const componentImport = (_a = getComponentItemByType(
+      item.type,
+      componentData
+    )) == null ? void 0 : _a.componentImport;
+    if (componentImport) {
+      imports.add(componentImport);
     }
   });
   if (config.showSearchExpand) {
@@ -360,7 +372,7 @@ function getImportAndVarCode(config) {
   });
   return {
     imports: [
-      `import { ref, reactive, computed, nextTick } from 'vue';`,
+      `import { ref, reactive, nextTick, getCurrentInstance } from 'vue';`,
       `import { useFormData } from '@/utils/use-form-data';`,
       `import httpRequest from '@/utils/request';`,
       ...imports
@@ -370,7 +382,7 @@ function getImportAndVarCode(config) {
       `import { reactive } from 'vue';`,
       `import { useFormData } from '@/utils/use-form-data';`,
       `import { getFormInitValue } from '@/components/ProForm/util';`,
-      `import ProForm from '@/components/ProForm/index';`,
+      `import ProForm from '@/components/ProForm/index.vue';`,
       ...proImports
     ],
     proCodes: [...proCodes]
@@ -384,12 +396,13 @@ function getElNormalizeItems(formItems, componentData, itemTypeData) {
       initValue: void 0
     };
   });
-  return JSON.parse(JSON.stringify(items));
+  return deepCloneObject(items, true);
 }
-function generateElFormCode(data, componentData, itemTypeData) {
-  const config = JSON.parse(
-    JSON.stringify({ ...data || {}, items: (data == null ? void 0 : data.items) || [] })
-  );
+function generateElFormCode(data, componentData, itemTypeData, requiredLang) {
+  const config = deepCloneObject({
+    ...data || {},
+    items: (data == null ? void 0 : data.items) || []
+  });
   const formInitValue = getFormInitValue(config.items, itemTypeData);
   config.items = getElNormalizeItems(config.items, componentData, itemTypeData);
   const elFormProps = pick(config, [
@@ -417,38 +430,35 @@ function generateElFormCode(data, componentData, itemTypeData) {
     componentData,
     itemTypeData
   );
-  const { imports, codes } = getImportAndVarCode(config);
-  const refNamesCode = config.items.map(
-    (item) => `${getComponentRefName(item)}: ${getComponentRefName(item)}.value`
-  ).join(",\n    ");
+  const { imports, codes } = getImportAndVarCode(config, componentData);
   codes.push(`/** 获取组件引用 */
+const currentInstance = getCurrentInstance();
 const getProFormRefs = () => {
-  return {
-    ${refNamesCode}
-  };
+  return currentInstance.ctx.$refs;
 };`);
-  codes.push(`/** 表单项数量 */
-const items = { length: ${config.items.length} };`);
   const templateData = {
     modelCode: obj2Str(formInitValue, false, 2),
     formContentCode,
     formPropsCode: generatePropsCode(elFormProps, false, 4, false),
-    formRuleCode: generateRuleCode(config.items, componentData, itemTypeData),
+    formRuleCode: generateRuleCode(
+      config.items,
+      componentData,
+      itemTypeData,
+      requiredLang
+    ),
     formImportCode: imports.join("\n  "),
     formVarCode: addIndentChar(codes.join("\n\n"), "  "),
     showFooterExpand: sfe
   };
   return templateEngine(formTemplate, templateData);
 }
-function generateProFormCode(data) {
-  const config = JSON.parse(
-    JSON.stringify({ ...data || {}, items: (data == null ? void 0 : data.items) || [] })
-  );
+function generateProFormCode(data, componentData) {
+  const config = deepCloneObject({
+    ...data || {},
+    items: (data == null ? void 0 : data.items) || []
+  });
   const sfe = config.showSearchExpand;
-  if (sfe) {
-    config.submitText = "搜索";
-  }
-  const { proImports, proCodes } = getImportAndVarCode(config);
+  const { proImports, proCodes } = getImportAndVarCode(config, componentData);
   const templateData = {
     proFormConfigCode: obj2Str(config, false, 2, () => void 0),
     proFormImportCode: proImports.join("\n  "),
@@ -472,5 +482,6 @@ export {
   getElNormalizeItems,
   getImportAndVarCode,
   getItemComponentTag,
-  getUploadValidatorCode
+  getUploadValidatorCode,
+  isArrayOptions
 };

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

@@ -12,6 +12,8 @@ export declare class JsVar {
     imports?: string[];
     /** 生成 ProForm 代码时添加的导入代码 */
     proImports?: string[];
+    /** 原始数据类型 */
+    dataType?: string;
     /** 转 JSON 时标识是 JsVar 对象 */
     __isJsVar: boolean;
     constructor(props: Omit<JsVar, '__isJsVar'>);

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

@@ -1,7 +1,7 @@
 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 { codeStringPrefix } from "../../ele-pro-form/components/render-util";
+import { codeStringPrefix } from "../../ele-pro-form/components/render-core";
 class JsVar {
   constructor(props) {
     /** 生成代码时显示的变量名称 */
@@ -14,6 +14,8 @@ class JsVar {
     __publicField(this, "imports");
     /** 生成 ProForm 代码时添加的导入代码 */
     __publicField(this, "proImports");
+    /** 原始数据类型 */
+    __publicField(this, "dataType");
     /** 转 JSON 时标识是 JsVar 对象 */
     __publicField(this, "__isJsVar", true);
     this.name = props.name;
@@ -21,6 +23,7 @@ class JsVar {
     this.proCode = props.proCode;
     this.imports = props.imports;
     this.proImports = props.proImports;
+    this.dataType = props.dataType;
   }
 }
 function removePrefixStr(content, prefix) {

package/es/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;
+    };
+};

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

@@ -0,0 +1,123 @@
+import { defineComponent, ref, watch, createBlock, openBlock, withCtx, createElementVNode, createVNode, unref, normalizeClass, resolveDynamicComponent } from "vue";
+import { ElIcon } from "element-plus";
+import { CheckOutlined, CopyOutlined, DownloadOutlined } from "../../icons/index";
+import { copyText, download } from "../../utils/common";
+import { useTimer } from "../../utils/hook";
+import EleModal from "../../ele-modal/index";
+import EleTabBar from "../../ele-tab-bar/index";
+import { generateProFormCode, generateElFormCode } from "./code-generator";
+import CodeViewer from "./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__ */ 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] = useTimer(1e3);
+    const tabItems = [
+      { value: "ProForm", label: "ProForm" },
+      { value: "ElForm", label: "ElForm" }
+    ];
+    const tabActive = ref("ProForm");
+    const codeContent = ref("");
+    const generateData = ["", ""];
+    const handleUpdateModelValue = (visible) => {
+      emit("update:modelValue", visible);
+    };
+    const setCodeContent = () => {
+      codeContent.value = generateData[tabActive.value === "ElForm" ? 1 : 0];
+    };
+    const handleCopy = () => {
+      copyText(codeContent.value).then(() => {
+        setCopied();
+      }).catch((error) => {
+        console.error(error);
+        resetCopied();
+      });
+    };
+    const handleDownload = () => {
+      download(codeContent.value, "index.vue", "text/plain;charset=utf-8");
+    };
+    watch(
+      () => props.modelValue,
+      (visible) => {
+        if (visible) {
+          const proCode = generateProFormCode(props.config, props.componentData);
+          const elCode = generateElFormCode(props.config, props.componentData);
+          generateData[0] = proCode;
+          generateData[1] = elCode;
+          setCodeContent();
+        }
+      }
+    );
+    watch(tabActive, () => {
+      setCodeContent();
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), 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: withCtx(() => [
+          createElementVNode("div", _hoisted_1, [
+            createVNode(EleTabBar, {
+              modelValue: tabActive.value,
+              "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => tabActive.value = $event),
+              items: tabItems
+            }, {
+              extra: withCtx(() => [
+                createVNode(unref(ElIcon), {
+                  class: normalizeClass([
+                    "ele-pro-form-builder-code-icon-tool",
+                    { "is-copied": unref(copied) }
+                  ]),
+                  title: "复制",
+                  onClick: handleCopy
+                }, {
+                  default: withCtx(() => [
+                    unref(copied) ? (openBlock(), createBlock(unref(CheckOutlined), { key: 0 })) : (openBlock(), createBlock(unref(CopyOutlined), { key: 1 }))
+                  ]),
+                  _: 1
+                }, 8, ["class"]),
+                createVNode(unref(ElIcon), {
+                  class: "ele-pro-form-builder-code-icon-tool",
+                  title: "下载",
+                  onClick: handleDownload
+                }, {
+                  default: withCtx(() => [
+                    createVNode(unref(DownloadOutlined))
+                  ]),
+                  _: 1
+                })
+              ]),
+              _: 1
+            }, 8, ["modelValue"]),
+            createElementVNode("div", _hoisted_2, [
+              (openBlock(), createBlock(resolveDynamicComponent(_ctx.codeViewerComponent || CodeViewer), { code: codeContent.value }, null, 8, ["code"]))
+            ])
+          ])
+        ]),
+        _: 1
+      }, 8, ["modelValue"]);
+    };
+  }
+});
+export {
+  _sfc_main as default
+};

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

@@ -1,16 +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";
+export declare const proTemplate: string;
 /**
  * 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";
+export declare const formTemplate: string;
 /**
  * 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><%# } } %>";
+export declare const contentTemplate: string;
 /**
  * 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>";
+export declare const footerTemplate: string;