From 355b5fe5e41ab3fc65016e8d9e687471b48c93eb Mon Sep 17 00:00:00 2001
From: xlsea <m@xlsea.cn>
Date: Tue, 28 Oct 2025 15:32:47 +0800
Subject: [PATCH] =?UTF-8?q?feat-wip(docs):=20=E4=BB=A3=E7=A0=81=E7=94=9F?=
 =?UTF-8?q?=E6=88=90=E6=A8=A1=E6=9D=BF=E9=80=82=E9=85=8D=20Soybean=202.0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 docs/java/VelocityUtils.java                |  1 +
 docs/template/index-tree.vue.vm             | 56 ++++++++++-----------
 docs/template/index.vue.vm                  | 56 ++++++++++-----------
 docs/template/modules/operate-drawer.vue.vm | 45 +++++++++++++----
 docs/template/modules/search.vue.vm         | 14 ++++--
 5 files changed, 98 insertions(+), 74 deletions(-)

diff --git a/docs/java/VelocityUtils.java b/docs/java/VelocityUtils.java
index 2c540be1..924b0963 100644
--- a/docs/java/VelocityUtils.java
+++ b/docs/java/VelocityUtils.java
@@ -74,6 +74,7 @@ public class VelocityUtils {
         velocityContext.put("permissionPrefix", getPermissionPrefix(moduleName, businessName));
         velocityContext.put("dicts", getDicts(genTable));
         velocityContext.put("dictList", getDictList(genTable));
+        velocityContext.put("pkColumn", genTable.getPkColumn());
         velocityContext.put("columns", genTable.getColumns());
         velocityContext.put("table", genTable);
         velocityContext.put("StrUtil", new StrUtil());
diff --git a/docs/template/index-tree.vue.vm b/docs/template/index-tree.vue.vm
index 4339958a..2bf0c7dc 100644
--- a/docs/template/index-tree.vue.vm
+++ b/docs/template/index-tree.vue.vm
@@ -1,11 +1,12 @@
 <script setup lang="tsx">
+import { ref } from 'vue';
 import { NDivider } from 'naive-ui';
 import { jsonClone } from '@sa/utils';
 import { type TableDataWithIndex } from '@sa/hooks';
 import { fetchBatchDelete${BusinessName}, fetchGet${BusinessName}List } from '@/service/api/${moduleName}/${business__name}';
 import { useAppStore } from '@/store/modules/app';
 import { useAuth } from '@/hooks/business/auth';
-import { useTreeTable, useTreeTableOperate } from '@/hooks/common/tree-table';
+import { treeTransform, useNaiveTreeTable, useTableOperate } from '@/hooks/common/table';
 import { useDownload } from '@/hooks/business/download';
 import { $t } from '@/locales';
 import ButtonIcon from '@/components/custom/button-icon.vue';
@@ -20,36 +21,31 @@ const appStore = useAppStore();
 const { download } = useDownload();
 const { hasAuth } = useAuth();
 
+const searchParams = ref<Api.$ModuleName.${BusinessName}SearchParams>({
+#foreach ($column in $columns)
+  #if($column.query)
+  $column.javaField: null#if($foreach.hasNext),#end
+  #end
+#end
+  params: {}
+});
+
 const {
   columns,
   columnChecks,
   data,
+  rows,
   getData,
   loading,
-  searchParams,
-  resetSearchParams,
   expandedRowKeys,
   isCollapse,
   expandAll,
-  collapseAll
-} = useTreeTable({
-  apiFn: fetchGet${BusinessName}List,
-  apiParams: {
-    pageNum: 1,
-    pageSize: 10,
-    // if you want to use the searchParams in Form, you need to define the following properties, and the value is null
-    // the value can not be undefined, otherwise the property in Form will not be reactive
-#foreach ($column in $columns)
-  #if($column.query)
-    $column.javaField: null#if($foreach.hasNext),#end
-  #end
-#end
-    params: {}
-  },
-  idField: '#foreach($column in $columns)#if($column.isPk == '1')$column.javaField#end#end',
-#if(${treeParentCode} && ${treeParentCode} != 'parentId')
-  parentIdField: '${treeParentCode}',
-#end
+  collapseAll,
+  scrollX
+} = useNaiveTreeTable({
+  keyField: '$pkColumn.javaField',
+  api: () => fetchGet${BusinessName}List(searchParams),
+  transform: response => treeTransform(response, { idField: '$pkColumn.javaField' }),
   columns: () => [
     {
       type: 'selection',
@@ -130,7 +126,7 @@ const {
 });
 
 const { drawerVisible, operateType, editingData, handleAdd, handleEdit, checkedRowKeys, onBatchDeleted, onDeleted } =
-  useTreeTableOperate(data, getData);
+  useTableOperate(rows, '$pkColumn.javaField', getData);
 
 async function handleBatchDelete() {
   // request
@@ -139,18 +135,18 @@ async function handleBatchDelete() {
   onBatchDeleted();
 }
 
-async function handleDelete(#foreach($column in $columns)#if($column.isPk == '1')$column.javaField#end#end: CommonType.IdType) {
+async function handleDelete($pkColumn.javaField: CommonType.IdType) {
   // request
-  const { error } = await fetchBatchDelete${BusinessName}([#foreach($column in $columns)#if($column.isPk == '1')$column.javaField#end#end]);
+  const { error } = await fetchBatchDelete${BusinessName}([$pkColumn.javaField]);
   if (error) return;
   onDeleted();
 }
 
-function edit(row: TableDataWithIndex<Api.$ModuleName.${BusinessName}>) {
-  handleEdit(row);
+function edit($pkColumn.javaField: CommonType.IdType) {
+  handleEdit($pkColumn.javaField);
 }
 
-function addInRow(row: TableDataWithIndex<Api.$ModuleName.${BusinessName}>) {
+function addInRow(row: Api.$ModuleName.${BusinessName}) {
   editingData.value = jsonClone(row);
   handleAdd();
 }
@@ -162,7 +158,7 @@ function handleExport() {
 
 <template>
   <div class="min-h-500px flex-col-stretch gap-16px overflow-hidden lt-sm:overflow-auto">
-    <${BusinessName}Search v-model:model="searchParams" @reset="resetSearchParams" @search="getData" />
+    <${BusinessName}Search v-model:model="searchParams" @reset="getData" @search="getData" />
     <NCard title="${functionName}列表" :bordered="false" size="small" class="sm:flex-1-hidden card-wrapper">
       <template #header-extra>
         <TableHeaderOperation
@@ -201,7 +197,7 @@ function handleExport() {
         size="small"
         :indent="32"
         :flex-height="!appStore.isMobile"
-        :scroll-x="962"
+        :scroll-x="scrollX"
         :loading="loading"
         remote
         :row-key="row => row.#foreach($column in $columns)#if($column.isPk == '1')$column.javaField#end#end"
diff --git a/docs/template/index.vue.vm b/docs/template/index.vue.vm
index 03bca544..a0113491 100644
--- a/docs/template/index.vue.vm
+++ b/docs/template/index.vue.vm
@@ -1,10 +1,11 @@
 <script setup lang="tsx">
+import { ref } from 'vue'
 import { NDivider } from 'naive-ui';
 import { fetchBatchDelete${BusinessName}, fetchGet${BusinessName}List } from '@/service/api/${moduleName}/${business__name}';
 import { useAppStore } from '@/store/modules/app';
 import { useAuth } from '@/hooks/business/auth';
 import { useDownload } from '@/hooks/business/download';
-import { useTable, useTableOperate } from '@/hooks/common/table';
+import { defaultTransform, useNaivePaginatedTable, useTableOperate } from '@/hooks/common/table';
 import { $t } from '@/locales';
 import ButtonIcon from '@/components/custom/button-icon.vue';
 import ${BusinessName}OperateDrawer from './modules/${business__name}-operate-drawer.vue';
@@ -18,29 +19,24 @@ const appStore = useAppStore();
 const { download } = useDownload();
 const { hasAuth } = useAuth();
 
-const {
-  columns,
-  columnChecks,
-  data,
-  getData,
-  getDataByPage,
-  loading,
-  mobilePagination,
-  searchParams,
-  resetSearchParams
-} = useTable({
-  apiFn: fetchGet${BusinessName}List,
-  apiParams: {
-    pageNum: 1,
-    pageSize: 10,
-    // if you want to use the searchParams in Form, you need to define the following properties, and the value is null
-    // the value can not be undefined, otherwise the property in Form will not be reactive
+const searchParams = ref<Api.$ModuleName.${BusinessName}SearchParams>({
+  pageNum: 1,
+  pageSize: 10,
 #foreach ($column in $columns)
   #if($column.query)
-    $column.javaField: null#if($foreach.hasNext),#end
+  $column.javaField: null#if($foreach.hasNext),#end
   #end
 #end
-    params: {}
+  params: {}
+});
+
+const { columns, columnChecks, data, getData, getDataByPage, loading, mobilePagination, scrollX } =
+  useNaivePaginatedTable({
+  api: () => fetchGet${BusinessName}List(searchParams.value),
+  transform: response => defaultTransform(response),
+  onPaginationParamsChange: params => {
+    searchParams.pageSize = params.page;
+    searchParams.pageNum = params.pageSize;
   },
   columns: () => [
     {
@@ -87,7 +83,7 @@ const {
               type="primary"
               icon="material-symbols:drive-file-rename-outline-outline"
               tooltipContent={$t('common.edit')}
-              onClick={() => edit(row.#foreach($column in $columns)#if($column.isPk == '1')$column.javaField#end#end!)}
+              onClick={() => edit(row.$pkColumn.javaField!)}
             />
           );
         };
@@ -103,7 +99,7 @@ const {
               icon="material-symbols:delete-outline"
               tooltipContent={$t('common.delete')}
               popconfirmContent={$t('common.confirmDelete')}
-              onPositiveClick={() => handleDelete(row.#foreach($column in $columns)#if($column.isPk == '1')$column.javaField#end#end!)}
+              onPositiveClick={() => handleDelete(row.$pkColumn.javaField!)}
             />
           );
         };
@@ -121,7 +117,7 @@ const {
 });
 
 const { drawerVisible, operateType, editingData, handleAdd, handleEdit, checkedRowKeys, onBatchDeleted, onDeleted } =
-  useTableOperate(data, getData);
+  useTableOperate(data, '$pkColumn.javaField', getData);
 
 async function handleBatchDelete() {
   // request
@@ -130,15 +126,15 @@ async function handleBatchDelete() {
   onBatchDeleted();
 }
 
-async function handleDelete(#foreach($column in $columns)#if($column.isPk == '1')$column.javaField#end#end: CommonType.IdType) {
+async function handleDelete($pkColumn.javaField: CommonType.IdType) {
   // request
-  const { error } = await fetchBatchDelete${BusinessName}([#foreach($column in $columns)#if($column.isPk == '1')$column.javaField#end#end]);
+  const { error } = await fetchBatchDelete${BusinessName}([$pkColumn.javaField]);
   if (error) return;
   onDeleted();
 }
 
-function edit(#foreach($column in $columns)#if($column.isPk == '1')$column.javaField#end#end: CommonType.IdType) {
-  handleEdit('#foreach($column in $columns)#if($column.isPk == '1')$column.javaField#end#end', #foreach($column in $columns)#if($column.isPk == '1')$column.javaField#end#end);
+function edit($pkColumn.javaField: CommonType.IdType) {
+  handleEdit($pkColumn.javaField);
 }
 
 function handleExport() {
@@ -148,7 +144,7 @@ function handleExport() {
 
 <template>
   <div class="min-h-500px flex-col-stretch gap-16px overflow-hidden lt-sm:overflow-auto">
-    <${BusinessName}Search v-model:model="searchParams" @reset="resetSearchParams" @search="getDataByPage" />
+    <${BusinessName}Search v-model:model="searchParams" @reset="getDataByPage" @search="getDataByPage" />
     <NCard title="${functionName}列表" :bordered="false" size="small" class="sm:flex-1-hidden card-wrapper">
       <template #header-extra>
         <TableHeaderOperation
@@ -170,10 +166,10 @@ function handleExport() {
         :data="data"
         size="small"
         :flex-height="!appStore.isMobile"
-        :scroll-x="962"
+        :scroll-x="scrollX"
         :loading="loading"
         remote
-        :row-key="row => row.#foreach($column in $columns)#if($column.isPk == '1')$column.javaField#end#end"
+        :row-key="row => row.$pkColumn.javaField"
         :pagination="mobilePagination"
         class="sm:h-full"
       />
diff --git a/docs/template/modules/operate-drawer.vue.vm b/docs/template/modules/operate-drawer.vue.vm
index ce9aa6bb..f62514c0 100644
--- a/docs/template/modules/operate-drawer.vue.vm
+++ b/docs/template/modules/operate-drawer.vue.vm
@@ -1,5 +1,6 @@
 <script setup lang="ts">
-import { computed, reactive, watch } from 'vue';
+import { computed, ref, watch } from 'vue';
+import { jsonClone } from '@sa/utils';
 import { fetchCreate${BusinessName}, fetchUpdate${BusinessName} } from '@/service/api/${moduleName}/${business__name}';
 import { useFormRules, useNaiveForm } from '@/hooks/common/form';
 #if($dictList && $dictList.size() > 0)import { useDict } from '@/hooks/business/dict';#end
@@ -14,6 +15,10 @@ interface Props {
   operateType: NaiveUI.TableOperateType;
   /** the edit row data */
   rowData?: Api.$ModuleName.${BusinessName} | null;
+#if($tplCategory == 'tree')
+  /** the tree data */
+  treeList?: Api.$ModuleName.${BusinessName}[] | null;
+#end
 }
 
 const props = defineProps<Props>();
@@ -46,12 +51,12 @@ const title = computed(() => {
 
 type Model = Api.$ModuleName.${BusinessName}OperateParams;
 
-const model: Model = reactive(createDefaultModel());
+const model = ref<Model>(createDefaultModel());
 
 function createDefaultModel(): Model {
   return {
 #foreach($column in $columns)
-  #if($column.insert)
+  #if($column.insert || $column.isEdit)
       ${column.javaField}:#if($column.javaType == 'String' || ($!column.dictType && $column.dictType != '')) ''#else undefined#end#if($foreach.hasNext),#end
   #end
 #end
@@ -74,13 +79,13 @@ const rules: Record<RuleKey, App.Global.FormRule> = {
 };
 
 function handleUpdateModelWhenEdit() {
-  if (props.operateType === 'add') {
-    Object.assign(model, createDefaultModel());
-    return;
-  }
+  model.value = createDefaultModel();
+#if($tplCategory == 'tree')
+  model.value.$table.treeParentCode = props.rowData?.$table.treeCode || 0;
+#end
 
   if (props.operateType === 'edit' && props.rowData) {
-    Object.assign(model, props.rowData);
+    Object.assign(model.value, jsonClone(props.rowData));
   }
 }
 
@@ -93,7 +98,7 @@ async function handleSubmit() {
 
   #set($operateColumns = [])
   #foreach($column in $columns)#if($column.insert || $column.edit)#set($dummy = $operateColumns.add($column))#end#end
-  const { #foreach($column in $operateColumns)$column.javaField#if($foreach.hasNext), #end#end } = model;
+  const { #foreach($column in $operateColumns)$column.javaField#if($foreach.hasNext), #end#end } = model.value;
 
   // request
   if (props.operateType === 'add') {
@@ -121,6 +126,16 @@ watch(visible, () => {
     restoreValidation();
   }
 });
+
+const treeOptions = computed(() => {
+  return [
+    {
+      id: 0,
+      treeName: '顶级节点',
+      children: props.treeList!
+    }
+  ];
+});
 </script>
 
 <template>
@@ -138,7 +153,17 @@ watch(visible, () => {
 #end
 #set($dictType=$!StrUtil.toCamelCase($column.dictType))
         <NFormItem label="$column.columnComment" path="$column.javaField">
-        #if($column.htmlType == "textarea" || $column.htmlType == "editor")
+        #if($tplCategory == 'tree' && $column.javaField == $table.treeParentCode)
+          <NTreeSelect
+            v-model:value="model.$table.treeParentCode"
+            filterable
+            class="h-full"
+            key-field="$table.treeCode"
+            label-field="$table.treeParentName"
+            :options="treeOptions"
+            :default-expanded-keys="[0]"
+          />
+        #elseif($column.htmlType == "textarea" || $column.htmlType == "editor")
           <NInput
             v-model:value="model.$column.javaField"
             :rows="3"
diff --git a/docs/template/modules/search.vue.vm b/docs/template/modules/search.vue.vm
index fc5978ab..e84b2949 100644
--- a/docs/template/modules/search.vue.vm
+++ b/docs/template/modules/search.vue.vm
@@ -31,15 +31,21 @@ const model = defineModel<Api.$ModuleName.${BusinessName}SearchParams>('model',
 const { options: ${dict.name}Options } = useDict('${dict.type}'#if($dict.immediate), false#end);
 #end#end
 
-async function reset() {
-#foreach ($column in $columns)
+const defaultModel = jsonClone(toRaw(model.value));
+
+function resetModel() {
+  #foreach ($column in $columns)
     #if($column.htmlType == "datetime" && $column.queryType == "BETWEEN")
         #set($AttrName=$column.javaField.substring(0,1).toUpperCase() + ${column.javaField.substring(1)})
   dateRange${AttrName}.value = null;
     #end
 #end
-  Object.assign(model.value.params!, {});
+  Object.assign(model.value, defaultModel);
+}
+
+async function reset() {
   await restoreValidation();
+  resetModel();
   emit('reset');
 }
 
@@ -61,7 +67,7 @@ async function search() {
 <template>
   <NCard :bordered="false" size="small" class="card-wrapper">
     <NCollapse>
-      <NCollapseItem :title="$t('common.search')" name="user-search">
+      <NCollapseItem :title="$t('common.search')" name="$moduleName-${business__name}-search">
         <NForm ref="formRef" :model="model" label-placement="left" :label-width="80">
           <NGrid responsive="screen" item-responsive>
 #foreach($column in $columns)