代码生成：完善 Vue3 标准模版的表单

YunaiV · &wxr
1 parent e96f052a
Showing 3 changed files with 52 additions and 40 deletions
yudao-module-infra/yudao-module-infra-biz/src/main/java/cn/iocoder/yudao/module/infra/service/codegen/inner/CodegenEngine.java
yudao-module-infra/yudao-module-infra-biz/src/main/resources/codegen/vue3/views/form.vue.vm
yudao-module-infra/yudao-module-infra-biz/src/main/resources/codegen/vue3/views/index.vue.vm
@@ -97,20 +97,21 @@ public class CodegenEngine {
      * value：生成的路径
      */
     private static final Table<Integer, String, String> FRONT_TEMPLATES = ImmutableTable.<Integer, String, String>builder()
-            // Vue2
+            // Vue2 标准模版
             .put(CodegenFrontTypeEnum.VUE2.getType(), vueTemplatePath("views/index.vue"),
                     vueFilePath("views/${table.moduleName}/${classNameVar}/index.vue"))
             .put(CodegenFrontTypeEnum.VUE2.getType(), vueTemplatePath("api/api.js"),
                     vueFilePath("api/${table.moduleName}/${classNameVar}.js"))
-            // Vue3
+            // 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"))
+                    vue3FilePath("views/${table.moduleName}/${classNameVar}/${simpleClassName}Form.vue"))
             .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"))
             .build();
     @Resource
@@ -203,6 +204,8 @@ public class CodegenEngine {
                 getStr(bindingMap, "basePackage").replaceAll("\\.", "/"));
         filePath = StrUtil.replace(filePath, "${classNameVar}",
                 getStr(bindingMap, "classNameVar"));
+        filePath = StrUtil.replace(filePath, "${simpleClassName}",
+                getStr(bindingMap, "simpleClassName"));
         // sceneEnum 包含的字段
         CodegenSceneEnum sceneEnum = (CodegenSceneEnum) bindingMap.get("sceneEnum");
         filePath = StrUtil.replace(filePath, "${sceneEnum.prefixClass}", sceneEnum.getPrefixClass());
@@ -27,17 +27,17 @@
       <el-form-item label="${comment}" prop="${javaField}">
         <el-input v-model="formData.${javaField}" placeholder="请输入${comment}" />
       </el-form-item>
-        #elseif($column.htmlType == "imageUpload")## 图片上传 TODO 芋艿：待测试
+        #elseif($column.htmlType == "imageUpload")## 图片上传
             #set ($hasImageUploadColumn = true)
-          <el-form-item label="${comment}">
-            <imageUpload v-model="formData.${javaField}"/>
-          </el-form-item>
-        #elseif($column.htmlType == "fileUpload")## 文件上传 TODO 芋艿：待测试
+      <el-form-item label="${comment}">
+        <UploadImg v-model="formData.${javaField}" />
+      </el-form-item>
+        #elseif($column.htmlType == "fileUpload")## 文件上传
             #set ($hasFileUploadColumn = true)
-          <el-form-item label="${comment}">
-            <fileUpload v-model="formData.${javaField}"/>
-          </el-form-item>
-        #elseif($column.htmlType == "editor")## 文本编辑器 TODO 芋艿：待测试
+      <el-form-item label="${comment}">
+        <UploadFile v-model="formData.${javaField}" />
+      </el-form-item>
+        #elseif($column.htmlType == "editor")## 文本编辑器
       <el-form-item label="${comment}">
         <Editor :model-value="formData.${javaField}" height="150px" />
       </el-form-item>
@@ -59,19 +59,20 @@
                 #end
         </el-select>
       </el-form-item>
-        #elseif($column.htmlType == "checkbox")## 多选框 TODO 芋艿：待测试
+        #elseif($column.htmlType == "checkbox")## 多选框
       <el-form-item label="${comment}" prop="${javaField}">
         <el-checkbox-group v-model="formData.${javaField}">
                 #if ("" != $dictType)## 有数据字典
                     #if (!$dictMethods.contains($dictMethod))## 如果不存在，则添加到 dictMethods 数组中，后续好 import
                       #set($ignore = $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>
+          <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
@@ -96,14 +97,19 @@
                 #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="formData.${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="formData.${javaField}" type="textarea" placeholder="请输入${comment}" />
-          </el-form-item>
+        #elseif($column.htmlType == "datetime")## 时间框
+      <el-form-item label="${comment}" prop="${javaField}">
+        <el-date-picker
+          v-model="formData.${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="formData.${javaField}" type="textarea" placeholder="请输入${comment}" />
+      </el-form-item>
         #end
     #end
 #end
@@ -163,7 +169,7 @@ const formRules = reactive({
 const formRef = ref() // 表单 Ref
 /** 打开弹窗 */
-const openModal = async (type: string, id?: number) => {
+const open = async (type: string, id?: number) => {
   modelVisible.value = true
   modelTitle.value = t('action.' + type)
   formType.value = type
@@ -178,7 +184,7 @@ const openModal = async (type: string, id?: number) =&gt; {
     }
   }
 }
-defineExpose({ openModal }) // 提供 openModal 方法，用于打开弹窗
+defineExpose({ open }) // 提供 open 方法，用于打开弹窗
 /** 提交表单 */
 const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
@@ -92,12 +92,12 @@
       <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.length() < 15)
-        <el-button type="primary" @click="openModal('create')" v-hasPermi="['${permissionPrefix}:create']">
+        #if ($permissionPrefix.length() <= 12)
+        <el-button type="primary" @click="openForm('create')" v-hasPermi="['${permissionPrefix}:create']">
         #else
         <el-button
           type="primary"
-          @click="openModal('create')"
+          @click="openForm('create')"
           v-hasPermi="['${permissionPrefix}:create']"
         >
         #end
@@ -148,7 +148,7 @@
           <el-button
             link
             type="primary"
-            @click="openModal('update', scope.row.id)"
+            @click="openForm('update', scope.row.id)"
             v-hasPermi="['${permissionPrefix}:update']"
           >
             编辑
@@ -172,6 +172,9 @@
       @pagination="getList"
     />
   </content-wrap>
+
+  <!-- 表单弹窗：添加/修改 -->
+  <${simpleClassName}Form ref="formRef" @success="getList" />
 </template>
 <script setup lang="ts" name="${simpleClassName}">
@@ -181,7 +184,7 @@ import { DICT_TYPE#foreach ($dictMethod in $dictMethods), ${dictMethod}#end } fr
 import { dateFormatter } from '@/utils/formatTime'
 import download from '@/utils/download'
 import * as ${simpleClassName}Api from '@/api/${table.moduleName}/${classNameVar}'
-// import ConfigForm from './form.vue'
+import ${simpleClassName}Form from './${simpleClassName}Form.vue'
 const message = useMessage() // 消息弹窗
 const { t } = useI18n() // 国际化
@@ -236,10 +239,10 @@ const resetQuery = () =&gt; {
 }
 /** 添加/修改操作 */
-// const modalRef = ref()
-// const openModal = (type: string, id?: number) => {
-//   modalRef.value.openModal(type, id)
-// }
+const formRef = ref()
+const openForm = (type: string, id?: number) => {
+  formRef.value.open(type, id)
+}
 /** 删除按钮操作 */
 const handleDelete = async (id: number) => {