From 31164aadd75a52870d15db44ce43a6e53c77ffaa Mon Sep 17 00:00:00 2001
From: H0nGzA1 <2505811377@qq.com>
Date: Thu, 9 Apr 2026 20:12:00 +0800
Subject: [PATCH] refactor(menu): move batch ops back to actionbar, remove
 template toolbar
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Remove batch toolbar from template (fixes toolbar not hiding after delete)
- Restore selectAll/selectNone/batchDelete buttons in Fast-CRUD actionbar
- batchDelete: fix order — pluck ids BEFORE clearing selectedRows
- selectAll: remove unnecessary nextTick, toggleAllSelection then sync selectedRows
- Template simplifies to just fs-crud + pagination-right total count

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 .../menu/components/MenuButtonCom/crud.tsx    | 41 +++++++++-
 .../menu/components/MenuButtonCom/index.vue   | 80 +------------------
 2 files changed, 40 insertions(+), 81 deletions(-)

diff --git a/web/src/views/system/menu/components/MenuButtonCom/crud.tsx b/web/src/views/system/menu/components/MenuButtonCom/crud.tsx
index 911b19e..dfea9cb 100644
--- a/web/src/views/system/menu/components/MenuButtonCom/crud.tsx
+++ b/web/src/views/system/menu/components/MenuButtonCom/crud.tsx
@@ -99,13 +99,48 @@ export const createCrudOptions = function ({crudExpose, context}: CreateCrudOpti
 						},
 					},
                     batchDelete: {
-						show: false,
+						show: auth('menu:DeleteButton'),
+						type: 'danger',
+						text: t('message.pages.menu.buttons.batchDelete'),
+						disabled: () => selectedRows.value.length === 0,
+						click: async () => {
+							if (selectedRows.value.length === 0) {
+								ElMessage.warning(t('message.pages.menu.messages.selectMenu'));
+								return;
+							}
+							await ElMessageBox.confirm(
+								t('message.pages.menu.messages.batchDeleteConfirm', { count: selectedRows.value.length }),
+								t('message.pages.menu.buttons.confirm'),
+								{ type: 'warning', confirmButtonText: t('message.pages.menu.buttons.confirm'), cancelButtonText: t('message.pages.menu.buttons.cancel') }
+							);
+							// 先拿到 ids，再清空表格选择
+							const ids = XEUtils.pluck(selectedRows.value, 'id');
+							crudExpose.getBaseTableRef().clearSelection();
+							selectedRows.value = [];
+							await api.BatchDelete(ids);
+							ElMessage.success(t('message.pages.menu.messages.deleteSuccess'));
+							crudExpose.doRefresh();
+						},
 					},
                     selectAll: {
-						show: false,
+						show: true,
+						text: t('message.pages.menu.buttons.selectAll'),
+						disabled: () => !context!.selectOptions.value.id,
+						click: () => {
+							const tableRef = crudExpose.getBaseTableRef();
+							const tableData = crudExpose.getTableData();
+							tableRef.toggleAllSelection();
+							selectedRows.value = [...tableData];
+						},
 					},
                     selectNone: {
-						show: false,
+						show: true,
+						text: t('message.pages.menu.buttons.selectNone'),
+						disabled: () => selectedRows.value.length === 0,
+						click: () => {
+							crudExpose.getBaseTableRef().clearSelection();
+							selectedRows.value = [];
+						},
 					},
                 },
             },
diff --git a/web/src/views/system/menu/components/MenuButtonCom/index.vue b/web/src/views/system/menu/components/MenuButtonCom/index.vue
index 127ceaf..f41ce35 100644
--- a/web/src/views/system/menu/components/MenuButtonCom/index.vue
+++ b/web/src/views/system/menu/components/MenuButtonCom/index.vue
@@ -1,19 +1,5 @@
 <template>
 	<div class="menu-btn-com" :style="{ height: 'calc(72vh - 44px)' }">
