Pre Merge pull request !588 from 孙志强/code_gen

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类型
      */

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");

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);
         }

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;
 

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>

ruoyi-modules/ruoyi-generator/src/main/resources/vm/vue/index.vue.vm

@@ -1,9 +1,10 @@
 <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]">
+            <div class="search" v-show="showSearch">
-        <el-card shadow="hover">
+                <el-form :model="queryParams" ref="queryFormRef" :inline="true" label-width="68px">
-          <el-form ref="queryFormRef" :model="queryParams" :inline="true">
+                    <el-row :gutter="10">
                         #foreach($column in $columns)
                             #if($column.query)
                                 #set($dictType=$column.dictType)
@@ -15,15 +16,9 @@
                                     #set($comment=$column.columnComment)
                                 #end
                                 #if($column.htmlType == "input" || $column.htmlType == "textarea")
-            <el-form-item label="${comment}" prop="${column.javaField}">
+                                    <form-input label="${comment}" prop="${column.javaField}" v-model="queryParams.${column.javaField}" placeholder="请输入${comment}" clearable style="width: 240px" @keyup.enter="handleQuery"  />
-              <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}">
+                                    <form-select-dict label="${comment}" prop="${column.javaField}" v-model="queryParams.${column.javaField}" placeholder="请选择${comment}" clearable :dicts="${dictType}"/>
-              <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>
@@ -31,59 +26,121 @@
                                         </el-select>
                                     </el-form-item>
                                 #elseif($column.htmlType == "datetime" && $column.queryType != "BETWEEN")
-            <el-form-item label="${comment}" prop="${column.javaField}">
+                                    <form-date-picker label="${comment}" prop="${column.javaField}" clearable v-model="queryParams.${column.javaField}"  type="date" value-format="YYYY-MM-DD" placeholder="请选择${comment}"/>
-              <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">
+                                    <form-date-picker label="${comment}" style="width: 308px"
-              <el-date-picker
                                                       v-model="dateRange${AttrName}"
-                value-format="YYYY-MM-DD HH:mm:ss"
+                                                      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)]"
                                     />
-            </el-form-item>
                                 #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>
-        </el-card>
             </div>
         </transition>
 
-    <el-card shadow="never">
+        <!-- 列表 -->
-      <template #header>
+        <RexTable
-        <el-row :gutter="10" class="mb8">
+            :loading="loading"
-          <el-col :span="1.5">
+            :data="${businessName}List"
-            <el-button type="primary" plain icon="Plus" @click="handleAdd" v-hasPermi="['${moduleName}:${businessName}:add']">新增</el-button>
+            :total="total"
-          </el-col>
+            :queryParams="queryParams"
-          <el-col :span="1.5">
+            :columns="columns"
-            <el-button type="success" plain icon="Edit" :disabled="single" @click="handleUpdate()" v-hasPermi="['${moduleName}:${businessName}:edit']">修改</el-button>
+            :buttons="buttons"
-          </el-col>
+            :operations="operations"
-          <el-col :span="1.5">
+            @query="getList"
-            <el-button type="danger" plain icon="Delete" :disabled="multiple" @click="handleDelete()" v-hasPermi="['${moduleName}:${businessName}:remove']">删除</el-button>
+            v-model:selectedIds="ids"
-          </el-col>
+        >
-          <el-col :span="1.5">
+            #foreach($column in $columns)
-            <el-button type="warning" plain icon="Download" @click="handleExport" v-hasPermi="['${moduleName}:${businessName}:export']">导出</el-button>
+                #set($javaField=$column.javaField)
-          </el-col>
+                #set($parentheseIndex=$column.columnComment.indexOf("（"))
-          <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
+                #if($parentheseIndex != -1)
-        </el-row>
+                    #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>
+
+        <!-- 添加或修改${functionName}对话框 -->
+        <ModalForm v-model="dialog.visible" :title="dialog.title" :is-edit="dialog.isEdit" :id="${pkColumn.javaField}" @refresh="getList" @close="handleModalClose" />
+    </div>
 </template>
 
