ele-admin-plus 1.3.0-beta.2 → 1.3.0-beta.3

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

@@ -1,130 +1,16 @@
-import { ProFormItemProps, ProFormItemTypeData } from '../../ele-pro-form/types';
-import { ComponentGroup, 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";
+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\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";
+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.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.isContainerType(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><%# } } %>";
+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      @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: TemplateFormConfig, 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 组件库数据
- * @param itemTypeData 高级表单组件类型数据
- */
-export declare function generateContentCode(items: ProFormItemProps[], formProps: 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 items 表单项
- * @param formProps 表单其它属性
- */
-export declare function getImportAndVarCode(items: ProFormItemProps[], formProps: TemplateFormConfig): {
-    imports: string[];
-    codes: string[];
-    proImports: string[];
-    proCodes: string[];
-};
-/**
- * 取消表单项数据的多余属性
- * @param items 表单项数据
- * @param isEl 是否是生成 ElForm 代码
- * @param componentData 组件库数据
- * @param itemTypeData 高级表单组件类型数据
- */
-export declare function getNormalizeItems(formItems?: ProFormItemProps[], isEl?: boolean, componentData?: ComponentGroup[], itemTypeData?: ProFormItemTypeData[]): any;
-/**
- * 生成 ProForm 代码
- * @param config 表单配置数据
- * @param componentData 组件库数据
- * @param itemTypeData 高级表单组件类型数据
- */
-export declare function generateProFormCode(config?: TemplateFormConfig, componentData?: ComponentGroup[], itemTypeData?: ProFormItemTypeData[]): string;
-/**
- * 生成 ElForm 代码
- * @param config 表单配置数据
- * @param componentData 组件库数据
- * @param itemTypeData 高级表单组件类型数据
- */
-export declare function generateElFormCode(config?: TemplateFormConfig, componentData?: ComponentGroup[], itemTypeData?: ProFormItemTypeData[]): string;
+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>";