feat: 【antd】新增批量删除操作

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

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