BJ_ZTEITS-Developers / parking-cloud-yudao

Commit d6227f7767a508fb1d8ec010410f34c4668793f6

Authored by YunaiV
Committed by &wxr
1 parent 975b978e

代码生成：完善 Vue3 标准模版的列表，在 80 长度下的排版问题

Inline Side-by-side
Showing 3 changed files with 151 additions and 186 deletions
yudao-module-infra/yudao-module-infra-biz/src/main/java/cn/iocoder/yudao/module/infra/service/codegen/inner/CodegenEngine.java
  View file @d6227f7
@@ -105,6 +105,8 @@ public class CodegenEngine { @@ -105,6 +105,8 @@ public class CodegenEngine {
105 // Vue3 105 // Vue3
106 .put(CodegenFrontTypeEnum.VUE3.getType(), vue3TemplatePath("views/index.vue"), 106 .put(CodegenFrontTypeEnum.VUE3.getType(), vue3TemplatePath("views/index.vue"),
107 vue3FilePath("views/${table.moduleName}/${classNameVar}/index.vue")) 107 vue3FilePath("views/${table.moduleName}/${classNameVar}/index.vue"))
  108 + .put(CodegenFrontTypeEnum.VUE3.getType(), vue3TemplatePath("views/form.vue"),
  109 + vue3FilePath("views/${table.moduleName}/${classNameVar}/form.vue"))
108 // .put(CodegenFrontTypeEnum.VUE3.getType(), vue3TemplatePath("views/data.ts"), 110 // .put(CodegenFrontTypeEnum.VUE3.getType(), vue3TemplatePath("views/data.ts"),
109 // vue3FilePath("views/${table.moduleName}/${classNameVar}/${classNameVar}.data.ts")) 111 // vue3FilePath("views/${table.moduleName}/${classNameVar}/${classNameVar}.data.ts"))
110 .put(CodegenFrontTypeEnum.VUE3.getType(), vue3TemplatePath("api/api.ts"), 112 .put(CodegenFrontTypeEnum.VUE3.getType(), vue3TemplatePath("api/api.ts"),
yudao-module-infra/yudao-module-infra-biz/src/main/resources/codegen/vue3/views/form.vue.vm
  View file @d6227f7
1 -<!-- 对话框(添加 / 修改) -->  
2 -<el-dialog :title="title" :visible.sync="open" width="500px" v-dialogDrag append-to-body>  
3 - <el-form ref="form" :model="form" :rules="rules" label-width="80px">  
4 - #foreach($column in $columns)  
5 - #if ($column.createOperation || $column.updateOperation)  
6 - #set ($dictType = $column.dictType)  
7 - #set ($javaField = $column.javaField)  
8 - #set ($AttrName = $column.javaField.substring(0,1).toUpperCase() + ${column.javaField.substring(1)})  
9 - #set ($comment = $column.columnComment)  
10 - #if ($column.htmlType == "input")  
11 - #if (!$column.primaryKey)## 忽略主键，不用在表单里  
12 - <el-form-item label="${comment}" prop="${javaField}">  
13 - <el-input v-model="form.${javaField}" placeholder="请输入${comment}" />  
14 - </el-form-item>  
15 - #end  
16 - #elseif($column.htmlType == "imageUpload")## 图片上传  
17 - #set ($hasImageUploadColumn = true)  
18 - <el-form-item label="${comment}">  
19 - <imageUpload v-model="form.${javaField}"/>  
20 - </el-form-item>  
21 - #elseif($column.htmlType == "fileUpload")## 文件上传  
22 - #set ($hasFileUploadColumn = true)  
23 - <el-form-item label="${comment}">  
24 - <fileUpload v-model="form.${javaField}"/>  
25 - </el-form-item>  
26 - #elseif($column.htmlType == "editor")## 文本编辑器  
27 - #set ($hasEditorColumn = true)  
28 - <el-form-item label="${comment}">  
29 - <editor v-model="form.${javaField}" :min-height="192"/>  
30 - </el-form-item>  
31 - #elseif($column.htmlType == "select")## 下拉框  
32 - <el-form-item label="${comment}" prop="${javaField}">  
33 - <el-select v-model="form.${javaField}" placeholder="请选择${comment}">  
34 - #if ("" != $dictType)## 有数据字典  
35 - <el-option v-for="dict in this.getDictDatas(DICT_TYPE.$dictType.toUpperCase())"  
36 - :key="dict.value" :label="dict.label" #if ($column.javaType == "Integer" || $column.javaType == "Long"):value="parseInt(dict.value)"#else:value="dict.value"#end />  
37 - #else##没数据字典  
38 - <el-option label="请选择字典生成" value="" />  
39 - #end  
40 - </el-select>  
41 - </el-form-item>  
42 - #elseif($column.htmlType == "checkbox")## 多选框  
43 - <el-form-item label="${comment}" prop="${javaField}">  
44 - <el-checkbox-group v-model="form.${javaField}">  
45 - #if ("" != $dictType)## 有数据字典  
46 - <el-checkbox v-for="dict in this.getDictDatas(DICT_TYPE.$dictType.toUpperCase())"  
47 - :key="dict.value" #if($column.javaType == "Integer" || $column.javaType == "Long"):label="parseInt(dict.value)"#else:label="dict.value"#end>{{dict.label}}</el-checkbox>  
48 - #else##没数据字典  
49 - <el-checkbox>请选择字典生成</el-checkbox>  
50 - #end  
51 - </el-checkbox-group>  
52 - </el-form-item>  
53 - #elseif($column.htmlType == "radio")## 单选框  
54 - <el-form-item label="${comment}" prop="${javaField}">  
55 - <el-radio-group v-model="form.${javaField}">  
56 - #if ("" != $dictType)## 有数据字典  
57 - <el-radio v-for="dict in this.getDictDatas(DICT_TYPE.$dictType.toUpperCase())"  
58 - :key="dict.value" #if($column.javaType == "Integer" || $column.javaType == "Long"):label="parseInt(dict.value)"#else:label="dict.value"#end>{{dict.label}}</el-radio>  
59 - #else##没数据字典  
60 - <el-radio label="1">请选择字典生成</el-radio>  
61 - #end  
62 - </el-radio-group>  
63 - </el-form-item>  
64 - #elseif($column.htmlType == "datetime")## 时间框  
65 - <el-form-item label="${comment}" prop="${javaField}">  
66 - <el-date-picker clearable v-model="form.${javaField}" type="date" value-format="timestamp" placeholder="选择${comment}" />  
67 - </el-form-item>  
68 - #elseif($column.htmlType == "textarea")## 文本框  
69 - <el-form-item label="${comment}" prop="${javaField}">  
70 - <el-input v-model="form.${javaField}" type="textarea" placeholder="请输入内容" />  
71 - </el-form-item>  
72 - #end  
73 - #end  
74 - #end  
75 - </el-form>  
76 - <div slot="footer" class="dialog-footer">  
77 - <el-button type="primary" @click="submitForm">确 定</el-button>  
78 - <el-button @click="cancel">取 消</el-button>  
79 - </div>  
80 -</el-dialog>  
81 -  
82 -  
83 -// 弹出层标题  
84 -title: "",  
85 -// 是否显示弹出层  
86 -open: false,  
87 -  
88 -// 表单参数  
89 -form: {},  
90 -// 表单校验  
91 -rules: {  
92 -#foreach ($column in $columns)  
93 - #if (($column.createOperation || $column.updateOperation) && !$column.nullable && !${column.primaryKey})## 创建或者更新操作 && 要求非空 && 非主键  
94 - #set($comment=$column.columnComment)  
95 - $column.javaField: [{ required: true, message: "${comment}不能为空", trigger: #if($column.htmlType == "select")"change"#else"blur"#end }],  
96 - #end  
97 -#end  
98 -}  
99 -  
100 -  
101 -/** 表单重置 */  
102 -reset() {  
103 -this.form = {  
104 -#foreach ($column in $columns) 1 +<template>
  2 + <Dialog :title="modelTitle" v-model="modelVisible">
  3 + <el-form
  4 + ref="formRef"
  5 + :model="formData"
  6 + :rules="formRules"
  7 + label-width="100px"
  8 + v-loading="formLoading"
  9 + >
  10 +#foreach($column in $columns)
105 #if ($column.createOperation || $column.updateOperation) 11 #if ($column.createOperation || $column.updateOperation)
106 - #if ($column.htmlType == "checkbox")  
107 - $column.javaField: [],  
108 - #else  
109 - $column.javaField: undefined, 12 + #set ($dictType = $column.dictType)
  13 + #set ($javaField = $column.javaField)
  14 + #set ($AttrName = $column.javaField.substring(0,1).toUpperCase() + ${column.javaField.substring(1)})
  15 + #set ($comment = $column.columnComment)
  16 + #set ($dictMethod = "getDictOptions") ## 计算使用哪个 dict 字典方法
  17 + #if ($javaType == "Integer" || $javaType == "Long" || $javaType == "Byte" || $javaType == "Short")
  18 + #set ($dictMethod = "getIntDictOptions")
  19 + #elseif ($javaType == "String")
  20 + #set ($dictMethod = "getStrDictOptions")
  21 + #elseif ($javaType == "Boolean")
  22 + #set ($dictMethod = "getBoolDictOptions")
  23 + #end
  24 + #if ($column.htmlType == "input" && !$column.primaryKey) ## 忽略主键，不用在表单里
  25 + <el-form-item label="${comment}" prop="${javaField}">
  26 + <el-input v-model="form.${javaField}" placeholder="请输入${comment}" />
  27 + </el-form-item>
  28 + #elseif($column.htmlType == "imageUpload")## 图片上传 TODO 芋艿：待测试
  29 + #set ($hasImageUploadColumn = true)
  30 + <el-form-item label="${comment}">
  31 + <imageUpload v-model="form.${javaField}"/>
  32 + </el-form-item>
  33 + #elseif($column.htmlType == "fileUpload")## 文件上传 TODO 芋艿：待测试
  34 + #set ($hasFileUploadColumn = true)
  35 + <el-form-item label="${comment}">
  36 + <fileUpload v-model="form.${javaField}"/>
  37 + </el-form-item>
  38 + #elseif($column.htmlType == "editor")## 文本编辑器 TODO 芋艿：待测试
  39 + #set ($hasEditorColumn = true)
  40 + <el-form-item label="${comment}">
  41 + <editor v-model="form.${javaField}" :min-height="192"/>
  42 + </el-form-item>
  43 + #elseif($column.htmlType == "select")## 下拉框
  44 + <el-form-item label="${comment}" prop="${javaField}">
  45 + <el-select v-model="form.${javaField}" placeholder="请选择${comment}">
  46 + #if ("" != $dictType)## 有数据字典
  47 + #if (!$dictMethods.contains($dictMethod)) ## 如果不存在，则添加到 dictMethods 数组中，后续好 import
  48 + #( $dictMethods.add($dictMethod) )
  49 + #end
  50 + <el-option
  51 + v-for="dict in $dictMethod(DICT_TYPE.$dictType.toUpperCase())"
  52 + :key="dict.value"
  53 + :label="dict.label"
  54 + :value="dict.value"
  55 + />
  56 + #else##没数据字典
  57 + <el-option label="请选择字典生成" value="" />
  58 + #end
  59 + </el-select>
  60 + </el-form-item>
  61 + #elseif($column.htmlType == "checkbox")## 多选框 TODO 芋艿：待测试
  62 + <el-form-item label="${comment}" prop="${javaField}">
  63 + <el-checkbox-group v-model="form.${javaField}">
  64 + #if ("" != $dictType)## 有数据字典
  65 + #if (!$dictMethods.contains($dictMethod)) ## 如果不存在，则添加到 dictMethods 数组中，后续好 import
  66 + #( $dictMethods.add($dictMethod) )
  67 + #end
  68 + <el-checkbox
  69 + v-for="dict in $dictMethod(DICT_TYPE.$dictType.toUpperCase())"
  70 + key="dict.value"
  71 + :label="dict.value">
  72 + {{dict.label}}
  73 + </el-checkbox>
  74 + #else##没数据字典
  75 + <el-checkbox>请选择字典生成</el-checkbox>
  76 + #end
  77 + </el-checkbox-group>
  78 + </el-form-item>
  79 + #elseif($column.htmlType == "radio")## 单选框
  80 + <el-form-item label="${comment}" prop="${javaField}">
  81 + <el-radio-group v-model="form.${javaField}">
  82 + #if ("" != $dictType)## 有数据字典
  83 + #if (!$dictMethods.contains($dictMethod)) ## 如果不存在，则添加到 dictMethods 数组中，后续好 import
  84 + #( $dictMethods.add($dictMethod) )
  85 + #end
  86 + <el-radio
  87 + v-for="dict in $dictMethod(DICT_TYPE.$dictType.toUpperCase())"
  88 + :key="dict.value"
  89 + :label="dict.value">
  90 + {{dict.label}}
  91 + </el-radio>
  92 + #else##没数据字典
  93 + <el-radio label="1">请选择字典生成</el-radio>
  94 + #end
  95 + </el-radio-group>
  96 + </el-form-item>
  97 + #elseif($column.htmlType == "datetime")## 时间框 TODO 芋艿：待测试
  98 + <el-form-item label="${comment}" prop="${javaField}">
  99 + <el-date-picker clearable v-model="form.${javaField}" type="date" value-format="timestamp" placeholder="选择${comment}" />
  100 + </el-form-item>
  101 + #elseif($column.htmlType == "textarea")## 文本框 TODO 芋艿：待测试
  102 + <el-form-item label="${comment}" prop="${javaField}">
  103 + <el-input v-model="form.${javaField}" type="textarea" placeholder="请输入内容" />
  104 + </el-form-item>
110 #end 105 #end
111 #end 106 #end
112 #end 107 #end
113 -};  
114 -this.resetForm("form");  
115 -},  
116 -  
117 -/** 新增按钮操作 */  
118 -handleAdd() {  
119 -this.reset();  
120 -this.open = true;  
121 -this.title = "添加${table.classComment}";  
122 -},  
123 -/** 修改按钮操作 */  
124 -handleUpdate(row) {  
125 -this.reset();  
126 -const ${primaryColumn.javaField} = row.${primaryColumn.javaField};  
127 -get${simpleClassName}(${primaryColumn.javaField}).then(response => {  
128 -this.form = response.data;  
129 -#foreach ($column in $columns)  
130 - #if($column.htmlType == "checkbox")## checkbox 特殊处理  
131 - this.form.$column.javaField = this.form.${column.javaField}.split(",");  
132 - #end  
133 -#end  
134 -this.open = true;  
135 -this.title = "修改${table.classComment}";  
136 -});  
137 -},  
138 -/** 提交按钮 */  
139 -submitForm() {  
140 -this.#[[$]]#refs["form"].validate(valid => {  
141 -if (!valid) {  
142 -return;  
143 -}  
144 -#foreach ($column in $columns)  
145 -#if($column.htmlType == "checkbox")  
146 -this.form.$column.javaField = this.form.${column.javaField}.join(",");  
147 -#end  
148 -#end  
149 -// 修改的提交  
150 -if (this.form.${primaryColumn.javaField} != null) {  
151 -update${simpleClassName}(this.form).then(response => {  
152 -this.#[[$modal]]#.msgSuccess("修改成功");  
153 -this.open = false;  
154 -this.getList();  
155 -});  
156 -return;  
157 -}  
158 -// 添加的提交  
159 -create${simpleClassName}(this.form).then(response => {  
160 -this.#[[$modal]]#.msgSuccess("新增成功");  
161 -this.open = false;  
162 -this.getList();  
163 -});  
164 -});  
165 -}, 108 + </el-form>
  109 + <template #footer>
  110 + <div class="dialog-footer">
  111 + <el-button @click="submitForm" type="primary" :disabled="formLoading">确 定</el-button>
  112 + <el-button @click="modelVisible = false">取 消</el-button>
  113 + </div>
  114 + </template>
  115 + </Dialog>
  116 +</template>
yudao-module-infra/yudao-module-infra-biz/src/main/resources/codegen/vue3/views/index.vue.vm
  View file @d6227f7
@@ -8,15 +8,23 @@ @@ -8,15 +8,23 @@
8 :inline="true" 8 :inline="true"
9 label-width="68px" 9 label-width="68px"
10 > 10 >
11 - #set ($dictMethods = []) ## 使用到的 dict 字典方法 11 + #set ($dictMethods = [])## 使用到的 dict 字典方法
12 #foreach($column in $columns) 12 #foreach($column in $columns)
13 - #if ($column.listOperation)  
14 - #set ($dictType = $column.dictType)  
15 - #set ($javaField = $column.javaField)  
16 - #set ($javaType = $column.javaType)  
17 - #set ($AttrName = $column.javaField.substring(0,1).toUpperCase() + ${column.javaField.substring(1)})  
18 - #set ($comment = $column.columnComment)  
19 - #if ($column.htmlType == "input") 13 + #if ($column.listOperation)
  14 + #set ($dictType = $column.dictType)
  15 + #set ($javaField = $column.javaField)
  16 + #set ($javaType = $column.javaType)
  17 + #set ($AttrName = $column.javaField.substring(0,1).toUpperCase() + ${column.javaField.substring(1)})
  18 + #set ($comment = $column.columnComment)
  19 + #set ($dictMethod = "getDictOptions")## 计算使用哪个 dict 字典方法
  20 + #if ($javaType == "Integer" || $javaType == "Long" || $javaType == "Byte" || $javaType == "Short")
  21 + #set ($dictMethod = "getIntDictOptions")
  22 + #elseif ($javaType == "String")
  23 + #set ($dictMethod = "getStrDictOptions")
  24 + #elseif ($javaType == "Boolean")
  25 + #set ($dictMethod = "getBoolDictOptions")
  26 + #end
  27 + #if ($column.htmlType == "input")
20 <el-form-item label="${comment}" prop="${javaField}"> 28 <el-form-item label="${comment}" prop="${javaField}">
21 <el-input 29 <el-input
22 v-model="queryParams.${javaField}" 30 v-model="queryParams.${javaField}"
@@ -26,35 +34,31 @@ @@ -26,35 +34,31 @@
26 class="!w-240px" 34 class="!w-240px"
27 /> 35 />
28 </el-form-item> 36 </el-form-item>
29 - #elseif ($column.htmlType == "select" || $column.htmlType == "radio") 37 + #elseif ($column.htmlType == "select" || $column.htmlType == "radio")
30 <el-form-item label="${comment}" prop="${javaField}"> 38 <el-form-item label="${comment}" prop="${javaField}">
  39 + #if ($javaField.length() + $comment.length() > 8)
31 <el-select 40 <el-select
32 v-model="queryParams.${javaField}" 41 v-model="queryParams.${javaField}"
33 placeholder="请选择${comment}" 42 placeholder="请选择${comment}"
34 clearable 43 clearable
35 class="!w-240px" 44 class="!w-240px"
36 > 45 >
37 - #if ("" != $dictType)## 设置了 dictType 数据字典的情况  
38 - #set ($dictMethod = "getDictOptions") ## 计算使用哪个 dict 字典方法  
39 - #if ($javaType == "Integer" || $javaType == "Long" || $javaType == "Byte" || $javaType == "Short")  
40 - #set ($dictMethod = "getIntDictOptions")  
41 - #elseif ($javaType == "String")  
42 - #set ($dictMethod = "getStrDictOptions")  
43 - #elseif ($javaType == "Boolean")  
44 - #set ($dictMethod = "getBoolDictOptions")  
45 - #end  
46 - #if (!$dictMethods.contains($dictMethod)) ## 如果不存在，则添加到 dictMethods 数组中，后续好 import  
47 - #( $dictMethods.add($dictMethod) )  
48 - #end 46 + #else
  47 + <el-select v-model="queryParams.${javaField}" placeholder="请选择${comment}" clearable class="!w-240px">
  48 + #end
  49 + #if ("" != $dictType)## 设置了 dictType 数据字典的情况
  50 + #if (!$dictMethods.contains($dictMethod))## 如果不存在，则添加到 dictMethods 数组中，后续好 import
  51 + #set($ignore = $dictMethods.add($dictMethod) )
  52 + #end
49 <el-option 53 <el-option
50 v-for="dict in $dictMethod(DICT_TYPE.$dictType.toUpperCase())" 54 v-for="dict in $dictMethod(DICT_TYPE.$dictType.toUpperCase())"
51 :key="dict.value" 55 :key="dict.value"
52 :label="dict.label" 56 :label="dict.label"
53 :value="dict.value" 57 :value="dict.value"
54 /> 58 />
55 - #else## 未设置 dictType 数据字典的情况 59 + #else## 未设置 dictType 数据字典的情况
56 <el-option label="请选择字典生成" value="" /> 60 <el-option label="请选择字典生成" value="" />
57 - #end 61 + #end
58 </el-select> 62 </el-select>
59 </el-form-item> 63 </el-form-item>
60 #elseif($column.htmlType == "datetime") 64 #elseif($column.htmlType == "datetime")
@@ -88,7 +92,15 @@ @@ -88,7 +92,15 @@
88 <el-form-item> 92 <el-form-item>
89 <el-button @click="handleQuery"><Icon icon="ep:search" class="mr-5px" /> 搜索</el-button> 93 <el-button @click="handleQuery"><Icon icon="ep:search" class="mr-5px" /> 搜索</el-button>
90 <el-button @click="resetQuery"><Icon icon="ep:refresh" class="mr-5px" /> 重置</el-button> 94 <el-button @click="resetQuery"><Icon icon="ep:refresh" class="mr-5px" /> 重置</el-button>
  95 + #if ($permissionPrefix <= 14)
91 <el-button type="primary" @click="openModal('create')" v-hasPermi="['${permissionPrefix}:create']"> 96 <el-button type="primary" @click="openModal('create')" v-hasPermi="['${permissionPrefix}:create']">
  97 + #else
  98 + <el-button
  99 + type="primary"
  100 + @click="openModal('create')"
  101 + v-hasPermi="['${permissionPrefix}:create']"
  102 + >
  103 + #end
92 <Icon icon="ep:plus" class="mr-5px" /> 新增 104 <Icon icon="ep:plus" class="mr-5px" /> 新增
93 </el-button> 105 </el-button>
94 <el-button 106 <el-button
@@ -179,7 +191,7 @@ const list = ref([]) // 列表的数据 @@ -179,7 +191,7 @@ const list = ref([]) // 列表的数据
179 const queryParams = reactive({ 191 const queryParams = reactive({
180 pageNo: 1, 192 pageNo: 1,
181 pageSize: 10, 193 pageSize: 10,
182 - #set ($listOperationLastIndex = -1) ## 求最后一个需要 , 的地方 194 + #set ($listOperationLastIndex = -1)## 求最后一个需要 , 的地方
183 #foreach ($column in $columns) 195 #foreach ($column in $columns)
184 #if ($column.listOperation) 196 #if ($column.listOperation)
185 #set ($listOperationLastIndex = $foreach.index) 197 #set ($listOperationLastIndex = $foreach.index)
@@ -249,7 +261,7 @@ const handleExport = async () =&gt; { @@ -249,7 +261,7 @@ const handleExport = async () =&gt; {
249 await message.exportConfirm() 261 await message.exportConfirm()
250 // 发起导出 262 // 发起导出
251 exportLoading.value = true 263 exportLoading.value = true
252 - const data = await ${simpleClassName}Api.export${simpleClassName}Api(queryParams) 264 + const data = await ${simpleClassName}Api.export${simpleClassName}(queryParams)
253 download.excel(data, '${table.classComment}.xls') 265 download.excel(data, '${table.classComment}.xls')
254 } catch { 266 } catch {
255 } finally { 267 } finally {