From 5b060cace909c6b1bb0c938c81c785c6fbffbf92 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=AD=99=E5=BF=97=E5=BC=BA?= <rex19001@outlook.com>
Date: Sun, 22 Sep 2024 13:40:32 +0800
Subject: [PATCH] =?UTF-8?q?update=20=E4=BF=AE=E6=94=B9=E5=89=8D=E7=AB=AF?=
 =?UTF-8?q?=E4=BB=A3=E7=A0=81=E7=94=9F=E6=88=90,=20=E4=BF=AE=E6=94=B9?=
 =?UTF-8?q?=E4=B8=BAvue3=E7=9A=84=E7=BB=84=E5=90=88=E5=BC=8FAPI=E8=AF=AD?=
 =?UTF-8?q?=E6=B3=95,=20=E5=88=86=E7=A6=BB=E5=AF=B9=E8=AF=9D=E6=A1=86?=
 =?UTF-8?q?=E5=92=8C=E5=88=97=E8=A1=A8=EF=BC=8C=E5=88=86=E7=A6=BB=E9=80=BB?=
 =?UTF-8?q?=E8=BE=91=E5=92=8C=E8=A7=86=E5=9B=BE,=20=E4=BD=BF=E4=BB=A3?=
 =?UTF-8?q?=E7=A0=81=E6=9B=B4=E5=8A=A0=E7=AE=80=E6=B4=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../generator/domain/GenTableColumn.java      |   5 +
 .../service/GenTableServiceImpl.java          |  12 +
 .../dromara/generator/util/VelocityUtils.java |  15 +
 .../src/main/resources/vm/java/bo.java.vm     |   6 +
 .../src/main/resources/vm/vue/form.vue.vm     |  97 +++
 .../src/main/resources/vm/vue/index.vue.vm    | 628 ++++++------------
 .../src/main/resources/vm/vue/useDialog.ts.vm |  17 +
 .../src/main/resources/vm/vue/useForm.ts.vm   | 107 +++
 .../src/main/resources/vm/vue/useTable.ts.vm  |  79 +++
 script/sql/update/update_gen_table_column.sql |   4 +
 10 files changed, 534 insertions(+), 436 deletions(-)
 create mode 100644 ruoyi-modules/ruoyi-generator/src/main/resources/vm/vue/form.vue.vm
 create mode 100644 ruoyi-modules/ruoyi-generator/src/main/resources/vm/vue/useDialog.ts.vm
 create mode 100644 ruoyi-modules/ruoyi-generator/src/main/resources/vm/vue/useForm.ts.vm
 create mode 100644 ruoyi-modules/ruoyi-generator/src/main/resources/vm/vue/useTable.ts.vm
 create mode 100644 script/sql/update/update_gen_table_column.sql

