From 441fb733d892331c1723b5b4bda7f00b1ada3da2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=96=AF=E7=8B=82=E7=9A=84=E7=8B=AE=E5=AD=90Li?=
 <15040126243@163.com>
Date: Wed, 3 Jun 2026 14:08:57 +0800
Subject: [PATCH] =?UTF-8?q?update=20=E5=A2=9E=E5=8A=A0=20=E4=BB=A3?=
 =?UTF-8?q?=E7=A0=81=E7=94=9F=E6=88=90=E6=A8=A1=E6=9D=BF=20=E4=BC=98?=
 =?UTF-8?q?=E5=8C=96=20skill=20=E5=86=85=E5=AE=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .codex/skills/frontend-crud-coding/SKILL.md   |  20 +-
 .../frontend-crud-coding/agents/openai.yaml   |   4 +-
 .../references/examples.md                    |   8 +-
 .../references/frontend.md                    |  21 +-
 gen/ts/api.ts.vm                              | 100 +++
 gen/ts/types.ts.vm                            |  61 ++
 gen/vue/index-tree.vue.vm                     | 730 ++++++++++++++++++
 gen/vue/index.vue.vm                          | 650 ++++++++++++++++
 8 files changed, 1573 insertions(+), 21 deletions(-)
 create mode 100644 gen/ts/api.ts.vm
 create mode 100644 gen/ts/types.ts.vm
 create mode 100644 gen/vue/index-tree.vue.vm
 create mode 100644 gen/vue/index.vue.vm

diff --git a/.codex/skills/frontend-crud-coding/SKILL.md b/.codex/skills/frontend-crud-coding/SKILL.md
index 80eb2cc..1e23211 100644
--- a/.codex/skills/frontend-crud-coding/SKILL.md
+++ b/.codex/skills/frontend-crud-coding/SKILL.md
@@ -1,11 +1,11 @@
 ---
 name: frontend-crud-coding
-description: 在当前 plus-ui-new 前端项目中按真实 Vue 3 + TypeScript + Element Plus + oxlint/oxfmt 代码风格生成或修改页面、API、types、hooks 接入和样式壳。用于新增或修改标准 CRUD 列表页、树表页、系统管理页、监控页、workflow 页面、demo 页面，补齐与 RuoYi-Vue-Plus boot4 后端接口对应的 src/api、types 和 src/views 代码；触发后应先读取适用 references，再阅读目标模块真实代码和后端 generator 前端模板。
+description: 在当前 plus-ui-new 前端项目中按真实 Vue 3 + TypeScript + Element Plus + oxlint/oxfmt 代码风格生成或修改页面、API、types、hooks 接入和样式壳。用于新增或修改标准 CRUD 列表页、树表页、系统管理页、监控页、workflow 页面、demo 页面，补齐与后端接口对应的 src/api、types 和 src/views 代码；触发后应先读取适用 references，再阅读目标模块真实代码和项目内 gen 代码生成模板。
 ---
 
 # 前端编码规范
 
-先对齐当前前端项目里的真实实现，再参考关联后端工程的代码生成器模板。不要只套通用 Vue 模板，也不要把 generator 模板原样复制进来而忽略当前项目已经演进出的 hooks、页面壳、类型入口和下载方式。
+先对齐当前前端项目里的真实实现，再参考项目内 `gen` 目录下的代码生成模板。不要只套通用 Vue 模板，也不要把 generator 模板原样复制进来而忽略当前项目已经演进出的 hooks、页面壳、类型入口和下载方式。
 
 ## 执行流程
 
@@ -16,7 +16,11 @@ description: 在当前 plus-ui-new 前端项目中按真实 Vue 3 + TypeScript +
    - 树表优先看 `src/views/demo/tree/index.vue`、`src/views/workflow/category/index.vue`。
    - 系统复杂页优先看 `src/views/system/user/index.vue`、`system/role`、`system/post`、`system/config`。
    - workflow 业务页优先看 `src/views/workflow/*` 同类页面。
