feat: 双击展开/折叠

apps/web-antd/src/views/system/dept/index.vue

@@ -4,9 +4,10 @@ import type { Recordable } from '@vben/types';
 import { nextTick } from 'vue';
 
 import { Page, useVbenDrawer, type VbenFormProps } from '@vben/common-ui';
-import { listToTree } from '@vben/utils';
+import { eachTree, listToTree, removeEmptyChildren } from '@vben/utils';
 
-import { Popconfirm, Space } from 'ant-design-vue';
+import { QuestionCircleOutlined } from '@ant-design/icons-vue';
+import { Popconfirm, Space, Tooltip } from 'ant-design-vue';
 
 import { useVbenVxeGrid, type VxeGridProps } from '#/adapter';
 import { deptList, deptRemove } from '#/api/system/dept';
@@ -40,12 +41,16 @@ const gridOptions: VxeGridProps = {
           pid: 'parentId',
           children: 'children',
         });
+        removeEmptyChildren(treeData);
         return { rows: treeData };
       },
       // 默认请求接口后展开全部 不需要可以删除这段
       querySuccess: () => {
+        // 默认展开 需要加上标记
+        // eslint-disable-next-line no-use-before-define
+        eachTree(tableApi.grid.getData(), (item) => (item.expand = true));
         nextTick(() => {
-          expandAll();
+          setExpandOrCollapse(true);
         });
       },
     },
@@ -64,7 +69,21 @@ const gridOptions: VxeGridProps = {
   },
 };
 
-const [BasicTable, tableApi] = useVbenVxeGrid({ formOptions, gridOptions });
+const [BasicTable, tableApi] = useVbenVxeGrid({
+  formOptions,
+  gridOptions,
+  gridEvents: {
+    cellDblclick: (e: any) => {
+      const { row = {} } = e;
+      if (!row?.children) {
+        return;
+      }
+      const isExpanded = row?.expand;
+      tableApi.grid.setTreeExpand(row, !isExpanded);
+      row.expand = !isExpanded;
+    },
+  },
+});
 const [DeptDrawer, drawerApi] = useVbenDrawer({
   connectedComponent: deptDrawer,
 });
@@ -84,12 +103,13 @@ async function handleDelete(row: Recordable<any>) {
   await tableApi.query();
 }
 
-function expandAll() {
+/**
-  tableApi.grid?.setAllTreeExpand(true);
+ * 全部展开/折叠
-}
+ * @param expand 是否展开
-
+ */
-function collapseAll() {
+function setExpandOrCollapse(expand: boolean) {
-  tableApi.grid?.setAllTreeExpand(false);
+  eachTree(tableApi.grid.getData(), (item) => (item.expand = expand));
+  tableApi.grid?.setAllTreeExpand(expand);
 }
 </script>
 
@@ -97,14 +117,19 @@ function collapseAll() {
   <Page :auto-content-height="true">
     <BasicTable>
       <template #toolbar-actions>
-        <span class="pl-[7px] text-[16px]">部门列表</span>
+        <div class="flex items-center gap-[6px]">
+          <span class="pl-[7px] text-[16px]">部门列表</span>
+          <Tooltip title="提示：双击展开/收起子菜单">
+            <QuestionCircleOutlined class="text-center" />
+          </Tooltip>
+        </div>
       </template>
       <template #toolbar-tools>
         <Space>
-          <a-button @click="collapseAll">
+          <a-button @click="setExpandOrCollapse(false)">
             {{ $t('pages.common.collapse') }}
           </a-button>
-          <a-button @click="expandAll">
+          <a-button @click="setExpandOrCollapse(true)">
             {{ $t('pages.common.expand') }}
           </a-button>
           <a-button

apps/web-antd/src/views/system/menu/index.vue

@@ -6,9 +6,9 @@ import { computed } from 'vue';
 import { useAccess } from '@vben/access';
 import { Page, useVbenDrawer, type VbenFormProps } from '@vben/common-ui';
 import { Fallback } from '@vben/common-ui';
-import { listToTree } from '@vben/utils';
+import { eachTree, listToTree, removeEmptyChildren } from '@vben/utils';
 
-import { Popconfirm, Space } from 'ant-design-vue';
+import { Popconfirm, Space, Tooltip } from 'ant-design-vue';
 
 import { useVbenVxeGrid, type VxeGridProps } from '#/adapter';
 import { menuList, menuRemove } from '#/api/system/menu';
@@ -16,6 +16,11 @@ import { menuList, menuRemove } from '#/api/system/menu';
 import { columns, querySchema } from './data';
 import menuDrawer from './menu-drawer.vue';
 
+/**
+ * 不要问为什么有两个根节点 v-if会控制只会渲染一个
+ */
+import { QuestionCircleOutlined } from '@ant-design/icons-vue';
+
 const formOptions: VbenFormProps = {
   commonConfig: {
     labelWidth: 80,
@@ -42,6 +47,7 @@ const gridOptions: VxeGridProps = {
           pid: 'parentId',
           children: 'children',
         });
+        removeEmptyChildren(treeData);
         return { rows: treeData };
       },
     },
@@ -60,7 +66,21 @@ const gridOptions: VxeGridProps = {
   },
 };
 
-const [BasicTable, tableApi] = useVbenVxeGrid({ formOptions, gridOptions });
+const [BasicTable, tableApi] = useVbenVxeGrid({
+  formOptions,
+  gridOptions,
+  gridEvents: {
+    cellDblclick: (e: any) => {
+      const { row = {} } = e;
+      if (!row?.children) {
+        return;
+      }
+      const isExpanded = row?.expand;
+      tableApi.grid.setTreeExpand(row, !isExpanded);
+      row.expand = !isExpanded;
+    },
+  },
+});
 const [MenuDrawer, drawerApi] = useVbenDrawer({
   connectedComponent: menuDrawer,
 });
@@ -80,12 +100,13 @@ async function handleDelete(row: Recordable<any>) {
   await tableApi.query();
 }
 
-function expandAll() {
+/**
-  tableApi.grid?.setAllTreeExpand(true);
+ * 全部展开/折叠
-}
+ * @param expand 是否展开
-
+ */
-function collapseAll() {
+function setExpandOrCollapse(expand: boolean) {
-  tableApi.grid?.setAllTreeExpand(false);
+  eachTree(tableApi.grid.getData(), (item) => (item.expand = expand));
+  tableApi.grid?.setAllTreeExpand(expand);
 }
 
 /**
@@ -96,24 +117,25 @@ const { hasAccessByRoles } = useAccess();
 const isAdmin = computed(() => {
   return hasAccessByRoles(['admin', 'superadmin']);
 });
-
-/**
- * 不要问为什么有两个根节点 v-if会控制只会渲染一个
- */
 </script>
 
 <template>
   <Page v-if="isAdmin" :auto-content-height="true">
     <BasicTable>
       <template #toolbar-actions>
-        <span class="pl-[7px] text-[16px]">菜单权限列表</span>
+        <div class="flex items-center gap-[6px]">
+          <span class="pl-[7px] text-[16px]">菜单列表</span>
+          <Tooltip title="提示：双击展开/收起子菜单">
+            <QuestionCircleOutlined class="text-center" />
+          </Tooltip>
+        </div>
       </template>
       <template #toolbar-tools>
         <Space>
-          <a-button @click="collapseAll">
+          <a-button @click="setExpandOrCollapse(false)">
             {{ $t('pages.common.collapse') }}
           </a-button>
-          <a-button @click="expandAll">
+          <a-button @click="setExpandOrCollapse(true)">
             {{ $t('pages.common.expand') }}
           </a-button>
           <a-button