diff --git a/ruoyi-modules/ruoyi-generator/src/main/java/org/dromara/generator/domain/GenTableColumn.java b/ruoyi-modules/ruoyi-generator/src/main/java/org/dromara/generator/domain/GenTableColumn.java
index e1560b421..5647836de 100644
--- a/ruoyi-modules/ruoyi-generator/src/main/java/org/dromara/generator/domain/GenTableColumn.java
+++ b/ruoyi-modules/ruoyi-generator/src/main/java/org/dromara/generator/domain/GenTableColumn.java
@@ -49,6 +49,11 @@ public class GenTableColumn extends BaseEntity {
      */
     private String columnType;
 
+    /**
+     *  字符最大长度
+     */
+    private Integer columnMaxLength;
+
     /**
      * JAVA类型
      */
diff --git a/ruoyi-modules/ruoyi-generator/src/main/java/org/dromara/generator/service/GenTableServiceImpl.java b/ruoyi-modules/ruoyi-generator/src/main/java/org/dromara/generator/service/GenTableServiceImpl.java
index bb8b444fc..1fc6fff17 100644
--- a/ruoyi-modules/ruoyi-generator/src/main/java/org/dromara/generator/service/GenTableServiceImpl.java
+++ b/ruoyi-modules/ruoyi-generator/src/main/java/org/dromara/generator/service/GenTableServiceImpl.java
@@ -312,6 +312,18 @@ public class GenTableServiceImpl implements IGenTableService {
             tableColumn.setColumnName(column.getName());
             tableColumn.setColumnComment(column.getComment());
             tableColumn.setColumnType(column.getTypeName().toLowerCase());
+            // 字段长度判断
+            if (column.getTypeName().equalsIgnoreCase("varchar") ||
+                column.getTypeName().equalsIgnoreCase("text") ||
+                column.getTypeName().equalsIgnoreCase("char") ||
+                column.getTypeName().equalsIgnoreCase("tinytext") ||
+                column.getTypeName().equalsIgnoreCase("mediumtext")
+            ) {
+                tableColumn.setColumnMaxLength(column.getLength() == null ? 0 : column.getLength());
+            }
+            if (column.getTypeName().equalsIgnoreCase("longtext")) {
+                tableColumn.setColumnMaxLength(column.getLength() == null ? 0 : -1);
+            }
             tableColumn.setSort(column.getPosition());
             tableColumn.setIsRequired(column.isNullable() == 0 ? "1" : "0");
             tableColumn.setIsIncrement(column.isAutoIncrement() == -1 ? "0" : "1");
diff --git a/ruoyi-modules/ruoyi-generator/src/main/java/org/dromara/generator/util/VelocityUtils.java b/ruoyi-modules/ruoyi-generator/src/main/java/org/dromara/generator/util/VelocityUtils.java
index 6e111e3a8..53f7c459f 100644
--- a/ruoyi-modules/ruoyi-generator/src/main/java/org/dromara/generator/util/VelocityUtils.java
+++ b/ruoyi-modules/ruoyi-generator/src/main/java/org/dromara/generator/util/VelocityUtils.java
@@ -131,6 +131,11 @@ public class VelocityUtils {
         templates.add("vm/ts/types.ts.vm");
         if (GenConstants.TPL_CRUD.equals(tplCategory)) {
             templates.add("vm/vue/index.vue.vm");
+            // 新增模板
+            templates.add("vm/vue/useTable.ts.vm");
+            templates.add("vm/vue/form.vue.vm");
+            templates.add("vm/vue/useDialog.ts.vm");
+            templates.add("vm/vue/useForm.ts.vm");
         } else if (GenConstants.TPL_TREE.equals(tplCategory)) {
             templates.add("vm/vue/index-tree.vue.vm");
         }
@@ -183,6 +188,16 @@ public class VelocityUtils {
             fileName = StringUtils.format("{}/api/{}/{}/types.ts", vuePath, moduleName, businessName);
         } else if (template.contains("index.vue.vm")) {
             fileName = StringUtils.format("{}/views/{}/{}/index.vue", vuePath, moduleName, businessName);
+        }
+        // 新增的模板
+        else if (template.contains("useTable.ts.vm")) {
+            fileName = StringUtils.format("{}/views/{}/{}/hooks/use" + className + "Table.ts", vuePath, moduleName, businessName);
+        } else if (template.contains("form.vue.vm")) {
+            fileName = StringUtils.format("{}/views/{}/{}/modules/form.vue", vuePath, moduleName, businessName);
+        } else if (template.contains("useDialog.ts.vm")) {
+            fileName = StringUtils.format("{}/views/{}/{}/hooks/useDialog.ts", vuePath, moduleName, businessName);
+        } else if (template.contains("useForm.ts.vm")) {
+            fileName = StringUtils.format("{}/views/{}/{}/hooks/use" + className + "Form.ts", vuePath, moduleName, businessName);
         } else if (template.contains("index-tree.vue.vm")) {
             fileName = StringUtils.format("{}/views/{}/{}/index.vue", vuePath, moduleName, businessName);
         }
diff --git a/ruoyi-modules/ruoyi-generator/src/main/resources/vm/java/bo.java.vm b/ruoyi-modules/ruoyi-generator/src/main/resources/vm/java/bo.java.vm
index 511d37c04..65cbe1d06 100644
--- a/ruoyi-modules/ruoyi-generator/src/main/resources/vm/java/bo.java.vm
+++ b/ruoyi-modules/ruoyi-generator/src/main/resources/vm/java/bo.java.vm
@@ -41,6 +41,12 @@ public class ${ClassName}Bo extends BaseEntity {
 #else
     @NotNull(message = "$column.columnComment不能为空", groups = { $Group })
 #end
+#end
+## 字符长度判断
+#if($column.columnMaxLength && $column.columnMaxLength != -1)
+@Size(max = $column.columnMaxLength, message = "字符长度不能超过$column.columnMaxLength个字符")
+#elseif($column.columnMaxLength == -1)
+@Size(max = 4294967295, message = "字符长度不能超过4294967295个字符")
 #end
     private $column.javaType $column.javaField;
 
diff --git a/ruoyi-modules/ruoyi-generator/src/main/resources/vm/vue/form.vue.vm b/ruoyi-modules/ruoyi-generator/src/main/resources/vm/vue/form.vue.vm
new file mode 100644
index 000000000..77d3f87b4
--- /dev/null
+++ b/ruoyi-modules/ruoyi-generator/src/main/resources/vm/vue/form.vue.vm
@@ -0,0 +1,97 @@
+<template>
+    <!-- 添加或修改${functionName}对话框 -->
+    <rex-drawer :title="props.title" v-model="modelValue" append-to-body @close="close()">
+        <el-form ref="${businessName}FormRef" :model="form" :rules="rules" label-width="auto" v-loading="loading">
+            <el-row :gutter="10">
+                #foreach($column in $columns)
+                    #set($field=$column.javaField)
+                    #if(($column.insert || $column.edit) && !$column.pk)
+                        #set($parentheseIndex=$column.columnComment.indexOf("（"))
+                        #if($parentheseIndex != -1)
+                            #set($comment=$column.columnComment.substring(0, $parentheseIndex))
+                        #else
+                            #set($comment=$column.columnComment)
+                        #end
+                        #set($dictType=$column.dictType)
+                        #if($column.htmlType == "input")
+                            <rex-input label="${comment}" prop="${field}" v-model="form.${field}" maxlength="$column.columnMaxLength" show-word-limit  />
+                        #elseif($column.htmlType == "imageUpload")
+                            <rex-image-upload label="${comment}" prop="${field}" v-model="form.${field}" />
+                        #elseif($column.htmlType == "fileUpload")
+                            <rex-file-upload label="${comment}" prop="${field}" v-model="form.${field}" />
+                        #elseif($column.htmlType == "editor")
+                            <rex-editor label="${comment}" prop="${field}" v-model="form.${field}" :min-height="192" />
+                        #elseif($column.htmlType == "select" && "" != $dictType)
+                            <rex-select label="${comment}" prop="${field}" v-model="form.${field}" placeholder="请选择${comment}" :dicts="${dictType}" />
+                        #elseif($column.htmlType == "select" && $dictType)
+                            <el-form-item label="${comment}" prop="${field}">
+                                <el-select v-model="form.${field}" placeholder="请选择${comment}">
+                                    <el-option label="请选择字典生成" value="" />
+                                </el-select>
+                            </el-form-item>
+                        #elseif($column.htmlType == "checkbox" && "" != $dictType)
+                            <rex-checkbox label="${comment}" prop="${field}" v-model="form.${field}" :dicts="${dictType}" />
+                        #elseif($column.htmlType == "checkbox" && $dictType)
+                            <el-form-item label="${comment}" prop="${field}">
+                                <el-checkbox-group v-model="form.${field}">
+                                    <el-checkbox>请选择字典生成</el-checkbox>
+                                </el-checkbox-group>
+                            </el-form-item>
+                        #elseif($column.htmlType == "radio" && "" != $dictType)
+                            <rex-radio label="${comment}" prop="${field}" v-model="form.${field}" :dicts="${dictType}" />
+                        #elseif($column.htmlType == "radio" && $dictType)
+                            <el-form-item label="${comment}" prop="${field}">
+                                <el-radio-group v-model="form.${field}">
+                                    <el-radio label="1">请选择字典生成</el-radio>
+                                </el-radio-group>
+                            </el-form-item>
+                        #elseif($column.htmlType == "datetime")
+                            <rex-date-picker label="${comment}" prop="${field}" v-model="form.${field}" type="datetime" value-format="YYYY-MM-DD"  placeholder="请选择${comment}" />
+                        #elseif($column.htmlType == "textarea")
+                            <rex-input label="${comment}" prop="${field}" v-model="form.${field}" type="textarea" maxlength="$column.columnMaxLength" show-word-limit />
+                        #end
+                    #end
+                #end
+            </el-row>
+        </el-form>
+        <template #footer>
+            <div class="dialog-footer">
+                <el-button :loading="loading" type="primary" @click="submitForm">确 定</el-button>
+                <el-button @click="close">取 消</el-button>
+            </div>
+        </template>
+    </rex-drawer>
+</template>
+
+<script lang="ts" setup>
+    import { use${BusinessName}Form } from '../hooks/use${BusinessName}Form'
+    import { useVModel } from '@vueuse/core'
+
+    const { proxy } = getCurrentInstance() as ComponentInternalInstance;
+        #if(${dicts} != '')
+            #set($dictsNoSymbol=$dicts.replace("'", ""))
+        const ${dictsNoSymbol} = toRef(proxy?.useDict(${dicts}), ${dicts});
+        #end
+    const props = defineProps<{
+        modelValue: boolean
+        title: string
+        isEdit: boolean
+        id?: string | number
+    }>()
+
+    const emit = defineEmits(['update:modelValue', 'refresh'])
+    const modelValue = useVModel(props, 'modelValue', emit)
+    const { form, rules, loading, ${businessName}FormRef, submitForm, close, loadData } = use${BusinessName}Form({
+        props,
+        emit,
+        proxy,
+        onSuccess: () => emit('refresh'),
+        onClose: () => emit('close'),
+    })
+
+    watchEffect(async () => {
+        if (props.isEdit && modelValue.value) {
+            await loadData(props.id as string | number)
+        }
+    })
+</script>
diff --git a/ruoyi-modules/ruoyi-generator/src/main/resources/vm/vue/index.vue.vm b/ruoyi-modules/ruoyi-generator/src/main/resources/vm/vue/index.vue.vm
index a92d19adc..2ac645e19 100644
--- a/ruoyi-modules/ruoyi-generator/src/main/resources/vm/vue/index.vue.vm
+++ b/ruoyi-modules/ruoyi-generator/src/main/resources/vm/vue/index.vue.vm
@@ -1,459 +1,215 @@
 <template>
-  <div class="p-2">
-    <transition :enter-active-class="proxy?.animate.searchAnimate.enter" :leave-active-class="proxy?.animate.searchAnimate.leave">
-      <div v-show="showSearch" class="mb-[10px]">
-        <el-card shadow="hover">
-          <el-form ref="queryFormRef" :model="queryParams" :inline="true">
-#foreach($column in $columns)
-#if($column.query)
-#set($dictType=$column.dictType)
-#set($AttrName=$column.javaField.substring(0,1).toUpperCase() + ${column.javaField.substring(1)})
-#set($parentheseIndex=$column.columnComment.indexOf("（"))
-#if($parentheseIndex != -1)
-#set($comment=$column.columnComment.substring(0, $parentheseIndex))
-#else
-#set($comment=$column.columnComment)
-#end
-#if($column.htmlType == "input" || $column.htmlType == "textarea")
-            <el-form-item label="${comment}" prop="${column.javaField}">
-              <el-input v-model="queryParams.${column.javaField}" placeholder="请输入${comment}" clearable @keyup.enter="handleQuery" />
-            </el-form-item>
-#elseif(($column.htmlType == "select" || $column.htmlType == "radio") && "" != $dictType)
-            <el-form-item label="${comment}" prop="${column.javaField}">
-              <el-select v-model="queryParams.${column.javaField}" placeholder="请选择${comment}" clearable >
-                <el-option v-for="dict in ${dictType}" :key="dict.value" :label="dict.label" :value="dict.value"/>
-              </el-select>
-            </el-form-item>
-#elseif(($column.htmlType == "select" || $column.htmlType == "radio") && $dictType)
-            <el-form-item label="${comment}" prop="${column.javaField}">
-              <el-select v-model="queryParams.${column.javaField}" placeholder="请选择${comment}" clearable >
-                <el-option label="请选择字典生成" value="" />
-              </el-select>
-            </el-form-item>
-#elseif($column.htmlType == "datetime" && $column.queryType != "BETWEEN")
-            <el-form-item label="${comment}" prop="${column.javaField}">
-              <el-date-picker clearable
-                v-model="queryParams.${column.javaField}"
-                type="date"
-                value-format="YYYY-MM-DD"
-                placeholder="请选择${comment}"
-              />
-            </el-form-item>
-#elseif($column.htmlType == "datetime" && $column.queryType == "BETWEEN")
-            <el-form-item label="${comment}" style="width: 308px">
-              <el-date-picker
-                v-model="dateRange${AttrName}"
-                value-format="YYYY-MM-DD HH:mm:ss"
-                type="daterange"
-                range-separator="-"
-                start-placeholder="开始日期"
-                end-placeholder="结束日期"
-                :default-time="[new Date(2000, 1, 1, 0, 0, 0), new Date(2000, 1, 1, 23, 59, 59)]"
-              />
-            </el-form-item>
-#end
-#end
-#end
-            <el-form-item>
-              <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
-              <el-button icon="Refresh" @click="resetQuery">重置</el-button>
-            </el-form-item>
-          </el-form>
-        </el-card>
-      </div>
-    </transition>
+    <div class="p-2">
+        <!-- 搜索操作栏 -->
+        <transition :enter-active-class="proxy?.animate.searchAnimate.enter" :leave-active-class="proxy?.animate.searchAnimate.leave">
+            <div class="search" v-show="showSearch">
+                <el-form :model="queryParams" ref="queryFormRef" :inline="true" label-width="68px">
+                    <el-row :gutter="10">
+                        #foreach($column in $columns)
+                            #if($column.query)
+                                #set($dictType=$column.dictType)
+                                #set($AttrName=$column.javaField.substring(0,1).toUpperCase() + ${column.javaField.substring(1)})
+                                #set($parentheseIndex=$column.columnComment.indexOf("（"))
+                                #if($parentheseIndex != -1)
+                                    #set($comment=$column.columnComment.substring(0, $parentheseIndex))
+                                #else
+                                    #set($comment=$column.columnComment)
+                                #end
+                                #if($column.htmlType == "input" || $column.htmlType == "textarea")
+                                    <form-input label="${comment}" prop="${column.javaField}" v-model="queryParams.${column.javaField}" placeholder="请输入${comment}" clearable style="width: 240px" @keyup.enter="handleQuery"  />
+                                #elseif(($column.htmlType == "select" || $column.htmlType == "radio") && "" != $dictType)
+                                    <form-select-dict label="${comment}" prop="${column.javaField}" v-model="queryParams.${column.javaField}" placeholder="请选择${comment}" clearable :dicts="${dictType}"/>
+                                #elseif(($column.htmlType == "select" || $column.htmlType == "radio") && $dictType)
+                                    <el-form-item label="${comment}" prop="${column.javaField}">
+                                        <el-select v-model="queryParams.${column.javaField}" placeholder="请选择${comment}" clearable>
+                                            <el-option label="请选择字典生成" value="" />
+                                        </el-select>
+                                    </el-form-item>
+                                #elseif($column.htmlType == "datetime" && $column.queryType != "BETWEEN")
+                                    <form-date-picker label="${comment}" prop="${column.javaField}" clearable v-model="queryParams.${column.javaField}"  type="date" value-format="YYYY-MM-DD" placeholder="请选择${comment}"/>
+                                #elseif($column.htmlType == "datetime" && $column.queryType == "BETWEEN")
+                                    <form-date-picker label="${comment}" style="width: 308px"
+                                                      v-model="dateRange${AttrName}"
+                                                      value-format="YYYY-MM-DD"
+                                                      type="daterange"
+                                                      range-separator="-"
+                                                      start-placeholder="开始日期"
+                                                      end-placeholder="结束日期"
+                                                      :default-time="[new Date(2000, 1, 1, 0, 0, 0), new Date(2000, 1, 1, 23, 59, 59)]"
+                                    />
+                                #end
+                            #end
+                        #end
+                    </el-row>
+                    <el-form-item>
+                        <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
+                        <el-button icon="Refresh" @click="resetQuery">重置</el-button>
+                    </el-form-item>
+                </el-form>
+            </div>
+        </transition>
 
-    <el-card shadow="never">
-      <template #header>
-        <el-row :gutter="10" class="mb8">
-          <el-col :span="1.5">
-            <el-button type="primary" plain icon="Plus" @click="handleAdd" v-hasPermi="['${moduleName}:${businessName}:add']">新增</el-button>
-          </el-col>
-          <el-col :span="1.5">
-            <el-button type="success" plain icon="Edit" :disabled="single" @click="handleUpdate()" v-hasPermi="['${moduleName}:${businessName}:edit']">修改</el-button>
-          </el-col>
-          <el-col :span="1.5">
-            <el-button type="danger" plain icon="Delete" :disabled="multiple" @click="handleDelete()" v-hasPermi="['${moduleName}:${businessName}:remove']">删除</el-button>
-          </el-col>
-          <el-col :span="1.5">
-            <el-button type="warning" plain icon="Download" @click="handleExport" v-hasPermi="['${moduleName}:${businessName}:export']">导出</el-button>
-          </el-col>
-          <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
-        </el-row>
-      </template>
+        <!-- 列表 -->
+        <RexTable
+            :loading="loading"
+            :data="${businessName}List"
+            :total="total"
+            :queryParams="queryParams"
+            :columns="columns"
+            :buttons="buttons"
+            :operations="operations"
+            @query="getList"
+            v-model:selectedIds="ids"
+        >
+            #foreach($column in $columns)
+                #set($javaField=$column.javaField)
+                #set($parentheseIndex=$column.columnComment.indexOf("（"))
+                #if($parentheseIndex != -1)
+                    #set($comment=$column.columnComment.substring(0, $parentheseIndex))
+                #else
+                    #set($comment=$column.columnComment)
+                #end
+                #if($column.list && $column.htmlType == "datetime")
+                <template #${javaField}="{ row }">
+                    <span>{{ parseTime(row.${javaField}, '{y}-{m}-{d}') }}</span>
+                </template>
+                #elseif($column.list && $column.htmlType == "imageUpload")
+                <template #${javaField}="{ row }">
+                    <image-preview :src="row.${javaField}" :width="50" :height="50"/>
+                </template>
+                #elseif($column.list && $column.dictType && "" != $column.dictType)
+                <template #${column.javaField}="{ row }">
+                    #if($column.htmlType == "checkbox")
+                        <dict-tag :options="${column.dictType}" :value="row.${javaField} ? row.${javaField}.split(',') : []"/>
+                    #else
+                        <dict-tag :options="${column.dictType}" :value="row.${javaField}"/>
+                    #end
+                </template>
+                #end
+            #end
+        </RexTable>
 
-      <el-table v-loading="loading" :data="${businessName}List" @selection-change="handleSelectionChange">
-        <el-table-column type="selection" width="55" align="center" />
-#foreach($column in $columns)
-#set($javaField=$column.javaField)
-#set($parentheseIndex=$column.columnComment.indexOf("（"))
-#if($parentheseIndex != -1)
-#set($comment=$column.columnComment.substring(0, $parentheseIndex))
-#else
-#set($comment=$column.columnComment)
-#end
-#if($column.pk)
-        <el-table-column label="${comment}" align="center" prop="${javaField}" v-if="${column.list}" />
-#elseif($column.list && $column.htmlType == "datetime")
-        <el-table-column label="${comment}" align="center" prop="${javaField}" width="180">
-          <template #default="scope">
-            <span>{{ parseTime(scope.row.${javaField}, '{y}-{m}-{d}') }}</span>
-          </template>
-        </el-table-column>
-#elseif($column.list && $column.htmlType == "imageUpload")
-        <el-table-column label="${comment}" align="center" prop="${javaField}Url" width="100">
-          <template #default="scope">
-            <image-preview :src="scope.row.${javaField}Url" :width="50" :height="50"/>
-          </template>
-        </el-table-column>
-#elseif($column.list && $column.dictType && "" != $column.dictType)
-        <el-table-column label="${comment}" align="center" prop="${javaField}">
-          <template #default="scope">
-#if($column.htmlType == "checkbox")
-            <dict-tag :options="${column.dictType}" :value="scope.row.${javaField} ? scope.row.${javaField}.split(',') : []"/>
-#else
-            <dict-tag :options="${column.dictType}" :value="scope.row.${javaField}"/>
-#end
-          </template>
-        </el-table-column>
-#elseif($column.list && "" != $javaField)
-        <el-table-column label="${comment}" align="center" prop="${javaField}" />
-#end
-#end
-        <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
-          <template #default="scope">
-            <el-tooltip content="修改" placement="top">
-              <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)" v-hasPermi="['${moduleName}:${businessName}:edit']"></el-button>
-            </el-tooltip>
-            <el-tooltip content="删除" placement="top">
-              <el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)" v-hasPermi="['${moduleName}:${businessName}:remove']"></el-button>
-            </el-tooltip>
-          </template>
-        </el-table-column>
-      </el-table>
-
-      <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" @pagination="getList" />
-    </el-card>
-    <!-- 添加或修改${functionName}对话框 -->
-    <el-dialog :title="dialog.title" v-model="dialog.visible" width="500px" append-to-body>
-      <el-form ref="${businessName}FormRef" :model="form" :rules="rules" label-width="80px">
-#foreach($column in $columns)
-#set($field=$column.javaField)
-#if(($column.insert || $column.edit) && !$column.pk)
-#set($parentheseIndex=$column.columnComment.indexOf("（"))
-#if($parentheseIndex != -1)
-#set($comment=$column.columnComment.substring(0, $parentheseIndex))
-#else
-#set($comment=$column.columnComment)
-#end
-#set($dictType=$column.dictType)
-#if($column.htmlType == "input")
-        <el-form-item label="${comment}" prop="${field}">
-          <el-input v-model="form.${field}" placeholder="请输入${comment}" />
-        </el-form-item>
-#elseif($column.htmlType == "imageUpload")
-        <el-form-item label="${comment}" prop="${field}">
-          <image-upload v-model="form.${field}"/>
-        </el-form-item>
-#elseif($column.htmlType == "fileUpload")
-        <el-form-item label="${comment}" prop="${field}">
-          <file-upload v-model="form.${field}"/>
-        </el-form-item>
-#elseif($column.htmlType == "editor")
-        <el-form-item label="${comment}">
-          <editor v-model="form.${field}" :min-height="192"/>
-        </el-form-item>
-#elseif($column.htmlType == "select" && "" != $dictType)
-        <el-form-item label="${comment}" prop="${field}">
-          <el-select v-model="form.${field}" placeholder="请选择${comment}">
-            <el-option
-                v-for="dict in ${dictType}"
-                :key="dict.value"
-                :label="dict.label"
-#if($column.javaType == "Integer" || $column.javaType == "Long")
-                :value="parseInt(dict.value)"
-#else
-                :value="dict.value"
-#end
-            ></el-option>
-          </el-select>
-        </el-form-item>
-#elseif($column.htmlType == "select" && $dictType)
-        <el-form-item label="${comment}" prop="${field}">
-          <el-select v-model="form.${field}" placeholder="请选择${comment}">
-            <el-option label="请选择字典生成" value="" />
-          </el-select>
-        </el-form-item>
-#elseif($column.htmlType == "checkbox" && "" != $dictType)
-        <el-form-item label="${comment}" prop="${field}">
-          <el-checkbox-group v-model="form.${field}">
-            <el-checkbox
-                v-for="dict in ${dictType}"
-                :key="dict.value"
-                :label="dict.value">
-                {{dict.label}}
-            </el-checkbox>
-          </el-checkbox-group>
-        </el-form-item>
-#elseif($column.htmlType == "checkbox" && $dictType)
-        <el-form-item label="${comment}" prop="${field}">
-          <el-checkbox-group v-model="form.${field}">
-            <el-checkbox>请选择字典生成</el-checkbox>
-          </el-checkbox-group>
-        </el-form-item>
-#elseif($column.htmlType == "radio" && "" != $dictType)
-        <el-form-item label="${comment}" prop="${field}">
-          <el-radio-group v-model="form.${field}">
-            <el-radio
-              v-for="dict in ${dictType}"
-              :key="dict.value"
-#if($column.javaType == "Integer" || $column.javaType == "Long")
-              :value="parseInt(dict.value)"
-#else
-              :value="dict.value"
-#end
-            >{{dict.label}}</el-radio>
-          </el-radio-group>
-        </el-form-item>
-#elseif($column.htmlType == "radio" && $dictType)
-        <el-form-item label="${comment}" prop="${field}">
-          <el-radio-group v-model="form.${field}">
-            <el-radio value="1">请选择字典生成</el-radio>
-          </el-radio-group>
-        </el-form-item>
-#elseif($column.htmlType == "datetime")
-        <el-form-item label="${comment}" prop="${field}">
-          <el-date-picker clearable
-            v-model="form.${field}"
-            type="datetime"
-            value-format="YYYY-MM-DD HH:mm:ss"
-            placeholder="请选择${comment}">
-          </el-date-picker>
-        </el-form-item>
-#elseif($column.htmlType == "textarea")
-        <el-form-item label="${comment}" prop="${field}">
-            <el-input v-model="form.${field}" type="textarea" placeholder="请输入内容" />
-        </el-form-item>
-#end
-#end
-#end
-      </el-form>
-      <template #footer>
-        <div class="dialog-footer">
-          <el-button :loading="buttonLoading" type="primary" @click="submitForm">确 定</el-button>
-          <el-button @click="cancel">取 消</el-button>
-        </div>
-      </template>
-    </el-dialog>
-  </div>
+        <!-- 添加或修改${functionName}对话框 -->
+        <ModalForm v-model="dialog.visible" :title="dialog.title" :is-edit="dialog.isEdit" :id="${pkColumn.javaField}" @refresh="getList" @close="handleModalClose" />
+    </div>
 </template>
 
 <script setup name="${BusinessName}" lang="ts">
-import { list${BusinessName}, get${BusinessName}, del${BusinessName}, add${BusinessName}, update${BusinessName} } from '@/api/${moduleName}/${businessName}';
-import { ${BusinessName}VO, ${BusinessName}Query, ${BusinessName}Form } from '@/api/${moduleName}/${businessName}/types';
+import { use${BusinessName}Table } from './hooks/use${BusinessName}Table'
+import { useDialog } from './hooks/useDialog'
+import { ${BusinessName}VO } from '@/api/${moduleName}/${businessName}/types';
+import ModalForm from './modules/form.vue'
+import { Button, Column, Operation } from '@/api/types'
 
-const { proxy } = getCurrentInstance() as ComponentInternalInstance;
+const { proxy } = getCurrentInstance() as ComponentInternalInstance
 #if(${dicts} != '')
-#set($dictsNoSymbol=$dicts.replace("'", ""))
+    #set($dictsNoSymbol=$dicts.replace("'", ""))
 const { ${dictsNoSymbol} } = toRefs<any>(proxy?.useDict(${dicts}));
 #end
+const { ${businessName}List, loading, total, ids, queryParams, getList, handleDelete, clearSelection } = use${BusinessName}Table(proxy)
+const { dialog, openDialog } = useDialog()
+const showSearch = ref(true)
+const id = ref<string | number>('')
+const queryFormRef = ref<ElFormInstance>()
 
-const ${businessName}List = ref<${BusinessName}VO[]>([]);
-const buttonLoading = ref(false);
-const loading = ref(true);
-const showSearch = ref(true);
-const ids = ref<Array<string | number>>([]);
-const single = ref(true);
-const multiple = ref(true);
-const total = ref(0);
-#foreach ($column in $columns)
-#if($column.htmlType == "datetime" && $column.queryType == "BETWEEN")
-#set($AttrName=$column.javaField.substring(0,1).toUpperCase() + ${column.javaField.substring(1)})
-const dateRange${AttrName} = ref<[DateModelType, DateModelType]>(['', '']);
-#end
-#end
-
-const queryFormRef = ref<ElFormInstance>();
-const ${businessName}FormRef = ref<ElFormInstance>();
-
-const dialog = reactive<DialogOption>({
-  visible: false,
-  title: ''
-});
-
-const initFormData: ${BusinessName}Form = {
-#foreach ($column in $columns)
-#if($column.insert || $column.edit)
-#if($column.htmlType == "checkbox")
-  $column.javaField: []#if($foreach.count != $columns.size()),#end
-#else
-  $column.javaField: undefined#if($foreach.count != $columns.size()),#end
-#end
-#end
-#end
-}
-const data = reactive<PageData<${BusinessName}Form, ${BusinessName}Query>>({
-  form: {...initFormData},
-  queryParams: {
-    pageNum: 1,
-    pageSize: 10,
-#foreach ($column in $columns)
-#if($column.query)
-#if($column.htmlType != "datetime" || $column.queryType != "BETWEEN")
-    $column.javaField: undefined,
-#end
-#end
-#end
-    params: {
-#foreach ($column in $columns)
-#if($column.query)
-#if($column.htmlType == "datetime" && $column.queryType == "BETWEEN")
-      $column.javaField: undefined#if($foreach.count != $columns.size()),#end
-#end
-#end
-#end
-    }
-  },
-  rules: {
-#foreach ($column in $columns)
-#if($column.insert || $column.edit)
-#if($column.required)
-#set($parentheseIndex=$column.columnComment.indexOf("（"))
-#if($parentheseIndex != -1)
-#set($comment=$column.columnComment.substring(0, $parentheseIndex))
-#else
-#set($comment=$column.columnComment)
-#end
-    $column.javaField: [
-      { required: true, message: "$comment不能为空", trigger: #if($column.htmlType == "select" || $column.htmlType == "radio")"change"#else"blur"#end }
-    ]#if($foreach.count != $columns.size()),#end
-#end
-#end
-#end
-  }
-});
-
-const { queryParams, form, rules } = toRefs(data);
-
-/** 查询${functionName}列表 */
-const getList = async () => {
-  loading.value = true;
-#foreach ($column in $columns)
-#if($column.htmlType == "datetime" && $column.queryType == "BETWEEN")
-  queryParams.value.params = {};
-#break
-#end
-#end
-#foreach ($column in $columns)
-#if($column.htmlType == "datetime" && $column.queryType == "BETWEEN")
-#set($AttrName=$column.javaField.substring(0,1).toUpperCase() + ${column.javaField.substring(1)})
-  proxy?.addDateRange(queryParams.value, dateRange${AttrName}.value, '${AttrName}');
-#end
-#end
-  const res = await list${BusinessName}(queryParams.value);
-  ${businessName}List.value = res.rows;
-  total.value = res.total;
-  loading.value = false;
-}
-
-/** 取消按钮 */
-const cancel = () => {
-  reset();
-  dialog.visible = false;
-}
-
-/** 表单重置 */
-const reset = () => {
-  form.value = {...initFormData};
-  ${businessName}FormRef.value?.resetFields();
-}
-
-/** 搜索按钮操作 */
 const handleQuery = () => {
-  queryParams.value.pageNum = 1;
-  getList();
+    queryParams.pageNum = 1
+    getList()
 }
 
-/** 重置按钮操作 */
 const resetQuery = () => {
-#foreach ($column in $columns)
-#if($column.htmlType == "datetime" && $column.queryType == "BETWEEN")
-#set($AttrName=$column.javaField.substring(0,1).toUpperCase() + ${column.javaField.substring(1)})
-  dateRange${AttrName}.value = ['', ''];
-#end
-#end
-  queryFormRef.value?.resetFields();
-  handleQuery();
+    queryFormRef.value?.resetFields()
+    handleQuery()
 }
 
-/** 多选框选中数据 */
-const handleSelectionChange = (selection: ${BusinessName}VO[]) => {
-  ids.value = selection.map(item => item.${pkColumn.javaField});
-  single.value = selection.length != 1;
-  multiple.value = !selection.length;
+const handleAdd = () => openDialog('添加${functionName}', false)
+
+const handleUpdate = (row?: ${BusinessName}VO) => {
+    id.value = row?.id || ids.value[0]
+    openDialog('修改${functionName}', true)
 }
 
-/** 新增按钮操作 */
-const handleAdd = () => {
-  reset();
-  dialog.visible = true;
-  dialog.title = "添加${functionName}";
-}
-
-/** 修改按钮操作 */
-const handleUpdate = async (row?: ${BusinessName}VO) => {
-  reset();
-  const _${pkColumn.javaField} = row?.${pkColumn.javaField} || ids.value[0]
-  const res = await get${BusinessName}(_${pkColumn.javaField});
-  Object.assign(form.value, res.data);
-#foreach ($column in $columns)
-  #if($column.htmlType == "checkbox")
-  form.value.$column.javaField = form.value.${column.javaField}.split(",");
-  #end
-#end
-  dialog.visible = true;
-  dialog.title = "修改${functionName}";
-}
-
-/** 提交按钮 */
-const submitForm = () => {
-  ${businessName}FormRef.value?.validate(async (valid: boolean) => {
-    if (valid) {
-      buttonLoading.value = true;
-      #foreach ($column in $columns)
-        #if($column.htmlType == "checkbox")
-        form.value.$column.javaField = form.value.${column.javaField}.join(",");
-        #end
-      #end
-      if (form.value.${pkColumn.javaField}) {
-        await update${BusinessName}(form.value).finally(() =>  buttonLoading.value = false);
-      } else {
-        await add${BusinessName}(form.value).finally(() =>  buttonLoading.value = false);
-      }
-      proxy?.#[[$modal]]#.msgSuccess("操作成功");
-      dialog.visible = false;
-      await getList();
-    }
-  });
-}
-
-/** 删除按钮操作 */
-const handleDelete = async (row?: ${BusinessName}VO) => {
-  const _${pkColumn.javaField}s = row?.${pkColumn.javaField} || ids.value;
-  await proxy?.#[[$modal]]#.confirm('是否确认删除${functionName}编号为"' + _${pkColumn.javaField}s + '"的数据项？').finally(() => loading.value = false);
-  await del${BusinessName}(_${pkColumn.javaField}s);
-  proxy?.#[[$modal]]#.msgSuccess("删除成功");
-  await getList();
-}
-
-/** 导出按钮操作 */
 const handleExport = () => {
-  proxy?.download('${moduleName}/${businessName}/export', {
-    ...queryParams.value
-  }, `${businessName}_#[[${new Date().getTime()}]]#.xlsx`)
+    proxy?.download('${moduleName}/${businessName}/export', {
+        ...queryParams
+    }, `${businessName}_#[[${new Date().getTime()}]]#.xlsx`)
+}
+// 关闭弹窗时清空已选中项
+const handleModalClose = () => {
+    clearSelection.value = true
 }
 
-onMounted(() => {
-  getList();
-});
+// 列
+const columns: Column[] = [
+#foreach($column in $columns)
+    #set($javaField=$column.javaField)
+    #set($parentheseIndex=$column.columnComment.indexOf("（"))
+    #if($parentheseIndex != -1)
+        #set($comment=$column.columnComment.substring(0, $parentheseIndex))
+    #else
+        #set($comment=$column.columnComment)
+    #end
+    #if($column.pk)
+    ## 如果需要显示id就把这个注释去掉
+    ## { label: '${comment}', prop: '${javaField}', align: 'center' },
+    #elseif($column.list && $column.htmlType == "datetime" || $column.htmlType == "imageUpload" || $column.dictType && "" != $column.dictType)
+    { label: '${comment}', prop: '${javaField}', align: 'center', slot: '${javaField}' },
+    #elseif($column.list && "" != $javaField)
+    { label: '${comment}', prop: '${javaField}', align: 'center' },
+    #end
+#end
+]
+
+// 是否可以修改
+const canUpdate = computed(() => ids.value.length === 1)
+// 是否可以删除
+const canDelete = computed(() => ids.value.length > 0)
+
+// 按钮
+const buttons: Button[] = [
+    {
+        text: '新增',
+        type: 'primary',
+        icon: 'Plus',
+        handler: handleAdd,
+        permission: ['${moduleName}:${businessName}:add']
+    },
+    {
+        text: '修改',
+        type: 'success',
+        icon: 'Edit',
+        handler: handleUpdate,
+        permission: ['${moduleName}:${businessName}:edit'],
+        disabledCondition: () => !canUpdate.value
+    },
+    {
+        text: '删除',
+        type: 'danger',
+        icon: 'Delete',
+        handler: handleDelete,
+        permission: ['${moduleName}:${businessName}:remove'],
+        disabledCondition: () => !canDelete.value
+    },
+    { text: '导出', type: 'warning', icon: 'Download', handler: handleExport, permission: ['${moduleName}:${businessName}:export'] }
+]
+// 操作按钮
+const operations: Operation[] = [
+    { text: '修改', type: 'primary', icon: 'Edit', handler: handleUpdate, permission: ['${moduleName}:${businessName}:edit'] },
+    {
+        text: '删除',
+        type: 'primary',
+        icon: 'Delete',
+        handler: handleDelete,
+        permission: ['${moduleName}:${businessName}:remove'],
+        needConfirm: true
+    },
+    // 其他按钮，如果这个按钮不需要权限，可以不用写permission或permission: []
+    // { text: '测试', type: 'primary', icon: 'Search', handler: handleAdd, permission: [] }
+]
+
+onMounted(getList)
+
+defineExpose({
+    getList
+})
 </script>
diff --git a/ruoyi-modules/ruoyi-generator/src/main/resources/vm/vue/useDialog.ts.vm b/ruoyi-modules/ruoyi-generator/src/main/resources/vm/vue/useDialog.ts.vm
new file mode 100644
index 000000000..b348d6d48
--- /dev/null
+++ b/ruoyi-modules/ruoyi-generator/src/main/resources/vm/vue/useDialog.ts.vm
@@ -0,0 +1,17 @@
+export function useDialog() {
+    const dialog = ref({
+        visible: false,
+        title: '',
+        isEdit: false
+    })
+
+    const openDialog = (title: string, isEdit: boolean) => {
+        dialog.value = { visible: true, title, isEdit }
+    }
+
+    const closeDialog = () => {
+        dialog.value.visible = false
+    }
+
+    return { dialog, openDialog, closeDialog }
+}
diff --git a/ruoyi-modules/ruoyi-generator/src/main/resources/vm/vue/useForm.ts.vm b/ruoyi-modules/ruoyi-generator/src/main/resources/vm/vue/useForm.ts.vm
new file mode 100644
index 000000000..caac1adde
--- /dev/null
+++ b/ruoyi-modules/ruoyi-generator/src/main/resources/vm/vue/useForm.ts.vm
@@ -0,0 +1,107 @@
+import { ${BusinessName}Form } from '@/api/${moduleName}/${businessName}/types'
+import { update${BusinessName}, add${BusinessName}, get${BusinessName} } from '@/api/${moduleName}/${businessName}';
+
+interface UseFormOptions {
+    props: any
+    emit: any
+    proxy: any
+    onSuccess?: () => void
+    onClose?: () => void
+}
+
+export function use${BusinessName}Form({ emit, proxy, onSuccess, onClose }: UseFormOptions) {
+    const loading = ref(false)
+    const form = reactive<${BusinessName}Form>({
+        #foreach ($column in $columns)
+        #if($column.insert || $column.edit)
+        #if($column.htmlType == "checkbox")
+        $column.javaField: []#if($foreach.count != $columns.size()),#end
+        #else
+        $column.javaField: undefined#if($foreach.count != $columns.size()),#end
+        #end
+        #end
+    #end
+    });
+
+    const rules = {
+        #foreach ($column in $columns)
+            #if($column.insert || $column.edit)
+                #if($column.required)
+                    #set($parentheseIndex=$column.columnComment.indexOf("（"))
+                    #if($parentheseIndex != -1)
+                        #set($comment=$column.columnComment.substring(0, $parentheseIndex))
+                    #else
+                        #set($comment=$column.columnComment)
+                    #end
+                        $column.javaField: [
+                        { required: true, message: "$comment不能为空", trigger: ['change', 'blur']},
+                        #if($column.columnMaxLength)
+                            { max: $column.columnMaxLength, message: "字符长度不能超过$column.columnMaxLength个字符", trigger: ['change', 'blur']}
+                        #end
+                    ]
+                    #if($foreach.count != $columns.size()),#end
+                #else
+                    #if($column.columnMaxLength)
+                            $column.javaField: [
+                            { max: $column.columnMaxLength, message: "字符长度不能超过$column.columnMaxLength个字符", trigger: ['change', 'blur']}
+                        ],
+                    #end
+                #end
+            #end
+        #end
+    }
+
+    const ${businessName}FormRef = ref<ElFormInstance>()
+
+    const close = () => {
+        reset()
+        form.id = undefined
+        emit('update:modelValue', false)
+        onClose?.()
+    }
+
+    const reset = () => {
+            ${businessName}FormRef.value?.resetFields()
+    }
+
+    const submitForm = async () => {
+        try {
+            await ${businessName}FormRef.value?.validate()
+            loading.value = true
+            if (form.id) {
+                await update${BusinessName}(form)
+            } else {
+                await add${BusinessName}(form)
+            }
+            proxy?.$modal.msgSuccess('操作成功')
+            close()
+            onSuccess?.()
+        } catch (error) {
+            console.error('Form submission error:', error)
+        } finally {
+            loading.value = false
+        }
+    }
+
+    const loadData = async (id: string | number) => {
+        loading.value = true
+        try {
+            const res = await get${BusinessName}(id)
+            Object.assign(form, res.data)
+        } catch (error) {
+            console.error('Error fetching project data:', error)
+        } finally {
+            loading.value = false
+        }
+    }
+
+    return {
+        form,
+        rules,
+        loading,
+        ${businessName}FormRef,
+        submitForm,
+        close,
+        loadData
+    }
+}
diff --git a/ruoyi-modules/ruoyi-generator/src/main/resources/vm/vue/useTable.ts.vm b/ruoyi-modules/ruoyi-generator/src/main/resources/vm/vue/useTable.ts.vm
new file mode 100644
index 000000000..a15468615
--- /dev/null
+++ b/ruoyi-modules/ruoyi-generator/src/main/resources/vm/vue/useTable.ts.vm
@@ -0,0 +1,79 @@
+import { list${BusinessName}, del${BusinessName} } from '@/api/${moduleName}/${businessName}';
+import { ${BusinessName}VO, ${BusinessName}Query } from '@/api/${moduleName}/${businessName}/types';
+
+export function use${BusinessName}Table(proxy) {
+    const projectsList = ref<${BusinessName}VO[]>([]);
+    const loading = ref(true);
+    const total = ref(0);
+    const ids = ref<Array<string | number>>([]);
+    const single = ref(true);
+    const multiple = ref(true);
+    const clearSelection = ref(false)
+
+    const queryParams = reactive<${BusinessName}Query>({
+        pageNum: 1,
+        pageSize: 10,
+        #foreach ($column in $columns)
+            #if($column.query)
+                #if($column.htmlType != "datetime" || $column.queryType != "BETWEEN")
+        $column.javaField: undefined,
+                #end
+            #end
+        #end
+        params: {
+            #foreach ($column in $columns)
+                #if($column.query)
+                    #if($column.htmlType == "datetime" && $column.queryType == "BETWEEN")
+        $column.javaField: undefined#if($foreach.count != $columns.size()),#end
+                    #end
+                #end
+            #end
+        }
+    });
+
+    const getList = async () => {
+        loading.value = true;
+        try {
+            const res = await list${BusinessName}(queryParams);
+            projectsList.value = res.rows;
+            total.value = res.total;
+        } finally {
+            loading.value = false;
+        }
+    };
+
+    const handleSelectionChange = (selection: ${BusinessName}VO[]) => {
+        ids.value = selection.map((item) => item.id);
+        single.value = selection.length !== 1;
+        multiple.value = !selection.length;
+    };
+
+    const handleDelete = async (row?: ${BusinessName}VO) => {
+        const _ids = row?.id || ids.value;
+
+        try {
+            await proxy.$modal.confirm('是否确认删除项目编号为"' + _ids + '"的数据项？');
+            await del${BusinessName}(_ids);
+            proxy.$modal.msgSuccess('删除成功');
+            getList();
+        } catch (error) {
+            console.log('删除操作已取消')
+        } finally {
+            clearSelection.value = true
+        }
+    };
+
+    return {
+        ${businessName}List,
+        loading,
+        total,
+        ids,
+        single,
+        multiple,
+        queryParams,
+        getList,
+        handleSelectionChange,
+        handleDelete,
+        clearSelection
+    };
+}
diff --git a/script/sql/update/update_gen_table_column.sql b/script/sql/update/update_gen_table_column.sql
new file mode 100644
index 000000000..ea155d810
--- /dev/null
+++ b/script/sql/update/update_gen_table_column.sql
@@ -0,0 +1,4 @@
+-- 给gen_table_column表新增column_max_length字段
+ALTER TABLE `gen_table_column`
+ADD COLUMN `column_max_length` int DEFAULT NULL COMMENT '字符最大长度'
+AFTER `column_type`;