-4. 新增标准页面前，对照后端工程 `D:\git-sources\Plus相关\RuoYi-Vue-Plus-boot4\ruoyi-modules\ruoyi-gen\src\main\resources\vm\ts` 和 `vm\vue` 模板确认基础骨架。
+4. 新增标准页面前，对照项目内模板确认基础骨架：
+   - API 模板：`gen/ts/api.ts.vm`
+   - types 模板：`gen/ts/types.ts.vm`
+   - 标准单表页模板：`gen/vue/index.vue.vm`
+   - 树表页模板：`gen/vue/index-tree.vue.vm`
 5. 新增代码时通常同步维护 `src/api/<module>/<business>/index.ts`、`types.ts`、`src/views/<module>/<business>/index.vue`。
 6. 增强已有页面时只做增量修改，保留原页面的树筛选、导入导出、列显隐、权限、字典、弹窗和路由跳转能力。
 7. 修改完成后按影响范围运行验证：优先 `pnpm exec vue-tsc --noEmit`，改动页面或导入时再跑 `pnpm lint`，大范围变更再跑 `pnpm build`。
@@ -33,13 +37,13 @@ description: 在当前 plus-ui-new 前端项目中按真实 Vue 3 + TypeScript +
 
 1. 目标目录下最近似页面、API、types 的真实实现。
 2. 当前项目公共 hooks、组件、工具和样式约定。
-3. 关联后端工程中的 generator 前端模板。
+3. 项目内 `gen` 代码生成模板。
 4. 通用 Vue 3 / Element Plus 习惯。
 
 也就是说：
 
 - 同模块已有页面怎么写，优先怎么写。
-- 没有现成页面时，使用 generator 模板作为骨架，再改成当前项目风格。
+- 没有现成页面时，使用项目内 `gen` 模板作为骨架，再改成当前项目风格。
 - 复杂模块不能为了“标准 CRUD”退化成裸模板页。
 
 ## 仓库通用规则
@@ -81,7 +85,7 @@ description: 在当前 plus-ui-new 前端项目中按真实 Vue 3 + TypeScript +
 
 ### 1. 标准单表 CRUD
 
-以后端 generator 模板和 `src/views/demo/demo/index.vue` 为主要起点，补齐列表、搜索、分页、新增、编辑、删除、导出、权限、类型和验证。
+以 `gen/vue/index.vue.vm`、`gen/ts/*.vm` 和 `src/views/demo/demo/index.vue` 为主要起点，补齐列表、搜索、分页、新增、编辑、删除、导出、权限、类型和验证。
 
 ### 2. 树表 CRUD
 
@@ -107,7 +111,7 @@ workflow 目录优先参考 `src/views/workflow/*`。流程定义、流程实例
 - API 路径、函数名、权限标识与后端接口保持一致。
 - 标准页查询、重置、分页、弹窗、提交、删除、导出流程闭环完整。
 - 复杂页面保留原有交互能力和业务约束。
-- 代码体现当前项目 hooks、页面壳和下载方式，而不是 generator 裸输出。
+- 代码体现当前项目 hooks、页面壳和下载方式，而不是 `gen` 模板裸输出。
 - 交付前说明运行过的验证命令；如果无法验证，说明原因。
 
 ## 快速检查清单
@@ -135,5 +139,5 @@ workflow 目录优先参考 `src/views/workflow/*`。流程定义、流程实例
 
 例如：
 
-- 使用 `$frontend-crud-coding` 为 `/system/client` 补一套标准 CRUD 页面，参考 `demo/demo`、`system/client` 和 boot4 generator 模板。
+- 使用 `$frontend-crud-coding` 为 `/system/client` 补一套标准 CRUD 页面，参考 `gen` 模板、`demo/demo` 和 `system/client`。
 - 使用 `$frontend-crud-coding` 修改 `workflow/category` 列表页，增加导出按钮和状态筛选，保持当前 workflow 风格。