-		<!-- 批量操作工具栏 -->
-		<div v-if="selectedRowsCount > 0 || isSelectable" class="batch-toolbar">
-			<span class="batch-tip">
-				<el-icon><Check /></el-icon>
-				{{ t('message.pages.menu.buttons.selectedTip', { count: selectedRowsCount }) }}
-			</span>
-			<el-button size="small" :disabled="totalCount === 0" @click="handleSelectAll">{{ t('message.pages.menu.buttons.selectAll') }}</el-button>
-			<el-button size="small" :disabled="selectedRowsCount === 0" @click="handleSelectNone">{{ t('message.pages.menu.buttons.selectNone') }}</el-button>
-			<el-divider direction="vertical" />
-			<el-button size="small" type="danger" plain :icon="Delete" :disabled="selectedRowsCount === 0" @click="handleBatchDelete">
-				{{ t('message.pages.menu.buttons.batchDelete') }}
-			</el-button>
-		</div>
-
 		<fs-crud ref="crudRef" v-bind="crudBinding" style="height: 100%">
 			<template #pagination-right>
 				<el-text type="info" size="small">{{ t('message.pages.menu.buttons.totalCount', { count: totalCount }) }}</el-text>
@@ -23,7 +9,7 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, nextTick, ref, watch } from 'vue';
+import { computed, ref, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useFs } from '@fast-crud/fast-crud';
 import { createCrudOptions } from './crud';
@@ -31,7 +17,7 @@ import { MenuTreeItemType } from '../../types';
 import { ElMessage, ElMessageBox } from 'element-plus';
 import XEUtils from 'xe-utils';
 import { BatchDelete } from './api';
-import { Delete, Check } from '@element-plus/icons-vue';
+import { Delete } from '@element-plus/icons-vue';
 import { useThemeConfig } from '/@/stores/themeConfig';
 import { storeToRefs } from 'pinia';
 
@@ -49,50 +35,11 @@ const selectedRowsCount = computed(() => {
 	return selectedRows.value.length;
 });
 
-// 是否有数据可选择
-const isSelectable = computed(() => {
-	return totalCount.value > 0 && context!.selectOptions.value?.id != null;
-});
-
 // 总条数
 const totalCount = computed(() => {
 	return crudBinding.value?.pagination?.total || 0;
 });
 
-// 全选
-const handleSelectAll = () => {
-	const tableRef = crudExpose.getBaseTableRef();
-	const tableData = crudExpose.getTableData();
-	nextTick(() => {
-		tableRef.toggleAllSelection();
-		selectedRows.value = [...tableData];
-	});
-};
-
-// 取消全选
-const handleSelectNone = () => {
-	const tableRef = crudExpose.getBaseTableRef();
-	tableRef.clearSelection();
-	selectedRows.value = [];
-};
-
-// 批量删除
-const handleBatchDelete = async () => {
-	await ElMessageBox.confirm(
-		t('message.pages.menu.messages.batchDeleteConfirm', { count: selectedRows.value.length }),
-		t('message.pages.menu.buttons.confirm'),
-		{ distinguishCancelAndClose: true, confirmButtonText: t('message.pages.menu.buttons.confirm'), cancelButtonText: t('message.pages.menu.buttons.cancel'), closeOnClickModal: false, type: 'warning' }
-	);
-	// 先拿到 ids，再清空
-	const ids = XEUtils.pluck(selectedRows.value, 'id');
-	const tableRef = crudExpose.getBaseTableRef();
-	tableRef.clearSelection();
-	selectedRows.value = [];
-	await BatchDelete(ids);
-	ElMessage.success(t('message.pages.menu.messages.deleteSuccess'));
-	await crudExpose.doRefresh();
-};
-
 const handleRefreshTable = (record: MenuTreeItemType) => {
 	if (!record.is_catalog && record.id) {
 		selectOptions.value = record;
@@ -111,28 +58,5 @@ defineExpose({ selectOptions, handleRefreshTable });
 	overflow: hidden;
 	display: flex;
 	flex-direction: column;
-
-	.batch-toolbar {
-		display: flex;
-		align-items: center;
-		gap: 12px;
-		padding: 8px 12px;
-		margin-bottom: 8px;
-		background-color: var(--el-fill-color-light);
-		border-radius: 4px;
-		border: 1px solid var(--el-border-color-lighter);
-
-		.batch-tip {
-			display: flex;
-			align-items: center;
-			gap: 4px;
-			color: var(--el-color-primary);
-			font-size: 13px;
-
-			strong {
-				font-weight: 600;
-			}
-		}
-	}
 }
 </style>