From efa7770c1d3bc96e66a72d3ef22d34fbe1b6fd94 Mon Sep 17 00:00:00 2001
From: dap <15891557205@163.com>
Date: Mon, 7 Oct 2024 11:14:21 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=8F=8C=E5=87=BB=E5=B1=95=E5=BC=80/?=
 =?UTF-8?q?=E6=8A=98=E5=8F=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 apps/web-antd/src/views/system/dept/index.vue | 51 +++++++++++++-----
 apps/web-antd/src/views/system/menu/index.vue | 54 +++++++++++++------
 2 files changed, 76 insertions(+), 29 deletions(-)

diff --git a/apps/web-antd/src/views/system/dept/index.vue b/apps/web-antd/src/views/system/dept/index.vue
index c8983b28..5826267e 100644
--- a/apps/web-antd/src/views/system/dept/index.vue
+++ b/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);
-}
-
-function collapseAll() {
-  tableApi.grid?.setAllTreeExpand(false);
+/**
+ * 全部展开/折叠
+ * @param expand 是否展开
+ */
+function setExpandOrCollapse(expand: boolean) {
+  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
diff --git a/apps/web-antd/src/views/system/menu/index.vue b/apps/web-antd/src/views/system/menu/index.vue
index cce6e0af..0f34da37 100644
--- a/apps/web-antd/src/views/system/menu/index.vue
+++ b/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);
-}
-
-function collapseAll() {
-  tableApi.grid?.setAllTreeExpand(false);
+/**
+ * 全部展开/折叠
+ * @param expand 是否展开
+ */
+function setExpandOrCollapse(expand: boolean) {
+  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