diff --git a/.codex/skills/frontend-crud-coding/agents/openai.yaml b/.codex/skills/frontend-crud-coding/agents/openai.yaml
index 76e9efe..0999fc7 100644
--- a/.codex/skills/frontend-crud-coding/agents/openai.yaml
+++ b/.codex/skills/frontend-crud-coding/agents/openai.yaml
@@ -1,7 +1,7 @@
 interface:
   display_name: "前端编码"
-  short_description: "按 plus-ui-new 真实代码和 boot4 模板编写前端 CRUD"
-  default_prompt: "使用 $frontend-crud-coding 先读取适用 reference，再按当前 plus-ui-new 真实页面、hooks、API/types 约定和 boot4 generator 模板实现前端修改。"
+  short_description: "按 plus-ui-new 真实代码和 gen 模板编写前端 CRUD"
+  default_prompt: "使用 $frontend-crud-coding 先读取适用 reference，再按当前 plus-ui-new 真实页面、hooks、API/types 约定和项目内 gen 模板实现前端修改。"
 
 policy:
   allow_implicit_invocation: true
diff --git a/.codex/skills/frontend-crud-coding/references/examples.md b/.codex/skills/frontend-crud-coding/references/examples.md
index a87e0f1..e816f1f 100644
--- a/.codex/skills/frontend-crud-coding/references/examples.md
+++ b/.codex/skills/frontend-crud-coding/references/examples.md
@@ -7,14 +7,14 @@
 ```text
 使用 $frontend-crud-coding 为 system/client 补一套前端 CRUD 页面。
 后端接口已经有 /system/client/list、/system/client/{id}、POST /system/client、PUT /system/client、DELETE /system/client/{ids}。
-请参考 boot4 generator 模板、src/views/demo/demo/index.vue 和现有 system/client 风格实现。
+请参考项目内 gen 模板、src/views/demo/demo/index.vue 和现有 system/client 风格实现。
 ```
 
 ### 期望执行方式
 
 - 先看 `src/api/system/client/*` 和 `src/views/system/client/index.vue` 是否已存在。
 - 再看 `src/views/demo/demo/index.vue` 的标准 hooks 版 CRUD 骨架。
-- 对照 boot4 generator 的 `ts/api.ts.vm`、`ts/types.ts.vm`、`vue/index.vue.vm`。
+- 对照项目内 `gen/ts/api.ts.vm`、`gen/ts/types.ts.vm`、`gen/vue/index.vue.vm`。
 - 生成或修改 `api/index.ts`、`types.ts`、`views/.../index.vue`。
 - 使用 `AxiosPromise` from `@/utils/api-types`、`PageResult` from `@/api/types`、`useLoading`、`useFormDialog`、`useSearchReset`、`useTableSelection`。
 
@@ -88,7 +88,7 @@
 ### 用户提问示例
 
 ```text
-使用 $frontend-crud-coding 给 system/client 页面接入 PUT /system/client/changeStatus，状态字段 status，参考 generator 模板。
+使用 $frontend-crud-coding 给 system/client 页面接入 PUT /system/client/changeStatus，状态字段 status，参考 gen 模板。
 ```
 
 ### 期望执行方式
@@ -107,7 +107,7 @@
 2. 新增状态筛选和导出
 3. API 路径沿用后端接口
 4. 参考 system/config 的工具栏与导出交互
