Vue3 CRUD Schema 模版,部分提交

This commit is contained in:
YunaiV 2023-04-10 22:31:04 +08:00
parent 0e3904b613
commit 9a5d7c8646
6 changed files with 167 additions and 182 deletions

View File

@ -110,8 +110,8 @@ public class CodegenEngine {
.put(CodegenFrontTypeEnum.VUE3.getType(), vue3TemplatePath("api/api.ts"), .put(CodegenFrontTypeEnum.VUE3.getType(), vue3TemplatePath("api/api.ts"),
vue3FilePath("api/${table.moduleName}/${classNameVar}/index.ts")) vue3FilePath("api/${table.moduleName}/${classNameVar}/index.ts"))
// Vue3 Schema 模版 // Vue3 Schema 模版
// .put(CodegenFrontTypeEnum.VUE3.getType(), vue3TemplatePath("views/data.ts"), .put(CodegenFrontTypeEnum.VUE3_SCHEMA.getType(), vue3SchemaTemplatePath("views/data.ts"),
// vue3FilePath("views/${table.moduleName}/${classNameVar}/${classNameVar}.data.ts")) vue3FilePath("views/${table.moduleName}/${classNameVar}/${classNameVar}.data.ts"))
.build(); .build();
@Resource @Resource
@ -264,6 +264,7 @@ public class CodegenEngine {
return "yudao-ui-${sceneEnum.basePackage}/" + // 顶级目录 return "yudao-ui-${sceneEnum.basePackage}/" + // 顶级目录
"src/" + path; "src/" + path;
} }
private static String vue3TemplatePath(String path) { private static String vue3TemplatePath(String path) {
return "codegen/vue3/" + path + ".vm"; return "codegen/vue3/" + path + ".vm";
} }
@ -272,4 +273,8 @@ public class CodegenEngine {
return "yudao-ui-${sceneEnum.basePackage}-vue3/" + // 顶级目录 return "yudao-ui-${sceneEnum.basePackage}-vue3/" + // 顶级目录
"src/" + path; "src/" + path;
} }
private static String vue3SchemaTemplatePath(String path) {
return "codegen/vue3_schema/" + path + ".vm";
}
} }

View File

@ -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 })
}

View File

@ -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)

View File

@ -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 })
}

View File

@ -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)