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 105 // Vue3
106 106 .put(CodegenFrontTypeEnum.VUE3.getType(), vue3TemplatePath("views/index.vue"),
107 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 110 // .put(CodegenFrontTypeEnum.VUE3.getType(), vue3TemplatePath("views/data.ts"),
109 111 // vue3FilePath("views/${table.moduleName}/${classNameVar}/${classNameVar}.data.ts"))
110 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 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 105 #end
111 106 #end
112 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 8 :inline="true"
9 9 label-width="68px"
10 10 >
11   - #set ($dictMethods = []) ## 使用到的 dict 字典方法
  11 + #set ($dictMethods = [])## 使用到的 dict 字典方法
12 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 28 <el-form-item label="${comment}" prop="${javaField}">
21 29 <el-input
22 30 v-model="queryParams.${javaField}"
... ... @@ -26,35 +34,31 @@
26 34 class="!w-240px"
27 35 />
28 36 </el-form-item>
29   - #elseif ($column.htmlType == "select" || $column.htmlType == "radio")
  37 + #elseif ($column.htmlType == "select" || $column.htmlType == "radio")
30 38 <el-form-item label="${comment}" prop="${javaField}">
  39 + #if ($javaField.length() + $comment.length() > 8)
31 40 <el-select
32 41 v-model="queryParams.${javaField}"
33 42 placeholder="请选择${comment}"
34 43 clearable
35 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 53 <el-option
50 54 v-for="dict in $dictMethod(DICT_TYPE.$dictType.toUpperCase())"
51 55 :key="dict.value"
52 56 :label="dict.label"
53 57 :value="dict.value"
54 58 />
55   - #else## 未设置 dictType 数据字典的情况
  59 + #else## 未设置 dictType 数据字典的情况
56 60 <el-option label="请选择字典生成" value="" />
57   - #end
  61 + #end
58 62 </el-select>
59 63 </el-form-item>
60 64 #elseif($column.htmlType == "datetime")
... ... @@ -88,7 +92,15 @@
88 92 <el-form-item>
89 93 <el-button @click="handleQuery"><Icon icon="ep:search" class="mr-5px" /> 搜索</el-button>
90 94 <el-button @click="resetQuery"><Icon icon="ep:refresh" class="mr-5px" /> 重置</el-button>
  95 + #if ($permissionPrefix <= 14)
91 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 104 <Icon icon="ep:plus" class="mr-5px" /> 新增
93 105 </el-button>
94 106 <el-button
... ... @@ -179,7 +191,7 @@ const list = ref([]) // 列表的数据
179 191 const queryParams = reactive({
180 192 pageNo: 1,
181 193 pageSize: 10,
182   - #set ($listOperationLastIndex = -1) ## 求最后一个需要 , 的地方
  194 + #set ($listOperationLastIndex = -1)## 求最后一个需要 , 的地方
183 195 #foreach ($column in $columns)
184 196 #if ($column.listOperation)
185 197 #set ($listOperationLastIndex = $foreach.index)
... ... @@ -249,7 +261,7 @@ const handleExport = async () =&gt; {
249 261 await message.exportConfirm()
250 262 // 发起导出
251 263 exportLoading.value = true
252   - const data = await ${simpleClassName}Api.export${simpleClassName}Api(queryParams)
  264 + const data = await ${simpleClassName}Api.export${simpleClassName}(queryParams)
253 265 download.excel(data, '${table.classComment}.xls')
254 266 } catch {
255 267 } finally {
... ...