-      <el-table v-loading="loading" :data="${businessName}List" @selection-change="handleSelectionChange">
+<script setup name="${BusinessName}" lang="ts">
-        <el-table-column type="selection" width="55" align="center" />
+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
+#if(${dicts} != '')
+    #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 handleQuery = () => {
+    queryParams.pageNum = 1
+    getList()
+}
+
+const resetQuery = () => {
+    queryFormRef.value?.resetFields()
+    handleQuery()
+}
+
+const handleAdd = () => openDialog('添加${functionName}', false)
+
+const handleUpdate = (row?: ${BusinessName}VO) => {
+    id.value = row?.id || ids.value[0]
+    openDialog('修改${functionName}', true)
+}
+
+const handleExport = () => {
+    proxy?.download('${moduleName}/${businessName}/export', {
+        ...queryParams
+    }, `${businessName}_#[[${new Date().getTime()}]]#.xlsx`)
+}
+// 关闭弹窗时清空已选中项
+const handleModalClose = () => {
+    clearSelection.value = true
+}
+
+// 列
+const columns: Column[] = [
 #foreach($column in $columns)
     #set($javaField=$column.javaField)
     #set($parentheseIndex=$column.columnComment.indexOf("（"))
@@ -93,367 +150,66 @@
         #set($comment=$column.columnComment)
     #end
     #if($column.pk)
-        <el-table-column label="${comment}" align="center" prop="${javaField}" v-if="${column.list}" />
+    ## 如果需要显示id就把这个注释去掉
-#elseif($column.list && $column.htmlType == "datetime")
+    ## { label: '${comment}', prop: '${javaField}', align: 'center' },
-        <el-table-column label="${comment}" align="center" prop="${javaField}" width="180">
+    #elseif($column.list && $column.htmlType == "datetime" || $column.htmlType == "imageUpload" || $column.dictType && "" != $column.dictType)
-          <template #default="scope">
+    { label: '${comment}', prop: '${javaField}', align: 'center', slot: '${javaField}' },
-            <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}" />
+    { label: '${comment}', prop: '${javaField}', align: 'center' },
     #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>
+const canUpdate = computed(() => ids.value.length === 1)
-    <!-- 添加或修改${functionName}对话框 -->
+// 是否可以删除
-    <el-dialog :title="dialog.title" v-model="dialog.visible" width="500px" append-to-body>
+const canDelete = computed(() => ids.value.length > 0)
-      <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>
-</template>
 
-<script setup name="${BusinessName}" lang="ts">
+// 按钮
-import { list${BusinessName}, get${BusinessName}, del${BusinessName}, add${BusinessName}, update${BusinessName} } from '@/api/${moduleName}/${businessName}';
+const buttons: Button[] = [
-import { ${BusinessName}VO, ${BusinessName}Query, ${BusinessName}Form } from '@/api/${moduleName}/${businessName}/types';
+    {
-
+        text: '新增',
-const { proxy } = getCurrentInstance() as ComponentInternalInstance;
+        type: 'primary',
-#if(${dicts} != '')
+        icon: 'Plus',
-#set($dictsNoSymbol=$dicts.replace("'", ""))
+        handler: handleAdd,
-const { ${dictsNoSymbol} } = toRefs<any>(proxy?.useDict(${dicts}));
+        permission: ['${moduleName}:${businessName}:add']
-#end
-
-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)
+        text: '修改',
-#if($column.insert || $column.edit)
+        type: 'success',
-#if($column.required)
+        icon: 'Edit',
-#set($parentheseIndex=$column.columnComment.indexOf("（"))
+        handler: handleUpdate,
-#if($parentheseIndex != -1)
+        permission: ['${moduleName}:${businessName}:edit'],
-#set($comment=$column.columnComment.substring(0, $parentheseIndex))
+        disabledCondition: () => !canUpdate.value
-#else
+    },
-#set($comment=$column.columnComment)
+    {
-#end
+        text: '删除',
-    $column.javaField: [
+        type: 'danger',
-      { required: true, message: "$comment不能为空", trigger: #if($column.htmlType == "select" || $column.htmlType == "radio")"change"#else"blur"#end }
+        icon: 'Delete',
-    ]#if($foreach.count != $columns.size()),#end
+        handler: handleDelete,
-#end
+        permission: ['${moduleName}:${businessName}:remove'],
-#end
+        disabledCondition: () => !canDelete.value
-#end
+    },
-  }
+    { 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: [] }
+]
 
-const { queryParams, form, rules } = toRefs(data);
+onMounted(getList)
 
-/** 查询${functionName}列表 */
+defineExpose({
-const getList = async () => {
+    getList
-  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();
-}
-
-/** 重置按钮操作 */
-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();
-}
-
-/** 多选框选中数据 */
-const handleSelectionChange = (selection: ${BusinessName}VO[]) => {
-  ids.value = selection.map(item => item.${pkColumn.javaField});
-  single.value = selection.length != 1;
-  multiple.value = !selection.length;
-}
-
-/** 新增按钮操作 */
-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`)
-}
-
-onMounted(() => {
-  getList();
-});
 </script>

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 }
+}

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
+    }
+}

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
+    };
+}

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`;