!453 代码生成时，增加 UI 类型的选择，可生成 Vue2、Vue3 多种管理后台的代码，支持 CRUD Schema 模式

Merge pull request !453 from 芋道源码/feature/codegen-front

yudao-module-infra/yudao-module-infra-biz/src/main/java/cn/iocoder/yudao/module/infra/controller/admin/codegen/vo/CodegenUpdateReqVO.java

@@ -36,7 +36,7 @@ public class CodegenUpdateReqVO {
         @Schema(description = "编号", required = true, example = "1")
         private Long id;
 
-        @AssertTrue(message = "上级菜单不能为空")
+        @AssertTrue(message = "上级菜单不能为空，请前往 [修改生成配置 -> 生成信息] 界面，设置“上级菜单”字段")
         public boolean isParentMenuIdValid() {
             // 生成场景为管理后台时，必须设置上级菜单，不然生成的菜单 SQL 是无父级菜单的
             return ObjectUtil.notEqual(getScene(), CodegenSceneEnum.ADMIN.getScene())

yudao-module-infra/yudao-module-infra-biz/src/main/java/cn/iocoder/yudao/module/infra/controller/admin/codegen/vo/table/CodegenTableBaseVO.java

@@ -50,6 +50,10 @@ public class CodegenTableBaseVO {
     @NotNull(message = "模板类型不能为空")
     private Integer templateType;
 
+    @Schema(description = "前端类型，参见 CodegenFrontTypeEnum 枚举", required = true, example = "20")
+    @NotNull(message = "前端类型不能为空")
+    private Integer frontType;
+
     @Schema(description = "父菜单编号", example = "1024")
     private Long parentMenuId;
 

yudao-module-infra/yudao-module-infra-biz/src/main/java/cn/iocoder/yudao/module/infra/controller/admin/config/ConfigController.java

@@ -73,7 +73,7 @@ public class ConfigController {
     public CommonResult<String> getConfigKey(@RequestParam("key") String key) {
         ConfigDO config = configService.getConfigByKey(key);
         if (config == null) {
-            return null;
+            return success(null);
         }
         if (!config.getVisible()) {
             throw exception(ErrorCodeConstants.CONFIG_GET_VALUE_ERROR_IF_VISIBLE);

yudao-module-infra/yudao-module-infra-biz/src/main/java/cn/iocoder/yudao/module/infra/dal/dataobject/codegen/CodegenTableDO.java

@@ -2,6 +2,7 @@ package cn.iocoder.yudao.module.infra.dal.dataobject.codegen;
 
 import cn.iocoder.yudao.framework.mybatis.core.dataobject.BaseDO;
 import cn.iocoder.yudao.module.infra.dal.dataobject.db.DataSourceConfigDO;
+import cn.iocoder.yudao.module.infra.enums.codegen.CodegenFrontTypeEnum;
 import cn.iocoder.yudao.module.infra.enums.codegen.CodegenSceneEnum;
 import cn.iocoder.yudao.module.infra.enums.codegen.CodegenTemplateTypeEnum;
 import com.baomidou.mybatisplus.annotation.KeySequence;
@@ -99,6 +100,12 @@ public class CodegenTableDO extends BaseDO {
      * 枚举 {@link CodegenTemplateTypeEnum}
      */
     private Integer templateType;
+    /**
+     * 代码生成的前端类型
+     *
+     * 枚举 {@link CodegenFrontTypeEnum}
+     */
+    private Integer frontType;
 
     // ========== 菜单相关字段 ==========
 

yudao-module-infra/yudao-module-infra-biz/src/main/java/cn/iocoder/yudao/module/infra/enums/codegen/CodegenFrontTypeEnum.java

@@ -0,0 +1,25 @@
+package cn.iocoder.yudao.module.infra.enums.codegen;
+
+import lombok.AllArgsConstructor;
+import lombok.Getter;
+
+/**
+ * 代码生成的前端类型枚举
+ *
+ * @author 芋道源码
+ */
+@AllArgsConstructor
+@Getter
+public enum CodegenFrontTypeEnum {
+
+    VUE2(10), // Vue2 Element UI 标准模版
+    VUE3(20), // Vue3 Element Plus 标准模版
+    VUE3_SCHEMA(21), // Vue3 Element Plus Schema 模版
+    ;
+
+    /**
+     * 类型
+     */
+    private final Integer type;
+
+}

yudao-module-infra/yudao-module-infra-biz/src/main/java/cn/iocoder/yudao/module/infra/framework/codegen/config/CodegenProperties.java

@@ -1,5 +1,6 @@
 package cn.iocoder.yudao.module.infra.framework.codegen.config;
 
+import cn.iocoder.yudao.module.infra.enums.codegen.CodegenFrontTypeEnum;
 import lombok.Data;
 import org.springframework.boot.context.properties.ConfigurationProperties;
 import org.springframework.validation.annotation.Validated;
@@ -25,4 +26,12 @@ public class CodegenProperties {
     @NotEmpty(message = "数据库不能为空")
     private Collection<String> dbSchemas;
 
+    /**
+     * 代码生成的前端类型（默认）
+     *
+     * 枚举 {@link CodegenFrontTypeEnum#getType()}
+     */
+    @NotNull(message = "代码生成的前端类型不能为空")
+    private Integer frontType;
+
 }

yudao-module-infra/yudao-module-infra-biz/src/main/java/cn/iocoder/yudao/module/infra/service/codegen/CodegenServiceImpl.java

@@ -14,6 +14,7 @@ import cn.iocoder.yudao.module.infra.dal.dataobject.codegen.CodegenTableDO;
 import cn.iocoder.yudao.module.infra.dal.mysql.codegen.CodegenColumnMapper;
 import cn.iocoder.yudao.module.infra.dal.mysql.codegen.CodegenTableMapper;
 import cn.iocoder.yudao.module.infra.enums.codegen.CodegenSceneEnum;
+import cn.iocoder.yudao.module.infra.framework.codegen.config.CodegenProperties;
 import cn.iocoder.yudao.module.infra.service.codegen.inner.CodegenBuilder;
 import cn.iocoder.yudao.module.infra.service.codegen.inner.CodegenEngine;
 import cn.iocoder.yudao.module.infra.service.db.DatabaseTableService;
@@ -58,6 +59,9 @@ public class CodegenServiceImpl implements CodegenService {
     @Resource
     private CodegenEngine codegenEngine;
 
+    @Resource
+    private CodegenProperties codegenProperties;
+
     @Override
     @Transactional(rollbackFor = Exception.class)
     public List<Long> createCodegenList(Long userId, CodegenCreateListReqVO reqVO) {
@@ -87,6 +91,7 @@ public class CodegenServiceImpl implements CodegenService {
         CodegenTableDO table = codegenBuilder.buildTable(tableInfo);
         table.setDataSourceConfigId(dataSourceConfigId);
         table.setScene(CodegenSceneEnum.ADMIN.getScene()); // 默认配置下，使用管理后台的模板
+        table.setFrontType(codegenProperties.getFrontType());
         table.setAuthor(userApi.getUser(userId).getNickname());
         codegenTableMapper.insert(table);
 

yudao-module-infra/yudao-module-infra-biz/src/main/java/cn/iocoder/yudao/module/infra/service/codegen/inner/CodegenEngine.java

@@ -23,9 +23,12 @@ import cn.iocoder.yudao.framework.operatelog.core.annotations.OperateLog;
 import cn.iocoder.yudao.framework.operatelog.core.enums.OperateTypeEnum;
 import cn.iocoder.yudao.module.infra.dal.dataobject.codegen.CodegenColumnDO;
 import cn.iocoder.yudao.module.infra.dal.dataobject.codegen.CodegenTableDO;
+import cn.iocoder.yudao.module.infra.enums.codegen.CodegenFrontTypeEnum;
 import cn.iocoder.yudao.module.infra.enums.codegen.CodegenSceneEnum;
 import cn.iocoder.yudao.module.infra.framework.codegen.config.CodegenProperties;
+import com.google.common.collect.ImmutableTable;
 import com.google.common.collect.Maps;
+import com.google.common.collect.Table;
 import org.springframework.stereotype.Component;
 
 import javax.annotation.PostConstruct;
@@ -50,11 +53,12 @@ import static cn.hutool.core.text.CharSequenceUtil.*;
 public class CodegenEngine {
 
     /**
-     * 模板配置
+     * 后端的模板配置
+     *
      * key：模板在 resources 的地址
      * value：生成的路径
      */
-    private static final Map<String, String> TEMPLATES = MapUtil.<String, String>builder(new LinkedHashMap<>()) // 有序
+    private static final Map<String, String> SERVER_TEMPLATES = MapUtil.<String, String>builder(new LinkedHashMap<>()) // 有序
             // Java module-biz Main
             .put(javaTemplatePath("controller/vo/baseVO"), javaModuleImplVOFilePath("BaseVO"))
             .put(javaTemplatePath("controller/vo/createReqVO"), javaModuleImplVOFilePath("CreateReqVO"))
@@ -80,23 +84,40 @@ public class CodegenEngine {
                     javaModuleImplTestFilePath("service/${table.businessName}/${table.className}ServiceImplTest"))
             // Java module-api Main
             .put(javaTemplatePath("enums/errorcode"), javaModuleApiMainFilePath("enums/ErrorCodeConstants_手动操作"))
-            // Vue2
-            .put(vueTemplatePath("views/index.vue"),
-                    vueFilePath("views/${table.moduleName}/${classNameVar}/index.vue"))
-            .put(vueTemplatePath("api/api.js"),
-                    vueFilePath("api/${table.moduleName}/${classNameVar}.js"))
-            // Vue3
-            .put(vue3TemplatePath("views/index.vue"),
-                    vue3FilePath("views/${table.moduleName}/${classNameVar}/index.vue"))
-            .put(vue3TemplatePath("views/data.ts"),
-                    vue3FilePath("views/${table.moduleName}/${classNameVar}/${classNameVar}.data.ts"))
-            .put(vue3TemplatePath("api/api.ts"),
-                    vue3FilePath("api/${table.moduleName}/${classNameVar}/index.ts"))
             // SQL
             .put("codegen/sql/sql.vm", "sql/sql.sql")
             .put("codegen/sql/h2.vm", "sql/h2.sql")
             .build();
 
+    /**
+     * 后端的配置模版
+     *
+     * key1：UI 模版的类型 {@link CodegenFrontTypeEnum#getType()}
+     * key2：模板在 resources 的地址
+     * value：生成的路径
+     */
+    private static final Table<Integer, String, String> FRONT_TEMPLATES = ImmutableTable.<Integer, String, String>builder()
+            // Vue2 标准模版
+            .put(CodegenFrontTypeEnum.VUE2.getType(), vueTemplatePath("views/index.vue"),
+                    vueFilePath("views/${table.moduleName}/${classNameVar}/index.vue"))
+            .put(CodegenFrontTypeEnum.VUE2.getType(), vueTemplatePath("api/api.js"),
+                    vueFilePath("api/${table.moduleName}/${classNameVar}.js"))
+            // Vue3 标准模版
+            .put(CodegenFrontTypeEnum.VUE3.getType(), vue3TemplatePath("views/index.vue"),
+                    vue3FilePath("views/${table.moduleName}/${classNameVar}/index.vue"))
+            .put(CodegenFrontTypeEnum.VUE3.getType(), vue3TemplatePath("views/form.vue"),
+                    vue3FilePath("views/${table.moduleName}/${classNameVar}/${simpleClassName}Form.vue"))
+            .put(CodegenFrontTypeEnum.VUE3.getType(), vue3TemplatePath("api/api.ts"),
+                    vue3FilePath("api/${table.moduleName}/${classNameVar}/index.ts"))
+            // Vue3 Schema 模版
+            .put(CodegenFrontTypeEnum.VUE3_SCHEMA.getType(), vue3SchemaTemplatePath("views/data.ts"),
+                    vue3FilePath("views/${table.moduleName}/${classNameVar}/${classNameVar}.data.ts"))
+            .put(CodegenFrontTypeEnum.VUE3_SCHEMA.getType(), vue3SchemaTemplatePath("views/index.vue"),
+                    vue3FilePath("views/${table.moduleName}/${classNameVar}/index.vue"))
+            .put(CodegenFrontTypeEnum.VUE3_SCHEMA.getType(), vue3SchemaTemplatePath("views/form.vue"),
+                    vue3FilePath("views/${table.moduleName}/${classNameVar}/${simpleClassName}Form.vue"))
+            .build();
+
     @Resource
     private CodegenProperties codegenProperties;
 
@@ -165,20 +186,32 @@ public class CodegenEngine {
         bindingMap.put("permissionPrefix", table.getModuleName() + ":" + simpleClassNameStrikeCase);
 
         // 执行生成
-        final Map<String, String> result = Maps.newLinkedHashMapWithExpectedSize(TEMPLATES.size()); // 有序
-        TEMPLATES.forEach((vmPath, filePath) -> {
+        Map<String, String> templates = getTemplates(table.getFrontType());
+        Map<String, String> result = Maps.newLinkedHashMapWithExpectedSize(templates.size()); // 有序
+        templates.forEach((vmPath, filePath) -> {
             filePath = formatFilePath(filePath, bindingMap);
             String content = templateEngine.getTemplate(vmPath).render(bindingMap);
+            // 去除字段后面多余的 , 逗号
+            content = content.replaceAll(",\n}", "\n}").replaceAll(",\n  }", "\n  }");
             result.put(filePath, content);
         });
         return result;
     }
 
+    private Map<String, String> getTemplates(Integer frontType) {
+        Map<String, String> templates = new LinkedHashMap<>();
+        templates.putAll(SERVER_TEMPLATES);
+        templates.putAll(FRONT_TEMPLATES.row(frontType));
+        return templates;
+    }
+
     private String formatFilePath(String filePath, Map<String, Object> bindingMap) {
         filePath = StrUtil.replace(filePath, "${basePackage}",
                 getStr(bindingMap, "basePackage").replaceAll("\\.", "/"));
         filePath = StrUtil.replace(filePath, "${classNameVar}",
                 getStr(bindingMap, "classNameVar"));
+        filePath = StrUtil.replace(filePath, "${simpleClassName}",
+                getStr(bindingMap, "simpleClassName"));
         // sceneEnum 包含的字段
         CodegenSceneEnum sceneEnum = (CodegenSceneEnum) bindingMap.get("sceneEnum");
         filePath = StrUtil.replace(filePath, "${sceneEnum.prefixClass}", sceneEnum.getPrefixClass());
@@ -237,6 +270,7 @@ public class CodegenEngine {
         return "yudao-ui-${sceneEnum.basePackage}/" + // 顶级目录
                 "src/" + path;
     }
+
     private static String vue3TemplatePath(String path) {
         return "codegen/vue3/" + path + ".vm";
     }
@@ -245,4 +279,8 @@ public class CodegenEngine {
         return "yudao-ui-${sceneEnum.basePackage}-vue3/" + // 顶级目录
                 "src/" + path;
     }
+
+    private static String vue3SchemaTemplatePath(String path) {
+        return "codegen/vue3_schema/" + path + ".vm";
+    }
 }

yudao-module-infra/yudao-module-infra-biz/src/main/resources/codegen/sql/sql.vm

@@ -1,11 +1,11 @@
 -- 菜单 SQL
 INSERT INTO system_menu(
     name, permission, type, sort, parent_id,
-    path, icon, component, status
+    path, icon, component, status, component_name
 )
 VALUES (
     '${table.classComment}管理', '', 2, 0, ${table.parentMenuId},
-    '${simpleClassName_strikeCase}', '', '${table.moduleName}/${classNameVar}/index', 0
+    '${simpleClassName_strikeCase}', '', '${table.moduleName}/${classNameVar}/index', 0, '${table.className}'
 );
 
 -- 按钮父菜单ID

yudao-module-infra/yudao-module-infra-biz/src/main/resources/codegen/vue3/api/api.ts.vm

@@ -14,61 +14,32 @@ export interface ${simpleClassName}VO {
 #end
 }
 
-export interface ${simpleClassName}PageReqVO extends PageParam {
-#foreach ($column in $columns)
-#if (${column.listOperation})##查询操作
-#if(${column.javaType.toLowerCase()} == "long" || ${column.javaType.toLowerCase()} == "integer" || ${column.javaType.toLowerCase()} == "double" || ${column.javaType.toLowerCase()} == "bigdecimal")
-  ${column.javaField}?: number
-#elseif(${column.javaType.toLowerCase()} == "date" || ${column.javaType.toLowerCase()} == "localdatetime")
-  ${column.javaField}?: Date[]
-#else
-  ${column.javaField}?: ${column.javaType.toLowerCase()}
-#end
-#end
-#end
-}
-
-export interface ${simpleClassName}ExcelReqVO {
-#foreach ($column in $columns)
-#if (${column.listOperation})##查询操作
-#if(${column.javaType.toLowerCase()} == "long" || ${column.javaType.toLowerCase()} == "integer" || ${column.javaType.toLowerCase()} == "double" || ${column.javaType.toLowerCase()} == "bigdecimal")
-  ${column.javaField}?: number
-#elseif(${column.javaType.toLowerCase()} == "date" || ${column.javaType.toLowerCase()} == "localdatetime")
-  ${column.javaField}?: Date[]
-#else
-  ${column.javaField}?: ${column.javaType.toLowerCase()}
-#end
-#end
-#end
-}
-#set ($baseURL = "/${table.moduleName}/${simpleClassName_strikeCase}")
-
 // 查询${table.classComment}列表
-export const get${simpleClassName}PageApi = async (params: ${simpleClassName}PageReqVO) => {
+export const get${simpleClassName}Page = async (params: ${simpleClassName}PageReqVO) => {
   return await request.get({ url: '${baseURL}/page', params })
 }
 
 // 查询${table.classComment}详情
-export const get${simpleClassName}Api = async (id: number) => {
+export const get${simpleClassName} = async (id: number) => {
   return await request.get({ url: '${baseURL}/get?id=' + id })
 }
 
 // 新增${table.classComment}
-export const create${simpleClassName}Api = async (data: ${simpleClassName}VO) => {
+export const create${simpleClassName} = async (data: ${simpleClassName}VO) => {
   return await request.post({ url: '${baseURL}/create', data })
 }
 
 // 修改${table.classComment}
-export const update${simpleClassName}Api = async (data: ${simpleClassName}VO) => {
+export const update${simpleClassName} = async (data: ${simpleClassName}VO) => {
   return await request.put({ url: '${baseURL}/update', data })
 }
 
 // 删除${table.classComment}
-export const delete${simpleClassName}Api = async (id: number) => {
+export const delete${simpleClassName} = async (id: number) => {
   return await request.delete({ url: '${baseURL}/delete?id=' + id })
 }
 
 // 导出${table.classComment} Excel
-export const export${simpleClassName}Api = async (params: ${simpleClassName}ExcelReqVO) => {
+export const export${simpleClassName}Api = async (params) => {
   return await request.download({ url: '${baseURL}/export-excel', params })
 }

yudao-module-infra/yudao-module-infra-biz/src/main/resources/codegen/vue3/views/data.ts.vm

@@ -1,106 +0,0 @@
-import type { VxeCrudSchema } from '@/hooks/web/useVxeCrudSchemas'
-const { t } = useI18n() // 国际化
-// 表单校验
-export const rules = reactive({
-#foreach ($column in $columns)
-#if (($column.createOperation || $column.updateOperation) && !$column.nullable && !${column.primaryKey})## 创建或者更新操作 && 要求非空 && 非主键
-#set($comment=$column.columnComment)
-  $column.javaField: [required],
-#end
-#end
-})
-// CrudSchema
-const crudSchemas = reactive<VxeCrudSchema>({
-  primaryKey: 'id', // 默认的主键ID
-  primaryTitle: t('common.index'), // 默认显示的值
-  primaryType: 'seq', // 默认为seq，序号模式
-  action: true,
-  actionWidth: '200', // 3个按钮默认200，如有删减对应增减即可
-  columns: [
-  #foreach($column in $columns)
-    #if ($column.listOperation || $column.listOperationResult || $column.createOperation || $column.updateOperation)
-    #set ($dictType = $column.dictType)
-    #if(!$column.primaryKey)
-    {
-      title: '${column.columnComment}',
-      field: '${column.javaField}',
-      #if (!$column.listOperationResult)
-      isTable: false,
-      #end
-      #if ("" != $dictType)## 有数据字典
-      dictType: DICT_TYPE.$dictType.toUpperCase(),
-      #if (${column.javaType.toLowerCase()} == "long" || ${column.javaType.toLowerCase()} == "integer")
-      dictClass: 'number',
-      #else
-      dictClass: 'string',
-      #end
-      #end
-      #if (!$column.createOperation && !$column.updateOperation)
-      isForm: false,
-      #elseif(!("" != $column.dictType))
-      #if (${column.javaType.toLowerCase()} == "date" || ${column.javaType.toLowerCase()} == "localdatetime")
-      form: {
-        component: 'DatePicker',
-        componentProps: {
-          type: 'datetime',
-          valueFormat: 'x'
-        }
-      },
-      #elseif($column.htmlType == "editor")## 文本编辑器
-      form: {
-        component: 'Editor',
-        colProps: {
-          span: 24
-        },
-        componentProps: {
-          valueHtml: ''
-        }
-      },
-      #elseif($column.htmlType == "textarea")## 文本框
-      form: {
-        component: 'Input',
-        componentProps: {
-          type: 'textarea',
-          rows: 4
-        },
-        colProps: {
-          span: 24
-        }
-      },
-      #elseif(${column.javaType.toLowerCase()} == "long" || ${column.javaType.toLowerCase()} == "integer")## 数字类型
-      form: {
-        component: 'InputNumber',
-        value: 0
-      },
-      #elseif($column.htmlType == "imageUpload")## 图片上传
-      form: {
-        component: 'UploadImg' // 单图上传，多图为UploadImgs
-      },
-      #elseif($column.htmlType == "fileUpload")## 图片上传
-      form: {
-        component: 'UploadFile'
-      },
-      #end
-      #end
-      #if ($column.listOperation)
-      #if($column.htmlType == "input")
-      isSearch: true,
-      #elseif("" != $dictType)
-      isSearch: true,
-      #elseif($column.htmlType == "datetime")
-      formatter: 'formatDate',
-      search: {
-        show: true,
-        itemRender: {
-          name: 'XDataTimePicker'
-        }
-      },
-      #end
-      #end
-    },
-      #end
-    #end
-  #end
-  ]
-})
-export const { allSchemas } = useVxeCrudSchemas(crudSchemas)

yudao-module-infra/yudao-module-infra-biz/src/main/resources/codegen/vue3/views/form.vue.vm

@@ -0,0 +1,234 @@
+<template>
+  <Dialog :title="dialogTitle" v-model="dialogVisible">
+    <el-form
+      ref="formRef"
+      :model="formData"
+      :rules="formRules"
+      label-width="100px"
+      v-loading="formLoading"
+    >
+#set ($dictMethods = [])## 使用到的 dict 字典方法
+#foreach($column in $columns)
+    #if ($column.createOperation || $column.updateOperation)
+        #set ($dictType = $column.dictType)
+        #set ($javaField = $column.javaField)
+        #set ($javaType = $column.javaType)
+        #set ($AttrName = $column.javaField.substring(0,1).toUpperCase() + ${column.javaField.substring(1)})
+        #set ($comment = $column.columnComment)
+        #set ($dictMethod = "getDictOptions")## 计算使用哪个 dict 字典方法
+        #if ($javaType == "Integer" || $javaType == "Long" || $javaType == "Byte" || $javaType == "Short")
+            #set ($dictMethod = "getIntDictOptions")
+        #elseif ($javaType == "String")
+            #set ($dictMethod = "getStrDictOptions")
+        #elseif ($javaType == "Boolean")
+            #set ($dictMethod = "getBoolDictOptions")
+        #end
+        #if ($column.htmlType == "input" && !$column.primaryKey)## 忽略主键，不用在表单里
+      <el-form-item label="${comment}" prop="${javaField}">
+        <el-input v-model="formData.${javaField}" placeholder="请输入${comment}" />
+      </el-form-item>
+        #elseif($column.htmlType == "imageUpload")## 图片上传
+            #set ($hasImageUploadColumn = true)
+      <el-form-item label="${comment}">
+        <UploadImg v-model="formData.${javaField}" />
+      </el-form-item>
+        #elseif($column.htmlType == "fileUpload")## 文件上传
+            #set ($hasFileUploadColumn = true)
+      <el-form-item label="${comment}">
+        <UploadFile v-model="formData.${javaField}" />
+      </el-form-item>
+        #elseif($column.htmlType == "editor")## 文本编辑器
+      <el-form-item label="${comment}">
+        <Editor :model-value="formData.${javaField}" height="150px" />
+      </el-form-item>
+        #elseif($column.htmlType == "select")## 下拉框
+      <el-form-item label="${comment}" prop="${javaField}">
+        <el-select v-model="formData.${javaField}" placeholder="请选择${comment}">
+                #if ("" != $dictType)## 有数据字典
+                    #if (!$dictMethods.contains($dictMethod))## 如果不存在，则添加到 dictMethods 数组中，后续好 import
+                      #set($ignore = $dictMethods.add($dictMethod) )
+                    #end
+          <el-option
+            v-for="dict in $dictMethod(DICT_TYPE.$dictType.toUpperCase())"
+            :key="dict.value"
+            :label="dict.label"
+            :value="dict.value"
+          />
+                #else##没数据字典
+          <el-option label="请选择字典生成" value="" />
+                #end
+        </el-select>
+      </el-form-item>
+        #elseif($column.htmlType == "checkbox")## 多选框
+      <el-form-item label="${comment}" prop="${javaField}">
+        <el-checkbox-group v-model="formData.${javaField}">
+                #if ("" != $dictType)## 有数据字典
+                    #if (!$dictMethods.contains($dictMethod))## 如果不存在，则添加到 dictMethods 数组中，后续好 import
+                      #set($ignore = $dictMethods.add($dictMethod) )
+                    #end
+          <el-checkbox
+            v-for="dict in $dictMethod(DICT_TYPE.$dictType.toUpperCase())"
+            :key="dict.value"
+            :label="dict.value"
+          >
+            {{ dict.label }}
+          </el-checkbox>
+                #else##没数据字典
+          <el-checkbox>请选择字典生成</el-checkbox>
+                #end
+        </el-checkbox-group>
+      </el-form-item>
+        #elseif($column.htmlType == "radio")## 单选框
+      <el-form-item label="${comment}" prop="${javaField}">
+        <el-radio-group v-model="formData.${javaField}">
+                #if ("" != $dictType)## 有数据字典
+                    #if (!$dictMethods.contains($dictMethod))## 如果不存在，则添加到 dictMethods 数组中，后续好 import
+                      #set($ignore = $dictMethods.add($dictMethod) )
+                    #end
+          <el-radio
+            v-for="dict in $dictMethod(DICT_TYPE.$dictType.toUpperCase())"
+            :key="dict.value"
+            :label="dict.value"
+          >
+            {{ dict.label }}
+          </el-radio>
+                #else##没数据字典
+          <el-radio label="1">请选择字典生成</el-radio>
+                #end
+        </el-radio-group>
+      </el-form-item>
+        #elseif($column.htmlType == "datetime")## 时间框
+      <el-form-item label="${comment}" prop="${javaField}">
+        <el-date-picker
+          v-model="formData.${javaField}"
+          type="date"
+          value-format="timestamp"
+          placeholder="选择${comment}"
+        />
+      </el-form-item>
+        #elseif($column.htmlType == "textarea")## 文本框
+      <el-form-item label="${comment}" prop="${javaField}">
+        <el-input v-model="formData.${javaField}" type="textarea" placeholder="请输入${comment}" />
+      </el-form-item>
+        #end
+    #end
+#end
+    </el-form>
+    <template #footer>
+      <el-button @click="submitForm" type="primary" :disabled="formLoading">确 定</el-button>
+      <el-button @click="dialogVisible = false">取 消</el-button>
+    </template>
+  </Dialog>
+</template>
+<script setup lang="ts">
+#if ($dictMethods.size() > 0)
+import { DICT_TYPE#foreach ($dictMethod in $dictMethods), ${dictMethod}#end } from '@/utils/dict'
+#end
+import * as ${simpleClassName}Api from '@/api/${table.moduleName}/${classNameVar}'
+
+const { t } = useI18n() // 国际化
+const message = useMessage() // 消息弹窗
+
+const dialogVisible = ref(false) // 弹窗的是否展示
+const dialogTitle = ref('') // 弹窗的标题
+const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
+const formType = ref('') // 表单的类型：create - 新增；update - 修改
+const formData = ref({
+#set ($listOperationLastIndex = -1)## 求最后一个需要 , 的地方
+#foreach ($column in $columns)
+    #if ($column.createOperation || $column.updateOperation)
+        #set ($listOperationLastIndex = $foreach.index)
+    #end
+#end
+#foreach ($column in $columns)
+    #if ($column.createOperation || $column.updateOperation)
+        #if ($column.htmlType == "checkbox")
+  $column.javaField: []#if($foreach.index < $listOperationLastIndex),#end
+        #else
+  $column.javaField: undefined#if($foreach.index < $listOperationLastIndex),#end
+        #end
+    #end
+#end
+})
+const formRules = reactive({
+#set ($listOperationLastIndex = -1)## 求最后一个需要 , 的地方
+#foreach ($column in $columns)
+    #if (($column.createOperation || $column.updateOperation) && !$column.nullable && !${column.primaryKey})## 创建或者更新操作 && 要求非空 && 非主键
+        #set ($listOperationLastIndex = $foreach.index)
+    #end
+#end
+#foreach ($column in $columns)
+    #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 }]#if($foreach.index < $listOperationLastIndex),#end
+    #end
+#end
+})
+const formRef = ref() // 表单 Ref
+
+/** 打开弹窗 */
+const open = async (type: string, id?: number) => {
+  dialogVisible.value = true
+  dialogTitle.value = t('action.' + type)
+  formType.value = type
+  resetForm()
+  // 修改时，设置数据
+  if (id) {
+    formLoading.value = true
+    try {
+      formData.value = await ${simpleClassName}Api.get${simpleClassName}(id)
+    } finally {
+      formLoading.value = false
+    }
+  }
+}
+defineExpose({ open }) // 提供 open 方法，用于打开弹窗
+
+/** 提交表单 */
+const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
+const submitForm = async () => {
+  // 校验表单
+  if (!formRef) return
+  const valid = await formRef.value.validate()
+  if (!valid) return
+  // 提交请求
+  formLoading.value = true
+  try {
+    const data = formData.value as unknown as ${simpleClassName}Api.${simpleClassName}VO
+    if (formType.value === 'create') {
+      await ${simpleClassName}Api.create${simpleClassName}(data)
+      message.success(t('common.createSuccess'))
+    } else {
+      await ${simpleClassName}Api.update${simpleClassName}(data)
+      message.success(t('common.updateSuccess'))
+    }
+    dialogVisible.value = false
+    // 发送操作成功的事件
+    emit('success')
+  } finally {
+    formLoading.value = false
+  }
+}
+
+/** 重置表单 */
+const resetForm = () => {
+  formData.value = {
+#set ($listOperationLastIndex = -1)## 求最后一个需要 , 的地方
+#foreach ($column in $columns)
+  #if ($column.createOperation || $column.updateOperation)
+      #set ($listOperationLastIndex = $foreach.index)
+  #end
+#end
+#foreach ($column in $columns)
+  #if ($column.createOperation || $column.updateOperation)
+      #if ($column.htmlType == "checkbox")
+    $column.javaField: []#if($foreach.index < $listOperationLastIndex),#end
+      #else
+    $column.javaField: undefined#if($foreach.index < $listOperationLastIndex),#end
+      #end
+  #end
+#end
+  }
+  formRef.value?.resetFields()
+}
+</script>

yudao-module-infra/yudao-module-infra-biz/src/main/resources/codegen/vue3/views/index.vue.vm

@@ -1,160 +1,285 @@
 <template>
   <ContentWrap>
-    <!-- 列表 -->
-    <XTable @register="registerTable">
-      <template #toolbar_buttons>
-        <!-- 操作：新增 -->
-        <XButton
+    <!-- 搜索工作栏 -->
+    <el-form
+      class="-mb-15px"
+      :model="queryParams"
+      ref="queryFormRef"
+      :inline="true"
+      label-width="68px"
+    >
+    #set ($dictMethods = [])## 使用到的 dict 字典方法
+    #foreach($column in $columns)
+        #if ($column.listOperation)
+            #set ($dictType = $column.dictType)
+            #set ($javaField = $column.javaField)
+            #set ($javaType = $column.javaType)
+            #set ($AttrName = $column.javaField.substring(0,1).toUpperCase() + ${column.javaField.substring(1)})
+            #set ($comment = $column.columnComment)
+            #set ($dictMethod = "getDictOptions")## 计算使用哪个 dict 字典方法
+            #if ($javaType == "Integer" || $javaType == "Long" || $javaType == "Byte" || $javaType == "Short")
+                #set ($dictMethod = "getIntDictOptions")
+            #elseif ($javaType == "String")
+                #set ($dictMethod = "getStrDictOptions")
+            #elseif ($javaType == "Boolean")
+                #set ($dictMethod = "getBoolDictOptions")
+            #end
+            #if ($column.htmlType == "input")
+      <el-form-item label="${comment}" prop="${javaField}">
+        <el-input
+          v-model="queryParams.${javaField}"
+          placeholder="请输入${comment}"
+          clearable
+          @keyup.enter="handleQuery"
+          class="!w-240px"
+        />
+      </el-form-item>
+            #elseif ($column.htmlType == "select" || $column.htmlType == "radio")
+      <el-form-item label="${comment}" prop="${javaField}">
+                #if ($javaField.length() + $comment.length() > 8)
+        <el-select
+          v-model="queryParams.${javaField}"
+          placeholder="请选择${comment}"
+          clearable
+          class="!w-240px"
+        >
+                #else
+        <el-select v-model="queryParams.${javaField}" placeholder="请选择${comment}" clearable class="!w-240px">
+                #end
+                #if ("" != $dictType)## 设置了 dictType 数据字典的情况
+                    #if (!$dictMethods.contains($dictMethod))## 如果不存在，则添加到 dictMethods 数组中，后续好 import
+                        #set($ignore = $dictMethods.add($dictMethod) )
+                    #end
+          <el-option
+            v-for="dict in $dictMethod(DICT_TYPE.$dictType.toUpperCase())"
+            :key="dict.value"
+            :label="dict.label"
+            :value="dict.value"
+          />
+                #else## 未设置 dictType 数据字典的情况
+          <el-option label="请选择字典生成" value="" />
+                #end
+        </el-select>
+      </el-form-item>
+    #elseif($column.htmlType == "datetime")
+      #if ($column.listOperationCondition != "BETWEEN")## 非范围
+      <el-form-item label="${comment}" prop="${javaField}">
+        <el-date-picker
+          v-model="queryParams.${javaField}"
+          value-format="yyyy-MM-dd"
+          type="date"
+          placeholder="选择${comment}"
+          clearable
+          class="!w-240px"
+        />
+      </el-form-item>
+      #else## 范围
+      <el-form-item label="${comment}" prop="${javaField}">
+        <el-date-picker
+          v-model="queryParams.${javaField}"
+          value-format="yyyy-MM-dd HH:mm:ss"
+          type="daterange"
+          start-placeholder="开始日期"
+          end-placeholder="结束日期"
+          :default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
+          class="!w-240px"
+        />
+      </el-form-item>
+      #end
+    #end
+    #end
+    #end
+      <el-form-item>
+        <el-button @click="handleQuery"><Icon icon="ep:search" class="mr-5px" /> 搜索</el-button>
+        <el-button @click="resetQuery"><Icon icon="ep:refresh" class="mr-5px" /> 重置</el-button>
+        #if ($permissionPrefix.length() <= 12)
+        <el-button type="primary" @click="openForm('create')" v-hasPermi="['${permissionPrefix}:create']">
+        #else
+        <el-button
           type="primary"
-          preIcon="ep:zoom-in"
-          :title="t('action.add')"
+          plain
+          @click="openForm('create')"
           v-hasPermi="['${permissionPrefix}:create']"
-          @click="handleCreate()"
-        />
-        <!-- 操作：导出 -->
-        <XButton
-          type="warning"
-          preIcon="ep:download"
-          :title="t('action.export')"
+        >
+        #end
+          <Icon icon="ep:plus" class="mr-5px" /> 新增
+        </el-button>
+        <el-button
+          type="success"
+          plain
+          @click="handleExport"
+          :loading="exportLoading"
           v-hasPermi="['${permissionPrefix}:export']"
-          @click="exportList('${table.classComment}.xls')"
-        />
-      </template>
-      <template #actionbtns_default="{ row }">
-        <!-- 操作：修改 -->
-        <XTextButton
-          preIcon="ep:edit"
-          :title="t('action.edit')"
-          v-hasPermi="['${permissionPrefix}:update']"
-          @click="handleUpdate(row.id)"
-        />
-        <!-- 操作：详情 -->
-        <XTextButton
-          preIcon="ep:view"
-          :title="t('action.detail')"
-          v-hasPermi="['${permissionPrefix}:query']"
-          @click="handleDetail(row.id)"
-        />
-        <!-- 操作：删除 -->
-        <XTextButton
-          preIcon="ep:delete"
-          :title="t('action.del')"
-          v-hasPermi="['${permissionPrefix}:delete']"
-          @click="deleteData(row.id)"
-        />
-      </template>
-    </XTable>
+        >
+          <Icon icon="ep:download" class="mr-5px" /> 导出
+        </el-button>
+      </el-form-item>
+    </el-form>
   </ContentWrap>
-  <!-- 弹窗 -->
-  <XModal id="${classNameVar}Model" :loading="modelLoading" v-model="modelVisible" :title="modelTitle">
-    <!-- 表单：添加/修改 -->
-    <Form
-      ref="formRef"
-      v-if="['create', 'update'].includes(actionType)"
-      :schema="allSchemas.formSchema"
-      :rules="rules"
-    />
-    <!-- 表单：详情 -->
-    <Descriptions
-      v-if="actionType === 'detail'"
-      :schema="allSchemas.detailSchema"
-      :data="detailData"
-    />
-    <template #footer>
-      <!-- 按钮：保存 -->
-      <XButton
-        v-if="['create', 'update'].includes(actionType)"
-        type="primary"
-        :title="t('action.save')"
-        :loading="actionLoading"
-        @click="submitForm()"
+
+  <!-- 列表 -->
+  <ContentWrap>
+    <el-table v-loading="loading" :data="list">
+    #foreach($column in $columns)
+      #if ($column.listOperationResult)
+        #set ($dictType=$column.dictType)
+        #set ($javaField = $column.javaField)
+        #set ($AttrName=$column.javaField.substring(0,1).toUpperCase() + ${column.javaField.substring(1)})
+        #set ($comment=$column.columnComment)
+        #if ($column.javaType == "LocalDateTime")## 时间类型
+      <el-table-column
+        label="${comment}"
+        align="center"
+        prop="${javaField}"
+        :formatter="dateFormatter"
       />
-      <!-- 按钮：关闭 -->
-      <XButton :loading="actionLoading" :title="t('dialog.close')" @click="modelVisible = false" />
-    </template>
-  </XModal>
+        #elseif("" != $column.dictType)## 数据字典
+      <el-table-column label="${comment}" align="center" prop="${javaField}">
+        <template #default="scope">
+          <dict-tag :type="DICT_TYPE.$dictType.toUpperCase()" :value="scope.row.${column.javaField}" />
+        </template>
+      </el-table-column>
+        #else
+      <el-table-column label="${comment}" align="center" prop="${javaField}" />
+        #end
+      #end
+    #end
+      <el-table-column label="操作" align="center">
+        <template #default="scope">
+          <el-button
+            link
+            type="primary"
+            @click="openForm('update', scope.row.id)"
+            v-hasPermi="['${permissionPrefix}:update']"
+          >
+            编辑
+          </el-button>
+          <el-button
+            link
+            type="danger"
+            @click="handleDelete(scope.row.id)"
+            v-hasPermi="['${permissionPrefix}:delete']"
+          >
+            删除
+          </el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <!-- 分页 -->
+    <Pagination
+      :total="total"
+      v-model:page="queryParams.pageNo"
+      v-model:limit="queryParams.pageSize"
+      @pagination="getList"
+    />
+  </ContentWrap>
+
+  <!-- 表单弹窗：添加/修改 -->
+  <${simpleClassName}Form ref="formRef" @success="getList" />
 </template>
-<script setup lang="ts" name="${simpleClassName}">
-import { FormExpose } from '@/components/Form'
-// 业务相关的 import
-import { rules, allSchemas } from './${classNameVar}.data'
+
+<script setup lang="ts" name="${table.className}">
+#if ($dictMethods.size() > 0)
+import { DICT_TYPE#foreach ($dictMethod in $dictMethods), ${dictMethod}#end } from '@/utils/dict'
+#end
+#foreach ($column in $columns)
+    #if ($column.listOperationResult && $column.htmlType == "datetime")
+import { dateFormatter } from '@/utils/formatTime'
+    #break
+    #end
+#end
+import download from '@/utils/download'
 import * as ${simpleClassName}Api from '@/api/${table.moduleName}/${classNameVar}'
-
-const { t } = useI18n() // 国际化
+import ${simpleClassName}Form from './${simpleClassName}Form.vue'
 const message = useMessage() // 消息弹窗
+const { t } = useI18n() // 国际化
 
-// 列表相关的变量
-const [registerTable, { reload, deleteData, exportList }] = useXTable({
-  allSchemas: allSchemas,
-  getListApi: ${simpleClassName}Api.get${simpleClassName}PageApi,
-  deleteApi: ${simpleClassName}Api.delete${simpleClassName}Api,
-  exportListApi: ${simpleClassName}Api.export${simpleClassName}Api
+const loading = ref(true) // 列表的加载中
+const total = ref(0) // 列表的总页数
+const list = ref([]) // 列表的数据
+const queryParams = reactive({
+  pageNo: 1,
+  pageSize: 10,
+  #set ($listOperationLastIndex = -1)## 求最后一个需要 , 的地方
+  #foreach ($column in $columns)
+    #if ($column.listOperation)
+      #set ($listOperationLastIndex = $foreach.index)
+    #end
+  #end
+  #foreach ($column in $columns)
+    #if ($column.listOperation)
+      #if ($column.listOperationCondition != 'BETWEEN')
+  $column.javaField: null#if($foreach.index < $listOperationLastIndex),#end
+  #end
+      #if ($column.htmlType == "datetime" || $column.listOperationCondition == "BETWEEN")
+  $column.javaField: []#if($foreach.index < $listOperationLastIndex),#end
+      #end
+    #end
+  #end
 })
+const queryFormRef = ref() // 搜索的表单
+const exportLoading = ref(false) // 导出的加载中
 
-// 弹窗相关的变量
-const modelVisible = ref(false) // 是否显示弹出层
-const modelTitle = ref('edit') // 弹出层标题
-const modelLoading = ref(false) // 弹出层loading
-const actionType = ref('') // 操作按钮的类型
-const actionLoading = ref(false) // 按钮 Loading
-const formRef = ref<FormExpose>() // 表单 Ref
-const detailData = ref() // 详情 Ref
-
-// 设置标题
-const setDialogTile = (type: string) => {
-  modelLoading.value = true
-  modelTitle.value = t('action.' + type)
-  actionType.value = type
-  modelVisible.value = true
+/** 查询列表 */
+const getList = async () => {
+  loading.value = true
+  try {
+    const data = await ${simpleClassName}Api.get${simpleClassName}Page(queryParams)
+    list.value = data.list
+    total.value = data.total
+  } finally {
+    loading.value = false
+  }
 }
 
-// 新增操作
-const handleCreate = () => {
-  setDialogTile('create')
-  modelLoading.value = false
+/** 搜索按钮操作 */
+const handleQuery = () => {
+  queryParams.pageNo = 1
+  getList()
 }
 
-// 修改操作
-const handleUpdate = async (rowId: number) => {
-  setDialogTile('update')
-  // 设置数据
-  const res = await ${simpleClassName}Api.get${simpleClassName}Api(rowId)
-  unref(formRef)?.setValues(res)
-  modelLoading.value = false
+/** 重置按钮操作 */
+const resetQuery = () => {
+  queryFormRef.value.resetFields()
+  handleQuery()
 }
 
-// 详情操作
-const handleDetail = async (rowId: number) => {
-  setDialogTile('detail')
-  const res = await ${simpleClassName}Api.get${simpleClassName}Api(rowId)
-  detailData.value = res
-  modelLoading.value = false
+/** 添加/修改操作 */
+const formRef = ref()
+const openForm = (type: string, id?: number) => {
+  formRef.value.open(type, id)
 }
 
-// 提交按钮
-const submitForm = async () => {
-  const elForm = unref(formRef)?.getElFormRef()
-  if (!elForm) return
-  elForm.validate(async (valid) => {
-    if (valid) {
-      actionLoading.value = true
-      // 提交请求
-      try {
-        const data = unref(formRef)?.formModel as ${simpleClassName}Api.${simpleClassName}VO
-        if (actionType.value === 'create') {
-          await ${simpleClassName}Api.create${simpleClassName}Api(data)
-          message.success(t('common.createSuccess'))
-        } else {
-          await ${simpleClassName}Api.update${simpleClassName}Api(data)
-          message.success(t('common.updateSuccess'))
-        }
-        modelVisible.value = false
-      } finally {
-        actionLoading.value = false
-        // 刷新列表
-        await reload()
-      }
-    }
-  })
+/** 删除按钮操作 */
+const handleDelete = async (id: number) => {
+  try {
+    // 删除的二次确认
+    await message.delConfirm()
+    // 发起删除
+    await ${simpleClassName}Api.delete${simpleClassName}(id)
+    message.success(t('common.delSuccess'))
+    // 刷新列表
+    await getList()
+  } catch {}
 }
+
+/** 导出按钮操作 */
+const handleExport = async () => {
+  try {
+    // 导出的二次确认
+    await message.exportConfirm()
+    // 发起导出
+    exportLoading.value = true
+    const data = await ${simpleClassName}Api.export${simpleClassName}(queryParams)
+    download.excel(data, '${table.classComment}.xls')
+  } catch {
+  } finally {
+    exportLoading.value = false
+  }
+}
+
+/** 初始化 **/
+onMounted(() => {
+  getList()
+})
 </script>

yudao-module-infra/yudao-module-infra-biz/src/main/resources/codegen/vue3_schema/api/api.ts.vm

@@ -0,0 +1,45 @@
+import request from '@/config/axios'
+
+export interface ${simpleClassName}VO {
+    #foreach ($column in $columns)
+        #if ($column.createOperation || $column.updateOperation)
+            #if(${column.javaType.toLowerCase()} == "long" || ${column.javaType.toLowerCase()} == "integer" || ${column.javaType.toLowerCase()} == "double" || ${column.javaType.toLowerCase()} == "bigdecimal")
+                    ${column.javaField}: number
+            #elseif(${column.javaType.toLowerCase()} == "date" || ${column.javaType.toLowerCase()} == "localdatetime")
+                    ${column.javaField}: Date
+            #else
+                    ${column.javaField}: ${column.javaType.toLowerCase()}
+            #end
+        #end
+    #end
+}
+
+// 查询${table.classComment}列表
+export const get${simpleClassName}Page = async (params: ${simpleClassName}PageReqVO) => {
+  return await request.get({ url: '${baseURL}/page', params })
+}
+
+// 查询${table.classComment}详情
+export const get${simpleClassName} = async (id: number) => {
+  return await request.get({ url: '${baseURL}/get?id=' + id })
+}
+
+// 新增${table.classComment}
+export const create${simpleClassName} = async (data: ${simpleClassName}VO) => {
+  return await request.post({ url: '${baseURL}/create', data })
+}
+
+// 修改${table.classComment}
+export const update${simpleClassName} = async (data: ${simpleClassName}VO) => {
+  return await request.put({ url: '${baseURL}/update', data })
+}
+
+// 删除${table.classComment}
+export const delete${simpleClassName} = async (id: number) => {
+  return await request.delete({ url: '${baseURL}/delete?id=' + id })
+}
+
+// 导出${table.classComment} Excel
+export const export${simpleClassName}Api = async (params) => {
+  return await request.download({ url: '${baseURL}/export-excel', params })
+}

yudao-module-infra/yudao-module-infra-biz/src/main/resources/codegen/vue3_schema/views/data.ts.vm

@@ -0,0 +1,129 @@
+import type { CrudSchema } from '@/hooks/web/useCrudSchemas'
+#foreach ($column in $columns)
+    #if ($column.listOperationResult && $column.htmlType == "datetime")
+import { dateFormatter } from '@/utils/formatTime'
+    #break
+    #end
+#end
+
+// 表单校验
+export const rules = reactive({
+#foreach ($column in $columns)
+#if (($column.createOperation || $column.updateOperation) && !$column.nullable && !${column.primaryKey})## 创建或者更新操作 && 要求非空 && 非主键
+#set($comment=$column.columnComment)
+  $column.javaField: [required],
+#end
+#end
+})
+
+// CrudSchema https://doc.iocoder.cn/vue3/crud-schema/
+const crudSchemas = reactive<CrudSchema[]>([
+#foreach($column in $columns)
+#if ($column.listOperation || $column.listOperationResult || $column.createOperation || $column.updateOperation)
+#set ($dictType = $column.dictType)
+#set ($javaField = $column.javaField)
+#set ($javaType = $column.javaType)
+  {
+    label: '${column.columnComment}',
+    field: '${column.javaField}',
+## ========= 字典部分 =========
+    #if ("" != $dictType)## 有数据字典
+    dictType: DICT_TYPE.$dictType.toUpperCase(),
+        #if ($javaType == "Integer" || $javaType == "Long" || $javaType == "Byte" || $javaType == "Short")
+    dictClass: 'number',
+        #elseif ($javaType == "String")
+    dictClass: 'string',
+        #elseif ($javaType == "Boolean")
+    dictClass: 'boolean',
+        #end
+    #end
+## ========= Table 表格部分 =========
+    #if (!$column.listOperationResult)
+    isTable: false,
+    #else
+      #if ($column.htmlType == "datetime")
+    formatter: dateFormatter,
+      #end
+    #end
+## ========= Search 表格部分 =========
+    #if ($column.listOperation)
+    isSearch: true,
+        #if ($column.htmlType == "datetime")
+    search: {
+      component: 'DatePicker',
+      componentProps: {
+        valueFormat: 'YYYY-MM-DD HH:mm:ss',
+        type: 'daterange',
+        defaultTime: [new Date('1 00:00:00'), new Date('1 23:59:59')]
+      }
+    },
+        #end
+    #end
+## ========= Form 表单部分 =========
+    #if ((!$column.createOperation && !$column.updateOperation) || $column.primaryKey)
+    isForm: false,
+    #else
+        #if($column.htmlType == "imageUpload")## 图片上传
+    form: {
+      component: 'UploadImg'
+    },
+        #elseif($column.htmlType == "fileUpload")## 文件上传
+    form: {
+      component: 'UploadFile'
+    },
+        #elseif($column.htmlType == "editor")## 文本编辑器
+    form: {
+      component: 'Editor',
+      componentProps: {
+        valueHtml: '',
+        height: 200
+      }
+    },
+        #elseif($column.htmlType == "select")## 下拉框
+    form: {
+      component: 'SelectV2'
+    },
+        #elseif($column.htmlType == "checkbox")## 多选框
+    form: {
+      component: 'Checkbox'
+    },
+        #elseif($column.htmlType == "radio")## 单选框
+    form: {
+      component: 'Radio'
+    },
+        #elseif($column.htmlType == "datetime")## 时间框
+    form: {
+      component: 'DatePicker',
+      componentProps: {
+        type: 'datetime',
+        valueFormat: 'x'
+      }
+    },
+        #elseif($column.htmlType == "textarea")## 文本框
+    form: {
+      component: 'Input',
+      componentProps: {
+        type: 'textarea',
+        rows: 4
+      },
+      colProps: {
+        span: 24
+      }
+    },
+        #elseif(${javaType.toLowerCase()} == "long" || ${javaType.toLowerCase()} == "integer")## 文本框
+    form: {
+      component: 'InputNumber',
+      value: 0
+    },
+        #end
+    #end
+  },
+#end
+#end
+  {
+    label: '操作',
+    field: 'action',
+    isForm: false
+  }
+])
+export const { allSchemas } = useCrudSchemas(crudSchemas)

yudao-module-infra/yudao-module-infra-biz/src/main/resources/codegen/vue3_schema/views/form.vue.vm

@@ -0,0 +1,65 @@
+<template>
+  <Dialog :title="dialogTitle" v-model="dialogVisible">
+    <Form ref="formRef" :schema="allSchemas.formSchema" :rules="rules" v-loading="formLoading" />
+    <template #footer>
+      <el-button @click="submitForm" type="primary" :disabled="formLoading">确 定</el-button>
+      <el-button @click="dialogVisible = false">取 消</el-button>
+    </template>
+  </Dialog>
+</template>
+<script setup lang="ts">
+  import * as ${simpleClassName}Api from '@/api/${table.moduleName}/${classNameVar}'
+import { rules, allSchemas } from './${classNameVar}.data'
+const { t } = useI18n() // 国际化
+const message = useMessage() // 消息弹窗
+
+const dialogVisible = ref(false) // 弹窗的是否展示
+const dialogTitle = ref('') // 弹窗的标题
+const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
+const formType = ref('') // 表单的类型：create - 新增；update - 修改
+const formRef = ref() // 表单 Ref
+
+/** 打开弹窗 */
+const open = async (type: string, id?: number) => {
+  dialogVisible.value = true
+  dialogTitle.value = t('action.' + type)
+  formType.value = type
+  // 修改时，设置数据
+  if (id) {
+    formLoading.value = true
+    try {
+      const data = await ${simpleClassName}Api.get${simpleClassName}(id)
+      formRef.value.setValues(data)
+    } finally {
+      formLoading.value = false
+    }
+  }
+}
+defineExpose({ open }) // 提供 open 方法，用于打开弹窗
+
+/** 提交表单 */
+const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
+const submitForm = async () => {
+  // 校验表单
+  if (!formRef) return
+  const valid = await formRef.value.getElFormRef().validate()
+  if (!valid) return
+  // 提交请求
+  formLoading.value = true
+  try {
+    const data = formRef.value.formModel as ${simpleClassName}Api.${simpleClassName}VO
+    if (formType.value === 'create') {
+      await ${simpleClassName}Api.create${simpleClassName}(data)
+      message.success(t('common.createSuccess'))
+    } else {
+      await ${simpleClassName}Api.update${simpleClassName}(data)
+      message.success(t('common.updateSuccess'))
+    }
+    dialogVisible.value = false
+    // 发送操作成功的事件
+    emit('success')
+  } finally {
+    formLoading.value = false
+  }
+}
+</script>

yudao-module-infra/yudao-module-infra-biz/src/main/resources/codegen/vue3_schema/views/index.vue.vm

@@ -0,0 +1,85 @@
+<template>
+  <!-- 搜索工作栏 -->
+  <ContentWrap>
+    <Search :schema="allSchemas.searchSchema" @search="setSearchParams" @reset="setSearchParams">
+      <!-- 新增等操作按钮 -->
+      <template #actionMore>
+        <el-button
+          type="primary"
+          plain
+          @click="openForm('create')"
+          v-hasPermi="['${permissionPrefix}:create']"
+        >
+          <Icon icon="ep:plus" class="mr-5px" /> 新增
+        </el-button>
+      </template>
+    </Search>
+  </ContentWrap>
+
+  <!-- 列表 -->
+  <ContentWrap>
+    <Table
+      :columns="allSchemas.tableColumns"
+      :data="tableObject.tableList"
+      :loading="tableObject.loading"
+      :pagination="{
+        total: tableObject.total
+      }"
+      v-model:pageSize="tableObject.pageSize"
+      v-model:currentPage="tableObject.currentPage"
+    >
+      <template #action="{ row }">
+        <el-button
+          link
+          type="primary"
+          @click="openForm('update', row.id)"
+          v-hasPermi="['${permissionPrefix}:update']"
+        >
+          编辑
+        </el-button>
+        <el-button
+          link
+          type="danger"
+          v-hasPermi="['${permissionPrefix}:delete']"
+          @click="handleDelete(row.id)"
+        >
+          删除
+        </el-button>
+      </template>
+    </Table>
+  </ContentWrap>
+
+  <!-- 表单弹窗：添加/修改 -->
+  <${simpleClassName}Form ref="formRef" @success="getList" />
+</template>
+<script setup lang="ts" name="${table.className}">
+import { allSchemas } from './${classNameVar}.data'
+import * as ${simpleClassName}Api from '@/api/${table.moduleName}/${classNameVar}'
+import ${simpleClassName}Form from './${simpleClassName}Form.vue'
+
+// tableObject：表格的属性对象，可获得分页大小、条数等属性
+// tableMethods：表格的操作对象，可进行获得分页、删除记录等操作
+// 详细可见：https://doc.iocoder.cn/vue3/crud-schema/
+const { tableObject, tableMethods } = useTable({
+  getListApi: ${simpleClassName}Api.get${simpleClassName}Page, // 分页接口
+  delListApi: ${simpleClassName}Api.delete${simpleClassName} // 删除接口
+})
+// 获得表格的各种操作
+const { getList, setSearchParams } = tableMethods
+
+/** 添加/修改操作 */
+const formRef = ref()
+const openForm = (type: string, id?: number) => {
+  formRef.value.open(type, id)
+}
+
+/** 删除按钮操作 */
+const handleDelete = (id: number) => {
+  tableMethods.delList(id, false)
+}
+
+/** 初始化 **/
+onMounted(() => {
+  getList()
+})
+</script>