reactor：【infra 基础设施】优化 vben5 + element-plus 的 schema 模版

YunaiV
1 parent d7c62168
Showing 9 changed files with 170 additions and 140 deletions
yudao-module-infra/src/main/java/cn/iocoder/yudao/module/infra/enums/codegen/CodegenFrontTypeEnum.java
yudao-module-infra/src/main/java/cn/iocoder/yudao/module/infra/service/codegen/inner/CodegenEngine.java
yudao-module-infra/src/main/resources/codegen/vue3_vben5_ele/schema/api/api.ts.vm
yudao-module-infra/src/main/resources/codegen/vue3_vben5_ele/schema/views/data.ts.vm
yudao-module-infra/src/main/resources/codegen/vue3_vben5_ele/schema/views/form.vue.vm
yudao-module-infra/src/main/resources/codegen/vue3_vben5_ele/schema/views/index.vue.vm
yudao-module-infra/src/main/resources/codegen/vue3_vben5_ele/schema/views/modules/form_sub_erp.vue.vm
yudao-module-infra/src/main/resources/codegen/vue3_vben5_ele/schema/views/modules/form_sub_normal.vue.vm
yudao-module-infra/src/main/resources/codegen/vue3_vben5_ele/schema/views/modules/list_sub_erp.vue.vm
@@ -21,9 +21,8 @@ public enum CodegenFrontTypeEnum {
     VUE3_VBEN5_ANTD_SCHEMA(40), // Vue3 VBEN5 + ANTD + schema 模版
     VUE3_VBEN5_ANTD_GENERAL(41), // Vue3 VBEN5 + ANTD 标准模版
-    // TODO @puhui999：:50、51 会好点；
-    VUE3_VBEN5_EP_SCHEMA(42), // Vue3 VBEN5 + EP + schema 模版
-    VUE3_VBEN5_EP_GENERAL(43), // Vue3 VBEN5 + EP 标准模版
+    VUE3_VBEN5_EP_SCHEMA(50), // Vue3 VBEN5 + EP + schema 模版
+    VUE3_VBEN5_EP_GENERAL(51), // Vue3 VBEN5 + EP 标准模版
     ;
     /**
@@ -343,7 +343,7 @@ public class CodegenEngine {
         filePath = formatFilePath(filePath, bindingMap);
         String content = templateEngine.getTemplate(vmPath).render(bindingMap);
         // 格式化代码
-        content = prettyCode(content);
+        content = prettyCode(content, vmPath);
         result.put(filePath, content);
     }
@@ -383,11 +383,14 @@ public class CodegenEngine {
      * 如果不处理，Vue 的 Pretty 格式校验可能会报错
      *
      * @param content 格式化前的代码
+     * @param vmPath 模板路径
      * @return 格式化后的代码
      */
-    private String prettyCode(String content) {
-        // Vue 界面：去除字段后面多余的 , 逗号，解决前端的 Pretty 代码格式检查的报错
-        content = content.replaceAll(",\n}", "\n}").replaceAll(",\n  }", "\n  }");
+    private String prettyCode(String content, String vmPath) {
+        // Vue 界面：去除字段后面多余的 , 逗号，解决前端的 Pretty 代码格式检查的报错（需要排除 vben5）
+        if (!StrUtil.contains(vmPath, "vben5")) {
+            content = content.replaceAll(",\n}", "\n}").replaceAll(",\n  }", "\n  }");
+        }
         // Vue 界面：去除多的 dateFormatter，只有一个的情况下，说明没使用到
         if (StrUtil.count(content, "dateFormatter") == 1) {
             content = StrUtils.removeLineContains(content, "dateFormatter");
+#set ($apiName = "${table.moduleName.substring(0,1).toUpperCase()}${table.moduleName.substring(1)}${simpleClassName}Api")
 import type { PageParam, PageResult } from '@vben/request';
 import type { Dayjs } from 'dayjs';
 import { requestClient } from '#/api/request';
 #set ($baseURL = "/${table.moduleName}/${simpleClassName_strikeCase}")
-export namespace ${simpleClassName}Api {
+export namespace ${apiName} {
 ## 特殊：主子表专属逻辑
 #foreach ($subTable in $subTables)
   #set ($index = $foreach.count - 1)
@@ -60,27 +61,35 @@ export namespace ${simpleClassName}Api {
 #if ( $table.templateType != 2 )
 /** 查询${table.classComment}分页 */
 export function get${simpleClassName}Page(params: PageParam) {
-  return requestClient.get<PageResult<${simpleClassName}Api.${simpleClassName}>>('${baseURL}/page', { params });
+  return requestClient.get<PageResult<${apiName}.${simpleClassName}>>(
+    '${baseURL}/page',
+    { params },
+  );
 }
 #else
 /** 查询${table.classComment}列表 */
 export function get${simpleClassName}List(params: any) {
-  return requestClient.get<${simpleClassName}Api.${simpleClassName}[]>('${baseURL}/list', { params });
+  return requestClient.get<${apiName}.${simpleClassName}[]>(
+    '${baseURL}/list',
+    { params },
+  );
 }
 #end
 /** 查询${table.classComment}详情 */
 export function get${simpleClassName}(id: number) {
-  return requestClient.get<${simpleClassName}Api.${simpleClassName}>(`${baseURL}/get?id=${id}`);
+  return requestClient.get<${apiName}.${simpleClassName}>(
+    `${baseURL}/get?id=${id}`,
+  );
 }
 /** 新增${table.classComment} */
-export function create${simpleClassName}(data: ${simpleClassName}Api.${simpleClassName}) {
+export function create${simpleClassName}(data: ${apiName}.${simpleClassName}) {
   return requestClient.post('${baseURL}/create', data);
 }
 /** 修改${table.classComment} */
-export function update${simpleClassName}(data: ${simpleClassName}Api.${simpleClassName}) {
+export function update${simpleClassName}(data: ${apiName}.${simpleClassName}) {
   return requestClient.put('${baseURL}/update', data);
 }
@@ -92,7 +101,9 @@ export function delete${simpleClassName}(id: number) {
 #if ( $table.templateType != 2 && $deleteBatchEnable)
 /** 批量删除${table.classComment} */
 export function delete${simpleClassName}List(ids: number[]) {
-  return requestClient.delete(`${baseURL}/delete-list?ids=${ids.join(',')}`)
+  return requestClient.delete(
+    `${baseURL}/delete-list?ids=${ids.join(',')}`,
+  );
 }
 #end
@@ -118,31 +129,38 @@ export function export${simpleClassName}(params: any) {
 #if ( $table.templateType == 11 )
 /** 获得${subTable.classComment}分页 */
 export function get${subSimpleClassName}Page(params: PageParam) {
-  return requestClient.get<PageResult<${simpleClassName}Api.${subSimpleClassName}>>(`${baseURL}/${subSimpleClassName_strikeCase}/page`, { params });
+  return requestClient.get<PageResult<${apiName}.${subSimpleClassName}>>(
+    `${baseURL}/${subSimpleClassName_strikeCase}/page`,
+    { params },
+  );
 }
 ## 情况二：非 MASTER_ERP 时，需要列表查询子表
 #else
   #if ( $subTable.subJoinMany )
 /** 获得${subTable.classComment}列表 */
 export function get${subSimpleClassName}ListBy${SubJoinColumnName}(${subJoinColumn.javaField}: number) {
-  return requestClient.get<${simpleClassName}Api.${subSimpleClassName}[]>(`${baseURL}/${subSimpleClassName_strikeCase}/list-by-${subJoinColumn_strikeCase}?${subJoinColumn.javaField}=${${subJoinColumn.javaField}}`);
+  return requestClient.get<${apiName}.${subSimpleClassName}[]>(
+    `${baseURL}/${subSimpleClassName_strikeCase}/list-by-${subJoinColumn_strikeCase}?${subJoinColumn.javaField}=${${subJoinColumn.javaField}}`,
+  );
 }
   #else
 /** 获得${subTable.classComment} */
 export function get${subSimpleClassName}By${SubJoinColumnName}(${subJoinColumn.javaField}: number) {
-  return requestClient.get<${simpleClassName}Api.${subSimpleClassName}>(`${baseURL}/${subSimpleClassName_strikeCase}/get-by-${subJoinColumn_strikeCase}?${subJoinColumn.javaField}=${${subJoinColumn.javaField}}`);
+  return requestClient.get<${apiName}.${subSimpleClassName}>(
+    `${baseURL}/${subSimpleClassName_strikeCase}/get-by-${subJoinColumn_strikeCase}?${subJoinColumn.javaField}=${${subJoinColumn.javaField}}`,
+  );
 }
   #end
 #end
 ## 特殊：MASTER_ERP 时，支持单个的新增、修改、删除操作
 #if ( $table.templateType == 11 )
 /** 新增${subTable.classComment} */
-export function create${subSimpleClassName}(data: ${simpleClassName}Api.${subSimpleClassName}) {
+export function create${subSimpleClassName}(data: ${apiName}.${subSimpleClassName}) {
   return requestClient.post(`${baseURL}/${subSimpleClassName_strikeCase}/create`, data);
 }
 /** 修改${subTable.classComment} */
-export function update${subSimpleClassName}(data: ${simpleClassName}Api.${subSimpleClassName}) {
+export function update${subSimpleClassName}(data: ${apiName}.${subSimpleClassName}) {
   return requestClient.put(`${baseURL}/${subSimpleClassName_strikeCase}/update`, data);
 }
@@ -154,13 +172,17 @@ export function delete${subSimpleClassName}(id: number) {
 #if ($deleteBatchEnable)
 /** 批量删除${subTable.classComment} */
 export function delete${subSimpleClassName}List(ids: number[]) {
-  return requestClient.delete(`${baseURL}/${subSimpleClassName_strikeCase}/delete-list?ids=${ids.join(',')}`)
+  return requestClient.delete(
+    `${baseURL}/${subSimpleClassName_strikeCase}/delete-list?ids=${ids.join(',')}`,
+  );
 }
 #end
 /** 获得${subTable.classComment} */
 export function get${subSimpleClassName}(id: number) {
-  return requestClient.get<${simpleClassName}Api.${subSimpleClassName}>(`${baseURL}/${subSimpleClassName_strikeCase}/get?id=${id}`);
+  return requestClient.get<${apiName}.${subSimpleClassName}>(
+    `${baseURL}/${subSimpleClassName_strikeCase}/get?id=${id}`,
+  );
 }
 #end
 #end
+#set ($apiName = "${table.moduleName.substring(0,1).toUpperCase()}${table.moduleName.substring(1)}${simpleClassName}Api")
 import type { VbenFormSchema } from '#/adapter/form';
 import type { VxeTableGridOptions } from '#/adapter/vxe-table';
-import type { ${simpleClassName}Api } from '#/api/${table.moduleName}/${table.businessName}';
+import type { ${apiName} } from '#/api/${table.moduleName}/${table.businessName}';
-import { z } from '#/adapter/form';
-import {
-    DICT_TYPE,
-    getDictOptions,
-    getRangePickerDefaultProps,
-} from '#/utils';
+import { DICT_TYPE, getDictOptions, getRangePickerDefaultProps, } from '#/utils';
 #if(${table.templateType} == 2)## 树表需要导入这些
 import { get${simpleClassName}List } from '#/api/${table.moduleName}/${table.businessName}';
 import { handleTree } from '@vben/utils';
@@ -186,7 +182,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
 }
 /** 列表的字段 */
-export function useGridColumns(): VxeTableGridOptions<${simpleClassName}Api.${simpleClassName}>['columns'] {
+export function useGridColumns(): VxeTableGridOptions<${apiName}.${simpleClassName}>['columns'] {
   return [
 #if ($table.templateType != 2 && $deleteBatchEnable)
   { type: 'checkbox', width: 40 },
@@ -389,7 +385,7 @@ export function use${subSimpleClassName}GridFormSchema(): VbenFormSchema[] {
 }
 /** 列表的字段 */
-export function use${subSimpleClassName}GridColumns(): VxeTableGridOptions<${simpleClassName}Api.${subSimpleClassName}>['columns'] {
+export function use${subSimpleClassName}GridColumns(): VxeTableGridOptions<${apiName}.${subSimpleClassName}>['columns'] {
     return [
         #if ($table.templateType != 2 && $deleteBatchEnable)
             { type: 'checkbox', width: 40 },
@@ -426,7 +422,7 @@ export function use${subSimpleClassName}GridColumns(): VxeTableGridOptions&lt;${sim
 #else
     #if ($subTable.subJoinMany) ## 一对多
     /** 新增/修改列表的字段 */
-    export function use${subSimpleClassName}GridEditColumns(): VxeTableGridOptions<${simpleClassName}Api.${subSimpleClassName}>['columns'] {
+    export function use${subSimpleClassName}GridEditColumns(): VxeTableGridOptions<${apiName}.${subSimpleClassName}>['columns'] {
         return [
             #foreach($column in $subColumns)
                 #if ($column.createOperation || $column.updateOperation)
@@ -602,4 +598,4 @@ export function use${subSimpleClassName}GridColumns(): VxeTableGridOptions&lt;${sim
     }
     #end
 #end
 -#end
+#end
 \ No newline at end of file
+#set ($apiName = "${table.moduleName.substring(0,1).toUpperCase()}${table.moduleName.substring(1)}${simpleClassName}Api")
 <script lang="ts" setup>
-import type { ${simpleClassName}Api } from '#/api/${table.moduleName}/${table.businessName}';
+import type { ${apiName} } from '#/api/${table.moduleName}/${table.businessName}';
+
+import { computed, ref } from 'vue';
 import { useVbenModal } from '@vben/common-ui';
-import { ElMessage, ElTabs, ElTabPane, ElCheckbox, ElInput, ElSelect, ElRadioGroup, ElCheckboxGroup, ElDatePicker } from 'element-plus';
+
+import { ElMessage#if ($table.templateType == 11), ElTabs, ElTabPane#end } from 'element-plus';
+
+import { useVbenForm } from '#/adapter/form';
+import { create${simpleClassName}, get${simpleClassName}, update${simpleClassName} } from '#/api/${table.moduleName}/${table.businessName}';
+import { $t } from '#/locales';
 ## 特殊：主子表专属逻辑
 #if ( $table.templateType == 10 || $table.templateType == 12 )
   #foreach ($subSimpleClassName in $subSimpleClassNames)
@@ -12,21 +20,15 @@ import { ElMessage, ElTabs, ElTabPane, ElCheckbox, ElInput, ElSelect, ElRadioGro
   #end
 #end
-import { computed, ref } from 'vue';
-import { $t } from '#/locales';
-import { useVbenForm } from '#/adapter/form';
-import { get${simpleClassName}, create${simpleClassName}, update${simpleClassName} } from '#/api/${table.moduleName}/${table.businessName}';
-
 import { useFormSchema } from '../data';
 const emit = defineEmits(['success']);
-const formData = ref<${simpleClassName}Api.${simpleClassName}>();
+const formData = ref<${apiName}.${simpleClassName}>();
 const getTitle = computed(() => {
   return formData.value?.id
     ? $t('ui.actionTitle.edit', ['${table.classComment}'])
     : $t('ui.actionTitle.create', ['${table.classComment}']);
 });
-
 ## 特殊：主子表专属逻辑
 #if ( $table.templateType == 10 || $table.templateType == 12 )
   #if ( $subTables && $subTables.size() > 0 )
@@ -51,7 +53,7 @@ const [Form, formApi] = useVbenForm({
   },
   layout: 'horizontal',
   schema: useFormSchema(),
-  showDefaultActions: false
+  showDefaultActions: false,
 });
 const [Modal, modalApi] = useVbenModal({
@@ -60,8 +62,8 @@ const [Modal, modalApi] = useVbenModal({
     if (!valid) {
       return;
     }
-    ## 特殊：主子表专属逻辑
-    #if ( $table.templateType == 10 || $table.templateType == 12 )
+## 特殊：主子表专属逻辑
+#if ( $table.templateType == 10 || $table.templateType == 12 )
       #if ( $subTables && $subTables.size() > 0 )
         // 校验子表单
         #foreach ($subTable in $subTables)
@@ -78,12 +80,12 @@ const [Modal, modalApi] = useVbenModal({
           #end
         #end
       #end
-    #end
+#end
     modalApi.lock();
     // 提交表单
-    const data = (await formApi.getValues()) as ${simpleClassName}Api.${simpleClassName};
-    ## 特殊：主子表专属逻辑
-    #if ( $table.templateType == 10 || $table.templateType == 12 )
+    const data = (await formApi.getValues()) as ${apiName}.${simpleClassName};
+## 特殊：主子表专属逻辑
+#if ( $table.templateType == 10 || $table.templateType == 12 )
       #if ( $subTables && $subTables.size() > 0 )
         // 拼接子表的数据
         #foreach ($subTable in $subTables)
@@ -96,7 +98,7 @@ const [Modal, modalApi] = useVbenModal({
           #end
         #end
       #end
-    #end
+#end
     try {
       await (formData.value?.id ? update${simpleClassName}(data) : create${simpleClassName}(data));
       // 关闭并提示
@@ -113,21 +115,20 @@ const [Modal, modalApi] = useVbenModal({
       return;
     }
     // 加载数据
-    let data = modalApi.getData<${simpleClassName}Api.${simpleClassName}>();
-    if (!data) {
+    const data = modalApi.getData<${apiName}.${simpleClassName}>();
+    if (!data || !data.id) {
       return;
     }
-    if (data.id) {
-      modalApi.lock();
-      try {
-        data = await get${simpleClassName}(data.id);
-      } finally {
-        modalApi.unlock();
+    modalApi.lock();
+    try {
+      formData.value = await get${simpleClassName}(data.id);
+      // 设置到 values
+      if (formData.value) {
+        await formApi.setValues(formData.value);
       }
+    } finally {
+      modalApi.unlock();
     }
-    // 设置到 values
-    formData.value = data;
-    await formApi.setValues(formData.value);
   },
 });
 </script>
@@ -135,20 +136,20 @@ const [Modal, modalApi] = useVbenModal({
 <template>
   <Modal :title="getTitle">
     <Form class="mx-4" />
-    ## 特殊：主子表专属逻辑
-    #if ( $table.templateType == 10 || $table.templateType == 12 )
+## 特殊：主子表专属逻辑
+#if ( $table.templateType == 10 || $table.templateType == 12 )
       <!-- 子表的表单 -->
-      <el-tabs v-model="subTabsName">
+      <ElTabs v-model="subTabsName">
         #foreach ($subTable in $subTables)
           #set ($index = $foreach.count - 1)
           #set ($subClassNameVar = $subClassNameVars.get($index))
           #set ($subSimpleClassName = $subSimpleClassNames.get($index))
           #set ($subJoinColumn_strikeCase = $subJoinColumn_strikeCases.get($index))
-          <el-tab-pane name="$subClassNameVar" label="${subTable.classComment}">
+          <ElTabPane name="$subClassNameVar" label="${subTable.classComment}">
             <${subSimpleClassName}Form ref="${subClassNameVar}FormRef" :${subJoinColumn_strikeCase}="formData?.id" />
-          </el-tab-pane>
+          </ElTabPane>
         #end
-      </el-tabs>
-    #end
+      </ElTabs>
+#end
   </Modal>
 </template>
+#set ($apiName = "${table.moduleName.substring(0,1).toUpperCase()}${table.moduleName.substring(1)}${simpleClassName}Api")
 <script lang="ts" setup>
 import type { VxeTableGridOptions } from '#/adapter/vxe-table';
-import type { ${simpleClassName}Api } from '#/api/${table.moduleName}/${table.businessName}';
+import type { ${apiName} } from '#/api/${table.moduleName}/${table.businessName}';
-import { Page, useVbenModal } from '@vben/common-ui';
-import { ElMessage, ElTabs, ElTabPane, ElLoading } from 'element-plus';
-import Form from './modules/form.vue';
+import { ref#if ($table.templateType == 2), computed#end } from 'vue';
-## 特殊：主子表专属逻辑
-#if ( $table.templateType == 11 || $table.templateType == 12 )
-    #foreach ($subSimpleClassName in $subSimpleClassNames)
-    #set ($index = $foreach.count - 1)
-    #set ($subSimpleClassName_strikeCase = $subSimpleClassName_strikeCases.get($index))
-import ${subSimpleClassName}List from './modules/${subSimpleClassName_strikeCase}-list.vue'
-    #end
-#end
+import {#if ($table.templateType != 2 && $deleteBatchEnable) confirm,#end Page, useVbenModal } from '@vben/common-ui';
+import { downloadFileFromBlobPart, isEmpty } from '@vben/utils';
+
+import { ElLoading, ElMessage#if ($table.templateType == 11), ElTabs, ElTabPane#end } from 'element-plus';
-import { ref, computed } from 'vue';
-import { $t } from '#/locales';
 import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
 #if (${table.templateType} == 2)## 树表接口
-import { get${simpleClassName}List, delete${simpleClassName}, export${simpleClassName} } from '#/api/${table.moduleName}/${table.businessName}';
+import {
+  delete${simpleClassName},
+  export${simpleClassName},
+  get${simpleClassName}List,
+} from '#/api/${table.moduleName}/${table.businessName}';
 #else## 标准表接口
-import { get${simpleClassName}Page, delete${simpleClassName},#if ($deleteBatchEnable) delete${simpleClassName}List,#end export${simpleClassName} } from '#/api/${table.moduleName}/${table.businessName}';
+import {
+  delete${simpleClassName},#if ($deleteBatchEnable)
+
+  delete${simpleClassName}List,#end
+  export${simpleClassName},
+  get${simpleClassName}Page,
+} from '#/api/${table.moduleName}/${table.businessName}';
 #end
-import { downloadFileFromBlobPart, isEmpty } from '@vben/utils';
+import { $t } from '#/locales';
 import { useGridColumns, useGridFormSchema } from './data';
+import Form from './modules/form.vue';
+## 特殊：主子表专属逻辑
+#if ( $table.templateType == 11 || $table.templateType == 12 )
+    #foreach ($subSimpleClassName in $subSimpleClassNames)
+    #set ($index = $foreach.count - 1)
+    #set ($subSimpleClassName_strikeCase = $subSimpleClassName_strikeCases.get($index))
+import ${subSimpleClassName}List from './modules/${subSimpleClassName_strikeCase}-list.vue';
+    #end
+#end
 #if ($table.templateType == 12 || $table.templateType == 11) ## 内嵌和erp情况
 /** 子表的列表 */
 const subTabsName = ref('$subClassNameVars.get(0)')
 #if ($table.templateType == 11)
-const select${simpleClassName} = ref<${simpleClassName}Api.${simpleClassName}>();
+const select${simpleClassName} = ref<${apiName}.${simpleClassName}>();
 #end
 #end
-
 const [FormModal, formModalApi] = useVbenModal({
   connectedComponent: Form,
   destroyOnClose: true,
 });
-
 #if (${table.templateType} == 2)## 树表特有：控制表格展开收缩
+
 /** 切换树形展开/收缩状态 */
 const isExpanded = ref(true);
 function toggleExpand() {
@@ -60,26 +71,25 @@ function onRefresh() {
 /** 创建${table.classComment} */
 function handleCreate() {
-  formModalApi.setData({}).open();
+  formModalApi.setData(null).open();
 }
 /** 编辑${table.classComment} */
-function handleEdit(row: ${simpleClassName}Api.${simpleClassName}) {
+function handleEdit(row: ${apiName}.${simpleClassName}) {
   formModalApi.setData(row).open();
 }
-
 #if (${table.templateType} == 2)## 树表特有：新增下级
+
 /** 新增下级${table.classComment} */
-function handleAppend(row: ${simpleClassName}Api.${simpleClassName}) {
+function handleAppend(row: ${apiName}.${simpleClassName}) {
   formModalApi.setData({ ${treeParentColumn.javaField}: row.id }).open();
 }
 #end
 /** 删除${table.classComment} */
-async function handleDelete(row: ${simpleClassName}Api.${simpleClassName}) {
+async function handleDelete(row: ${apiName}.${simpleClassName}) {
   const loadingInstance = ElLoading.service({
     text: $t('ui.actionMessage.deleting', [row.id]),
-    background: 'rgba(0, 0, 0, 0.7)',
   });
   try {
     await delete${simpleClassName}(row.id as number);
@@ -93,9 +103,9 @@ async function handleDelete(row: ${simpleClassName}Api.${simpleClassName}) {
 #if ($table.templateType != 2 && $deleteBatchEnable)
 /** 批量删除${table.classComment} */
 async function handleDeleteBatch() {
+  await confirm($t('ui.actionMessage.deleteBatchConfirm'));
   const loadingInstance = ElLoading.service({
-    text: $t('ui.actionMessage.deleting'),
-    background: 'rgba(0, 0, 0, 0.7)',
+    text: $t('ui.actionMessage.deletingBatch'),
   });
   try {
     await delete${simpleClassName}List(checkedIds.value);
@@ -107,13 +117,13 @@ async function handleDeleteBatch() {
   }
 }
-const checkedIds = ref<number[]>([])
+const checkedIds = ref<number[]>([]);
 function handleRowCheckboxChange({
   records,
 }: {
-  records: ${simpleClassName}Api.${simpleClassName}[];
+  records: ${apiName}.${simpleClassName}[];
 }) {
-  checkedIds.value = records.map((item) => item.id);
+  checkedIds.value = records.map((item) => item.id!);
 }
 #end
@@ -146,9 +156,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
     enabled: false,
   },
 #else## 标准表设置
-    pagerConfig: {
-      enabled: true,
-    },
+    keepSource: true,
 #end
     proxyConfig: {
       ajax: {
@@ -178,19 +186,19 @@ const [Grid, gridApi] = useVbenVxeGrid({
       refresh: true,
       search: true,
     },
-  } as VxeTableGridOptions<${simpleClassName}Api.${simpleClassName}>,
+  } as VxeTableGridOptions<${apiName}.${simpleClassName}>,
 #if (${table.templateType} == 11 || $deleteBatchEnable)
-  gridEvents:{
-    #if(${table.templateType} == 11)
-    cellClick: ({ row }: { row: ${simpleClassName}Api.${simpleClassName}}) => {
+  gridEvents: {
+  #if(${table.templateType} == 11)
+    cellClick: ({ row }: { row: ${apiName}.${simpleClassName}}) => {
       select${simpleClassName}.value = row;
     },
-    #end
-    #if(${table.templateType} != 2 && $deleteBatchEnable)
-      checkboxAll: handleRowCheckboxChange,
-      checkboxChange: handleRowCheckboxChange,
-    #end
-  }
+  #end
+  #if(${table.templateType} != 2 && $deleteBatchEnable)
+    checkboxAll: handleRowCheckboxChange,
+    checkboxChange: handleRowCheckboxChange,
+  #end
+  },
 #end
 });
 </script>
@@ -198,7 +206,6 @@ const [Grid, gridApi] = useVbenVxeGrid({
 <template>
   <Page auto-content-height>
     <FormModal @success="onRefresh" />
-
 #if ($table.templateType == 11) ## erp情况
   <div>
 #end
@@ -248,8 +255,8 @@ const [Grid, gridApi] = useVbenVxeGrid({
               label: $t('ui.actionTitle.deleteBatch'),
               type: 'danger',
               icon: ACTION_ICON.DELETE,
-              disabled: isEmpty(checkedIds),
               auth: ['${table.moduleName}:${simpleClassName_strikeCase}:delete'],
+              disabled: isEmpty(checkedIds),
               onClick: handleDeleteBatch,
             },
             #end
@@ -262,7 +269,8 @@ const [Grid, gridApi] = useVbenVxeGrid({
             #if (${table.templateType} == 2)## 树表特有：新增下级
             {
               label: '新增下级',
-              type: 'text',
+              type: 'primary',
+              link: true,
               icon: ACTION_ICON.ADD,
               auth: ['${table.moduleName}:${simpleClassName_strikeCase}:create'],
               onClick: handleAppend.bind(null, row),
@@ -270,7 +278,8 @@ const [Grid, gridApi] = useVbenVxeGrid({
             #end
             {
               label: $t('common.edit'),
-              type: 'text',
+              type: 'primary',
+              link: true,
               icon: ACTION_ICON.EDIT,
               auth: ['${table.moduleName}:${simpleClassName_strikeCase}:update'],
               onClick: handleEdit.bind(null, row),
@@ -278,7 +287,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
             {
               label: $t('common.delete'),
               type: 'danger',
-              text: true,
+              link: true,
               icon: ACTION_ICON.DELETE,
               auth: ['${table.moduleName}:${simpleClassName_strikeCase}:delete'],
               popConfirm: {
@@ -290,21 +299,20 @@ const [Grid, gridApi] = useVbenVxeGrid({
         />
       </template>
     </Grid>
-
 #if ($table.templateType == 11) ## erp情况
     <!-- 子表的表单 -->
-    <el-tabs v-model="subTabsName" class="mt-2">
+    <ElTabs v-model="subTabsName" class="mt-2">
         #foreach ($subTable in $subTables)
             #set ($index = $foreach.count - 1)
             #set ($subClassNameVar = $subClassNameVars.get($index))
             #set ($subSimpleClassName = $subSimpleClassNames.get($index))
             #set ($subJoinColumn_strikeCase = $subJoinColumn_strikeCases.get($index))
-          <el-tab-pane name="$subClassNameVar" label="${subTable.classComment}">
+          <ElTabPane name="$subClassNameVar" label="${subTable.classComment}">
             <${subSimpleClassName}List :${subJoinColumn_strikeCase}="select${simpleClassName}?.id" />
-          </el-tab-pane>
+          </ElTabPane>
         #end
-    </el-tabs>
+    </ElTabs>
     </div>
 #end
   </Page>
 -</template>
+</template>
 \ No newline at end of file
@@ -2,8 +2,9 @@
 #set ($subColumns = $subColumnsList.get($subIndex))##当前字段数组
 #set ($subJoinColumn = $subJoinColumns.get($subIndex))##当前 join 字段
 #set ($subSimpleClassName = $subSimpleClassNames.get($subIndex))
+#set ($apiName = "${table.moduleName.substring(0,1).toUpperCase()}${table.moduleName.substring(1)}${simpleClassName}Api")
 <script lang="ts" setup>
-  import type { ${simpleClassName}Api } from '#/api/${table.moduleName}/${table.businessName}';
+  import type { ${apiName} } from '#/api/${table.moduleName}/${table.businessName}';
   import { useVbenModal } from '@vben/common-ui';
   import { ElMessage } from 'element-plus';
@@ -16,7 +17,7 @@
   import { use${subSimpleClassName}FormSchema } from '../data';
   const emit = defineEmits(['success']);
-  const formData = ref<${simpleClassName}Api.${subSimpleClassName}>();
+  const formData = ref<${apiName}.${subSimpleClassName}>();
   const getTitle = computed(() => {
     return formData.value?.id
         ? $t('ui.actionTitle.edit', ['${subTable.classComment}'])
@@ -45,7 +46,7 @@
       modalApi.lock();
       // 提交表单
-      const data = (await formApi.getValues()) as ${simpleClassName}Api.${subSimpleClassName};
+      const data = (await formApi.getValues()) as ${apiName}.${subSimpleClassName};
       data.${subJoinColumn.javaField} = formData.value?.${subJoinColumn.javaField};
       try {
         await (formData.value?.id ? update${subSimpleClassName}(data) : create${subSimpleClassName}(data));
@@ -64,7 +65,7 @@
       }
       // 加载数据
-      let data = modalApi.getData<${simpleClassName}Api.${subSimpleClassName}>();
+      let data = modalApi.getData<${apiName}.${subSimpleClassName}>();
       if (!data) {
         return;
       }
@@ -4,8 +4,9 @@
 #set ($subSimpleClassName = $subSimpleClassNames.get($subIndex))
 #set ($subClassNameVar = $subClassNameVars.get($subIndex))
 #set ($SubJoinColumnName = $subJoinColumn.javaField.substring(0,1).toUpperCase() + ${subJoinColumn.javaField.substring(1)})##首字母大写
+#set ($apiName = "${table.moduleName.substring(0,1).toUpperCase()}${table.moduleName.substring(1)}${simpleClassName}Api")
 <script lang="ts" setup>
-  import type { ${simpleClassName}Api } from '#/api/${table.moduleName}/${table.businessName}';
+  import type { ${apiName} } from '#/api/${table.moduleName}/${table.businessName}';
   import { computed, ref, h, onMounted,watch,nextTick } from 'vue';
   import { $t } from '#/locales';
@@ -33,7 +34,7 @@ const props = defineProps&lt;{
 function onActionClick({
  code,
  row,
-}: OnActionClickParams<${simpleClassName}Api.${subSimpleClassName}>) {
+}: OnActionClickParams<${apiName}.${subSimpleClassName}>) {
   switch (code) {
     case 'delete': {
       onDelete(row);
@@ -67,16 +68,16 @@ const onAdd = async () =&gt; {
 }
 /** 删除${subTable.classComment} */
-const onDelete =  async (row: ${simpleClassName}Api.${subSimpleClassName}) => {
+const onDelete =  async (row: ${apiName}.${subSimpleClassName}) => {
   await gridApi.grid.remove(row);
 }
 /** 提供获取表格数据的方法供父组件调用 */
 defineExpose({
-  getData: (): ${simpleClassName}Api.${subSimpleClassName}[] => {
-    const data = gridApi.grid.getData() as ${simpleClassName}Api.${subSimpleClassName}[];
-    const removeRecords = gridApi.grid.getRemoveRecords() as ${simpleClassName}Api.${subSimpleClassName}[];
-    const insertRecords = gridApi.grid.getInsertRecords() as ${simpleClassName}Api.${subSimpleClassName}[];
+  getData: (): ${apiName}.${subSimpleClassName}[] => {
+    const data = gridApi.grid.getData() as ${apiName}.${subSimpleClassName}[];
+    const removeRecords = gridApi.grid.getRemoveRecords() as ${apiName}.${subSimpleClassName}[];
+    const insertRecords = gridApi.grid.getInsertRecords() as ${apiName}.${subSimpleClassName}[];
     return data
         .filter((row) => !removeRecords.some((removed) => removed.id === row.id))
         .concat(insertRecords.map((row: any) => ({ ...row, id: undefined })));
@@ -5,9 +5,10 @@
 #set ($subJoinColumn = $subJoinColumns.get($subIndex))##当前 join 字段
 #set ($subSimpleClassName_strikeCase = $subSimpleClassName_strikeCases.get($subIndex))
 #set ($SubJoinColumnName = $subJoinColumn.javaField.substring(0,1).toUpperCase() + ${subJoinColumn.javaField.substring(1)})##首字母大写
+#set ($apiName = "${table.moduleName.substring(0,1).toUpperCase()}${table.moduleName.substring(1)}${simpleClassName}Api")
 <script lang="ts" setup>
 import type { VxeTableGridOptions } from '#/adapter/vxe-table';
-import type { ${simpleClassName}Api } from '#/api/${table.moduleName}/${table.businessName}';
+import type { ${apiName} } from '#/api/${table.moduleName}/${table.businessName}';
 #if ($table.templateType == 11) ## erp
 import ${subSimpleClassName}Form from './${subSimpleClassName_strikeCase}-form.vue'
@@ -51,15 +52,14 @@ function handleCreate() {
 }
 /** 编辑${subTable.classComment} */
-function handleEdit(row: ${simpleClassName}Api.${subSimpleClassName}) {
+function handleEdit(row: ${apiName}.${subSimpleClassName}) {
   formModalApi.setData(row).open();
 }
 /** 删除${subTable.classComment} */
-async function handleDelete(row: ${simpleClassName}Api.${subSimpleClassName}) {
+async function handleDelete(row: ${apiName}.${subSimpleClassName}) {
   const loadingInstance = ElLoading.service({
     text: $t('ui.actionMessage.deleting', [row.id]),
-    background: 'rgba(0, 0, 0, 0.7)',
   });
   try {
     await delete${subSimpleClassName}(row.id as number);
@@ -75,7 +75,6 @@ async function handleDelete(row: ${simpleClassName}Api.${subSimpleClassName}) {
 async function handleDeleteBatch() {
   const loadingInstance = ElLoading.service({
     text: $t('ui.actionMessage.deleting'),
-    background: 'rgba(0, 0, 0, 0.7)',
   });
   try {
     await delete${subSimpleClassName}List(checkedIds.value);
@@ -91,7 +90,7 @@ const checkedIds = ref&lt;number[]&gt;([])
 function handleRowCheckboxChange({
   records,
 }: {
-  records: ${simpleClassName}Api.${subSimpleClassName}[];
+  records: ${apiName}.${subSimpleClassName}[];
 }) {
   checkedIds.value = records.map((item) => item.id);
 }
@@ -143,7 +142,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
     keyField: 'id',
     isHover: true,
   },
-  } as VxeTableGridOptions<${simpleClassName}Api.${subSimpleClassName}>,
+  } as VxeTableGridOptions<${apiName}.${subSimpleClassName}>,
   #if (${table.templateType} == 11 && $deleteBatchEnable)
   gridEvents:{
     checkboxAll: handleRowCheckboxChange,