-5. 参考 boot4 generator 模板补齐缺失 types
+5. 参考 gen 模板补齐缺失 types
 ```
 
 ## 不推荐的任务描述
diff --git a/.codex/skills/frontend-crud-coding/references/frontend.md b/.codex/skills/frontend-crud-coding/references/frontend.md
index 2cf6805..8b4d72d 100644
--- a/.codex/skills/frontend-crud-coding/references/frontend.md
+++ b/.codex/skills/frontend-crud-coding/references/frontend.md
@@ -9,7 +9,11 @@
 - workflow 页：`src/views/workflow/*`、`src/api/workflow/*`。
 - 监控页：`src/views/monitor/*`、`src/api/monitor/*`。
 - 公共 hooks：`src/hooks/async/useLoading.ts`、`src/hooks/dialog/*`、`src/hooks/form/*`、`src/hooks/table/*`、`src/hooks/tree/*`。
-- 后端 generator 模板：`D:\git-sources\Plus相关\RuoYi-Vue-Plus-boot4\ruoyi-modules\ruoyi-gen\src\main\resources\vm\ts\*.vm` 与 `vm\vue\*.vm`。
+- 项目内 generator 模板：
+  `gen/ts/api.ts.vm`
+  `gen/ts/types.ts.vm`
+  `gen/vue/index.vue.vm`
+  `gen/vue/index-tree.vue.vm`
 
 ## 基础栈与格式
 
@@ -40,7 +44,7 @@
   `changeXxxStatus` -> `PUT /<module>/<business>/changeStatus`
 - query string 用 `params`，请求体用 `data`。
 - 加密、防重复提交等 headers 直接写在请求配置里，例如用户重置密码中的 `isEncrypt`、`repeatSubmit`。
-- 当前仓库有些 API 使用 `export const`，有些使用 `export function`；新增标准 CRUD 优先跟随 generator 和相邻模块。
+- 当前仓库有些 API 使用 `export const`，有些使用 `export function`；新增标准 CRUD 优先跟随 `gen/ts/api.ts.vm` 和相邻模块。
 - 只有相邻模块已有 `export default { ... }` 聚合时才新增默认导出。
 
 ## 类型文件规则
@@ -121,12 +125,15 @@
 - 新增子节点时从当前行回填 `parentId`。
 - 删除确认文案优先使用业务名称，而不是批量 ID 文案。
 
-## 与生成器模板的关系
+## 与 gen 模板的关系
 
-- generator 模板是标准骨架，不是最终答案。
-- 当前前端项目已经把 generator 风格升级为 hooks 版：`useLoading`、`useFormDialog`、`useSearchReset`、`useTableSelection`、`useDateRangeQuery`。
-- 新增标准 CRUD 时，先从 generator 确认字段、权限、导出、状态切换、排序、日期范围等，再落成当前项目的实际页面壳。
-- 修改已有页面时，不要把现有强业务逻辑替换回 generator 的简化逻辑。
+- `gen` 是当前前端项目内的生成模板，优先于外部后端工程拷贝的模板。
+- 新增标准单表页面时读取 `gen/vue/index.vue.vm`、`gen/ts/api.ts.vm`、`gen/ts/types.ts.vm`。
+- 新增树表页面时读取 `gen/vue/index-tree.vue.vm`、`gen/ts/api.ts.vm`、`gen/ts/types.ts.vm`。
+- `gen` 模板是标准骨架，不是最终答案；落地时仍要对照目标模块真实页面和公共 hooks。
+- 当前前端项目已经把生成页升级为 hooks 版：`useLoading`、`useFormDialog`、`useSearchReset`、`useTableSelection`、`useDateRangeQuery`。
+- 新增标准 CRUD 时，先从 `gen` 确认字段、权限、导出、状态切换、排序、日期范围等，再落成当前项目的实际页面壳。
+- 修改已有页面时，不要把现有强业务逻辑替换回 `gen` 的简化逻辑。
 
 ## 验证规则
 
diff --git a/gen/ts/api.ts.vm b/gen/ts/api.ts.vm
new file mode 100644
index 0000000..79205e3
--- /dev/null
+++ b/gen/ts/api.ts.vm
@@ -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'
+  });
+};
diff --git a/gen/ts/types.ts.vm b/gen/ts/types.ts.vm
new file mode 100644
index 0000000..eeef5f5
--- /dev/null
+++ b/gen/ts/types.ts.vm
@@ -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;
+}
diff --git a/gen/vue/index-tree.vue.vm b/gen/vue/index-tree.vue.vm
new file mode 100644
index 0000000..91f52bd
--- /dev/null
+++ b/gen/vue/index-tree.vue.vm
@@ -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>
diff --git a/gen/vue/index.vue.vm b/gen/vue/index.vue.vm
new file mode 100644
index 0000000..8773322
--- /dev/null
+++ b/gen/vue/index.vue.vm
@@ -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>