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

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

@@ -105,6 +105,8 @@ public class CodegenEngine {
             // 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}/form.vue"))
 //            .put(CodegenFrontTypeEnum.VUE3.getType(), vue3TemplatePath("views/data.ts"),
 //                    vue3FilePath("views/${table.moduleName}/${classNameVar}/${classNameVar}.data.ts"))
             .put(CodegenFrontTypeEnum.VUE3.getType(), vue3TemplatePath("api/api.ts"),

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

@@ -1,165 +1,116 @@
-<!-- 对话框(添加 / 修改) -->
-<el-dialog :title="title" :visible.sync="open" width="500px" v-dialogDrag append-to-body>
-  <el-form ref="form" :model="form" :rules="rules" label-width="80px">
-      #foreach($column in $columns)
-          #if ($column.createOperation || $column.updateOperation)
-              #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.htmlType == "input")
-                  #if (!$column.primaryKey)## 忽略主键，不用在表单里
-                    <el-form-item label="${comment}" prop="${javaField}">
-                      <el-input v-model="form.${javaField}" placeholder="请输入${comment}" />
-                    </el-form-item>
-                  #end
-              #elseif($column.htmlType == "imageUpload")## 图片上传
-                  #set ($hasImageUploadColumn = true)
-                <el-form-item label="${comment}">
-                  <imageUpload v-model="form.${javaField}"/>
-                </el-form-item>
-              #elseif($column.htmlType == "fileUpload")## 文件上传
-                  #set ($hasFileUploadColumn = true)
-                <el-form-item label="${comment}">
-                  <fileUpload v-model="form.${javaField}"/>
-                </el-form-item>
-              #elseif($column.htmlType == "editor")## 文本编辑器
-                  #set ($hasEditorColumn = true)
-                <el-form-item label="${comment}">
-                  <editor v-model="form.${javaField}" :min-height="192"/>
-                </el-form-item>
-              #elseif($column.htmlType == "select")## 下拉框
-                <el-form-item label="${comment}" prop="${javaField}">
-                  <el-select v-model="form.${javaField}" placeholder="请选择${comment}">
-                      #if ("" != $dictType)## 有数据字典
-                        <el-option v-for="dict in this.getDictDatas(DICT_TYPE.$dictType.toUpperCase())"
-                                   :key="dict.value" :label="dict.label" #if ($column.javaType == "Integer" || $column.javaType == "Long"):value="parseInt(dict.value)"#else:value="dict.value"#end />
-                      #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="form.${javaField}">
-                      #if ("" != $dictType)## 有数据字典
-                        <el-checkbox v-for="dict in this.getDictDatas(DICT_TYPE.$dictType.toUpperCase())"
-                                     :key="dict.value" #if($column.javaType == "Integer" || $column.javaType == "Long"):label="parseInt(dict.value)"#else:label="dict.value"#end>{{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="form.${javaField}">
-                      #if ("" != $dictType)## 有数据字典
-                        <el-radio v-for="dict in this.getDictDatas(DICT_TYPE.$dictType.toUpperCase())"
-                                  :key="dict.value" #if($column.javaType == "Integer" || $column.javaType == "Long"):label="parseInt(dict.value)"#else:label="dict.value"#end>{{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 clearable v-model="form.${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="form.${javaField}" type="textarea" placeholder="请输入内容" />
-                </el-form-item>
-              #end
-          #end
-      #end
-  </el-form>
-  <div slot="footer" class="dialog-footer">
-    <el-button type="primary" @click="submitForm">确 定</el-button>
-    <el-button @click="cancel">取 消</el-button>
-  </div>
-</el-dialog>
-
-
-// 弹出层标题
-title: "",
-// 是否显示弹出层
-open: false,
-
-// 表单参数
-form: {},
-// 表单校验
-rules: {
-#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 }],
-    #end
-#end
-}
-
-
-/** 表单重置 */
-reset() {
-this.form = {
-#foreach ($column in $columns)
+<template>
+  <Dialog :title="modelTitle" v-model="modelVisible">
+    <el-form
+      ref="formRef"
+      :model="formData"
+      :rules="formRules"
+      label-width="100px"
+      v-loading="formLoading"
+    >
+#foreach($column in $columns)
     #if ($column.createOperation || $column.updateOperation)
-        #if ($column.htmlType == "checkbox")
-            $column.javaField: [],
-        #else
-            $column.javaField: undefined,
+        #set ($dictType = $column.dictType)
+        #set ($javaField = $column.javaField)
+        #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="form.${javaField}" placeholder="请输入${comment}" />
+      </el-form-item>
+        #elseif($column.htmlType == "imageUpload")## 图片上传 TODO 芋艿：待测试
+            #set ($hasImageUploadColumn = true)
+          <el-form-item label="${comment}">
+            <imageUpload v-model="form.${javaField}"/>
+          </el-form-item>
+        #elseif($column.htmlType == "fileUpload")## 文件上传 TODO 芋艿：待测试
+            #set ($hasFileUploadColumn = true)
+          <el-form-item label="${comment}">
+            <fileUpload v-model="form.${javaField}"/>
+          </el-form-item>
+        #elseif($column.htmlType == "editor")## 文本编辑器 TODO 芋艿：待测试
+            #set ($hasEditorColumn = true)
+          <el-form-item label="${comment}">
+            <editor v-model="form.${javaField}" :min-height="192"/>
+          </el-form-item>
+        #elseif($column.htmlType == "select")## 下拉框
+          <el-form-item label="${comment}" prop="${javaField}">
+            <el-select v-model="form.${javaField}" placeholder="请选择${comment}">
+                #if ("" != $dictType)## 有数据字典
+                    #if (!$dictMethods.contains($dictMethod)) ## 如果不存在，则添加到 dictMethods 数组中，后续好 import
+                      #( $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")## 多选框 TODO 芋艿：待测试
+          <el-form-item label="${comment}" prop="${javaField}">
+            <el-checkbox-group v-model="form.${javaField}">
+                #if ("" != $dictType)## 有数据字典
+                    #if (!$dictMethods.contains($dictMethod)) ## 如果不存在，则添加到 dictMethods 数组中，后续好 import
+                      #( $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="form.${javaField}">
+                #if ("" != $dictType)## 有数据字典
+                    #if (!$dictMethods.contains($dictMethod)) ## 如果不存在，则添加到 dictMethods 数组中，后续好 import
+                      #( $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")## 时间框 TODO 芋艿：待测试
+          <el-form-item label="${comment}" prop="${javaField}">
+            <el-date-picker clearable v-model="form.${javaField}" type="date" value-format="timestamp" placeholder="选择${comment}" />
+          </el-form-item>
+        #elseif($column.htmlType == "textarea")## 文本框 TODO 芋艿：待测试
+          <el-form-item label="${comment}" prop="${javaField}">
+            <el-input v-model="form.${javaField}" type="textarea" placeholder="请输入内容" />
+          </el-form-item>
         #end
     #end
 #end
-};
-this.resetForm("form");
-},
-
-/** 新增按钮操作 */
-handleAdd() {
-this.reset();
-this.open = true;
-this.title = "添加${table.classComment}";
-},
-/** 修改按钮操作 */
-handleUpdate(row) {
-this.reset();
-const ${primaryColumn.javaField} = row.${primaryColumn.javaField};
-get${simpleClassName}(${primaryColumn.javaField}).then(response => {
-this.form = response.data;
-#foreach ($column in $columns)
-    #if($column.htmlType == "checkbox")## checkbox 特殊处理
-    this.form.$column.javaField = this.form.${column.javaField}.split(",");
-    #end
-#end
-this.open = true;
-this.title = "修改${table.classComment}";
-});
-},
-/** 提交按钮 */
-submitForm() {
-this.#[[$]]#refs["form"].validate(valid => {
-if (!valid) {
-return;
-}
-#foreach ($column in $columns)
-#if($column.htmlType == "checkbox")
-this.form.$column.javaField = this.form.${column.javaField}.join(",");
-#end
-#end
-// 修改的提交
-if (this.form.${primaryColumn.javaField} != null) {
-update${simpleClassName}(this.form).then(response => {
-this.#[[$modal]]#.msgSuccess("修改成功");
-this.open = false;
-this.getList();
-});
-return;
-}
-// 添加的提交
-create${simpleClassName}(this.form).then(response => {
-this.#[[$modal]]#.msgSuccess("新增成功");
-this.open = false;
-this.getList();
-});
-});
-},
+    </el-form>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button @click="submitForm" type="primary" :disabled="formLoading">确 定</el-button>
+        <el-button @click="modelVisible = false">取 消</el-button>
+      </div>
+    </template>
+  </Dialog>
+</template>

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

