feat: vben5 codegen

xingyu4j
1 parent 0cfd2143
Showing 14 changed files with 331 additions and 308 deletions
yudao-module-infra/src/main/resources/codegen/vue3_vben5_antd/general/views/form.vue.vm
yudao-module-infra/src/main/resources/codegen/vue3_vben5_antd/general/views/index.vue.vm
yudao-module-infra/src/main/resources/codegen/vue3_vben5_antd/general/views/modules/form_sub_erp.vue.vm
yudao-module-infra/src/main/resources/codegen/vue3_vben5_antd/general/views/modules/form_sub_normal.vue.vm
yudao-module-infra/src/main/resources/codegen/vue3_vben5_antd/general/views/modules/list_sub_erp.vue.vm
yudao-module-infra/src/main/resources/codegen/vue3_vben5_antd/schema/views/modules/form_sub_normal.vue.vm
yudao-module-infra/src/main/resources/codegen/vue3_vben5_ele/general/views/form.vue.vm
yudao-module-infra/src/main/resources/codegen/vue3_vben5_ele/general/views/index.vue.vm
yudao-module-infra/src/main/resources/codegen/vue3_vben5_ele/general/views/modules/form_sub_erp.vue.vm
yudao-module-infra/src/main/resources/codegen/vue3_vben5_ele/general/views/modules/form_sub_normal.vue.vm
yudao-module-infra/src/main/resources/codegen/vue3_vben5_ele/general/views/modules/list_sub_erp.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
 <script lang="ts" setup>
-import type { ${simpleClassName}Api } from '#/api/${table.moduleName}/${simpleClassName_strikeCase}';
 import type { Rule } from 'ant-design-vue/es/form';
+import type { ${simpleClassName}Api } from '#/api/${table.moduleName}/${simpleClassName_strikeCase}';
+
+import { computed, ref } from 'vue';
 import { useVbenModal } from '@vben/common-ui';
+import { DICT_TYPE } from '@vben/constants';
+import { getDictOptions } from '@vben/hooks';
 import { Tinymce as RichTextarea } from '#/components/tinymce';
 import { ImageUpload, FileUpload } from "#/components/upload";
 import { message, Tabs, Form, Input, Textarea, Select, RadioGroup, Radio, CheckboxGroup, Checkbox, DatePicker, TreeSelect } from 'ant-design-vue';
-import { DICT_TYPE, getDictOptions } from '#/utils';
 #if($table.templateType == 2)## 树表需要导入这些
 import { get${simpleClassName}List } from '#/api/${table.moduleName}/${simpleClassName_strikeCase}';
 import { handleTree } from '@vben/utils'
@@ -20,7 +23,6 @@ import { handleTree } from &#39;@vben/utils&#39;
   #end
 #end
-import { computed, ref } from 'vue';
 import { $t } from '#/locales';
 import { get${simpleClassName}, create${simpleClassName}, update${simpleClassName} } from '#/api/${table.moduleName}/${simpleClassName_strikeCase}';
