Vue3 CRUD Schema 模版，部分提交

2025-11-04 12:18:42 +08:00 · 2023-04-10 22:31:04 +08:00
parent 0e3904b613
commit 9a5d7c8646
6 changed files with 167 additions and 182 deletions
--- a/yudao-module-infra/yudao-module-infra-biz/src/main/java/cn/iocoder/yudao/module/infra/service/codegen/inner/CodegenEngine.java
+++ b/yudao-module-infra/yudao-module-infra-biz/src/main/java/cn/iocoder/yudao/module/infra/service/codegen/inner/CodegenEngine.java
@@ -110,8 +110,8 @@ public class CodegenEngine {
            .put(CodegenFrontTypeEnum.VUE3.getType(), vue3TemplatePath("api/api.ts"),
                    vue3FilePath("api/${table.moduleName}/${classNameVar}/index.ts"))
            // Vue3 Schema 模版
-//            .put(CodegenFrontTypeEnum.VUE3.getType(), vue3TemplatePath("views/data.ts"),
-//                    vue3FilePath("views/${table.moduleName}/${classNameVar}/${classNameVar}.data.ts"))
+            .put(CodegenFrontTypeEnum.VUE3_SCHEMA.getType(), vue3SchemaTemplatePath("views/data.ts"),
+                    vue3FilePath("views/${table.moduleName}/${classNameVar}/${classNameVar}.data.ts"))
            .build();

    @Resource
@@ -264,6 +264,7 @@ public class CodegenEngine {
        return "yudao-ui-${sceneEnum.basePackage}/" + // 顶级目录
                "src/" + path;
    }
+
    private static String vue3TemplatePath(String path) {
        return "codegen/vue3/" + path + ".vm";
    }
@@ -272,4 +273,8 @@ public class CodegenEngine {
        return "yudao-ui-${sceneEnum.basePackage}-vue3/" + // 顶级目录
                "src/" + path;
    }
+
+    private static String vue3SchemaTemplatePath(String path) {
+        return "codegen/vue3_schema/" + path + ".vm";
+    }
 }
--- a/yudao-module-infra/yudao-module-infra-biz/src/main/resources/codegen/vue3_schema/api/api.ts.vm
+++ b/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 })
+}
--- a/yudao-module-infra/yudao-module-infra-biz/src/main/resources/codegen/vue3_schema/views/data.ts.vm
+++ b/yudao-module-infra/yudao-module-infra-biz/src/main/resources/codegen/vue3_schema/views/data.ts.vm
@@ -0,0 +1,115 @@
+import type { CrudSchema } from '@/hooks/web/useCrudSchemas'
+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<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)
+  {
+    title: '${column.columnComment}',
+    field: '${column.javaField}',
+    #if (!$column.listOperationResult)
+    isTable: false,
+    #end
+    #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
+    #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 == "checkbox")## 单选框
+    form: {
+      component: 'Radio'
+    },
+        #end
+    #end
+  #elseif(!("" != $column.dictType))
+  #if (${column.javaType.toLowerCase()} == "date" || ${column.javaType.toLowerCase()} == "localdatetime")
+  form: {
+    component: 'DatePicker',
+    componentProps: {
+      type: 'datetime',
+      valueFormat: 'x'
+    }
+  },
+  #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
+  },
+  #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
+])
+export const { allSchemas } = useCrudSchemas(crudSchemas)
--- a/yudao-module-infra/yudao-module-infra-biz/src/main/resources/codegen/vue3_schema/views/index.vue.vm
+++ b/yudao-module-infra/yudao-module-infra-biz/src/main/resources/codegen/vue3_schema/views/index.vue.vm
--- a/yudao-module-infra/yudao-module-infra-biz/src/main/resources/codegen/vue3_vxe/api/api.ts.vm
+++ b/yudao-module-infra/yudao-module-infra-biz/src/main/resources/codegen/vue3_vxe/api/api.ts.vm
@@ -1,74 +0,0 @@
-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
-}
-
-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) => {
-  return await request.get({ url: '${baseURL}/page', params })
-}
-
-// 查询${table.classComment}详情
-export const get${simpleClassName}Api = async (id: number) => {
-  return await request.get({ url: '${baseURL}/get?id=' + id })
-}
-
-// 新增${table.classComment}
-export const create${simpleClassName}Api = async (data: ${simpleClassName}VO) => {
-  return await request.post({ url: '${baseURL}/create', data })
-}
-
-// 修改${table.classComment}
-export const update${simpleClassName}Api = async (data: ${simpleClassName}VO) => {
-  return await request.put({ url: '${baseURL}/update', data })
-}
-
-// 删除${table.classComment}
-export const delete${simpleClassName}Api = async (id: number) => {
-  return await request.delete({ url: '${baseURL}/delete?id=' + id })
-}
-
-// 导出${table.classComment} Excel
-export const export${simpleClassName}Api = async (params: ${simpleClassName}ExcelReqVO) => {
-  return await request.download({ url: '${baseURL}/export-excel', params })
-}
--- a/yudao-module-infra/yudao-module-infra-biz/src/main/resources/codegen/vue3_vxe/views/data.ts.vm
+++ b/yudao-module-infra/yudao-module-infra-biz/src/main/resources/codegen/vue3_vxe/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)