fix: 【antd】修复添加批量删除时产生的副作用

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

@@ -6,12 +6,11 @@ import { ref } from 'vue';
 
 import { DocAlert, Page, useVbenModal } from '@vben/common-ui';
 import { IconifyIcon } from '@vben/icons';
-import { isEmpty } from '@vben/utils';
 
 import { message } from 'ant-design-vue';
 
 import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
-import { deleteMenu, deleteMenuList, getMenuList } from '#/api/system/menu';
+import { deleteMenu, getMenuList } from '#/api/system/menu';
 import { $t } from '#/locales';
 import { SystemMenuTypeEnum } from '#/utils';
 
@@ -29,8 +28,13 @@ function onRefresh() {
 }
 
 /** 创建菜单 */
-function handleCreate(parentId?: number) {
-  formModalApi.setData({ parentId: parentId || 0 }).open();
+function handleCreate() {
+  formModalApi.setData({}).open();
+}
+
+/** 添加下级菜单 */
+function handleAppend(row: SystemMenuApi.Menu) {
+  formModalApi.setData({ pid: row.id }).open();
 }
 
 /** 编辑菜单 */
@@ -42,74 +46,55 @@ function handleEdit(row: SystemMenuApi.Menu) {
 async function handleDelete(row: SystemMenuApi.Menu) {
   const hideLoading = message.loading({
     content: $t('ui.actionMessage.deleting', [row.name]),
-    duration: 0,
-    key: 'action_process_msg',
+    key: 'action_key_msg',
   });
   try {
-    await deleteMenu(row.id);
-    message.success($t('ui.actionMessage.deleteSuccess', [row.name]));
+    await deleteMenu(row.id as number);
+    message.success({
+      content: $t('ui.actionMessage.deleteSuccess', [row.name]),
+      key: 'action_key_msg',
+    });
     onRefresh();
   } finally {
     hideLoading();
   }
 }
 
-const checkedIds = ref<number[]>([]);
-function handleRowCheckboxChange({
-  records,
-}: {
-  records: SystemMenuApi.Menu[];
-}) {
-  checkedIds.value = records.map((item) => item.id);
-}
-
-/** 批量删除菜单 */
-async function handleDeleteBatch() {
-  const hideLoading = message.loading({
-    content: $t('ui.actionMessage.deleting'),
-    duration: 0,
-    key: 'action_process_msg',
-  });
-  try {
-    await deleteMenuList(checkedIds.value);
-    message.success($t('ui.actionMessage.deleteSuccess'));
-    onRefresh();
-  } finally {
-    hideLoading();
-  }
+/** 切换树形展开/收缩状态 */
+const isExpanded = ref(false);
+function toggleExpand() {
+  isExpanded.value = !isExpanded.value;
+  gridApi.grid.setAllTreeExpand(isExpanded.value);
 }
 
 const [Grid, gridApi] = useVbenVxeGrid({
   gridOptions: {
     columns: useGridColumns(),
     height: 'auto',
+    keepSource: true,
+    pagerConfig: {
+      enabled: false,
+    },
     proxyConfig: {
       ajax: {
-        query: async () => {
+        query: async (_params) => {
           return await getMenuList();
         },
       },
     },
-    treeConfig: {
-      transform: true,
-      rowField: 'id',
-      parentField: 'parentId',
-      expandAll: true,
-      accordion: false,
-    },
     rowConfig: {
       keyField: 'id',
-      isHover: true,
     },
     toolbarConfig: {
       refresh: { code: 'query' },
-      search: true,
     },
-  } as VxeTableGridOptions<SystemMenuApi.Menu>,
-  gridEvents: {
-    checkboxAll: handleRowCheckboxChange,
-    checkboxChange: handleRowCheckboxChange,
-  },
+    treeConfig: {
+      parentField: 'parentId',
+      rowField: 'id',
+      transform: true,
+      reserve: true,
+    },
+  } as VxeTableGridOptions,
 });
 </script>
 
@@ -124,7 +109,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
     </template>
 
     <FormModal @success="onRefresh" />
-    <Grid table-title="菜单列表">
+    <Grid>
       <template #toolbar-tools>
         <TableAction
           :actions="[
@@ -136,13 +121,9 @@ const [Grid, gridApi] = useVbenVxeGrid({
               onClick: handleCreate,
             },
             {
-              label: '批量删除',
+              label: isExpanded ? '收缩' : '展开',
               type: 'primary',
-              danger: true,
-              disabled: isEmpty(checkedIds),
-              icon: ACTION_ICON.DELETE,
-              auth: ['system:menu:delete'],
-              onClick: handleDeleteBatch,
+              onClick: toggleExpand,
             },
           ]"
         />
@@ -168,6 +149,13 @@ const [Grid, gridApi] = useVbenVxeGrid({
       <template #actions="{ row }">
         <TableAction
           :actions="[
+            {
+              label: '新增下级',
+              type: 'link',
+              icon: ACTION_ICON.ADD,
+              auth: ['system:menu:create'],
+              onClick: handleAppend.bind(null, row),
+            },
             {
               label: $t('common.edit'),
               type: 'link',
@@ -186,14 +174,6 @@ const [Grid, gridApi] = useVbenVxeGrid({
                 confirm: handleDelete.bind(null, row),
               },
             },
-            {
-              label: '添加下级',
-              type: 'link',
-              icon: ACTION_ICON.ADD,
-              auth: ['system:menu:create'],
-              onClick: handleCreate.bind(null, row.id),
-              ifShow: () => row.type !== 3,
-            },
           ]"
         />
       </template>