perf: tree table

yudao-ui-admin-vue3/src/hooks/web/useVxeCrudSchemas.ts

@@ -17,10 +17,10 @@ import { ComponentOptions } from '@/types/components'
 export type VxeCrudSchema = {
   primaryKey?: string // 主键ID
   primaryTitle?: string // 主键标题 默认为序号
-  primaryType?: VxeColumnPropTypes.Type // 不填写为数据库编号 还支持 "seq" | "radio" | "checkbox" | "expand" | "html" | null
+  primaryType?: VxeColumnPropTypes.Type // 不填写为数据库编号 null为不显示 还支持 "seq" | "radio" | "checkbox" | "expand" | "html" | null
   action?: boolean // 是否开启操作栏插槽
   actionTitle?: string // 操作栏标题 默认为操作
-  actionWidth?: string // 操作栏插槽宽度，一般2个字带图标 text 类型按钮 50-70
+  actionWidth?: string // 操作栏插槽宽度,一般2个字带图标 text 类型按钮 50-70
   columns: VxeCrudColumns[]
 }
 type VxeCrudColumns = Omit<VxeTableColumn, 'children'> & {
@@ -170,7 +170,7 @@ const filterTableSchema = (crudSchema: VxeCrudSchema): VxeGridPropTypes.Columns
   const { t } = useI18n()
   const tableSchema: VxeGridPropTypes.Columns = []
   // 主键ID
-  if (crudSchema.primaryKey) {
+  if (crudSchema.primaryKey && crudSchema.primaryType) {
     const tableSchemaItem = {
       title: crudSchema.primaryTitle ? crudSchema.primaryTitle : t('common.index'),
       field: crudSchema.primaryKey,
@@ -179,6 +179,7 @@ const filterTableSchema = (crudSchema: VxeCrudSchema): VxeGridPropTypes.Columns
     }
     tableSchema.push(tableSchemaItem)
   }
+
   eachTree(crudSchema.columns, (schemaItem: VxeCrudColumns) => {
     // 判断是否显示
     if (schemaItem?.isTable !== false && schemaItem?.table?.show !== false) {

yudao-ui-admin-vue3/src/hooks/web/useVxeGrid.ts

@@ -1,5 +1,5 @@
 import { computed, nextTick, reactive } from 'vue'
-import { SizeType, VxeGridProps } from 'vxe-table'
+import { SizeType, VxeGridProps, VxeTablePropTypes } from 'vxe-table'
 import { useAppStore } from '@/store/modules/app'
 import { VxeAllSchemas } from './useVxeCrudSchemas'
 import { useI18n } from '@/hooks/web/useI18n'
@@ -11,6 +11,7 @@ const message = useMessage() // 消息弹窗
 
 interface UseVxeGridConfig<T = any> {
   allSchemas: VxeAllSchemas
+  treeConfig?: VxeTablePropTypes.TreeConfig
   getListApi: (option: any) => Promise<T>
   deleteApi?: (option: any) => Promise<T>
   exportListApi?: (option: any) => Promise<T>
@@ -41,6 +42,7 @@ export const useVxeGrid = <T = any>(config?: UseVxeGridConfig<T>) => {
   /**
    * grid options 初始化
    */
+  console.info(config?.allSchemas.tableSchema)
   const gridOptions = reactive<VxeGridProps>({
     loading: true,
     size: currentSize as any,
@@ -62,25 +64,6 @@ export const useVxeGrid = <T = any>(config?: UseVxeGridConfig<T>) => {
       items: config?.allSchemas.searchSchema
     },
     columns: config?.allSchemas.tableSchema,
-    pagerConfig: {
-      border: false, // 带边框
-      background: true, // 带背景颜色
-      perfect: false, // 配套的样式
-      pageSize: 10, // 每页大小
-      pagerCount: 7, // 显示页码按钮的数量
-      autoHidden: true, // 当只有一页时自动隐藏
-      pageSizes: [5, 10, 20, 30, 50, 100], // 每页大小选项列表
-      layouts: [
-        'PrevJump',
-        'PrevPage',
-        'JumpNumber',
-        'NextPage',
-        'NextJump',
-        'Sizes',
-        'FullJump',
-        'Total'
-      ]
-    },
     proxyConfig: {
       seq: true, // 启用动态序号代理（分页之后索引自动计算为当前页的起始序号）
       form: true, // 启用表单代理，当点击表单提交按钮时会自动触发 reload 行为
@@ -91,8 +74,10 @@ export const useVxeGrid = <T = any>(config?: UseVxeGridConfig<T>) => {
           if (config?.queryParams) {
             queryParams = Object.assign(queryParams, config.queryParams)
           }
-          queryParams.pageSize = page.pageSize
-          queryParams.pageNo = page.currentPage
+          if (!config?.treeConfig) {
+            queryParams.pageSize = page.pageSize
+            queryParams.pageNo = page.currentPage
+          }
           gridOptions.loading = false
           return new Promise(async (resolve) => {
             resolve(await config?.getListApi(queryParams))
@@ -120,6 +105,30 @@ export const useVxeGrid = <T = any>(config?: UseVxeGridConfig<T>) => {
     }
   })
 
+  if (config?.treeConfig) {
+    gridOptions.treeConfig = config.treeConfig
+  } else {
+    gridOptions.pagerConfig = {
+      border: false, // 带边框
+      background: true, // 带背景颜色
+      perfect: false, // 配套的样式
+      pageSize: 10, // 每页大小
+      pagerCount: 7, // 显示页码按钮的数量
+      autoHidden: false, // 当只有一页时自动隐藏
+      pageSizes: [5, 10, 20, 30, 50, 100], // 每页大小选项列表
+      layouts: [
+        'PrevJump',
+        'PrevPage',
+        'JumpNumber',
+        'NextPage',
+        'NextJump',
+        'Sizes',
+        'FullJump',
+        'Total'
+      ]
+    }
+  }
+
   /**
    * 刷新列表
    * @param ref