update 增加代码生成模板优化 skill 内容

2026-06-03 14:08:57 +08:00
parent 6b039422b3
commit 441fb733d8
8 changed files with 1573 additions and 21 deletions
@@ -0,0 +1,100 @@
+import type { ${BusinessName}Form, ${BusinessName}Query, ${BusinessName}VO } from '@/api/${moduleName}/${businessName}/types';
+import type { PageResult } from '@/api/types';
+import type { AxiosPromise } from '@/utils/api-types';
+import request from '@/utils/request';
+
+/**
+ * 查询${functionName}列表
+ * @param query
+ * @returns {*}
+ */
+
+export const list${BusinessName} = (query?: ${BusinessName}Query): AxiosPromise<PageResult<${BusinessName}VO>> => {
+  return request({
+    url: '/${moduleName}/${businessName}/list',
+    method: 'get',
+    params: query
+  });
+};
+
+/**
+ * 查询${functionName}详细
+ * @param ${pkColumn.javaField}
+ */
+export const get${BusinessName} = (${pkColumn.javaField}: string | number): AxiosPromise<${BusinessName}VO> => {
+  return request({
+    url: '/${moduleName}/${businessName}/' + ${pkColumn.javaField},
+    method: 'get'
+  });
+};
+
+/**
+ * 新增${functionName}
+ * @param data
+ */
+export const add${BusinessName} = (data: ${BusinessName}Form) => {
+  return request({
+    url: '/${moduleName}/${businessName}',
+    method: 'post',
+    data: data
+  });
+};
+
+/**
+ * 修改${functionName}
+ * @param data
+ */
+export const update${BusinessName} = (data: ${BusinessName}Form) => {
+  return request({
+    url: '/${moduleName}/${businessName}',
+    method: 'put',
+    data: data
+  });
+};
+
+#if($enableStatus)
+/**
+ * 修改${functionName}状态
+ * @param ${pkColumn.javaField}
+ * @param status
+ */
+export const change${BusinessName}Status = (${pkColumn.javaField}: string | number, status: #if($statusColumn.javaType == 'String')string#else number#end) => {
+  return request({
+    url: '/${moduleName}/${businessName}/changeStatus',
+    method: 'put',
+    data: {
+      ${pkColumn.javaField},
+      ${statusField}: status
+    }
+  });
+};
+#end
+
+#if($enableSort)
+/**
+ * 调整${functionName}排序
+ * @param ${pkColumn.javaField}
+ * @param sortValue
+ */
+export const update${BusinessName}Sort = (${pkColumn.javaField}: string | number, sortValue: #if($sortColumn.javaType == 'String' || $sortColumn.javaType == 'LocalDateTime')string#else number#end) => {
+  return request({
+    url: '/${moduleName}/${businessName}/updateSort',
+    method: 'put',
+    data: {
+      ${pkColumn.javaField},
+      ${sortField}: sortValue
+    }
+  });
+};
+#end
+
+/**
+ * 删除${functionName}
+ * @param ${pkColumn.javaField}
+ */
+export const del${BusinessName} = (${pkColumn.javaField}: string | number | Array<string | number>) => {
+  return request({
+    url: '/${moduleName}/${businessName}/' + ${pkColumn.javaField},
+    method: 'delete'
+  });
+};
@@ -0,0 +1,61 @@
+export interface ${BusinessName}VO {
+#foreach ($column in $columns)
+#if($column.list)
+  /**
+   * $column.columnComment
+   */
+  $column.javaField:#if($column.javaField.indexOf("id") != -1 || $column.javaField.indexOf("Id") != -1) string | number;
+                        #elseif($column.javaType == 'Long' || $column.javaType == 'Integer' || $column.javaType == 'Double' || $column.javaType == 'Float' || $column.javaType == 'BigDecimal') number;
+                        #elseif($column.javaType == 'Boolean') boolean;
+                        #else string;
+                    #end
+#if($column.htmlType == "imageUpload")
+  /**
+   * ${column.columnComment}Url
+   */
+  ${column.javaField}Url: string;
+#end
+#end
+#end
+#if ($table.tree)
+    /**
+     * 子对象
+     */
+    children: ${BusinessName}VO[];
+#end
+}
+
+export interface ${BusinessName}Form extends BaseEntity {
+#foreach ($column in $columns)
+#if($column.insert || $column.edit)
+  /**
+   * $column.columnComment
+   */
+  $column.javaField?:#if($column.javaField.indexOf("id") != -1 || $column.javaField.indexOf("Id") != -1) string | number;
+                        #elseif($column.javaType == 'Long' || $column.javaType == 'Integer' || $column.javaType == 'Double' || $column.javaType == 'Float' || $column.javaType == 'BigDecimal') number;
+                        #elseif($column.javaType == 'Boolean') boolean;
+                        #else string;
+                    #end
+#end
+#end
+}
+
+export interface ${BusinessName}Query #if(!${treeCode})extends PageQuery #end{
+
+#foreach ($column in $columns)
+#if($column.query)
+  /**
+   * $column.columnComment
+   */
+  $column.javaField?:#if($column.javaField.indexOf("id") != -1 || $column.javaField.indexOf("Id") != -1) string | number;
+                        #elseif($column.javaType == 'Long' || $column.javaType == 'Integer' || $column.javaType == 'Double' || $column.javaType == 'Float' || $column.javaType == 'BigDecimal') number;
+                        #elseif($column.javaType == 'Boolean') boolean;
+                        #else string;
+                    #end
+#end
+#end
+  /**
+   * 日期范围参数
+   */
+  params?: any;
+}
@@ -0,0 +1,730 @@
+<template>
+  <div class="p-2 page-shell ${moduleName}-${businessName}-page">
+    <div class="search-wrap">
+      <el-card shadow="hover" class="search-panel" :class="{ 'is-collapsed': !showSearch }">
+        <template #header>
+          <div class="panel-heading search-panel-toggle" @click.stop="showSearch = !showSearch">
+            <div><h3>筛选条件</h3></div>
+          </div>
+        </template>
+        <el-form ref="queryFormRef" :model="queryParams" :inline="true" class="query-form">
+#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 == "inputNumber")
+            <el-form-item label="${comment}" prop="${column.javaField}">
+              <el-input-number v-model="queryParams.${column.javaField}" controls-position="right" />
+            </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 == "switch" && "" != $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 == "switch")
+            <el-form-item label="${comment}" prop="${column.javaField}">
+              <el-select v-model="queryParams.${column.javaField}" placeholder="请选择${comment}" clearable>
+#if($column.javaType == "Boolean")
+                <el-option label="是" :value="true" />
+                <el-option label="否" :value="false" />
+#elseif($column.javaType == "Integer" || $column.javaType == "Long")
+                <el-option label="开启" :value="0" />
+                <el-option label="关闭" :value="1" />
+#else
+                <el-option label="开启" value="0" />
+                <el-option label="关闭" value="1" />
+#end
+              </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>
+
+    <el-card shadow="hover" class="table-panel">
+      <template #header>
+        <div class="toolbar-shell">
+          <div class="table-heading">
+            <h3>${functionName}列表</h3>
+          </div>
+          <div class="toolbar-actions">
+            <el-button type="primary" plain icon="Plus" @click="handleAdd()" v-hasPermi="['${moduleName}:${businessName}:add']">新增</el-button>
+            <el-button type="info" plain icon="Sort" @click="handleToggleExpandAll">展开/折叠</el-button>
+#if($enableExport)
+            <el-button type="warning" plain icon="Download" @click="handleExport" v-hasPermi="['${moduleName}:${businessName}:export']">导出</el-button>
+#end
+            <right-toolbar v-model:show-search="showSearch" :search="false" @query-table="getList"></right-toolbar>
+          </div>
+        </div>
+      </template>
+      <el-table
+        ref="${businessName}TableRef"
+        v-loading="loading"
+        class="data-table"
+        :data="${businessName}List"
+        row-key="${treeCode}"
+        border
+        :default-expand-all="isExpandAll"
+        :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
+      >
+#set($firstTreeListField = "")
+#foreach($tempColumn in $columns)
+#if(!$tempColumn.pk && $tempColumn.list && "" != $tempColumn.javaField && $firstTreeListField == "")
+#set($firstTreeListField = $tempColumn.javaField)
+#end
+#end
+#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)
+#elseif($enableStatus && $statusField == $javaField)
+#if($javaField == $firstTreeListField)
+        <el-table-column label="${comment}" prop="${javaField}">
+#else
+        <el-table-column label="${comment}" align="center" prop="${javaField}">
+#end
+          <template #default="scope">
+            <el-switch
+              v-model="scope.row.${javaField}"
+              :active-value="${statusField}ActiveValue"
+              :inactive-value="${statusField}InactiveValue"
+              @change="handleStatusChange(scope.row)"
+            />
+          </template>
+        </el-table-column>
+#elseif($enableSort && $sortField == $javaField)
+#if($javaField == $firstTreeListField)
+        <el-table-column label="${comment}" prop="${javaField}" width="160">
+#else
+        <el-table-column label="${comment}" align="center" prop="${javaField}" width="160">
+#end
+          <template #default="scope">
+#if($column.javaType == "LocalDateTime")
+            <el-date-picker
+              v-model="scope.row.${javaField}"
+              type="datetime"
+              value-format="YYYY-MM-DD HH:mm:ss"
+              placeholder="选择${comment}"
+              @change="handleSortChange(scope.row)"
+            />
+#else
+            <el-input-number v-model="scope.row.${javaField}" controls-position="right" :min="0" @change="handleSortChange(scope.row)" />
+#end
+          </template>
+        </el-table-column>
+#elseif($column.list && $column.htmlType == "switch")
+#if($javaField == $firstTreeListField)
+        <el-table-column label="${comment}" prop="${javaField}" width="120">
+#else
+        <el-table-column label="${comment}" align="center" prop="${javaField}" width="120">
+#end
+          <template #default="scope">
+            <el-switch
+              v-model="scope.row.${javaField}"
+#if($column.javaType == "Boolean")
+              :active-value="true"
+              :inactive-value="false"
+#elseif($column.javaType == "Integer" || $column.javaType == "Long")
+              :active-value="0"
+              :inactive-value="1"
+#else
+              active-value="0"
+              inactive-value="1"
+#end
+              disabled
+            />
+          </template>
+        </el-table-column>
+#elseif($column.list && $column.htmlType == "datetime")
+#if($javaField == $firstTreeListField)
+        <el-table-column label="${comment}" prop="${javaField}" width="180">
+#else
+        <el-table-column label="${comment}" align="center" prop="${javaField}" width="180">
+#end
+          <template #default="scope">
+            <span>{{ parseTime(scope.row.${javaField}, '{y}-{m}-{d}') }}</span>
+          </template>
+        </el-table-column>
+#elseif($column.list && $column.htmlType == "imageUpload")
+#if($javaField == $firstTreeListField)
+        <el-table-column label="${comment}" prop="${javaField}Url" width="100">
+#else
+        <el-table-column label="${comment}" align="center" prop="${javaField}Url" width="100">
+#end
+          <template #default="scope">
+            <image-preview :src="scope.row.${javaField}Url" :width="50" :height="50"/>
+          </template>
+        </el-table-column>
+#elseif($column.list && $column.dictColumn)
+#if($javaField == $firstTreeListField)
+        <el-table-column label="${comment}" prop="${javaField}">
+#else
+        <el-table-column label="${comment}" align="center" prop="${javaField}">
+#end
+          <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)
+#if($javaField == $firstTreeListField)
+        <el-table-column label="${comment}" prop="${javaField}" />
+#else
+        <el-table-column label="${comment}" align="center" prop="${javaField}" />
+#end
+#end
+#end
+#if($enableStatus && !$statusColumn.list)
+        <el-table-column label="${statusColumn.columnComment}" align="center" prop="${statusField}">
+          <template #default="scope">
+            <el-switch
+              v-model="scope.row.${statusField}"
+              :active-value="${statusField}ActiveValue"
+              :inactive-value="${statusField}InactiveValue"
+              @change="handleStatusChange(scope.row)"
+            />
+          </template>
+        </el-table-column>
+#end
+#if($enableSort && !$sortColumn.list)
+        <el-table-column label="${sortColumn.columnComment}" align="center" prop="${sortField}" width="160">
+          <template #default="scope">
+#if($sortColumn.javaType == "LocalDateTime")
+            <el-date-picker
+              v-model="scope.row.${sortField}"
+              type="datetime"
+              value-format="YYYY-MM-DD HH:mm:ss"
+              placeholder="选择${sortColumn.columnComment}"
+              @change="handleSortChange(scope.row)"
+            />
+#else
+            <el-input-number v-model="scope.row.${sortField}" controls-position="right" :min="0" @change="handleSortChange(scope.row)" />
+#end
+          </template>
+        </el-table-column>
+#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-tooltip>
+            <el-tooltip content="新增" placement="top">
+              <el-button link type="primary" icon="Plus" @click="handleAdd(scope.row)" v-hasPermi="['${moduleName}:${businessName}:add']" />
+            </el-tooltip>
+            <el-tooltip content="删除" placement="top">
+              <el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)" v-hasPermi="['${moduleName}:${businessName}:remove']" />
+            </el-tooltip>
+          </template>
+        </el-table-column>
+      </el-table>
+    </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("" != $treeParentCode && $column.javaField == $treeParentCode)
+        <el-form-item label="${comment}" prop="${treeParentCode}">
+          <el-tree-select
+            v-model="form.${treeParentCode}"
+            :data="${businessName}Options"
+            :props="{ value: '${treeCode}', label: '${treeName}', children: 'children' } as any"
+            value-key="${treeCode}"
+            placeholder="请选择${comment}"
+            check-strictly
+          />
+        </el-form-item>
+#elseif($column.htmlType == "input")
+        <el-form-item label="${comment}" prop="${field}">
+          <el-input v-model="form.${field}" placeholder="请输入${comment}" />
+        </el-form-item>
+#elseif($column.htmlType == "inputNumber")
+        <el-form-item label="${comment}" prop="${field}">
+          <el-input-number v-model="form.${field}" controls-position="right" />
+        </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 == "switch")
+        <el-form-item label="${comment}" prop="${field}">
+          <el-switch
+            v-model="form.${field}"
+#if($column.javaType == "Boolean")
+            :active-value="true"
+            :inactive-value="false"
+#elseif($column.javaType == "Integer" || $column.javaType == "Long")
+            :active-value="0"
+            :inactive-value="1"
+#else
+            active-value="0"
+            inactive-value="1"
+#end
+          />
+        </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-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>
+
+#set($needAddDateRange = false)
+#foreach ($column in $columns)
+#if($column.htmlType == "datetime" && $column.queryType == "BETWEEN")
+#set($needAddDateRange = true)
+#end
+#end
+<script setup name="${BusinessName}" lang="ts">
+import {
+  add${BusinessName},
+#if($enableStatus)
+  change${BusinessName}Status,
+#end
+  del${BusinessName},
+  get${BusinessName},
+  list${BusinessName},
+#if($enableSort)
+  update${BusinessName}Sort,
+#end
+  update${BusinessName}
+} from '@/api/${moduleName}/${businessName}';
+import { ${BusinessName}Form, ${BusinessName}Query, ${BusinessName}VO } from '@/api/${moduleName}/${businessName}/types';
+import { useLoading } from '@/hooks/async/useLoading';
+import { useFormDialog } from '@/hooks/dialog/useFormDialog';
+#if($needAddDateRange)
+import { useDateRangeQuery } from '@/hooks/form/useDateRangeQuery';
+#end
+import { useSearchReset } from '@/hooks/form/useSearchReset';
+import { useSearchToggle } from '@/hooks/form/useSearchToggle';
+import { useTreeTableExpand } from '@/hooks/tree/useTreeTableExpand';
+#if(${dicts} != '')
+import { useDict } from '@/utils/dict';
+#end
+import modal from '@/plugins/modal';
+import { handleTree } from '@/utils/ruoyi';
+#if($enableExport)
+import { download as requestDownload } from '@/utils/request';
+#end
+
+#if(${dicts} != '')
+#set($dictsNoSymbol=$dicts.replace("'", ""))
+const { ${dictsNoSymbol} } = toRefs<any>(useDict(${dicts}));
+#end
+
+#if($enableStatus)
+const ${statusField}ActiveValue = #if($statusColumn.javaType == "Boolean")true#elseif($statusColumn.javaType == "Integer" || $statusColumn.javaType == "Long")0#else'0'#end;
+const ${statusField}InactiveValue = #if($statusColumn.javaType == "Boolean")false#elseif($statusColumn.javaType == "Integer" || $statusColumn.javaType == "Long")1#else'1'#end;
+#end
+
+type ${BusinessName}Option = {
+  ${treeCode}: #if($treeParentColumn.javaType == 'String')string#else number#end;
+  ${treeName}: string;
+  children?: ${BusinessName}Option[];
+};
+
+const ${businessName}List = ref<${BusinessName}VO[]>([]);
+const ${businessName}Options = ref<${BusinessName}Option[]>([]);
+const all${BusinessName}Options = ref<${BusinessName}Option[]>([]);
+const buttonLoading = ref(false);
+const { showSearch } = useSearchToggle();
+const { loading, setLoading, withLoading } = useLoading();
+
+const queryFormRef = ref<ElFormInstance>();
+const ${businessName}FormRef = ref<ElFormInstance>();
+const ${businessName}TableRef = ref<ElTableInstance>();
+const { isExpandAll, handleToggleExpandAll } = useTreeTableExpand<${BusinessName}VO>({
+  tableRef: ${businessName}TableRef,
+  data: ${businessName}List
+});
+
+#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: dateRange${AttrName},
+  applyDateRange: apply${AttrName}DateRange,
+  resetDateRange: reset${AttrName}DateRange
+} = useDateRangeQuery('${AttrName}');
+#end
+#end
+
+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: {
+#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" || $column.htmlType == "switch" || $column.htmlType == "inputNumber")"change"#else"blur"#end }
+    ]#if($foreach.count != $columns.size()),#end
+#end
+#end
+#end
+  }
+});
+
+const { queryParams, form, rules } = toRefs(data);
+const { dialog, resetForm: reset, openDialog, showDialog, closeDialog } = useFormDialog({
+  form,
+  formRef: ${businessName}FormRef,
+  initialFormData: initFormData
+});
+
+/** 查询${functionName}列表 */
+const getList = async () => {
+  await withLoading(async () => {
+#if($needAddDateRange)
+    let params = queryParams.value;
+#foreach ($column in $columns)
+#if($column.htmlType == "datetime" && $column.queryType == "BETWEEN")
+#set($AttrName=$column.javaField.substring(0,1).toUpperCase() + ${column.javaField.substring(1)})
+    params = apply${AttrName}DateRange(params);
+#end
+#end
+    const res = await list${BusinessName}(params);
+#else
+    const res = await list${BusinessName}(queryParams.value);
+#end
+    const data = handleTree<${BusinessName}VO>(res.data, '${treeCode}', '${treeParentCode}');
+    if (data) {
+      ${businessName}List.value = data;
+    }
+  });
+};
+
+/** 查询${functionName}下拉树结构 */
+const getTreeselect = async (excludeId?: string | number) => {
+  const res = await list${BusinessName}();
+  const data: ${BusinessName}Option = { ${treeCode}: ${treeRootValueTsLiteral}, ${treeName}: '顶级节点', children: [] };
+  data.children = handleTree<${BusinessName}Option>(res.data, '${treeCode}', '${treeParentCode}');
+  all${BusinessName}Options.value = [data];
+  ${businessName}Options.value = excludeId != null ? filterTreeOptions(all${BusinessName}Options.value, excludeId) : all${BusinessName}Options.value;
+};
+
+/** 取消按钮 */
+const cancel = () => {
+  reset();
+  closeDialog();
+};
+
+/** 搜索按钮操作 */
+const handleQuery = () => {
+  getList();
+};
+
+const { resetQuery } = useSearchReset({
+  queryFormRef,
+  queryParams,
+  resetExtras: () => {
+#foreach ($column in $columns)
+#if($column.htmlType == "datetime" && $column.queryType == "BETWEEN")
+#set($AttrName=$column.javaField.substring(0,1).toUpperCase() + ${column.javaField.substring(1)})
+    reset${AttrName}DateRange();
+#end
+#end
+  },
+  afterReset: () => {
+    handleQuery();
+  }
+});
+
+/** 新增按钮操作 */
+const handleAdd = (row?: ${BusinessName}VO) => {
+  openDialog('添加${functionName}');
+  getTreeselect();
+  if (row != null && row.${treeCode}) {
+    form.value.${treeParentCode} = row.${treeCode};
+  } else {
+    form.value.${treeParentCode} = ${treeRootValueTsLiteral};
+  }
+};
+
+/** 修改按钮操作 */
+const handleUpdate = async (row: ${BusinessName}VO) => {
+  reset();
+  await getTreeselect(row.${treeCode});
+  if (row != null) {
+    form.value.${treeParentCode} = row.${treeParentCode};
+  }
+  const res = await get${BusinessName}(row.${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
+  showDialog('修改${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));
+      }
+      modal.msgSuccess('操作成功');
+      closeDialog();
+      await getList();
+    }
+  });
+};
+
+/** 删除按钮操作 */
+const handleDelete = async (row: ${BusinessName}VO) => {
+  await modal.confirm('是否确认删除${functionName}编号为"' + row.${pkColumn.javaField} + '"的数据项？');
+  setLoading(true);
+  await del${BusinessName}(row.${pkColumn.javaField}).finally(() => setLoading(false));
+  await getList();
+  modal.msgSuccess('删除成功');
+};
+
+const filterTreeOptions = (options: ${BusinessName}Option[], excludeId: string | number): ${BusinessName}Option[] => {
+  return options
+    .filter(item => item.${treeCode} !== excludeId)
+    .map(item => ({
+      ...item,
+      children: item.children ? filterTreeOptions(item.children, excludeId) : []
+    }));
+};
+
+#if($enableStatus)
+/** 状态修改 */
+const handleStatusChange = async (row: ${BusinessName}VO) => {
+  const text = row.${statusField} === ${statusField}ActiveValue ? '启用' : '停用';
+  try {
+    await modal.confirm('确认要"' + text + '"吗?');
+    await change${BusinessName}Status(row.${pkColumn.javaField}, row.${statusField});
+    modal.msgSuccess(text + '成功');
+  } catch (err) {
+    row.${statusField} = row.${statusField} === ${statusField}ActiveValue ? ${statusField}InactiveValue : ${statusField}ActiveValue;
+  }
+};
+#end
+
+#if($enableSort)
+/** 排序调整 */
+const handleSortChange = async (row: ${BusinessName}VO) => {
+  try {
+    await update${BusinessName}Sort(row.${pkColumn.javaField}, row.${sortField});
+    modal.msgSuccess('排序更新成功');
+  } catch (err) {
+    await getList();
+  }
+};
+#end
+
+#if($enableExport)
+/** 导出按钮操作 */
+const handleExport = () => {
+  requestDownload(
+    '${moduleName}/${businessName}/export',
+    {
+      ...queryParams.value
+    },
+    `${businessName}_#[[${new Date().getTime()}]]#.xlsx`
+  );
+};
+#end
+
+onMounted(() => {
+  getList();
+});
+</script>
@@ -0,0 +1,650 @@
+<template>
+  <div class="p-2 page-shell ${moduleName}-${businessName}-page">
+    <div class="search-wrap">
+      <el-card shadow="hover" class="search-panel" :class="{ 'is-collapsed': !showSearch }">
+        <template #header>
+          <div class="panel-heading search-panel-toggle" @click.stop="showSearch = !showSearch">
+            <div><h3>筛选条件</h3></div>
+          </div>
+        </template>
+        <el-form ref="queryFormRef" :model="queryParams" :inline="true" class="query-form">
+#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 == "inputNumber")
+            <el-form-item label="${comment}" prop="${column.javaField}">
+              <el-input-number v-model="queryParams.${column.javaField}" controls-position="right" />
+            </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 == "switch" && "" != $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 == "switch")
+            <el-form-item label="${comment}" prop="${column.javaField}">
+              <el-select v-model="queryParams.${column.javaField}" placeholder="请选择${comment}" clearable >
+#if($column.javaType == "Boolean")
+                <el-option label="是" :value="true" />
+                <el-option label="否" :value="false" />
+#elseif($column.javaType == "Integer" || $column.javaType == "Long")
+                <el-option label="开启" :value="0" />
+                <el-option label="关闭" :value="1" />
+#else
+                <el-option label="开启" value="0" />
+                <el-option label="关闭" value="1" />
+#end
+              </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>
+
+    <el-card shadow="hover" class="table-panel">
+      <template #header>
+        <div class="toolbar-shell">
+          <div class="table-heading">
+            <h3>${functionName}列表</h3>
+          </div>
+          <div class="toolbar-actions">
+            <el-button type="primary" plain icon="Plus" @click="handleAdd" v-hasPermi="['${moduleName}:${businessName}:add']">新增</el-button>
+            <el-button type="success" plain icon="Edit" :disabled="single" @click="handleUpdate()" v-hasPermi="['${moduleName}:${businessName}:edit']">修改</el-button>
+            <el-button type="danger" plain icon="Delete" :disabled="multiple" @click="handleDelete()" v-hasPermi="['${moduleName}:${businessName}:remove']">删除</el-button>
+#if($enableExport)
+            <el-button type="warning" plain icon="Download" @click="handleExport" v-hasPermi="['${moduleName}:${businessName}:export']">导出</el-button>
+#end
+            <right-toolbar v-model:show-search="showSearch" :search="false" @query-table="getList"></right-toolbar>
+          </div>
+        </div>
+      </template>
+
+      <el-table v-loading="loading" border class="data-table" :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($enableStatus && $statusField == $javaField)
+        <el-table-column label="${comment}" align="center" prop="${javaField}">
+          <template #default="scope">
+            <el-switch
+              v-model="scope.row.${javaField}"
+              :active-value="${statusField}ActiveValue"
+              :inactive-value="${statusField}InactiveValue"
+              @change="handleStatusChange(scope.row)"
+            />
+          </template>
+        </el-table-column>
+#elseif($enableSort && $sortField == $javaField)
+        <el-table-column label="${comment}" align="center" prop="${javaField}" width="160">
+          <template #default="scope">
+#if($column.javaType == "LocalDateTime")
+            <el-date-picker
+              v-model="scope.row.${javaField}"
+              type="datetime"
+              value-format="YYYY-MM-DD HH:mm:ss"
+              placeholder="选择${comment}"
+              @change="handleSortChange(scope.row)"
+            />
+#else
+            <el-input-number v-model="scope.row.${javaField}" controls-position="right" :min="0" @change="handleSortChange(scope.row)" />
+#end
+          </template>
+        </el-table-column>
+#elseif($column.list && $column.htmlType == "switch")
+        <el-table-column label="${comment}" align="center" prop="${javaField}" width="120">
+          <template #default="scope">
+            <el-switch
+              v-model="scope.row.${javaField}"
+#if($column.javaType == "Boolean")
+              :active-value="true"
+              :inactive-value="false"
+#elseif($column.javaType == "Integer" || $column.javaType == "Long")
+              :active-value="0"
+              :inactive-value="1"
+#else
+              active-value="0"
+              inactive-value="1"
+#end
+              disabled
+            />
+          </template>
+        </el-table-column>
+#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.dictColumn)
+        <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
+#if($enableStatus && !$statusColumn.list)
+        <el-table-column label="${statusColumn.columnComment}" align="center" prop="${statusField}">
+          <template #default="scope">
+            <el-switch
+              v-model="scope.row.${statusField}"
+#if($statusColumn.javaType == "Boolean")
+              :active-value="true"
+              :inactive-value="false"
+#elseif($statusColumn.javaType == "Integer" || $statusColumn.javaType == "Long")
+              :active-value="0"
+              :inactive-value="1"
+#else
+              active-value="0"
+              inactive-value="1"
+#end
+              @change="handleStatusChange(scope.row)"
+            />
+          </template>
+        </el-table-column>
+#end
+#if($enableSort && !$sortColumn.list)
+        <el-table-column label="${sortColumn.columnComment}" align="center" prop="${sortField}" width="160">
+          <template #default="scope">
+#if($sortColumn.javaType == "LocalDateTime")
+            <el-date-picker
+              v-model="scope.row.${sortField}"
+              type="datetime"
+              value-format="YYYY-MM-DD HH:mm:ss"
+              placeholder="选择${sortColumn.columnComment}"
+              @change="handleSortChange(scope.row)"
+            />
+#else
+            <el-input-number v-model="scope.row.${sortField}" controls-position="right" :min="0" @change="handleSortChange(scope.row)" />
+#end
+          </template>
+        </el-table-column>
+#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 == "inputNumber")
+        <el-form-item label="${comment}" prop="${field}">
+          <el-input-number v-model="form.${field}" controls-position="right" />
+        </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 == "switch")
+        <el-form-item label="${comment}" prop="${field}">
+          <el-switch
+            v-model="form.${field}"
+#if($column.javaType == "Boolean")
+            :active-value="true"
+            :inactive-value="false"
+#elseif($column.javaType == "Integer" || $column.javaType == "Long")
+            :active-value="0"
+            :inactive-value="1"
+#else
+            active-value="0"
+            inactive-value="1"
+#end
+          />
+        </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>
+
+#set($needAddDateRange = false)
+#foreach ($column in $columns)
+#if($column.htmlType == "datetime" && $column.queryType == "BETWEEN")
+#set($needAddDateRange = true)
+#end
+#end
+<script setup name="${BusinessName}" lang="ts">
+import {
+  add${BusinessName},
+#if($enableStatus)
+  change${BusinessName}Status,
+#end
+  del${BusinessName},
+  get${BusinessName},
+  list${BusinessName},
+#if($enableSort)
+  update${BusinessName}Sort,
+#end
+  update${BusinessName}
+} from '@/api/${moduleName}/${businessName}';
+import { ${BusinessName}Form, ${BusinessName}Query, ${BusinessName}VO } from '@/api/${moduleName}/${businessName}/types';
+import { useLoading } from '@/hooks/async/useLoading';
+import { useFormDialog } from '@/hooks/dialog/useFormDialog';
+#if($needAddDateRange)
+import { useDateRangeQuery } from '@/hooks/form/useDateRangeQuery';
+#end
+import { useSearchReset } from '@/hooks/form/useSearchReset';
+import { useSearchToggle } from '@/hooks/form/useSearchToggle';
+import { useTableSelection } from '@/hooks/table/useTableSelection';
+#if(${dicts} != '')
+import { useDict } from '@/utils/dict';
+#end
+import modal from '@/plugins/modal';
+#if($enableExport)
+import { download as requestDownload } from '@/utils/request';
+#end
+
+#if(${dicts} != '')
+#set($dictsNoSymbol=$dicts.replace("'", ""))
+const { ${dictsNoSymbol} } = toRefs<any>(useDict(${dicts}));
+#end
+
+#if($enableStatus)
+const ${statusField}ActiveValue = #if($statusColumn.javaType == "Boolean")true#elseif($statusColumn.javaType == "Integer" || $statusColumn.javaType == "Long")0#else'0'#end;
+const ${statusField}InactiveValue = #if($statusColumn.javaType == "Boolean")false#elseif($statusColumn.javaType == "Integer" || $statusColumn.javaType == "Long")1#else'1'#end;
+#end
+
+const ${businessName}List = ref<${BusinessName}VO[]>([]);
+const buttonLoading = ref(false);
+const { loading, withLoading } = useLoading(true);
+const { showSearch } = useSearchToggle();
+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: dateRange${AttrName},
+  applyDateRange: apply${AttrName}DateRange,
+  resetDateRange: reset${AttrName}DateRange
+} = useDateRangeQuery('${AttrName}');
+#end
+#end
+
+const queryFormRef = ref<ElFormInstance>();
+const ${businessName}FormRef = ref<ElFormInstance>();
+
+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" || $column.htmlType == "switch" || $column.htmlType == "inputNumber")"change"#else"blur"#end }
+    ]#if($foreach.count != $columns.size()),#end
+#end
+#end
+#end
+  }
+});
+
+const { queryParams, form, rules } = toRefs(data);
+const { ids, single, multiple, handleSelectionChange } = useTableSelection<${BusinessName}VO>(item => item.${pkColumn.javaField});
+const { dialog, resetForm: reset, openDialog, showDialog, closeDialog } = useFormDialog({
+  form,
+  formRef: ${businessName}FormRef,
+  initialFormData: initFormData
+});
+
+/** 查询${functionName}列表 */
+const getList = async () => {
+  await withLoading(async () => {
+#if($needAddDateRange)
+    let params = queryParams.value;
+#foreach ($column in $columns)
+#if($column.htmlType == "datetime" && $column.queryType == "BETWEEN")
+#set($AttrName=$column.javaField.substring(0,1).toUpperCase() + ${column.javaField.substring(1)})
+    params = apply${AttrName}DateRange(params);
+#end
+#end
+    const res = await list${BusinessName}(params);
+#else
+    const res = await list${BusinessName}(queryParams.value);
+#end
+    ${businessName}List.value = res.data?.rows;
+    total.value = res.data?.total;
+  });
+};
+
+/** 取消按钮 */
+const cancel = () => {
+  reset();
+  closeDialog();
+};
+
+/** 搜索按钮操作 */
+const handleQuery = () => {
+  queryParams.value.pageNum = 1;
+  getList();
+};
+
+const { resetQuery } = useSearchReset({
+  queryFormRef,
+  queryParams,
+  pageNumKey: 'pageNum',
+  pageSizeKey: 'pageSize',
+  initialPageSize: 10,
+  resetExtras: () => {
+#foreach ($column in $columns)
+#if($column.htmlType == "datetime" && $column.queryType == "BETWEEN")
+#set($AttrName=$column.javaField.substring(0,1).toUpperCase() + ${column.javaField.substring(1)})
+    reset${AttrName}DateRange();
+#end
+#end
+  },
+  afterReset: () => {
+    handleQuery();
+  }
+});
+
+/** 新增按钮操作 */
+const handleAdd = () => {
+  openDialog('添加${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
+  showDialog('修改${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));
+      }
+      modal.msgSuccess('操作成功');
+      closeDialog();
+      await getList();
+    }
+  });
+};
+
+/** 删除按钮操作 */
+const handleDelete = async (row?: ${BusinessName}VO) => {
+  const _${pkColumn.javaField}s = row?.${pkColumn.javaField} || ids.value;
+  await modal.confirm('是否确认删除${functionName}编号为"' + _${pkColumn.javaField}s + '"的数据项？');
+  await del${BusinessName}(_${pkColumn.javaField}s);
+  modal.msgSuccess('删除成功');
+  await getList();
+};
+
+/** 导出按钮操作 */
+#if($enableExport)
+const handleExport = () => {
+  requestDownload(
+    '${moduleName}/${businessName}/export',
+    {
+      ...queryParams.value
+    },
+    `${businessName}_#[[${new Date().getTime()}]]#.xlsx`
+  );
+};
+#end
+
+#if($enableStatus)
+/** 状态修改 */
+const handleStatusChange = async (row: ${BusinessName}VO) => {
+  const text = row.${statusField} === ${statusField}ActiveValue ? '启用' : '停用';
+  try {
+    await modal.confirm('确认要"' + text + '"吗?');
+    await change${BusinessName}Status(row.${pkColumn.javaField}, row.${statusField});
+    modal.msgSuccess(text + '成功');
+  } catch (err) {
+    row.${statusField} = row.${statusField} === ${statusField}ActiveValue ? ${statusField}InactiveValue : ${statusField}ActiveValue;
+  }
+};
+#end
+
+#if($enableSort)
+/** 排序调整 */
+const handleSortChange = async (row: ${BusinessName}VO) => {
+  try {
+    await update${BusinessName}Sort(row.${pkColumn.javaField}, row.${sortField});
+    modal.msgSuccess('排序更新成功');
+  } catch (err) {
+    await getList();
+  }
+};
+#end
+
+onMounted(() => {
+  getList();
+});
+</script>