@@ -8,15 +8,23 @@
       :inline="true"
       label-width="68px"
     >
-    #set ($dictMethods = []) ## 使用到的 dict 字典方法
+    #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)
-        #if ($column.htmlType == "input")
+        #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}"
@@ -26,35 +34,31 @@
           class="!w-240px"
         />
       </el-form-item>
-    #elseif ($column.htmlType == "select" || $column.htmlType == "radio")
+            #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"
         >
-          #if ("" != $dictType)## 设置了 dictType 数据字典的情况
-              #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 (!$dictMethods.contains($dictMethod)) ## 如果不存在，则添加到 dictMethods 数组中，后续好 import
-                  #( $dictMethods.add($dictMethod) )
-              #end
+                #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 数据字典的情况
+                #else## 未设置 dictType 数据字典的情况
           <el-option label="请选择字典生成" value="" />
-          #end
+                #end
         </el-select>
       </el-form-item>
     #elseif($column.htmlType == "datetime")
@@ -88,7 +92,15 @@
       <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 <= 14)
         <el-button type="primary" @click="openModal('create')" v-hasPermi="['${permissionPrefix}:create']">
+        #else
+        <el-button
+          type="primary"
+          @click="openModal('create')"
+          v-hasPermi="['${permissionPrefix}:create']"
+        >
+        #end
           <Icon icon="ep:plus" class="mr-5px" /> 新增
         </el-button>
         <el-button
@@ -179,7 +191,7 @@ const list = ref([]) // 列表的数据
 const queryParams = reactive({
   pageNo: 1,
   pageSize: 10,
-  #set ($listOperationLastIndex = -1) ## 求最后一个需要 , 的地方
+  #set ($listOperationLastIndex = -1)## 求最后一个需要 , 的地方
   #foreach ($column in $columns)
     #if ($column.listOperation)
       #set ($listOperationLastIndex = $foreach.index)
@@ -249,7 +261,7 @@ const handleExport = async () => {
     await message.exportConfirm()
     // 发起导出
     exportLoading.value = true
-    const data = await ${simpleClassName}Api.export${simpleClassName}Api(queryParams)
+    const data = await ${simpleClassName}Api.export${simpleClassName}(queryParams)
     download.excel(data, '${table.classComment}.xls')
   } catch {
   } finally {