@@ -70,7 +72,7 @@ const getTitle = computed(() =&gt; {
 #end
 /** 重置表单 */
-const resetForm = () => {
+function resetForm() {
   formData.value = {
     #foreach ($column in $columns)
       #if ($column.createOperation || $column.updateOperation)
@@ -88,7 +90,7 @@ const resetForm = () =&gt; {
 ## 特殊：树表专属逻辑
 #if ( $table.templateType == 2 )
 /** 获得${table.classComment}树 */
-const get${simpleClassName}Tree = async () => {
+async function get${simpleClassName}Tree() {
   ${classNameVar}Tree.value = []
   const data = await get${simpleClassName}List({});
   data.unshift({
@@ -147,7 +149,6 @@ const [Modal, modalApi] = useVbenModal({
       emit('success');
       message.success({
         content: $t('ui.actionMessage.operationSuccess'),
-        key: 'action_process_msg',
       });
     } finally {
       modalApi.unlock();
 <script lang="ts" setup>
 import type { ${simpleClassName}Api } from '#/api/${table.moduleName}/${simpleClassName_strikeCase}';
-import type { VxeTableInstance } from '#/adapter/vxe-table';
+
+import { ref, h, reactive, onMounted, nextTick } from 'vue';
 import { Page, useVbenModal } from '@vben/common-ui';
-import { cloneDeep, formatDateTime } from '@vben/utils';
+import { DICT_TYPE } from '@vben/constants';
+import { getDictOptions } from '@vben/hooks';
+import { useTableToolbar, VbenVxeTableToolbar } from '@vben/plugins/vxe-table';
+import { cloneDeep, downloadFileFromBlobPart, formatDateTime } from '@vben/utils';
 import { Button, message,Tabs,Pagination,Form,RangePicker,DatePicker,Select,Input } from 'ant-design-vue';
-import { DictTag } from '#/components/dict-tag';
-import { DICT_TYPE, getDictOptions, getRangePickerDefaultProps } from '#/utils';
 import ${simpleClassName}Form from './modules/form.vue';
 import { Download, Plus, RefreshCw, Search, Trash2 } from '@vben/icons';
 import { ContentWrap } from '#/components/content-wrap';
 import { VxeColumn, VxeTable } from '#/adapter/vxe-table';
-import { TableToolbar } from '#/components/table-toolbar';
-import { useTableToolbar } from '#/hooks';
 ## 特殊：主子表专属逻辑
 #if ( $table.templateType == 11 || $table.templateType == 12 )
@@ -23,7 +23,6 @@ import { useTableToolbar } from &#39;#/hooks&#39;;
     #end
 #end
-import { ref, h, reactive,onMounted,nextTick } from 'vue';
 import { $t } from '#/locales';
 #if (${table.templateType} == 2)## 树表接口
 import { handleTree,isEmpty } from '@vben/utils'
@@ -77,7 +76,7 @@ const queryFormRef = ref() // 搜索的表单
 const exportLoading = ref(false) // 导出的加载中
 /** 查询列表 */
-const getList = async () => {
+async function getList() {
   loading.value = true
   try {
     const params = cloneDeep(queryParams) as any;
@@ -104,7 +103,7 @@ const getList = async () =&gt; {
 }
 /** 搜索按钮操作 */
-const handleQuery = () => {
+function handleQuery() {
 #if ( $table.templateType != 2 )
   queryParams.pageNo = 1
 #end
@@ -112,7 +111,7 @@ const handleQuery = () =&gt; {
 }
 /** 重置按钮操作 */
-const resetQuery = () => {
+function resetQuery() {
   queryFormRef.value.resetFields()
   handleQuery()
 }
@@ -182,7 +181,7 @@ function handleRowCheckboxChange({
 #end
 /** 导出表格 */
-async function onExport() {
+async function handleExport() {
 try {
   exportLoading.value = true;
   const data = await export${simpleClassName}(queryParams);
@@ -298,7 +297,7 @@ onMounted(() =&gt; {
     <!-- 列表 -->
     <ContentWrap title="${table.classComment}">
       <template #extra>
-        <TableToolbar
+        <VbenVxeTableToolbar
             ref="tableToolbarRef"
             v-model:hidden-search="hiddenSearchBar"
         >
@@ -321,7 +320,7 @@ onMounted(() =&gt; {
               type="primary"
               class="ml-2"
               :loading="exportLoading"
-              @click="onExport"
+              @click="handleExport"
               v-access:code="['${permissionPrefix}:export']"
           >
             {{ $t('ui.actionTitle.export') }}
@@ -3,107 +3,109 @@
 #set ($subJoinColumn = $subJoinColumns.get($subIndex))##当前 join 字段
 #set ($subSimpleClassName = $subSimpleClassNames.get($subIndex))
 <script lang="ts" setup>
-  import type { ${simpleClassName}Api } from '#/api/${table.moduleName}/${simpleClassName_strikeCase}';
-  import type { Rule } from 'ant-design-vue/es/form';
+import type { Rule } from 'ant-design-vue/es/form';
+import type { ${simpleClassName}Api } from '#/api/${table.moduleName}/${simpleClassName_strikeCase}';
-  import { useVbenModal } from '@vben/common-ui';
-  import { Tinymce as RichTextarea } from '#/components/tinymce';
-  import { ImageUpload, FileUpload } from "#/components/upload";
-  import { message, Tabs, Form, Input, Textarea, Select, RadioGroup, Radio, CheckboxGroup, Checkbox, DatePicker, TreeSelect } from 'ant-design-vue';
-  import { DICT_TYPE, getDictOptions } from '#/utils';
+import { computed, ref } from 'vue';
-  import { computed, ref } from 'vue';
-  import { $t } from '#/locales';
+import { useVbenModal } from '@vben/common-ui';
+import { DICT_TYPE } from '@vben/constants';
+import { getDictOptions } from '@vben/hooks';
+import { cloneDeep, formatDateTime } from '@vben/utils';
+import { Tinymce as RichTextarea } from '#/components/tinymce';
+import { ImageUpload, FileUpload } from "#/components/upload";
+import { message, Tabs, Form, Input, Textarea, Select, RadioGroup, Radio, CheckboxGroup, Checkbox, DatePicker, TreeSelect } from 'ant-design-vue';
-  import { get${subSimpleClassName}, create${subSimpleClassName}, update${subSimpleClassName} } from '#/api/${table.moduleName}/${simpleClassName_strikeCase}';
+import { $t } from '#/locales';
-  const emit = defineEmits(['success']);
-  const getTitle = computed(() => {
-    return formData.value?.id
-        ? $t('ui.actionTitle.edit', ['${subTable.classComment}'])
-        : $t('ui.actionTitle.create', ['${subTable.classComment}']);
-  });
+import { get${subSimpleClassName}, create${subSimpleClassName}, update${subSimpleClassName} } from '#/api/${table.moduleName}/${simpleClassName_strikeCase}';
-  const formRef = ref();
-  const formData = ref<Partial<${simpleClassName}Api.${subSimpleClassName}>>({
-    #foreach ($column in $subColumns)
-      #if ($column.createOperation || $column.updateOperation)
-        #if ($column.htmlType == "checkbox")
-            $column.javaField: [],
-        #else
-            $column.javaField: undefined,
-        #end
+const emit = defineEmits(['success']);
+const getTitle = computed(() => {
+  return formData.value?.id
+      ? $t('ui.actionTitle.edit', ['${subTable.classComment}'])
+      : $t('ui.actionTitle.create', ['${subTable.classComment}']);
+});
+
+const formRef = ref();
+const formData = ref<Partial<${simpleClassName}Api.${subSimpleClassName}>>({
+  #foreach ($column in $subColumns)
+    #if ($column.createOperation || $column.updateOperation)
+      #if ($column.htmlType == "checkbox")
+          $column.javaField: [],
+      #else
+          $column.javaField: undefined,
       #end
     #end
-  });
-  const rules: Record<string, Rule[]> = {
-    #foreach ($column in $subColumns)
-      #if (($column.createOperation || $column.updateOperation) && !$column.nullable && !${column.primaryKey})## 创建或者更新操作 && 要求非空 && 非主键
-        #set($comment=$column.columnComment)
-          $column.javaField: [{ required: true, message: '${comment}不能为空', trigger: #if($column.htmlType == 'select')'change'#else'blur'#end }],
-      #end
+  #end
+});
+const rules: Record<string, Rule[]> = {
+  #foreach ($column in $subColumns)
+    #if (($column.createOperation || $column.updateOperation) && !$column.nullable && !${column.primaryKey})## 创建或者更新操作 && 要求非空 && 非主键
+      #set($comment=$column.columnComment)
+        $column.javaField: [{ required: true, message: '${comment}不能为空', trigger: #if($column.htmlType == 'select')'change'#else'blur'#end }],
     #end
-  };
+  #end
+};
+
+const [Modal, modalApi] = useVbenModal({
+  async onConfirm() {
+    await formRef.value?.validate();
-  const [Modal, modalApi] = useVbenModal({
-    async onConfirm() {
-      await formRef.value?.validate();
+    modalApi.lock();
+    // 提交表单
+    const data = formData.value as ${simpleClassName}Api.${subSimpleClassName};
+    try {
+      await (formData.value?.id ? update${subSimpleClassName}(data) : create${subSimpleClassName}(data));
+      // 关闭并提示
+      await modalApi.close();
+      emit('success');
+      message.success({
+        content: $t('ui.actionMessage.operationSuccess'),
+      });
+    } finally {
+      modalApi.unlock();
+    }
+  },
+  async onOpenChange(isOpen: boolean) {
+    if (!isOpen) {
+      resetForm()
+      return;
+    }
+    // 加载数据
+    let data = modalApi.getData<${simpleClassName}Api.${subSimpleClassName}>();
+    if (!data) {
+      return;
+    }
+    if (data.id) {
       modalApi.lock();
-      // 提交表单
-      const data = formData.value as ${simpleClassName}Api.${subSimpleClassName};
       try {
-        await (formData.value?.id ? update${subSimpleClassName}(data) : create${subSimpleClassName}(data));
-        // 关闭并提示
-        await modalApi.close();
-        emit('success');
-        message.success({
-          content: $t('ui.actionMessage.operationSuccess'),
-          key: 'action_process_msg',
-        });
+        data = await get${subSimpleClassName}(data.id);
       } finally {
         modalApi.unlock();
       }
-    },
-    async onOpenChange(isOpen: boolean) {
-      if (!isOpen) {
-        resetForm()
-        return;
-      }
+    }
+    // 设置到 values
+    formData.value = data;
+  },
+});
-      // 加载数据
-      let data = modalApi.getData<${simpleClassName}Api.${subSimpleClassName}>();
-      if (!data) {
-        return;
-      }
-      if (data.id) {
-        modalApi.lock();
-        try {
-          data = await get${subSimpleClassName}(data.id);
-        } finally {
-          modalApi.unlock();
-        }
-      }
-      // 设置到 values
-      formData.value = data;
-    },
-  });
-
-  /** 重置表单 */
-  const resetForm = () => {
-    formData.value = {
-      #foreach ($column in $subColumns)
-        #if ($column.createOperation || $column.updateOperation)
-          #if ($column.htmlType == "checkbox")
-              $column.javaField: [],
-          #else
-              $column.javaField: undefined,
-          #end
+/** 重置表单 */
+function resetForm(){
+  formData.value = {
+    #foreach ($column in $subColumns)
+      #if ($column.createOperation || $column.updateOperation)
+        #if ($column.htmlType == "checkbox")
+            $column.javaField: [],
+        #else
+            $column.javaField: undefined,
         #end
       #end
-    };
-    formRef.value?.resetFields();
-  }
+    #end
+  };
+  formRef.value?.resetFields();
+}
 </script>
 <template>
@@ -5,12 +5,15 @@
 #set ($subClassNameVar = $subClassNameVars.get($subIndex))
 #set ($SubJoinColumnName = $subJoinColumn.javaField.substring(0,1).toUpperCase() + ${subJoinColumn.javaField.substring(1)})##首字母大写
 <script lang="ts" setup>
-  import type { ${simpleClassName}Api } from '#/api/${table.moduleName}/${simpleClassName_strikeCase}';
+import type { ${simpleClassName}Api } from '#/api/${table.moduleName}/${simpleClassName_strikeCase}';
-  import { message, Tabs, Form, Input, Textarea,Button, Select, RadioGroup, Radio, CheckboxGroup, Checkbox, DatePicker } from 'ant-design-vue';
-  import { computed, ref, h, onMounted,watch,nextTick } from 'vue';
-  import { $t } from '#/locales';
-  import { DICT_TYPE, getDictOptions } from '#/utils';
+import { computed, ref, h, onMounted,watch,nextTick } from 'vue';
+
+import { DICT_TYPE } from '@vben/constants';
+import { getDictOptions } from '@vben/hooks';
+
+import { message, Tabs, Form, Input, Textarea,Button, Select, RadioGroup, Radio, CheckboxGroup, Checkbox, DatePicker } from 'ant-design-vue';
+import { $t } from '#/locales';
 #if ($subTable.subJoinMany) ## 一对多
 import type { VxeTableInstance } from '#/adapter/vxe-table';
@@ -30,13 +33,14 @@ const props = defineProps&lt;{
 #if ($subTable.subJoinMany) ## 一对多
 const list = ref<${simpleClassName}Api.${subSimpleClassName}[]>([]) // 列表的数据
 const tableRef = ref<VxeTableInstance>();
+
 /** 添加${subTable.classComment} */
-const onAdd = async () => {
+async function handleAdd() {
   await tableRef.value?.insertAt({} as ${simpleClassName}Api.${subSimpleClassName}, -1);
 }
 /** 删除${subTable.classComment} */
-const onDelete =  async (row: ${simpleClassName}Api.${subSimpleClassName}) => {
+async function handleDelete(row: ${simpleClassName}Api.${subSimpleClassName}) {
   await tableRef.value?.remove(row);
 }
@@ -46,9 +50,11 @@ defineExpose({
     const data = list.value as ${simpleClassName}Api.${subSimpleClassName}[];
     const removeRecords = tableRef.value?.getRemoveRecords() as ${simpleClassName}Api.${subSimpleClassName}[];
     const insertRecords = tableRef.value?.getInsertRecords() as ${simpleClassName}Api.${subSimpleClassName}[];
-    return data
-        .filter((row) => !removeRecords.some((removed) => removed.id === row.id))
-        ?.concat(insertRecords.map((row: any) => ({ ...row, id: undefined })));
+    return [
+      ...data.filter(
+        (row) => !removeRecords.some((removed) => removed.id === row.id),
+      ),
+      ...insertRecords.map((row: any) => ({ ...row, id: undefined })),
   },
 });
@@ -123,25 +129,25 @@ watch(
               #if ( $column.id == $subJoinColumn.id) ## 特殊：忽略主子表的 join 字段，不用填写
               #elseif ($column.htmlType == "input" && !$column.primaryKey)## 忽略主键，不用在表单里
                 <vxe-column field="${javaField}" title="${comment}" align="center">
-                  <template #default="{row}">
+                  <template #default="{ row }">
                     <Input v-model:value="row.${javaField}" />
                   </template>
                 </vxe-column>
               #elseif($column.htmlType == "imageUpload")## 图片上传
                 <vxe-column field="${javaField}" title="${comment}" align="center">
-                  <template #default="{row}">
+                  <template #default="{ row }">
                     <ImageUpload v-model:value="row.${javaField}" />
                   </template>
                 </vxe-column>
               #elseif($column.htmlType == "fileUpload")## 文件上传
                 <vxe-column field="${javaField}" title="${comment}" align="center">
-                  <template #default="{row}">
+                  <template #default="{ row }">
                     <FileUpload v-model:value="row.${javaField}" />
                   </template>
                 </vxe-column>
               #elseif($column.htmlType == "select")## 下拉框
                 <vxe-column field="${javaField}" title="${comment}" align="center">
-                  <template #default="{row}">
+                  <template #default="{ row }">
                     <Select v-model:value="row.${javaField}" placeholder="请选择${comment}">
                         #if ("" != $dictType)## 有数据字典
                           <Select.Option
@@ -159,7 +165,7 @@ watch(
                 </vxe-column>
               #elseif($column.htmlType == "checkbox")## 多选框
                 <vxe-column field="${javaField}" title="${comment}" align="center">
-                  <template #default="{row}">
+                  <template #default="{ row }">
                     <CheckboxGroup v-model:value="row.${javaField}">
                         #if ("" != $dictType)## 有数据字典
                           <Checkbox
@@ -177,7 +183,7 @@ watch(
                 </vxe-column>
               #elseif($column.htmlType == "radio")## 单选框
                 <vxe-column field="${javaField}" title="${comment}" align="center">
-                  <template #default="{row}">
+                  <template #default="{ row }">
                     <RadioGroup v-model:value="row.${javaField}">
                         #if ("" != $dictType)## 有数据字典
                           <Radio
@@ -195,7 +201,7 @@ watch(
                 </vxe-column>
               #elseif($column.htmlType == "datetime")## 时间框
                 <vxe-column field="${javaField}" title="${comment}" align="center">
-                  <template #default="{row}">
+                  <template #default="{ row }">
                     <DatePicker
                         v-model:value="row.${javaField}"
                         :showTime="true"
@@ -206,7 +212,7 @@ watch(
                 </vxe-column>
               #elseif($column.htmlType == "textarea" || $column.htmlType == "editor")## 文本框
                 <vxe-column field="${javaField}" title="${comment}" align="center">
-                  <template #default="{row}">
+                  <template #default="{ row }">
                     <Textarea v-model:value="row.${javaField}" />
                   </template>
                 </vxe-column>
@@ -214,12 +220,12 @@ watch(
           #end
       #end
     <vxe-column field="operation" title="操作" align="center">
-      <template #default="{row}">
+      <template #default="{ row }">
         <Button
             size="small"
             type="link"
             danger
-            @click="onDelete(row as any)"
+            @click="handleDelect(row)"
             v-access:code="['${permissionPrefix}:delete']"
         >
           {{ $t('ui.actionTitle.delete') }}
@@ -228,7 +234,7 @@ watch(
     </vxe-column>
   </vxe-table>
   <div class="flex justify-center mt-4">
-    <Button :icon="h(Plus)" type="primary" ghost @click="onAdd" v-access:code="['${permissionPrefix}:create']">
+    <Button :icon="h(Plus)" type="primary" ghost @click="handleAdd" v-access:code="['${permissionPrefix}:create']">
       {{ $t('ui.actionTitle.create', ['${subTable.classComment}']) }}
     </Button>
   </div>
@@ -6,48 +6,50 @@
 #set ($subSimpleClassName_strikeCase = $subSimpleClassName_strikeCases.get($subIndex))
 #set ($SubJoinColumnName = $subJoinColumn.javaField.substring(0,1).toUpperCase() + ${subJoinColumn.javaField.substring(1)})##首字母大写
 <script lang="ts" setup>
-  import type { ${simpleClassName}Api } from '#/api/${table.moduleName}/${simpleClassName_strikeCase}';
-  import type { VxeTableInstance } from '#/adapter/vxe-table';
+import type { ${simpleClassName}Api } from '#/api/${table.moduleName}/${simpleClassName_strikeCase}';
+import type { VxeTableInstance } from '#/adapter/vxe-table';
-  import { DictTag } from '#/components/dict-tag';
-  import { DICT_TYPE, getDictOptions, getRangePickerDefaultProps } from '#/utils';
-  import { VxeColumn, VxeTable } from '#/adapter/vxe-table';
-  import { reactive,ref, h, nextTick,watch,onMounted } from 'vue';
-  import { cloneDeep, formatDateTime } from '@vben/utils';
-  import { ContentWrap } from '#/components/content-wrap';
+import { reactive,ref, h, nextTick,watch,onMounted } from 'vue';
+
+import { DICT_TYPE } from '@vben/constants';
+import { getDictOptions } from '@vben/hooks';
+
+import { DictTag } from '#/components/dict-tag';
+import { getRangePickerDefaultProps } from '#/utils';
+import { VxeColumn, VxeTable } from '#/adapter/vxe-table';
+import { ContentWrap } from '#/components/content-wrap';
 #if ($table.templateType == 11) ## erp
-    import { useVbenModal } from '@vben/common-ui';
-    import ${subSimpleClassName}Form from './${subSimpleClassName_strikeCase}-form.vue'
-    import { Tinymce as RichTextarea } from '#/components/tinymce';
-    import { ImageUpload, FileUpload } from "#/components/upload";
-    import { message,Button, Tabs,Pagination, Form, Input, Textarea, Select, RadioGroup, Radio, CheckboxGroup, Checkbox,RangePicker, DatePicker, TreeSelect } from 'ant-design-vue';
-    import { Plus, Trash2 } from '@vben/icons';
-    import { $t } from '#/locales';
-    import { TableToolbar } from '#/components/table-toolbar';
-    import { useTableToolbar } from '#/hooks';
+import { useVbenModal } from '@vben/common-ui';
+import { useTableToolbar, VbenVxeTableToolbar } from '@vben/plugins/vxe-table';
+import ${subSimpleClassName}Form from './${subSimpleClassName_strikeCase}-form.vue'
+import { Tinymce as RichTextarea } from '#/components/tinymce';
+import { ImageUpload, FileUpload } from "#/components/upload";
+import { message,Button, Tabs,Pagination, Form, Input, Textarea, Select, RadioGroup, Radio, CheckboxGroup, Checkbox,RangePicker, DatePicker, TreeSelect } from 'ant-design-vue';
+import { Plus, Trash2 } from '@vben/icons';
+import { $t } from '#/locales';
 #end
 #if ($table.templateType == 11) ## erp
-    import { delete${subSimpleClassName},#if ($deleteBatchEnable) delete${subSimpleClassName}List,#end get${subSimpleClassName}Page } from '#/api/${table.moduleName}/${simpleClassName_strikeCase}';
-    import { isEmpty } from '@vben/utils';
-  #else
-  #if ($subTable.subJoinMany) ## 一对多
-  import { get${subSimpleClassName}ListBy${SubJoinColumnName} } from '#/api/${table.moduleName}/${simpleClassName_strikeCase}';
-  #else
-  import { get${subSimpleClassName}By${SubJoinColumnName} } from '#/api/${table.moduleName}/${simpleClassName_strikeCase}';
-  #end
+import { delete${subSimpleClassName},#if ($deleteBatchEnable) delete${subSimpleClassName}List,#end get${subSimpleClassName}Page } from '#/api/${table.moduleName}/${simpleClassName_strikeCase}';
+import { isEmpty } from '@vben/utils';
+#else
+#if ($subTable.subJoinMany) ## 一对多
+import { get${subSimpleClassName}ListBy${SubJoinColumnName} } from '#/api/${table.moduleName}/${simpleClassName_strikeCase}';
+#else
+import { get${subSimpleClassName}By${SubJoinColumnName} } from '#/api/${table.moduleName}/${simpleClassName_strikeCase}';
+#end
 #end
 const props = defineProps<{
-      ${subJoinColumn.javaField}?: number // ${subJoinColumn.columnComment}（主表的关联字段）
+  ${subJoinColumn.javaField}?: number // ${subJoinColumn.columnComment}（主表的关联字段）
 }>()
 #if ($table.templateType == 11) ## erp
-  const [FormModal, formModalApi] = useVbenModal({
-    connectedComponent: ${subSimpleClassName}Form,
-    destroyOnClose: true,
-  });
+const [FormModal, formModalApi] = useVbenModal({
+  connectedComponent: ${subSimpleClassName}Form,
+  destroyOnClose: true,
+});
 /** 创建${subTable.classComment} */
 function handleCreate() {
@@ -106,87 +108,87 @@ function handleRowCheckboxChange({
 #end
 #end
-  const loading = ref(true) // 列表的加载中
-  const list = ref<${simpleClassName}Api.${subSimpleClassName}[]>([]) // 列表的数据
+const loading = ref(true) // 列表的加载中
+const list = ref<${simpleClassName}Api.${subSimpleClassName}[]>([]) // 列表的数据
 #if ($table.templateType == 11) ## erp
-  const total = ref(0) // 列表的总页数
+const total = ref(0) // 列表的总页数
 #end
 #if ($table.templateType == 11) ## erp
-  const queryFormRef = ref() // 搜索的表单
-  const queryParams = reactive({
-      pageNo: 1,
-      pageSize: 10,
-      #foreach ($column in $subColumns)
-          #if ($column.listOperation)
-              #if ($column.listOperationCondition != 'BETWEEN')
-                      $column.javaField: undefined,
-              #end
-              #if ($column.htmlType == "datetime" || $column.listOperationCondition == "BETWEEN")
-                      $column.javaField: undefined,
-              #end
-          #end
+const queryFormRef = ref() // 搜索的表单
+const queryParams = reactive({
+  pageNo: 1,
+  pageSize: 10,
+  #foreach ($column in $subColumns)
+    #if ($column.listOperation)
+      #if ($column.listOperationCondition != 'BETWEEN')
+            $column.javaField: undefined,
       #end
-  })
+      #if ($column.htmlType == "datetime" || $column.listOperationCondition == "BETWEEN")
+            $column.javaField: undefined,
+      #end
+    #end
+  #end
+})
 /** 搜索按钮操作 */
-const handleQuery = () => {
+function handleQuery() {
   queryParams.pageNo = 1
   getList()
 }
 /** 重置按钮操作 */
-const resetQuery = () => {
+function resetQuery() {
   queryFormRef.value.resetFields()
   handleQuery()
 }
 #end
   /** 查询列表 */
-  const getList = async () => {
-    loading.value = true
-    try {
-      if (!props.${subJoinColumn.javaField}){
-        return []
-      }
-        ## 特殊：树表专属逻辑（树不需要分页接口）
-        #if ($table.templateType == 11) ## erp
-          const params = cloneDeep(queryParams) as any;
-            #foreach ($column in $columns)
-                #if ($column.listOperation)
-                    #if ($column.htmlType == "datetime" || $column.listOperationCondition == "BETWEEN")
-                      if (params.${column.javaField} && Array.isArray(params.${column.javaField})) {
-                        params.${column.javaField} = (params.${column.javaField} as string[]).join(',');
-                      }
-                    #end
-                #end
-            #end
-          params.${subJoinColumn.javaField} = props.${subJoinColumn.javaField};
-          const data = await get${subSimpleClassName}Page(params)
-          list.value = data.list
-          total.value = data.total
-        #else
-            #if ($subTable.subJoinMany) ## 一对多
-             list.value = await get${subSimpleClassName}ListBy${SubJoinColumnName}(props.${subJoinColumn.javaField}!);
-            #else
-             list.value = [await get${subSimpleClassName}By${SubJoinColumnName}(props.${subJoinColumn.javaField}!)];
-            #end
-        #end
-    } finally {
-      loading.value = false
+async function getList() {
+  loading.value = true
+  try {
+    if (!props.${subJoinColumn.javaField}){
+      return []
     }
+      ## 特殊：树表专属逻辑（树不需要分页接口）
+      #if ($table.templateType == 11) ## erp
+        const params = cloneDeep(queryParams) as any;
+          #foreach ($column in $columns)
+              #if ($column.listOperation)
+                  #if ($column.htmlType == "datetime" || $column.listOperationCondition == "BETWEEN")
+                    if (params.${column.javaField} && Array.isArray(params.${column.javaField})) {
+                      params.${column.javaField} = (params.${column.javaField} as string[]).join(',');
+                    }
+                  #end
+              #end
+          #end
+        params.${subJoinColumn.javaField} = props.${subJoinColumn.javaField};
+        const data = await get${subSimpleClassName}Page(params)
+        list.value = data.list
+        total.value = data.total
+      #else
+          #if ($subTable.subJoinMany) ## 一对多
+           list.value = await get${subSimpleClassName}ListBy${SubJoinColumnName}(props.${subJoinColumn.javaField}!);
+          #else
+           list.value = [await get${subSimpleClassName}By${SubJoinColumnName}(props.${subJoinColumn.javaField}!)];
+          #end
+      #end
+  } finally {
+    loading.value = false
   }
+}
-  /** 监听主表的关联字段的变化，加载对应的子表数据 */
-  watch(
-      () => props.${subJoinColumn.javaField},
-      async (val) => {
-        if (!val) {
-          return;
-        }
-        await nextTick();
-        await getList()
-      },
-      { immediate: true },
-  );
+/** 监听主表的关联字段的变化，加载对应的子表数据 */
+watch(
+  () => props.${subJoinColumn.javaField},
+  async (val) => {
+    if (!val) {
+      return;
+    }
+    await nextTick();
+    await getList()
+  },
+  { immediate: true },
+);
 #if ($table.templateType == 11) ## erp
 /** 初始化 */
@@ -287,7 +289,7 @@ onMounted(() =&gt; {
         <!-- 列表 -->
         <ContentWrap title="${table.classComment}">
           <template #extra>
-            <TableToolbar
+            <VbenVxeTableToolbar
                 ref="tableToolbarRef"
                 v-model:hidden-search="hiddenSearchBar"
             >
@@ -9,6 +9,7 @@
   import type { ${apiName} } from '#/api/${table.moduleName}/${table.businessName}';
   import { computed, ref, h, onMounted,watch,nextTick } from 'vue';
+
   import { $t } from '#/locales';
 #if ($subTable.subJoinMany) ## 一对多
@@ -3,10 +3,11 @@ import type { ${simpleClassName}Api } from &#39;#/api/${table.moduleName}/${simpleCl
 import type { FormRules } from 'element-plus';
 import { useVbenModal } from '@vben/common-ui';
+import { DICT_TYPE } from '@vben/constants';
+import { getDictOptions } from '@vben/hooks';
 import { Tinymce as RichTextarea } from '#/components/tinymce';
 import { ImageUpload, FileUpload } from "#/components/upload";
 import { ElMessage, ElTabs, ElTabPane, ElForm, ElFormItem, ElInput, ElSelect, ElOption, ElRadioGroup, ElRadio, ElCheckboxGroup, ElCheckbox, ElDatePicker, ElTreeSelect } from 'element-plus';
-import { DICT_TYPE, getDictOptions } from '#/utils';
 #if($table.templateType == 2)## 树表需要导入这些
 import { get${simpleClassName}List } from '#/api/${table.moduleName}/${simpleClassName_strikeCase}';
 import { handleTree } from '@vben/utils'
 <script lang="ts" setup>
 import type { ${simpleClassName}Api } from '#/api/${table.moduleName}/${simpleClassName_strikeCase}';
-import type { VxeTableInstance } from '#/adapter/vxe-table';
+
+import { ref, h, reactive, onMounted, nextTick } from 'vue';
 import { Page, useVbenModal } from '@vben/common-ui';
-import { cloneDeep, formatDateTime } from '@vben/utils';
+import { DICT_TYPE } from '@vben/constants';
+import { getDictOptions } from '@vben/hooks';
+import { useTableToolbar, VbenVxeTableToolbar } from '@vben/plugins/vxe-table';
+import { cloneDeep, downloadFileFromBlobPart, formatDateTime } from '@vben/utils';
 import { ElButton, ElMessage, ElLoading, ElTabs, ElTabPane, ElPagination, ElForm, ElFormItem, ElDatePicker, ElSelect, ElOption, ElInput } from 'element-plus';
-import { DictTag } from '#/components/dict-tag';
-import { DICT_TYPE, getDictOptions, getRangePickerDefaultProps } from '#/utils';
 import ${simpleClassName}Form from './modules/form.vue';
 import { Download, Plus, RefreshCw, Search, Trash2 } from '@vben/icons';
 import { ContentWrap } from '#/components/content-wrap';
 import { VxeColumn, VxeTable } from '#/adapter/vxe-table';
-import { TableToolbar } from '#/components/table-toolbar';
-import { useTableToolbar } from '#/hooks';
 ## 特殊：主子表专属逻辑
 #if ( $table.templateType == 11 || $table.templateType == 12 )
@@ -23,7 +23,6 @@ import { useTableToolbar } from &#39;#/hooks&#39;;
     #end
 #end
-import { ref, h, reactive,onMounted,nextTick } from 'vue';
 import { $t } from '#/locales';
 #if (${table.templateType} == 2)## 树表接口
 import { handleTree,isEmpty } from '@vben/utils'
@@ -104,7 +103,7 @@ const getList = async () =&gt; {
 }
 /** 搜索按钮操作 */
-const handleQuery = () => {
+function handleQuery() {
 #if ( $table.templateType != 2 )
   queryParams.pageNo = 1
 #end
@@ -112,7 +111,7 @@ const handleQuery = () =&gt; {
 }
 /** 重置按钮操作 */
-const resetQuery = () => {
+function resetQuery() {
   queryFormRef.value.resetFields()
   handleQuery()
 }
@@ -182,7 +181,7 @@ function handleRowCheckboxChange({
 #end
 /** 导出表格 */
-async function onExport() {
+async function handleExport() {
 try {
   exportLoading.value = true;
   const data = await export${simpleClassName}(queryParams);
@@ -324,7 +323,7 @@ onMounted(() =&gt; {
               type="primary"
               class="ml-2"
               :loading="exportLoading"
-              @click="onExport"
+              @click="handleExport"
               v-access:code="['${permissionPrefix}:export']"
           >
             {{ $t('ui.actionTitle.export') }}
@@ -6,13 +6,15 @@
   import type { ${simpleClassName}Api } from '#/api/${table.moduleName}/${simpleClassName_strikeCase}';
   import type { FormRules } from 'element-plus';
+  import { computed, ref, reactive } from 'vue';
+
   import { useVbenModal } from '@vben/common-ui';
+  import { DICT_TYPE } from '@vben/constants';
+  import { getDictOptions } from '@vben/hooks';
   import { Tinymce as RichTextarea } from '#/components/tinymce';
   import { ImageUpload, FileUpload } from "#/components/upload";
   import { ElMessage, ElTabs, ElTabPane, ElForm, ElFormItem, ElInput, ElSelect, ElOption, ElRadioGroup, ElRadio, ElCheckboxGroup, ElCheckbox, ElDatePicker, ElTreeSelect } from 'element-plus';
-  import { DICT_TYPE, getDictOptions } from '#/utils';
-  import { computed, ref, reactive } from 'vue';
   import { $t } from '#/locales';
   import { get${subSimpleClassName}, create${subSimpleClassName}, update${subSimpleClassName} } from '#/api/${table.moduleName}/${simpleClassName_strikeCase}';
@@ -5,12 +5,15 @@
 #set ($subClassNameVar = $subClassNameVars.get($subIndex))
 #set ($SubJoinColumnName = $subJoinColumn.javaField.substring(0,1).toUpperCase() + ${subJoinColumn.javaField.substring(1)})##首字母大写
 <script lang="ts" setup>
-  import type { ${simpleClassName}Api } from '#/api/${table.moduleName}/${simpleClassName_strikeCase}';
+import type { ${simpleClassName}Api } from '#/api/${table.moduleName}/${simpleClassName_strikeCase}';
-  import { ElMessage, ElTabs, ElTabPane, ElForm, ElFormItem, ElInput, ElButton, ElSelect, ElOption, ElRadioGroup, ElRadio, ElCheckboxGroup, ElCheckbox, ElDatePicker } from 'element-plus';
-  import { computed, ref, reactive, h, onMounted,watch,nextTick } from 'vue';
-  import { $t } from '#/locales';
-  import { DICT_TYPE, getDictOptions } from '#/utils';
+import { computed, ref, reactive, h, onMounted,watch,nextTick } from 'vue';
+
+import { DICT_TYPE } from '@vben/constants';
+import { getDictOptions } from '@vben/hooks';
+
+import { ElMessage, ElTabs, ElTabPane, ElForm, ElFormItem, ElInput, ElButton, ElSelect, ElOption, ElRadioGroup, ElRadio, ElCheckboxGroup, ElCheckbox, ElDatePicker } from 'element-plus';
+import { $t } from '#/locales';
 #if ($subTable.subJoinMany) ## 一对多
 import type { VxeTableInstance } from '#/adapter/vxe-table';
@@ -31,12 +34,12 @@ const props = defineProps&lt;{
 const list = ref<${simpleClassName}Api.${subSimpleClassName}[]>([]) // 列表的数据
 const tableRef = ref<VxeTableInstance>();
 /** 添加${subTable.classComment} */
-const onAdd = async () => {
+async function handleAdd() {
   await tableRef.value?.insertAt({} as ${simpleClassName}Api.${subSimpleClassName}, -1);
 }
 /** 删除${subTable.classComment} */
-const onDelete =  async (row: ${simpleClassName}Api.${subSimpleClassName}) => {
+async function onDelete(row: ${simpleClassName}Api.${subSimpleClassName}) {
   await tableRef.value?.remove(row);
 }
@@ -46,9 +49,11 @@ defineExpose({
     const data = list.value as ${simpleClassName}Api.${subSimpleClassName}[];
     const removeRecords = tableRef.value?.getRemoveRecords() as ${simpleClassName}Api.${subSimpleClassName}[];
     const insertRecords = tableRef.value?.getInsertRecords() as ${simpleClassName}Api.${subSimpleClassName}[];
-    return data
-        .filter((row) => !removeRecords.some((removed) => removed.id === row.id))
-        ?.concat(insertRecords.map((row: any) => ({ ...row, id: undefined })));
+    return [
+      ...data.filter(
+        (row) => !removeRecords.some((removed) => removed.id === row.id),
+      ),
+      ...insertRecords.map((row: any) => ({ ...row, id: undefined })),
   },
 });
@@ -227,7 +232,7 @@ watch(
     </vxe-column>
   </vxe-table>
   <div class="flex justify-center mt-4">
-    <el-button :icon="h(Plus)" type="primary" plain @click="onAdd" v-access:code="['${permissionPrefix}:create']">
+    <el-button :icon="h(Plus)" type="primary" plain @click="handleAdd" v-access:code="['${permissionPrefix}:create']">
       {{ $t('ui.actionTitle.create', ['${subTable.classComment}']) }}
     </el-button>
   </div>
@@ -9,23 +9,25 @@
   import type { ${simpleClassName}Api } from '#/api/${table.moduleName}/${simpleClassName_strikeCase}';
   import type { VxeTableInstance } from '#/adapter/vxe-table';
+  import { reactive,ref, h, nextTick,watch,onMounted } from 'vue';
+
+  import { DICT_TYPE } from '@vben/constants';
+  import { getDictOptions } from '@vben/hooks';
+
   import { DictTag } from '#/components/dict-tag';
-  import { DICT_TYPE, getDictOptions, getRangePickerDefaultProps } from '#/utils';
+  import { getRangePickerDefaultProps } from '#/utils';
   import { VxeColumn, VxeTable } from '#/adapter/vxe-table';
-  import { reactive,ref, h, nextTick,watch,onMounted } from 'vue';
-  import { cloneDeep, formatDateTime } from '@vben/utils';
   import { ContentWrap } from '#/components/content-wrap';
 #if ($table.templateType == 11) ## erp
     import { useVbenModal } from '@vben/common-ui';
+    import { useTableToolbar, VbenVxeTableToolbar } from '@vben/plugins/vxe-table';
     import ${subSimpleClassName}Form from './${subSimpleClassName_strikeCase}-form.vue'
     import { Tinymce as RichTextarea } from '#/components/tinymce';
     import { ImageUpload, FileUpload } from "#/components/upload";
     import { ElMessage, ElLoading, ElButton, ElTabs, ElTabPane, ElPagination, ElForm, ElFormItem, ElDatePicker, ElSelect, ElOption, ElInput } from 'element-plus';
     import { Plus, Trash2 } from '@vben/icons';
     import { $t } from '#/locales';
-    import { TableToolbar } from '#/components/table-toolbar';
-    import { useTableToolbar } from '#/hooks';
 #end
 #if ($table.templateType == 11) ## erp
@@ -129,64 +131,64 @@ function handleRowCheckboxChange({
   })
 /** 搜索按钮操作 */
-const handleQuery = () => {
+function handleQuery() {
   queryParams.pageNo = 1
   getList()
 }
 /** 重置按钮操作 */
-const resetQuery = () => {
+function resetQuery() {
   queryFormRef.value.resetFields()
   handleQuery()
 }
 #end
-  /** 查询列表 */
-  const getList = async () => {
-    loading.value = true
-    try {
-      if (!props.${subJoinColumn.javaField}){
-        return []
-      }
-        ## 特殊：树表专属逻辑（树不需要分页接口）
-        #if ($table.templateType == 11) ## erp
-          const params = cloneDeep(queryParams) as any;
-            #foreach ($column in $columns)
-                #if ($column.listOperation)
-                    #if ($column.htmlType == "datetime" || $column.listOperationCondition == "BETWEEN")
-                      if (params.${column.javaField} && Array.isArray(params.${column.javaField})) {
-                        params.${column.javaField} = (params.${column.javaField} as string[]).join(',');
-                      }
-                    #end
-                #end
-            #end
-          params.${subJoinColumn.javaField} = props.${subJoinColumn.javaField};
-          const data = await get${subSimpleClassName}Page(params)
-          list.value = data.list
-          total.value = data.total
-        #else
-            #if ($subTable.subJoinMany) ## 一对多
-             list.value = await get${subSimpleClassName}ListBy${SubJoinColumnName}(props.${subJoinColumn.javaField}!);
-            #else
-             list.value = [await get${subSimpleClassName}By${SubJoinColumnName}(props.${subJoinColumn.javaField}!)];
-            #end
-        #end
-    } finally {
-      loading.value = false
+/** 查询列表 */
+async function getList() {
+  loading.value = true
+  try {
+    if (!props.${subJoinColumn.javaField}){
+      return []
     }
+      ## 特殊：树表专属逻辑（树不需要分页接口）
+      #if ($table.templateType == 11) ## erp
+        const params = cloneDeep(queryParams) as any;
+          #foreach ($column in $columns)
+              #if ($column.listOperation)
+                  #if ($column.htmlType == "datetime" || $column.listOperationCondition == "BETWEEN")
+                    if (params.${column.javaField} && Array.isArray(params.${column.javaField})) {
+                      params.${column.javaField} = (params.${column.javaField} as string[]).join(',');
+                    }
+                  #end
+              #end
+          #end
+        params.${subJoinColumn.javaField} = props.${subJoinColumn.javaField};
+        const data = await get${subSimpleClassName}Page(params)
+        list.value = data.list
+        total.value = data.total
+      #else
+          #if ($subTable.subJoinMany) ## 一对多
+           list.value = await get${subSimpleClassName}ListBy${SubJoinColumnName}(props.${subJoinColumn.javaField}!);
+          #else
+           list.value = [await get${subSimpleClassName}By${SubJoinColumnName}(props.${subJoinColumn.javaField}!)];
+          #end
+      #end
+  } finally {
+    loading.value = false
   }
+}
-  /** 监听主表的关联字段的变化，加载对应的子表数据 */
-  watch(
-      () => props.${subJoinColumn.javaField},
-      async (val) => {
-        if (!val) {
-          return;
-        }
-        await nextTick();
-        await getList()
-      },
-      { immediate: true },
-  );
+/** 监听主表的关联字段的变化，加载对应的子表数据 */
+watch(
+    () => props.${subJoinColumn.javaField},
+    async (val) => {
+      if (!val) {
+        return;
+      }
+      await nextTick();
+      await getList()
+    },
+    { immediate: true },
+);
 #if ($table.templateType == 11) ## erp
 /** 初始化 */
@@ -290,7 +292,7 @@ onMounted(() =&gt; {
         <!-- 列表 -->
         <ContentWrap title="${table.classComment}">
           <template #extra>
-            <TableToolbar
+            <VbenVxeTableToolbar
                 ref="tableToolbarRef"
                 v-model:hidden-search="hiddenSearchBar"
             >
@@ -6,13 +6,15 @@
 <script lang="ts" setup>
   import type { ${apiName} } from '#/api/${table.moduleName}/${table.businessName}';
+  import { computed, ref } from 'vue';
+
   import { useVbenModal } from '@vben/common-ui';
+
   import { ElMessage } from 'element-plus';
-  import { computed, ref } from 'vue';
-  import { $t } from '#/locales';
   import { useVbenForm } from '#/adapter/form';
   import { get${subSimpleClassName}, create${subSimpleClassName}, update${subSimpleClassName} } from '#/api/${table.moduleName}/${table.businessName}';
+  import { $t } from '#/locales';
   import { use${subSimpleClassName}FormSchema } from '../data';
@@ -9,6 +9,7 @@
   import type { ${apiName} } from '#/api/${table.moduleName}/${table.businessName}';
   import { computed, ref, h, onMounted,watch,nextTick } from 'vue';
+
   import { $t } from '#/locales';
 #if ($subTable.subJoinMany) ## 一对多
@@ -42,6 +42,19 @@ const [FormModal, formModalApi] = useVbenModal({
   destroyOnClose: true,
 });
+/** 刷新表格 */
+async function handleRefresh() {
+#if ($table.templateType == 11) ## erp
+  await gridApi.query();
+#else
+  #if ($subTable.subJoinMany) ## 一对多
+  await gridApi.grid.loadData(await get${subSimpleClassName}ListBy${SubJoinColumnName}(props.${subJoinColumn.javaField}!));
+  #else
+  await gridApi.grid.loadData([await get${subSimpleClassName}By${SubJoinColumnName}(props.${subJoinColumn.javaField}!)]);
+  #end
+#end
+}
+
 /** 创建${subTable.classComment} */
 function handleCreate() {
   if (!props.${subJoinColumn.javaField}){
@@ -151,19 +164,6 @@ const [Grid, gridApi] = useVbenVxeGrid({
   #end
 });
-/** 刷新表格 */
-async function handleRefresh() {
-#if ($table.templateType == 11) ## erp
-  await gridApi.query();
-#else
-  #if ($subTable.subJoinMany) ## 一对多
-  await gridApi.grid.loadData(await get${subSimpleClassName}ListBy${SubJoinColumnName}(props.${subJoinColumn.javaField}!));
-  #else
-  await gridApi.grid.loadData([await get${subSimpleClassName}By${SubJoinColumnName}(props.${subJoinColumn.javaField}!)]);
-  #end
-#end
-}
-
 /** 监听主表的关联字段的变化，加载对应的子表数据 */
 watch(
   () => props.${subJoinColumn.javaField},