!146 新增 ele 批量删除

Merge pull request !146 from puhui999/dev-new

apps/web-ele/src/api/infra/codegen/index.ts

@@ -155,3 +155,10 @@ export function deleteCodegenTable(tableId: number) {
     params: { tableId },
   });
 }
+
+/** 批量删除代码生成表定义 */
+export function deleteCodegenTableList(tableIds: number[]) {
+  return requestClient.delete(
+    `/infra/codegen/delete-list?tableIds=${tableIds.join(',')}`,
+  );
+}

apps/web-ele/src/api/infra/config/index.ts

@@ -54,6 +54,11 @@ export function deleteConfig(id: number) {
   return requestClient.delete(`/infra/config/delete?id=${id}`);
 }
 
+/** 批量删除参数 */
+export function deleteConfigList(ids: number[]) {
+  return requestClient.delete(`/infra/config/delete-list?ids=${ids.join(',')}`);
+}
+
 /** 导出参数 */
 export function exportConfig(params: any) {
   return requestClient.download('/infra/config/export', {

apps/web-ele/src/api/infra/data-source-config/index.ts

@@ -44,3 +44,10 @@ export function updateDataSourceConfig(
 export function deleteDataSourceConfig(id: number) {
   return requestClient.delete(`/infra/data-source-config/delete?id=${id}`);
 }
+
+/** 批量删除数据源配置 */
+export function deleteDataSourceConfigList(ids: number[]) {
+  return requestClient.delete(
+    `/infra/data-source-config/delete-list?ids=${ids.join(',')}`,
+  );
+}

apps/web-ele/src/api/infra/file-config/index.ts

@@ -69,6 +69,13 @@ export function deleteFileConfig(id: number) {
   return requestClient.delete(`/infra/file-config/delete?id=${id}`);
 }
 
+/** 批量删除文件配置 */
+export function deleteFileConfigList(ids: number[]) {
+  return requestClient.delete(
+    `/infra/file-config/delete-list?ids=${ids.join(',')}`,
+  );
+}
+
 /** 测试文件配置 */
 export function testFileConfig(id: number) {
   return requestClient.get(`/infra/file-config/test?id=${id}`);

apps/web-ele/src/api/infra/file/index.ts

@@ -45,6 +45,11 @@ export function deleteFile(id: number) {
   return requestClient.delete(`/infra/file/delete?id=${id}`);
 }
 
+/** 批量删除文件 */
+export function deleteFileList(ids: number[]) {
+  return requestClient.delete(`/infra/file/delete-list?ids=${ids.join(',')}`);
+}
+
 /** 获取文件预签名地址 */
 export function getFilePresignedUrl(name: string, directory?: string) {
   return requestClient.get<InfraFileApi.FilePresignedUrlRespVO>(

apps/web-ele/src/api/infra/job/index.ts

@@ -45,6 +45,11 @@ export function deleteJob(id: number) {
   return requestClient.delete(`/infra/job/delete?id=${id}`);
 }
 
+/** 批量删除定时任务调度 */
+export function deleteJobList(ids: number[]) {
+  return requestClient.delete(`/infra/job/delete-list?ids=${ids.join(',')}`);
+}
+
 /** 导出定时任务调度 */
 export function exportJob(params: any) {
   return requestClient.download('/infra/job/export-excel', { params });

apps/web-ele/src/api/system/dict/data/index.ts

@@ -48,6 +48,13 @@ export function deleteDictData(id: number) {
   return requestClient.delete(`/system/dict-data/delete?id=${id}`);
 }
 
+// 批量删除字典数据
+export function deleteDictDataList(ids: number[]) {
+  return requestClient.delete(
+    `/system/dict-data/delete-list?ids=${ids.join(',')}`,
+  );
+}
+
 // 导出字典类型数据
 export function exportDictData(params: any) {
   return requestClient.download('/system/dict-data/export', { params });

apps/web-ele/src/api/system/dict/type/index.ts

@@ -42,6 +42,13 @@ export function deleteDictType(id: number) {
   return requestClient.delete(`/system/dict-type/delete?id=${id}`);
 }
 
+// 批量删除字典
+export function deleteDictTypeList(ids: number[]) {
+  return requestClient.delete(
+    `/system/dict-type/delete-list?ids=${ids.join(',')}`,
+  );
+}
+
 // 导出字典类型
 export function exportDictType(params: any) {
   return requestClient.download('/system/dict-type/export', { params });

apps/web-ele/src/api/system/mail/account/index.ts

@@ -49,6 +49,13 @@ export function deleteMailAccount(id: number) {
   return requestClient.delete(`/system/mail-account/delete?id=${id}`);
 }
 
+/** 批量删除邮箱账号 */
+export function deleteMailAccountList(ids: number[]) {
+  return requestClient.delete(
+    `/system/mail-account/delete-list?ids=${ids.join(',')}`,
+  );
+}
+
 /** 获得邮箱账号精简列表 */
 export function getSimpleMailAccountList() {
   return requestClient.get<SystemMailAccountApi.MailAccount[]>(

apps/web-ele/src/api/system/mail/template/index.ts

@@ -56,6 +56,13 @@ export function deleteMailTemplate(id: number) {
   return requestClient.delete(`/system/mail-template/delete?id=${id}`);
 }
 
+/** 批量删除邮件模版 */
+export function deleteMailTemplateList(ids: number[]) {
+  return requestClient.delete(
+    `/system/mail-template/delete-list?ids=${ids.join(',')}`,
+  );
+}
+
 /** 发送邮件 */
 export function sendMail(data: SystemMailTemplateApi.MailSendReqVO) {
   return requestClient.post('/system/mail-template/send-mail', data);

apps/web-ele/src/api/system/notice/index.ts

@@ -46,6 +46,13 @@ export function deleteNotice(id: number) {
   return requestClient.delete(`/system/notice/delete?id=${id}`);
 }
 
+/** 批量删除公告 */
+export function deleteNoticeList(ids: number[]) {
+  return requestClient.delete(
+    `/system/notice/delete-list?ids=${ids.join(',')}`,
+  );
+}
+
 /** 推送公告 */
 export function pushNotice(id: number) {
   return requestClient.post(`/system/notice/push?id=${id}`);

apps/web-ele/src/api/system/notify/template/index.ts

@@ -59,6 +59,13 @@ export function deleteNotifyTemplate(id: number) {
   return requestClient.delete(`/system/notify-template/delete?id=${id}`);
 }
 
+/** 批量删除站内信模板 */
+export function deleteNotifyTemplateList(ids: number[]) {
+  return requestClient.delete(
+    `/system/notify-template/delete-list?ids=${ids.join(',')}`,
+  );
+}
+
 /** 导出站内信模板 */
 export function exportNotifyTemplate(params: any) {
   return requestClient.download('/system/notify-template/export-excel', {

apps/web-ele/src/api/system/oauth2/client/index.ts

@@ -55,3 +55,10 @@ export function updateOAuth2Client(data: SystemOAuth2ClientApi.OAuth2Client) {
 export function deleteOAuth2Client(id: number) {
   return requestClient.delete(`/system/oauth2-client/delete?id=${id}`);
 }
+
+/** 批量删除 OAuth2.0 客户端 */
+export function deleteOAuth2ClientList(ids: number[]) {
+  return requestClient.delete(
+    `/system/oauth2-client/delete-list?ids=${ids.join(',')}`,
+  );
+}

apps/web-ele/src/api/system/post/index.ts

@@ -50,6 +50,11 @@ export function deletePost(id: number) {
   return requestClient.delete(`/system/post/delete?id=${id}`);
 }
 
+/** 批量删除岗位 */
+export function deletePostList(ids: number[]) {
+  return requestClient.delete(`/system/post/delete-list?ids=${ids.join(',')}`);
+}
+
 /** 导出岗位 */
 export function exportPost(params: any) {
   return requestClient.download('/system/post/export', {

apps/web-ele/src/api/system/role/index.ts

@@ -50,6 +50,11 @@ export function deleteRole(id: number) {
   return requestClient.delete(`/system/role/delete?id=${id}`);
 }
 
+/** 批量删除角色 */
+export function deleteRoleList(ids: number[]) {
+  return requestClient.delete(`/system/role/delete-list?ids=${ids.join(',')}`);
+}
+
 /** 导出角色 */
 export function exportRole(params: any) {
   return requestClient.download('/system/role/export-excel', {

apps/web-ele/src/api/system/sms/channel/index.ts

@@ -54,6 +54,13 @@ export function deleteSmsChannel(id: number) {
   return requestClient.delete(`/system/sms-channel/delete?id=${id}`);
 }
 
+/** 批量删除短信渠道 */
+export function deleteSmsChannelList(ids: number[]) {
+  return requestClient.delete(
+    `/system/sms-channel/delete-list?ids=${ids.join(',')}`,
+  );
+}
+
 /** 导出短信渠道 */
 export function exportSmsChannel(params: any) {
   return requestClient.download('/system/sms-channel/export', { params });

apps/web-ele/src/api/system/sms/template/index.ts

@@ -57,6 +57,13 @@ export function deleteSmsTemplate(id: number) {
   return requestClient.delete(`/system/sms-template/delete?id=${id}`);
 }
 
+/** 批量删除短信模板 */
+export function deleteSmsTemplateList(ids: number[]) {
+  return requestClient.delete(
+    `/system/sms-template/delete-list?ids=${ids.join(',')}`,
+  );
+}
+
 /** 导出短信模板 */
 export function exportSmsTemplate(params: any) {
   return requestClient.download('/system/sms-template/export-excel', {

apps/web-ele/src/api/system/social/client/index.ts

@@ -46,3 +46,10 @@ export function updateSocialClient(data: SystemSocialClientApi.SocialClient) {
 export function deleteSocialClient(id: number) {
   return requestClient.delete(`/system/social-client/delete?id=${id}`);
 }
+
+/** 批量删除社交客户端 */
+export function deleteSocialClientList(ids: number[]) {
+  return requestClient.delete(
+    `/system/social-client/delete-list?ids=${ids.join(',')}`,
+  );
+}

apps/web-ele/src/api/system/tenant-package/index.ts

@@ -49,6 +49,13 @@ export function deleteTenantPackage(id: number) {
   return requestClient.delete(`/system/tenant-package/delete?id=${id}`);
 }
 
+/** 批量删除租户套餐 */
+export function deleteTenantPackageList(ids: number[]) {
+  return requestClient.delete(
+    `/system/tenant-package/delete-list?ids=${ids.join(',')}`,
+  );
+}
+
 /** 获取租户套餐精简信息列表 */
 export function getTenantPackageList() {
   return requestClient.get<SystemTenantPackageApi.TenantPackage[]>(

apps/web-ele/src/api/system/tenant/index.ts

@@ -61,6 +61,13 @@ export function deleteTenant(id: number) {
   return requestClient.delete(`/system/tenant/delete?id=${id}`);
 }
 
+/** 批量删除租户 */
+export function deleteTenantList(ids: number[]) {
+  return requestClient.delete(
+    `/system/tenant/delete-list?ids=${ids.join(',')}`,
+  );
+}
+
 /** 导出租户 */
 export function exportTenant(params: any) {
   return requestClient.download('/system/tenant/export-excel', {

apps/web-ele/src/api/system/user/index.ts

@@ -49,6 +49,11 @@ export function deleteUser(id: number) {
   return requestClient.delete(`/system/user/delete?id=${id}`);
 }
 
+/** 批量删除用户 */
+export function deleteUserList(ids: number[]) {
+  return requestClient.delete(`/system/user/delete-list?ids=${ids.join(',')}`);
+}
+
 /** 导出用户 */
 export function exportUser(params: any) {
   return requestClient.download('/system/user/export', params);

apps/web-ele/src/views/infra/codegen/data.ts

@@ -398,6 +398,7 @@ export function useGridColumns<T = InfraCodegenApi.CodegenTable>(
   getDataSourceConfigName?: (dataSourceConfigId: number) => string | undefined,
 ): VxeTableGridOptions['columns'] {
   return [
+    { type: 'checkbox', width: 40 },
     {
       field: 'dataSourceConfigId',
       title: '数据源',

apps/web-ele/src/views/infra/codegen/index.vue

@@ -10,13 +10,14 @@ import { ref } from 'vue';
 import { useRouter } from 'vue-router';
 
 import { DocAlert, Page, useVbenModal } from '@vben/common-ui';
-import { Plus } from '@vben/icons';
+import { isEmpty } from '@vben/utils';
 
-import { ElButton, ElLoading, ElMessage } from 'element-plus';
+import { ElLoading, ElMessage } from 'element-plus';
 
-import { useVbenVxeGrid } from '#/adapter/vxe-table';
+import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
 import {
   deleteCodegenTable,
+  deleteCodegenTableList,
   downloadCodegen,
   getCodegenTablePage,
   syncCodegenFromDB,
@@ -85,6 +86,21 @@ async function onDelete(row: InfraCodegenApi.CodegenTable) {
   }
 }
 
+/** 批量删除代码生成配置 */
+async function onDeleteBatch() {
+  const loadingInstance = ElLoading.service({
+    text: $t('ui.actionMessage.deleting'),
+    fullscreen: true,
+  });
+  try {
+    await deleteCodegenTableList(checkedIds.value);
+    ElMessage.success($t('ui.actionMessage.deleteSuccess'));
+    onRefresh();
+  } finally {
+    loadingInstance.close();
+  }
+}
+
 /** 同步数据库 */
 async function onSync(row: InfraCodegenApi.CodegenTable) {
   const loadingInstance = ElLoading.service({
@@ -150,6 +166,15 @@ function onActionClick({
   }
 }
 
+const checkedIds = ref<number[]>([]);
+function handleRowCheckboxChange({
+  records,
+}: {
+  records: InfraCodegenApi.CodegenTable[];
+}) {
+  checkedIds.value = records.map((item) => item.id);
+}
+
 const [Grid, gridApi] = useVbenVxeGrid({
   formOptions: {
     schema: useGridFormSchema(),
@@ -177,6 +202,10 @@ const [Grid, gridApi] = useVbenVxeGrid({
       search: true,
     },
   } as VxeTableGridOptions<InfraCodegenApi.CodegenTable>,
+  gridEvents: {
+    checkboxAll: handleRowCheckboxChange,
+    checkboxChange: handleRowCheckboxChange,
+  },
 });
 
 /** 获取数据源配置列表 */
@@ -213,14 +242,25 @@ initDataSourceConfig();
     <PreviewModal />
     <Grid table-title="代码生成列表">
       <template #toolbar-tools>
-        <ElButton
+        <TableAction
-          type="primary"
+          :actions="[
-          @click="onImport"
+            {
-          v-access:code="['infra:codegen:create']"
+              label: '导入',
-        >
+              type: 'primary',
-          <Plus class="size-5" />
+              icon: ACTION_ICON.ADD,
-          导入
+              auth: ['infra:codegen:create'],
-        </ElButton>
+              onClick: onImport,
+            },
+            {
+              label: $t('ui.actionTitle.deleteBatch'),
+              type: 'danger',
+              icon: ACTION_ICON.DELETE,
+              disabled: isEmpty(checkedIds),
+              auth: ['infra:codegen:delete'],
+              onClick: onDeleteBatch,
+            },
+          ]"
+        />
       </template>
     </Grid>
   </Page>

apps/web-ele/src/views/infra/config/data.ts

@@ -126,6 +126,7 @@ export function useGridColumns<T = InfraConfigApi.Config>(
   onActionClick: OnActionClickFn<T>,
 ): VxeTableGridOptions['columns'] {
   return [
+    { type: 'checkbox', width: 40 },
     {
       field: 'id',
       title: '参数主键',

apps/web-ele/src/views/infra/config/index.vue

@@ -5,14 +5,20 @@ import type {
 } from '#/adapter/vxe-table';
 import type { InfraConfigApi } from '#/api/infra/config';
 
+import { ref } from 'vue';
+
 import { Page, useVbenModal } from '@vben/common-ui';
-import { Download, Plus } from '@vben/icons';
+import { downloadFileFromBlobPart, isEmpty } from '@vben/utils';
-import { downloadFileFromBlobPart } from '@vben/utils';
 
-import { ElButton, ElLoading, ElMessage } from 'element-plus';
+import { ElLoading, ElMessage } from 'element-plus';
 
-import { useVbenVxeGrid } from '#/adapter/vxe-table';
+import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
-import { deleteConfig, exportConfig, getConfigPage } from '#/api/infra/config';
+import {
+  deleteConfig,
+  deleteConfigList,
+  exportConfig,
+  getConfigPage,
+} from '#/api/infra/config';
 import { $t } from '#/locales';
 
 import { useGridColumns, useGridFormSchema } from './data';
@@ -52,15 +58,39 @@ async function onDelete(row: InfraConfigApi.Config) {
   });
   try {
     await deleteConfig(row.id as number);
-    // TODO @puhui999：close 是不是放在 finally 里面更好？
     loadingInstance.close();
     ElMessage.success($t('ui.actionMessage.deleteSuccess', [row.name]));
     onRefresh();
-  } catch {
+  } finally {
     loadingInstance.close();
   }
 }
 
+/** 批量删除参数 */
+async function onDeleteBatch() {
+  const loadingInstance = ElLoading.service({
+    text: $t('ui.actionMessage.deleting'),
+    fullscreen: true,
+  });
+  try {
+    await deleteConfigList(checkedIds.value);
+    loadingInstance.close();
+    ElMessage.success($t('ui.actionMessage.deleteSuccess'));
+    onRefresh();
+  } finally {
+    loadingInstance.close();
+  }
+}
+
+const checkedIds = ref<number[]>([]);
+function handleRowCheckboxChange({
+  records,
+}: {
+  records: InfraConfigApi.Config[];
+}) {
+  checkedIds.value = records.map((item) => item.id as number);
+}
+
 /** 表格操作按钮的回调函数 */
 function onActionClick({
   code,
@@ -105,6 +135,10 @@ const [Grid, gridApi] = useVbenVxeGrid({
       search: true,
     },
   } as VxeTableGridOptions<InfraConfigApi.Config>,
+  gridEvents: {
+    checkboxAll: handleRowCheckboxChange,
+    checkboxChange: handleRowCheckboxChange,
+  },
 });
 </script>
 
@@ -113,23 +147,32 @@ const [Grid, gridApi] = useVbenVxeGrid({
     <FormModal @success="onRefresh" />
     <Grid table-title="参数列表">
       <template #toolbar-tools>
-        <ElButton
+        <TableAction
-          type="primary"
+          :actions="[
-          @click="onCreate"
+            {
-          v-access:code="['infra:config:create']"
+              label: $t('ui.actionTitle.create', ['参数']),
-        >
+              type: 'primary',
-          <Plus class="size-5" />
+              icon: ACTION_ICON.ADD,
-          {{ $t('ui.actionTitle.create', ['参数']) }}
+              auth: ['infra:config:create'],
-        </ElButton>
+              onClick: onCreate,
-        <ElButton
+            },
-          type="primary"
+            {
-          class="ml-2"
+              label: $t('ui.actionTitle.export'),
-          @click="onExport"
+              type: 'primary',
-          v-access:code="['infra:config:export']"
+              icon: ACTION_ICON.DOWNLOAD,
-        >
+              auth: ['infra:config:export'],
-          <Download class="size-5" />
+              onClick: onExport,
-          {{ $t('ui.actionTitle.export') }}
+            },
-        </ElButton>
+            {
+              label: $t('ui.actionTitle.deleteBatch'),
+              type: 'danger',
+              icon: ACTION_ICON.DELETE,
+              disabled: isEmpty(checkedIds),
+              auth: ['infra:config:delete'],
+              onClick: onDeleteBatch,
+            },
+          ]"
+        />
       </template>
     </Grid>
   </Page>

apps/web-ele/src/views/infra/dataSourceConfig/data.ts

@@ -62,6 +62,7 @@ export function useGridColumns<T = InfraDataSourceConfigApi.DataSourceConfig>(
   onActionClick: OnActionClickFn<T>,
 ): VxeTableGridOptions['columns'] {
   return [
+    { type: 'checkbox', width: 40 },
     {
       field: 'id',
       title: '主键编号',

apps/web-ele/src/views/infra/dataSourceConfig/index.vue

@@ -5,16 +5,17 @@ import type {
 } from '#/adapter/vxe-table';
 import type { InfraDataSourceConfigApi } from '#/api/infra/data-source-config';
 
-import { onMounted } from 'vue';
+import { onMounted, ref } from 'vue';
 
 import { Page, useVbenModal } from '@vben/common-ui';
-import { Plus } from '@vben/icons';
+import { isEmpty } from '@vben/utils';
 
-import { ElButton, ElLoading, ElMessage } from 'element-plus';
+import { ElLoading, ElMessage } from 'element-plus';
 
-import { useVbenVxeGrid } from '#/adapter/vxe-table';
+import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
 import {
   deleteDataSourceConfig,
+  deleteDataSourceConfigList,
   getDataSourceConfigList,
 } from '#/api/infra/data-source-config';
 import { $t } from '#/locales';
@@ -48,11 +49,36 @@ async function onDelete(row: InfraDataSourceConfigApi.DataSourceConfig) {
     loadingInstance.close();
     ElMessage.success($t('ui.actionMessage.deleteSuccess', [row.name]));
     await handleLoadData();
-  } catch {
+  } finally {
     loadingInstance.close();
   }
 }
 
+/** 批量删除数据源 */
+async function onDeleteBatch() {
+  const loadingInstance = ElLoading.service({
+    text: $t('ui.actionMessage.deleting'),
+    fullscreen: true,
+  });
+  try {
+    await deleteDataSourceConfigList(checkedIds.value);
+    loadingInstance.close();
+    ElMessage.success($t('ui.actionMessage.deleteSuccess'));
+    await handleLoadData();
+  } finally {
+    loadingInstance.close();
+  }
+}
+
+const checkedIds = ref<number[]>([]);
+function handleRowCheckboxChange({
+  records,
+}: {
+  records: InfraDataSourceConfigApi.DataSourceConfig[];
+}) {
+  checkedIds.value = records.map((item) => item.id as number);
+}
+
 /** 表格操作按钮的回调函数 */
 function onActionClick({
   code,
@@ -87,6 +113,10 @@ const [Grid, gridApi] = useVbenVxeGrid({
       },
     },
   } as VxeTableGridOptions<InfraDataSourceConfigApi.DataSourceConfig>,
+  gridEvents: {
+    checkboxAll: handleRowCheckboxChange,
+    checkboxChange: handleRowCheckboxChange,
+  },
 });
 
 /** 加载数据 */
@@ -110,14 +140,25 @@ onMounted(() => {
     <FormModal @success="onRefresh" />
     <Grid table-title="数据源列表">
       <template #toolbar-tools>
-        <ElButton
+        <TableAction
-          type="primary"
+          :actions="[
-          @click="onCreate"
+            {
-          v-access:code="['infra:data-source-config:create']"
+              label: $t('ui.actionTitle.create', ['数据源']),
-        >
+              type: 'primary',
-          <Plus class="size-5" />
+              icon: ACTION_ICON.ADD,
-          {{ $t('ui.actionTitle.create', ['数据源']) }}
+              auth: ['infra:data-source-config:create'],
-        </ElButton>
+              onClick: onCreate,
+            },
+            {
+              label: $t('ui.actionTitle.deleteBatch'),
+              type: 'danger',
+              icon: ACTION_ICON.DELETE,
+              disabled: isEmpty(checkedIds),
+              auth: ['infra:data-source-config:delete'],
+              onClick: onDeleteBatch,
+            },
+          ]"
+        />
       </template>
     </Grid>
   </Page>

apps/web-ele/src/views/infra/file/data.ts

@@ -61,6 +61,7 @@ export function useGridColumns<T = InfraFileApi.File>(
   onActionClick: OnActionClickFn<T>,
 ): VxeTableGridOptions['columns'] {
   return [
+    { type: 'checkbox', width: 40 },
     {
       field: 'name',
       title: '文件名',

apps/web-ele/src/views/infra/file/index.vue

@@ -5,15 +5,16 @@ import type {
 } from '#/adapter/vxe-table';
 import type { InfraFileApi } from '#/api/infra/file';
 
+import { ref } from 'vue';
+
 import { Page, useVbenModal } from '@vben/common-ui';
-import { Upload } from '@vben/icons';
+import { isEmpty, openWindow } from '@vben/utils';
-import { openWindow } from '@vben/utils';
 
 import { useClipboard } from '@vueuse/core';
 import { ElButton, ElImage, ElLoading, ElMessage } from 'element-plus';
 
-import { useVbenVxeGrid } from '#/adapter/vxe-table';
+import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
-import { deleteFile, getFilePage } from '#/api/infra/file';
+import { deleteFile, deleteFileList, getFilePage } from '#/api/infra/file';
 import { $t } from '#/locales';
 
 import { useGridColumns, useGridFormSchema } from './data';
@@ -70,11 +71,36 @@ async function onDelete(row: InfraFileApi.File) {
       $t('ui.actionMessage.deleteSuccess', [row.name || row.path]),
     );
     onRefresh();
-  } catch {
+  } finally {
     loadingInstance.close();
   }
 }
 
+/** 批量删除文件 */
+async function onDeleteBatch() {
+  const loadingInstance = ElLoading.service({
+    text: $t('ui.actionMessage.deleting'),
+    fullscreen: true,
+  });
+  try {
+    await deleteFileList(checkedIds.value);
+    loadingInstance.close();
+    ElMessage.success($t('ui.actionMessage.deleteSuccess'));
+    onRefresh();
+  } finally {
+    loadingInstance.close();
+  }
+}
+
+const checkedIds = ref<number[]>([]);
+function handleRowCheckboxChange({
+  records,
+}: {
+  records: InfraFileApi.File[];
+}) {
+  checkedIds.value = records.map((item) => item.id as number);
+}
+
 /** 表格操作按钮的回调函数 */
 function onActionClick({ code, row }: OnActionClickParams<InfraFileApi.File>) {
   switch (code) {
@@ -116,6 +142,10 @@ const [Grid, gridApi] = useVbenVxeGrid({
       search: true,
     },
   } as VxeTableGridOptions<InfraFileApi.File>,
+  gridEvents: {
+    checkboxAll: handleRowCheckboxChange,
+    checkboxChange: handleRowCheckboxChange,
+  },
 });
 </script>
 
@@ -124,10 +154,24 @@ const [Grid, gridApi] = useVbenVxeGrid({
     <FormModal @success="onRefresh" />
     <Grid table-title="文件列表">
       <template #toolbar-tools>
-        <ElButton type="primary" @click="onUpload">
+        <TableAction
-          <Upload class="size-5" />
+          :actions="[
-          上传图片
+            {
-        </ElButton>
+              label: '上传图片',
+              type: 'primary',
+              icon: ACTION_ICON.UPLOAD,
+              onClick: onUpload,
+            },
+            {
+              label: $t('ui.actionTitle.deleteBatch'),
+              type: 'danger',
+              icon: ACTION_ICON.DELETE,
+              disabled: isEmpty(checkedIds),
+              auth: ['infra:file:delete'],
+              onClick: onDeleteBatch,
+            },
+          ]"
+        />
       </template>
       <template #file-content="{ row }">
         <ElImage v-if="row.type && row.type.includes('image')" :src="row.url" />

apps/web-ele/src/views/infra/fileConfig/data.ts

@@ -269,6 +269,7 @@ export function useGridColumns<T = InfraFileConfigApi.FileConfig>(
   onActionClick: OnActionClickFn<T>,
 ): VxeTableGridOptions['columns'] {
   return [
+    { type: 'checkbox', width: 40 },
     {
       field: 'id',
       title: '编号',

apps/web-ele/src/views/infra/fileConfig/index.vue

@@ -5,15 +5,17 @@ import type {
 } from '#/adapter/vxe-table';
 import type { InfraFileConfigApi } from '#/api/infra/file-config';
 
+import { ref } from 'vue';
+
 import { confirm, Page, useVbenModal } from '@vben/common-ui';
-import { Plus } from '@vben/icons';
+import { isEmpty, openWindow } from '@vben/utils';
-import { openWindow } from '@vben/utils';
 
-import { ElButton, ElLoading, ElMessage } from 'element-plus';
+import { ElLoading, ElMessage } from 'element-plus';
 
-import { useVbenVxeGrid } from '#/adapter/vxe-table';
+import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
 import {
   deleteFileConfig,
+  deleteFileConfigList,
   getFileConfigPage,
   testFileConfig,
   updateFileConfigMaster,
@@ -93,11 +95,36 @@ async function onDelete(row: InfraFileConfigApi.FileConfig) {
     loadingInstance.close();
     ElMessage.success($t('ui.actionMessage.deleteSuccess', [row.name]));
     onRefresh();
-  } catch {
+  } finally {
     loadingInstance.close();
   }
 }
 
+/** 批量删除文件配置 */
+async function onDeleteBatch() {
+  const loadingInstance = ElLoading.service({
+    text: $t('ui.actionMessage.deleting'),
+    fullscreen: true,
+  });
+  try {
+    await deleteFileConfigList(checkedIds.value);
+    loadingInstance.close();
+    ElMessage.success($t('ui.actionMessage.deleteSuccess'));
+    onRefresh();
+  } finally {
+    loadingInstance.close();
+  }
+}
+
+const checkedIds = ref<number[]>([]);
+function handleRowCheckboxChange({
+  records,
+}: {
+  records: InfraFileConfigApi.FileConfig[];
+}) {
+  checkedIds.value = records.map((item) => item.id as number);
+}
+
 /** 表格操作按钮的回调函数 */
 function onActionClick({
   code,
@@ -150,6 +177,10 @@ const [Grid, gridApi] = useVbenVxeGrid({
       search: true,
     },
   } as VxeTableGridOptions<InfraFileConfigApi.FileConfig>,
+  gridEvents: {
+    checkboxAll: handleRowCheckboxChange,
+    checkboxChange: handleRowCheckboxChange,
+  },
 });
 </script>
 
@@ -158,14 +189,25 @@ const [Grid, gridApi] = useVbenVxeGrid({
     <FormModal @success="onRefresh" />
     <Grid table-title="文件配置列表">
       <template #toolbar-tools>
-        <ElButton
+        <TableAction
-          type="primary"
+          :actions="[
-          @click="onCreate"
+            {
-          v-access:code="['infra:file-config:create']"
+              label: $t('ui.actionTitle.create', ['文件配置']),
-        >
+              type: 'primary',
-          <Plus class="size-5" />
+              icon: ACTION_ICON.ADD,
-          {{ $t('ui.actionTitle.create', ['文件配置']) }}
+              auth: ['infra:file-config:create'],
-        </ElButton>
+              onClick: onCreate,
+            },
+            {
+              label: $t('ui.actionTitle.deleteBatch'),
+              type: 'danger',
+              icon: ACTION_ICON.DELETE,
+              disabled: isEmpty(checkedIds),
+              auth: ['infra:file-config:delete'],
+              onClick: onDeleteBatch,
+            },
+          ]"
+        />
       </template>
     </Grid>
   </Page>

apps/web-ele/src/views/infra/job/data.ts

@@ -128,6 +128,7 @@ export function useGridColumns<T = InfraJobApi.Job>(
   onActionClick: OnActionClickFn<T>,
 ): VxeTableGridOptions['columns'] {
   return [
+    { type: 'checkbox', width: 40 },
     {
       field: 'id',
       title: '任务编号',

apps/web-ele/src/views/infra/job/index.vue

@@ -5,17 +5,18 @@ import type {
 } from '#/adapter/vxe-table';
 import type { InfraJobApi } from '#/api/infra/job';
 
+import { ref } from 'vue';
 import { useRouter } from 'vue-router';
 
 import { confirm, DocAlert, Page, useVbenModal } from '@vben/common-ui';
-import { Download, History, Plus } from '@vben/icons';
+import { downloadFileFromBlobPart, isEmpty } from '@vben/utils';
-import { downloadFileFromBlobPart } from '@vben/utils';
 
-import { ElButton, ElLoading, ElMessage } from 'element-plus';
+import { ElLoading, ElMessage } from 'element-plus';
 
-import { useVbenVxeGrid } from '#/adapter/vxe-table';
+import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
 import {
   deleteJob,
+  deleteJobList,
   exportJob,
   getJobPage,
   runJob,
@@ -117,6 +118,26 @@ async function onDelete(row: InfraJobApi.Job) {
   }
 }
 
+/** 批量删除任务 */
+async function onDeleteBatch() {
+  const loadingInstance = ElLoading.service({
+    text: $t('ui.actionMessage.deleting'),
+    fullscreen: true,
+  });
+  try {
+    await deleteJobList(checkedIds.value);
+    ElMessage.success($t('ui.actionMessage.deleteSuccess'));
+    onRefresh();
+  } finally {
+    loadingInstance.close();
+  }
+}
+
+const checkedIds = ref<number[]>([]);
+function handleRowCheckboxChange({ records }: { records: InfraJobApi.Job[] }) {
+  checkedIds.value = records.map((item) => item.id as number);
+}
+
 /** 表格操作按钮的回调函数 */
 function onActionClick({ code, row }: OnActionClickParams<InfraJobApi.Job>) {
   switch (code) {
@@ -174,6 +195,10 @@ const [Grid, gridApi] = useVbenVxeGrid({
       search: true,
     },
   } as VxeTableGridOptions<InfraJobApi.Job>,
+  gridEvents: {
+    checkboxAll: handleRowCheckboxChange,
+    checkboxChange: handleRowCheckboxChange,
+  },
 });
 </script>
 
@@ -189,32 +214,39 @@ const [Grid, gridApi] = useVbenVxeGrid({
     <DetailModal />
     <Grid table-title="定时任务列表">
       <template #toolbar-tools>
-        <ElButton
+        <TableAction
-          type="primary"
+          :actions="[
-          @click="onCreate"
+            {
-          v-access:code="['infra:job:create']"
+              label: $t('ui.actionTitle.create', ['任务']),
-        >
+              type: 'primary',
-          <Plus class="size-5" />
+              icon: ACTION_ICON.ADD,
-          {{ $t('ui.actionTitle.create', ['任务']) }}
+              auth: ['infra:job:create'],
-        </ElButton>
+              onClick: onCreate,
-        <ElButton
+            },
-          type="primary"
+            {
-          class="ml-2"
+              label: $t('ui.actionTitle.export'),
-          @click="onExport"
+              type: 'primary',
-          v-access:code="['infra:job:export']"
+              icon: ACTION_ICON.DOWNLOAD,
-        >
+              auth: ['infra:job:export'],
-          <Download class="size-5" />
+              onClick: onExport,
-          {{ $t('ui.actionTitle.export') }}
+            },
-        </ElButton>
+            {
-        <ElButton
+              label: '执行日志',
-          type="primary"
+              type: 'primary',
-          class="ml-2"
+              icon: ACTION_ICON.MORE,
-          @click="onLog(undefined)"
+              auth: ['infra:job:query'],
-          v-access:code="['infra:job:query']"
+              onClick: () => onLog(undefined),
-        >
+            },
-          <History class="size-5" />
+            {
-          执行日志
+              label: $t('ui.actionTitle.deleteBatch'),
-        </ElButton>
+              type: 'danger',
+              icon: ACTION_ICON.DELETE,
+              disabled: isEmpty(checkedIds),
+              auth: ['infra:job:delete'],
+              onClick: onDeleteBatch,
+            },
+          ]"
+        />
       </template>
     </Grid>
   </Page>

apps/web-ele/src/views/system/dict/data.ts

@@ -100,6 +100,7 @@ export function useTypeGridColumns<T = SystemDictTypeApi.DictType>(
   onActionClick: OnActionClickFn<T>,
 ): VxeTableGridOptions['columns'] {
   return [
+    { type: 'checkbox', width: 40 },
     {
       field: 'id',
       title: '字典编号',
@@ -314,6 +315,7 @@ export function useDataGridColumns<T = SystemDictDataApi.DictData>(
   onActionClick: OnActionClickFn<T>,
 ): VxeTableGridOptions['columns'] {
   return [
+    { type: 'checkbox', width: 40 },
     {
       field: 'id',
       title: '字典编码',

apps/web-ele/src/views/system/dict/modules/data-grid.vue

@@ -5,17 +5,17 @@ import type {
 } from '#/adapter/vxe-table';
 import type { SystemDictDataApi } from '#/api/system/dict/data';
 
-import { watch } from 'vue';
+import { ref, watch } from 'vue';
 
 import { useVbenModal } from '@vben/common-ui';
-import { Download, Plus } from '@vben/icons';
+import { downloadFileFromBlobPart, isEmpty } from '@vben/utils';
-import { downloadFileFromBlobPart } from '@vben/utils';
 
-import { ElButton, ElLoading, ElMessage } from 'element-plus';
+import { ElLoading, ElMessage } from 'element-plus';
 
-import { useVbenVxeGrid } from '#/adapter/vxe-table';
+import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
 import {
   deleteDictData,
+  deleteDictDataList,
   exportDictData,
   getDictDataPage,
 } from '#/api/system/dict/data';
@@ -67,13 +67,35 @@ async function onDelete(row: any) {
     await deleteDictData(row.id);
     ElMessage.success($t('common.operationSuccess'));
     onRefresh();
-  } catch {
-    // 异常处理
   } finally {
     loadingInstance.close();
   }
 }
 
+/** 批量删除字典数据 */
+async function onDeleteBatch() {
+  const loadingInstance = ElLoading.service({
+    text: $t('ui.actionMessage.deleting'),
+    fullscreen: true,
+  });
+  try {
+    await deleteDictDataList(checkedIds.value);
+    ElMessage.success($t('ui.actionMessage.deleteSuccess'));
+    onRefresh();
+  } finally {
+    loadingInstance.close();
+  }
+}
+
+const checkedIds = ref<number[]>([]);
+function handleRowCheckboxChange({
+  records,
+}: {
+  records: SystemDictDataApi.DictData[];
+}) {
+  checkedIds.value = records.map((item) => item.id as number);
+}
+
 /** 表格操作按钮回调 */
 function onActionClick({ code, row }: OnActionClickParams) {
   switch (code) {
@@ -116,6 +138,10 @@ const [Grid, gridApi] = useVbenVxeGrid({
       search: true,
     },
   } as VxeTableGridOptions<SystemDictDataApi.DictData>,
+  gridEvents: {
+    checkboxAll: handleRowCheckboxChange,
+    checkboxChange: handleRowCheckboxChange,
+  },
 });
 
 /** 监听 dictType 变化，重新查询 */
@@ -135,23 +161,32 @@ watch(
 
     <Grid table-title="字典数据列表">
       <template #toolbar-tools>
-        <ElButton
+        <TableAction
-          type="primary"
+          :actions="[
-          @click="onCreate"
+            {
-          v-access:code="['system:dict:create']"
+              label: $t('ui.actionTitle.create', ['字典数据']),
-        >
+              type: 'primary',
-          <Plus class="mr-2 size-5" />
+              icon: ACTION_ICON.ADD,
-          {{ $t('ui.actionTitle.create', ['字典数据']) }}
+              auth: ['system:dict:create'],
-        </ElButton>
+              onClick: onCreate,
-        <ElButton
+            },
-          type="primary"
+            {
-          class="ml-2"
+              label: $t('ui.actionTitle.export'),
-          @click="onExport"
+              type: 'primary',
-          v-access:code="['system:dict:export']"
+              icon: ACTION_ICON.DOWNLOAD,
-        >
+              auth: ['system:dict:export'],
-          <Download class="mr-2 size-5" />
+              onClick: onExport,
-          {{ $t('ui.actionTitle.export') }}
+            },
-        </ElButton>
+            {
+              label: $t('ui.actionTitle.deleteBatch'),
+              type: 'danger',
+              icon: ACTION_ICON.DELETE,
+              disabled: isEmpty(checkedIds),
+              auth: ['system:dict:delete'],
+              onClick: onDeleteBatch,
+            },
+          ]"
+        />
       </template>
     </Grid>
   </div>

apps/web-ele/src/views/system/dict/modules/type-grid.vue

@@ -1,20 +1,21 @@
 <script lang="ts" setup>
 import type {
   OnActionClickParams,
-  VxeGridListeners,
   VxeTableGridOptions,
 } from '#/adapter/vxe-table';
 import type { SystemDictTypeApi } from '#/api/system/dict/type';
 
+import { ref } from 'vue';
+
 import { useVbenModal } from '@vben/common-ui';
-import { Download, Plus } from '@vben/icons';
+import { downloadFileFromBlobPart, isEmpty } from '@vben/utils';
-import { downloadFileFromBlobPart } from '@vben/utils';
 
-import { ElButton, ElLoading, ElMessage } from 'element-plus';
+import { ElLoading, ElMessage } from 'element-plus';
 
-import { useVbenVxeGrid } from '#/adapter/vxe-table';
+import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
 import {
   deleteDictType,
+  deleteDictTypeList,
   exportDictType,
   getDictTypePage,
 } from '#/api/system/dict/type';
@@ -61,13 +62,35 @@ async function onDelete(row: SystemDictTypeApi.DictType) {
     await deleteDictType(row.id as number);
     ElMessage.success($t('common.operationSuccess'));
     onRefresh();
-  } catch {
-    // 异常处理
   } finally {
     loadingInstance.close();
   }
 }
 
+/** 批量删除字典类型 */
+async function onDeleteBatch() {
+  const loadingInstance = ElLoading.service({
+    text: $t('ui.actionMessage.deleting'),
+    fullscreen: true,
+  });
+  try {
+    await deleteDictTypeList(checkedIds.value);
+    ElMessage.success($t('ui.actionMessage.deleteSuccess'));
+    onRefresh();
+  } finally {
+    loadingInstance.close();
+  }
+}
+
+const checkedIds = ref<number[]>([]);
+function handleRowCheckboxChange({
+  records,
+}: {
+  records: SystemDictTypeApi.DictType[];
+}) {
+  checkedIds.value = records.map((item) => item.id as number);
+}
+
 /** 表格操作按钮回调 */
 function onActionClick({
   code,
@@ -85,13 +108,6 @@ function onActionClick({
   }
 }
 
-/** 表格事件 */
-const gridEvents: VxeGridListeners<SystemDictTypeApi.DictType> = {
-  cellClick: ({ row }) => {
-    emit('select', row.type);
-  },
-};
-
 const [Grid, gridApi] = useVbenVxeGrid({
   formOptions: {
     schema: useTypeGridFormSchema(),
@@ -120,7 +136,13 @@ const [Grid, gridApi] = useVbenVxeGrid({
       search: true,
     },
   } as VxeTableGridOptions<SystemDictTypeApi.DictType>,
-  gridEvents,
+  gridEvents: {
+    cellClick: ({ row }: { row: SystemDictTypeApi.DictType }) => {
+      emit('select', row.type);
+    },
+    checkboxAll: handleRowCheckboxChange,
+    checkboxChange: handleRowCheckboxChange,
+  },
 });
 </script>
 
@@ -130,23 +152,32 @@ const [Grid, gridApi] = useVbenVxeGrid({
 
     <Grid table-title="字典类型列表">
       <template #toolbar-tools>
-        <ElButton
+        <TableAction
-          type="primary"
+          :actions="[
-          @click="onCreate"
+            {
-          v-access:code="['system:dict:create']"
+              label: $t('ui.actionTitle.create', ['字典类型']),
-        >
+              type: 'primary',
-          <Plus class="mr-2 size-5" />
+              icon: ACTION_ICON.ADD,
-          {{ $t('ui.actionTitle.create', ['字典类型']) }}
+              auth: ['system:dict:create'],
-        </ElButton>
+              onClick: onCreate,
-        <ElButton
+            },
-          type="primary"
+            {
-          class="ml-2"
+              label: $t('ui.actionTitle.export'),
-          @click="onExport"
+              type: 'primary',
-          v-access:code="['system:dict:export']"
+              icon: ACTION_ICON.DOWNLOAD,
-        >
+              auth: ['system:dict:export'],
-          <Download class="mr-2 size-5" />
+              onClick: onExport,
-          {{ $t('ui.actionTitle.export') }}
+            },
-        </ElButton>
+            {
+              label: $t('ui.actionTitle.deleteBatch'),
+              type: 'danger',
+              icon: ACTION_ICON.DELETE,
+              disabled: isEmpty(checkedIds),
+              auth: ['system:dict:delete'],
+              onClick: onDeleteBatch,
+            },
+          ]"
+        />
       </template>
     </Grid>
   </div>

apps/web-ele/src/views/system/mail/account/data.ts

@@ -129,6 +129,10 @@ export function useGridColumns<T = SystemMailAccountApi.MailAccount>(
   onActionClick: OnActionClickFn<T>,
 ): VxeTableGridOptions['columns'] {
   return [
+    {
+      type: 'checkbox',
+      width: 40,
+    },
     {
       field: 'id',
       title: '编号',

apps/web-ele/src/views/system/mail/account/index.vue

@@ -5,14 +5,17 @@ import type {
 } from '#/adapter/vxe-table';
 import type { SystemMailAccountApi } from '#/api/system/mail/account';
 
+import { ref } from 'vue';
+
 import { DocAlert, Page, useVbenModal } from '@vben/common-ui';
-import { Plus } from '@vben/icons';
+import { isEmpty } from '@vben/utils';
 
-import { ElButton, ElLoading, ElMessage } from 'element-plus';
+import { ElLoading, ElMessage } from 'element-plus';
 
-import { useVbenVxeGrid } from '#/adapter/vxe-table';
+import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
 import {
   deleteMailAccount,
+  deleteMailAccountList,
   getMailAccountPage,
 } from '#/api/system/mail/account';
 import { $t } from '#/locales';
@@ -50,13 +53,35 @@ async function onDelete(row: SystemMailAccountApi.MailAccount) {
     await deleteMailAccount(row.id as number);
     ElMessage.success($t('ui.actionMessage.deleteSuccess', [row.mail]));
     onRefresh();
-  } catch {
-    // 异常处理
   } finally {
     loadingInstance.close();
   }
 }
 
+/** 批量删除邮箱账号 */
+async function onDeleteBatch() {
+  const loadingInstance = ElLoading.service({
+    text: $t('ui.actionMessage.deleting'),
+    fullscreen: true,
+  });
+  try {
+    await deleteMailAccountList(checkedIds.value);
+    ElMessage.success($t('ui.actionMessage.deleteSuccess'));
+    onRefresh();
+  } finally {
+    loadingInstance.close();
+  }
+}
+
+const checkedIds = ref<number[]>([]);
+function handleRowCheckboxChange({
+  records,
+}: {
+  records: SystemMailAccountApi.MailAccount[];
+}) {
+  checkedIds.value = records.map((item) => item.id as number);
+}
+
 /** 表格操作按钮的回调函数 */
 function onActionClick({
   code,
@@ -101,6 +126,10 @@ const [Grid, gridApi] = useVbenVxeGrid({
       search: true,
     },
   } as VxeTableGridOptions<SystemMailAccountApi.MailAccount>,
+  gridEvents: {
+    checkboxAll: handleRowCheckboxChange,
+    checkboxChange: handleRowCheckboxChange,
+  },
 });
 </script>
 <template>
@@ -112,14 +141,25 @@ const [Grid, gridApi] = useVbenVxeGrid({
     <FormModal @success="onRefresh" />
     <Grid table-title="邮箱账号列表">
       <template #toolbar-tools>
-        <ElButton
+        <TableAction
-          type="primary"
+          :actions="[
-          @click="onCreate"
+            {
-          v-access:code="['system:mail-account:create']"
+              label: $t('ui.actionTitle.create', ['邮箱账号']),
-        >
+              type: 'primary',
-          <Plus class="mr-2 size-5" />
+              icon: ACTION_ICON.ADD,
-          {{ $t('ui.actionTitle.create', ['邮箱账号']) }}
+              auth: ['system:mail-account:create'],
-        </ElButton>
+              onClick: onCreate,
+            },
+            {
+              label: $t('ui.actionTitle.deleteBatch'),
+              type: 'danger',
+              icon: ACTION_ICON.DELETE,
+              disabled: isEmpty(checkedIds),
+              auth: ['system:mail-account:delete'],
+              onClick: onDeleteBatch,
+            },
+          ]"
+        />
       </template>
     </Grid>
   </Page>

apps/web-ele/src/views/system/mail/template/data.ts

@@ -198,6 +198,10 @@ export function useGridColumns<T = SystemMailTemplateApi.MailTemplate>(
   getAccountMail?: (accountId: number) => string | undefined,
 ): VxeTableGridOptions['columns'] {
   return [
+    {
+      type: 'checkbox',
+      width: 40,
+    },
     {
       field: 'id',
       title: '编号',

apps/web-ele/src/views/system/mail/template/index.vue

@@ -9,14 +9,15 @@ import type { SystemMailTemplateApi } from '#/api/system/mail/template';
 import { onMounted, ref } from 'vue';
 
 import { DocAlert, Page, useVbenModal } from '@vben/common-ui';
-import { Plus } from '@vben/icons';
+import { isEmpty } from '@vben/utils';
 
-import { ElButton, ElLoading, ElMessage } from 'element-plus';
+import { ElLoading, ElMessage } from 'element-plus';
 
-import { useVbenVxeGrid } from '#/adapter/vxe-table';
+import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
 import { getSimpleMailAccountList } from '#/api/system/mail/account';
 import {
   deleteMailTemplate,
+  deleteMailTemplateList,
   getMailTemplatePage,
 } from '#/api/system/mail/template';
 import { $t } from '#/locales';
@@ -77,6 +78,30 @@ async function onDelete(row: SystemMailTemplateApi.MailTemplate) {
   }
 }
 
+/** 批量删除邮件模板 */
+async function onDeleteBatch() {
+  const loadingInstance = ElLoading.service({
+    text: $t('ui.actionMessage.deleting'),
+    fullscreen: true,
+  });
+  try {
+    await deleteMailTemplateList(checkedIds.value);
+    ElMessage.success($t('ui.actionMessage.deleteSuccess'));
+    onRefresh();
+  } finally {
+    loadingInstance.close();
+  }
+}
+
+const checkedIds = ref<number[]>([]);
+function handleRowCheckboxChange({
+  records,
+}: {
+  records: SystemMailTemplateApi.MailTemplate[];
+}) {
+  checkedIds.value = records.map((item) => item.id as number);
+}
+
 /** 表格操作按钮的回调函数 */
 function onActionClick({
   code,
@@ -125,6 +150,10 @@ const [Grid, gridApi] = useVbenVxeGrid({
       search: true,
     },
   } as VxeTableGridOptions<SystemMailTemplateApi.MailTemplate>,
+  gridEvents: {
+    checkboxAll: handleRowCheckboxChange,
+    checkboxChange: handleRowCheckboxChange,
+  },
 });
 
 /** 初始化 */
@@ -142,14 +171,25 @@ onMounted(async () => {
     <SendModal />
     <Grid table-title="邮件模板列表">
       <template #toolbar-tools>
-        <ElButton
+        <TableAction
-          type="primary"
+          :actions="[
-          @click="onCreate"
+            {
-          v-access:code="['system:mail-template:create']"
+              label: $t('ui.actionTitle.create', ['邮件模板']),
-        >
+              type: 'primary',
-          <Plus class="mr-2 size-5" />
+              icon: ACTION_ICON.ADD,
-          {{ $t('ui.actionTitle.create', ['邮件模板']) }}
+              auth: ['system:mail-template:create'],
-        </ElButton>
+              onClick: onCreate,
+            },
+            {
+              label: $t('ui.actionTitle.deleteBatch'),
+              type: 'danger',
+              icon: ACTION_ICON.DELETE,
+              disabled: isEmpty(checkedIds),
+              auth: ['system:mail-template:delete'],
+              onClick: onDeleteBatch,
+            },
+          ]"
+        />
       </template>
     </Grid>
   </Page>

apps/web-ele/src/views/system/notice/data.ts

@@ -95,6 +95,10 @@ export function useGridColumns<T = SystemNoticeApi.Notice>(
   onActionClick: OnActionClickFn<T>,
 ): VxeTableGridOptions['columns'] {
   return [
+    {
+      type: 'checkbox',
+      width: 40,
+    },
     {
       field: 'id',
       title: '公告编号',

apps/web-ele/src/views/system/notice/index.vue

@@ -5,13 +5,20 @@ import type {
 } from '#/adapter/vxe-table';
 import type { SystemNoticeApi } from '#/api/system/notice';
 
+import { ref } from 'vue';
+
 import { Page, useVbenModal } from '@vben/common-ui';
-import { Plus } from '@vben/icons';
+import { isEmpty } from '@vben/utils';
 
-import { ElButton, ElMessage } from 'element-plus';
+import { ElMessage } from 'element-plus';
 
-import { useVbenVxeGrid } from '#/adapter/vxe-table';
+import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
-import { deleteNotice, getNoticePage, pushNotice } from '#/api/system/notice';
+import {
+  deleteNotice,
+  deleteNoticeList,
+  getNoticePage,
+  pushNotice,
+} from '#/api/system/notice';
 import { $t } from '#/locales';
 
 import { useGridColumns, useGridFormSchema } from './data';
@@ -49,11 +56,37 @@ async function onDelete(row: SystemNoticeApi.Notice) {
     loadingInstance.close();
     ElMessage.success($t('ui.actionMessage.deleteSuccess', [row.title]));
     onRefresh();
-  } catch {
+  } finally {
     loadingInstance.close();
   }
 }
 
+/** 批量删除公告 */
+async function onDeleteBatch() {
+  const loadingInstance = ElMessage({
+    message: $t('ui.actionMessage.deleting'),
+    type: 'info',
+    duration: 0,
+  });
+  try {
+    await deleteNoticeList(checkedIds.value);
+    loadingInstance.close();
+    ElMessage.success($t('ui.actionMessage.deleteSuccess'));
+    onRefresh();
+  } finally {
+    loadingInstance.close();
+  }
+}
+
+const checkedIds = ref<number[]>([]);
+function handleRowCheckboxChange({
+  records,
+}: {
+  records: SystemNoticeApi.Notice[];
+}) {
+  checkedIds.value = records.map((item) => item.id as number);
+}
+
 /** 推送公告 */
 async function onPush(row: SystemNoticeApi.Notice) {
   const loadingInstance = ElMessage({
@@ -65,7 +98,7 @@ async function onPush(row: SystemNoticeApi.Notice) {
     await pushNotice(row.id as number);
     loadingInstance.close();
     ElMessage.success($t('ui.actionMessage.operationSuccess'));
-  } catch {
+  } finally {
     loadingInstance.close();
   }
 }
@@ -118,6 +151,10 @@ const [Grid, gridApi] = useVbenVxeGrid({
       search: true,
     },
   } as VxeTableGridOptions<SystemNoticeApi.Notice>,
+  gridEvents: {
+    checkboxAll: handleRowCheckboxChange,
+    checkboxChange: handleRowCheckboxChange,
+  },
 });
 </script>
 
@@ -126,14 +163,25 @@ const [Grid, gridApi] = useVbenVxeGrid({
     <FormModal @success="onRefresh" />
     <Grid table-title="公告列表">
       <template #toolbar-tools>
-        <ElButton
+        <TableAction
-          type="primary"
+          :actions="[
-          @click="onCreate"
+            {
-          v-access:code="['system:notice:create']"
+              label: $t('ui.actionTitle.create', ['公告']),
-        >
+              type: 'primary',
-          <Plus class="mr-2 size-5" />
+              icon: ACTION_ICON.ADD,
-          {{ $t('ui.actionTitle.create', ['公告']) }}
+              auth: ['system:notice:create'],
-        </ElButton>
+              onClick: onCreate,
+            },
+            {
+              label: $t('ui.actionTitle.deleteBatch'),
+              type: 'danger',
+              icon: ACTION_ICON.DELETE,
+              disabled: isEmpty(checkedIds),
+              auth: ['system:notice:delete'],
+              onClick: onDeleteBatch,
+            },
+          ]"
+        />
       </template>
     </Grid>
   </Page>

apps/web-ele/src/views/system/notify/template/data.ts

@@ -233,6 +233,10 @@ export function useGridColumns<T = SystemNotifyTemplateApi.NotifyTemplate>(
   onActionClick: OnActionClickFn<T>,
 ): VxeTableGridOptions['columns'] {
   return [
+    {
+      type: 'checkbox',
+      width: 40,
+    },
     {
       field: 'id',
       title: '编号',

apps/web-ele/src/views/system/notify/template/index.vue

@@ -5,15 +5,17 @@ import type {
 } from '#/adapter/vxe-table';
 import type { SystemNotifyTemplateApi } from '#/api/system/notify/template';
 
+import { ref } from 'vue';
+
 import { DocAlert, Page, useVbenModal } from '@vben/common-ui';
-import { Download, Plus } from '@vben/icons';
+import { downloadFileFromBlobPart, isEmpty } from '@vben/utils';
-import { downloadFileFromBlobPart } from '@vben/utils';
 
-import { ElButton, ElMessage } from 'element-plus';
+import { ElMessage } from 'element-plus';
 
-import { useVbenVxeGrid } from '#/adapter/vxe-table';
+import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
 import {
   deleteNotifyTemplate,
+  deleteNotifyTemplateList,
   exportNotifyTemplate,
   getNotifyTemplatePage,
 } from '#/api/system/notify/template';
@@ -76,6 +78,32 @@ async function onDelete(row: SystemNotifyTemplateApi.NotifyTemplate) {
   }
 }
 
+/** 批量删除站内信模板 */
+async function onDeleteBatch() {
+  const loadingInstance = ElMessage({
+    message: $t('ui.actionMessage.deleting'),
+    type: 'info',
+    duration: 0,
+  });
+  try {
+    await deleteNotifyTemplateList(checkedIds.value);
+    loadingInstance.close();
+    ElMessage.success($t('ui.actionMessage.deleteSuccess'));
+    onRefresh();
+  } finally {
+    loadingInstance.close();
+  }
+}
+
+const checkedIds = ref<number[]>([]);
+function handleRowCheckboxChange({
+  records,
+}: {
+  records: SystemNotifyTemplateApi.NotifyTemplate[];
+}) {
+  checkedIds.value = records.map((item) => item.id as number);
+}
+
 /** 表格操作按钮的回调函数 */
 function onActionClick({
   code,
@@ -124,6 +152,10 @@ const [Grid, gridApi] = useVbenVxeGrid({
       search: true,
     },
   } as VxeTableGridOptions<SystemNotifyTemplateApi.NotifyTemplate>,
+  gridEvents: {
+    checkboxAll: handleRowCheckboxChange,
+    checkboxChange: handleRowCheckboxChange,
+  },
 });
 </script>
 
@@ -137,23 +169,32 @@ const [Grid, gridApi] = useVbenVxeGrid({
     <SendModal />
     <Grid table-title="站内信模板列表">
       <template #toolbar-tools>
-        <ElButton
+        <TableAction
-          type="primary"
+          :actions="[
-          @click="onCreate"
+            {
-          v-access:code="['system:notify-template:create']"
+              label: $t('ui.actionTitle.create', ['站内信模板']),
-        >
+              type: 'primary',
-          <Plus class="mr-2 size-5" />
+              icon: ACTION_ICON.ADD,
-          {{ $t('ui.actionTitle.create', ['站内信模板']) }}
+              auth: ['system:notify-template:create'],
-        </ElButton>
+              onClick: onCreate,
-        <ElButton
+            },
-          type="primary"
+            {
-          class="ml-2"
+              label: $t('ui.actionTitle.export'),
-          @click="onExport"
+              type: 'primary',
-          v-access:code="['system:notify-template:export']"
+              icon: ACTION_ICON.DOWNLOAD,
-        >
+              auth: ['system:notify-template:export'],
-          <Download class="mr-2 size-5" />
+              onClick: onExport,
-          {{ $t('ui.actionTitle.export') }}
+            },
-        </ElButton>
+            {
+              label: $t('ui.actionTitle.deleteBatch'),
+              type: 'danger',
+              icon: ACTION_ICON.DELETE,
+              disabled: isEmpty(checkedIds),
+              auth: ['system:notify-template:delete'],
+              onClick: onDeleteBatch,
+            },
+          ]"
+        />
       </template>
     </Grid>
   </Page>

apps/web-ele/src/views/system/oauth2/client/data.ts

@@ -195,6 +195,10 @@ export function useGridColumns<T = SystemOAuth2ClientApi.OAuth2Client>(
   onActionClick: OnActionClickFn<T>,
 ): VxeTableGridOptions['columns'] {
   return [
+    {
+      type: 'checkbox',
+      width: 40,
+    },
     {
       field: 'clientId',
       title: '客户端编号',

apps/web-ele/src/views/system/oauth2/client/index.vue

@@ -5,14 +5,17 @@ import type {
 } from '#/adapter/vxe-table';
 import type { SystemOAuth2ClientApi } from '#/api/system/oauth2/client';
 
+import { ref } from 'vue';
+
 import { DocAlert, Page, useVbenModal } from '@vben/common-ui';
-import { Plus } from '@vben/icons';
+import { isEmpty } from '@vben/utils';
 
-import { ElButton, ElLoading, ElMessage } from 'element-plus';
+import { ElLoading, ElMessage } from 'element-plus';
 
-import { useVbenVxeGrid } from '#/adapter/vxe-table';
+import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
 import {
   deleteOAuth2Client,
+  deleteOAuth2ClientList,
   getOAuth2ClientPage,
 } from '#/api/system/oauth2/client';
 import { $t } from '#/locales';
@@ -50,13 +53,35 @@ async function onDelete(row: SystemOAuth2ClientApi.OAuth2Client) {
     await deleteOAuth2Client(row.id as number);
     ElMessage.success($t('ui.actionMessage.deleteSuccess', [row.name]));
     onRefresh();
-  } catch {
-    // 异常处理
   } finally {
     loadingInstance.close();
   }
 }
 
+/** 批量删除 OAuth2 客户端 */
+async function onDeleteBatch() {
+  const loadingInstance = ElLoading.service({
+    text: $t('ui.actionMessage.deleting'),
+    fullscreen: true,
+  });
+  try {
+    await deleteOAuth2ClientList(checkedIds.value);
+    ElMessage.success($t('ui.actionMessage.deleteSuccess'));
+    onRefresh();
+  } finally {
+    loadingInstance.close();
+  }
+}
+
+const checkedIds = ref<number[]>([]);
+function handleRowCheckboxChange({
+  records,
+}: {
+  records: SystemOAuth2ClientApi.OAuth2Client[];
+}) {
+  checkedIds.value = records.map((item) => item.id as number);
+}
+
 /** 表格操作按钮的回调函数 */
 function onActionClick({
   code,
@@ -101,6 +126,10 @@ const [Grid, gridApi] = useVbenVxeGrid({
       search: true,
     },
   } as VxeTableGridOptions<SystemOAuth2ClientApi.OAuth2Client>,
+  gridEvents: {
+    checkboxAll: handleRowCheckboxChange,
+    checkboxChange: handleRowCheckboxChange,
+  },
 });
 </script>
 
@@ -116,14 +145,25 @@ const [Grid, gridApi] = useVbenVxeGrid({
     <FormModal @success="onRefresh" />
     <Grid table-title="OAuth2 客户端列表">
       <template #toolbar-tools>
-        <ElButton
+        <TableAction
-          type="primary"
+          :actions="[
-          @click="onCreate"
+            {
-          v-access:code="['system:oauth2-client:create']"
+              label: $t('ui.actionTitle.create', [' OAuth2.0 客户端']),
-        >
+              type: 'primary',
-          <Plus class="mr-2 size-5" />
+              icon: ACTION_ICON.ADD,
-          {{ $t('ui.actionTitle.create', [' OAuth2.0 客户端']) }}
+              auth: ['system:oauth2-client:create'],
-        </ElButton>
+              onClick: onCreate,
+            },
+            {
+              label: $t('ui.actionTitle.deleteBatch'),
+              type: 'danger',
+              icon: ACTION_ICON.DELETE,
+              disabled: isEmpty(checkedIds),
+              auth: ['system:oauth2-client:delete'],
+              onClick: onDeleteBatch,
+            },
+          ]"
+        />
       </template>
     </Grid>
   </Page>

apps/web-ele/src/views/system/post/data.ts

@@ -90,6 +90,10 @@ export function useGridColumns<T = SystemPostApi.Post>(
   onActionClick: OnActionClickFn<T>,
 ): VxeTableGridOptions['columns'] {
   return [
+    {
+      type: 'checkbox',
+      width: 40,
+    },
     {
       field: 'id',
       title: '岗位编号',

apps/web-ele/src/views/system/post/index.vue

@@ -5,14 +5,20 @@ import type {
 } from '#/adapter/vxe-table';
 import type { SystemPostApi } from '#/api/system/post';
 
+import { ref } from 'vue';
+
 import { Page, useVbenModal } from '@vben/common-ui';
-import { Download, Plus } from '@vben/icons';
+import { downloadFileFromBlobPart, isEmpty } from '@vben/utils';
-import { downloadFileFromBlobPart } from '@vben/utils';
 
-import { ElButton, ElLoading, ElMessage } from 'element-plus';
+import { ElLoading, ElMessage } from 'element-plus';
 
-import { useVbenVxeGrid } from '#/adapter/vxe-table';
+import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
-import { deletePost, exportPost, getPostPage } from '#/api/system/post';
+import {
+  deletePost,
+  deletePostList,
+  exportPost,
+  getPostPage,
+} from '#/api/system/post';
 import { $t } from '#/locales';
 
 import { useGridColumns, useGridFormSchema } from './data';
@@ -54,13 +60,35 @@ async function onDelete(row: SystemPostApi.Post) {
     await deletePost(row.id as number);
     ElMessage.success($t('ui.actionMessage.deleteSuccess', [row.name]));
     onRefresh();
-  } catch {
-    // 异常处理
   } finally {
     loadingInstance.close();
   }
 }
 
+/** 批量删除岗位 */
+async function onDeleteBatch() {
+  const loadingInstance = ElLoading.service({
+    text: $t('ui.actionMessage.deleting'),
+    fullscreen: true,
+  });
+  try {
+    await deletePostList(checkedIds.value);
+    ElMessage.success($t('ui.actionMessage.deleteSuccess'));
+    onRefresh();
+  } finally {
+    loadingInstance.close();
+  }
+}
+
+const checkedIds = ref<number[]>([]);
+function handleRowCheckboxChange({
+  records,
+}: {
+  records: SystemPostApi.Post[];
+}) {
+  checkedIds.value = records.map((item) => item.id as number);
+}
+
 /** 表格操作按钮的回调函数 */
 function onActionClick({ code, row }: OnActionClickParams<SystemPostApi.Post>) {
   switch (code) {
@@ -102,6 +130,10 @@ const [Grid, gridApi] = useVbenVxeGrid({
       search: true,
     },
   } as VxeTableGridOptions<SystemPostApi.Post>,
+  gridEvents: {
+    checkboxAll: handleRowCheckboxChange,
+    checkboxChange: handleRowCheckboxChange,
+  },
 });
 </script>
 
@@ -110,23 +142,32 @@ const [Grid, gridApi] = useVbenVxeGrid({
     <FormModal @success="onRefresh" />
     <Grid table-title="岗位列表">
       <template #toolbar-tools>
-        <ElButton
+        <TableAction
-          type="primary"
+          :actions="[
-          @click="onCreate"
+            {
-          v-access:code="['system:post:create']"
+              label: $t('ui.actionTitle.create', ['岗位']),
-        >
+              type: 'primary',
-          <Plus class="mr-2 size-5" />
+              icon: ACTION_ICON.ADD,
-          {{ $t('ui.actionTitle.create', ['岗位']) }}
+              auth: ['system:post:create'],
-        </ElButton>
+              onClick: onCreate,
-        <ElButton
+            },
-          type="primary"
+            {
-          class="ml-2"
+              label: $t('ui.actionTitle.export'),
-          @click="onExport"
+              type: 'primary',
-          v-access:code="['system:post:export']"
+              icon: ACTION_ICON.DOWNLOAD,
-        >
+              auth: ['system:post:export'],
-          <Download class="mr-2 size-5" />
+              onClick: onExport,
-          {{ $t('ui.actionTitle.export') }}
+            },
-        </ElButton>
+            {
+              label: $t('ui.actionTitle.deleteBatch'),
+              type: 'danger',
+              icon: ACTION_ICON.DELETE,
+              disabled: isEmpty(checkedIds),
+              auth: ['system:post:delete'],
+              onClick: onDeleteBatch,
+            },
+          ]"
+        />
       </template>
     </Grid>
   </Page>

apps/web-ele/src/views/system/role/data.ts

@@ -193,6 +193,10 @@ export function useGridColumns<T = SystemRoleApi.Role>(
   onActionClick: OnActionClickFn<T>,
 ): VxeTableGridOptions['columns'] {
   return [
+    {
+      type: 'checkbox',
+      width: 40,
+    },
     {
       field: 'id',
       title: '角色编号',

apps/web-ele/src/views/system/role/index.vue

@@ -5,14 +5,21 @@ import type {
 } from '#/adapter/vxe-table';
 import type { SystemRoleApi } from '#/api/system/role';
 
+import { ref } from 'vue';
+
 import { DocAlert, Page, useVbenModal } from '@vben/common-ui';
 import { Download, Plus } from '@vben/icons';
-import { downloadFileFromBlobPart } from '@vben/utils';
+import { downloadFileFromBlobPart, isEmpty } from '@vben/utils';
 
 import { ElButton, ElLoading, ElMessage } from 'element-plus';
 
 import { useVbenVxeGrid } from '#/adapter/vxe-table';
-import { deleteRole, exportRole, getRolePage } from '#/api/system/role';
+import {
+  deleteRole,
+  deleteRoleList,
+  exportRole,
+  getRolePage,
+} from '#/api/system/role';
 import { $t } from '#/locales';
 
 import { useGridColumns, useGridFormSchema } from './data';
@@ -67,13 +74,35 @@ async function onDelete(row: SystemRoleApi.Role) {
     await deleteRole(row.id as number);
     ElMessage.success($t('ui.actionMessage.deleteSuccess', [row.name]));
     onRefresh();
-  } catch {
-    // 异常处理
   } finally {
     loadingInstance.close();
   }
 }
 
+/** 批量删除角色 */
+async function onDeleteBatch() {
+  const loadingInstance = ElLoading.service({
+    text: $t('ui.actionMessage.deleting'),
+    fullscreen: true,
+  });
+  try {
+    await deleteRoleList(checkedIds.value);
+    ElMessage.success($t('ui.actionMessage.deleteSuccess'));
+    onRefresh();
+  } finally {
+    loadingInstance.close();
+  }
+}
+
+const checkedIds = ref<number[]>([]);
+function handleRowCheckboxChange({
+  records,
+}: {
+  records: SystemRoleApi.Role[];
+}) {
+  checkedIds.value = records.map((item) => item.id as number);
+}
+
 /** 分配角色的数据权限 */
 function onAssignDataPermission(row: SystemRoleApi.Role) {
   assignDataPermissionFormApi.setData(row).open();
@@ -133,6 +162,10 @@ const [Grid, gridApi] = useVbenVxeGrid({
       search: true,
     },
   } as VxeTableGridOptions<SystemRoleApi.Role>,
+  gridEvents: {
+    checkboxAll: handleRowCheckboxChange,
+    checkboxChange: handleRowCheckboxChange,
+  },
 });
 </script>
 
@@ -168,6 +201,16 @@ const [Grid, gridApi] = useVbenVxeGrid({
           <Download class="mr-2 size-5" />
           {{ $t('ui.actionTitle.export') }}
         </ElButton>
+        <ElButton
+          type="danger"
+          class="ml-2"
+          @click="onDeleteBatch"
+          v-access:code="['system:role:delete']"
+          :disabled="isEmpty(checkedIds)"
+        >
+          <i class="fa-solid fa-trash-can mr-2"></i>
+          {{ $t('ui.actionTitle.deleteBatch') }}
+        </ElButton>
       </template>
     </Grid>
   </Page>

apps/web-ele/src/views/system/sms/channel/data.ts

@@ -139,6 +139,10 @@ export function useGridColumns<T = SystemSmsChannelApi.SmsChannel>(
   onActionClick: OnActionClickFn<T>,
 ): VxeTableGridOptions['columns'] {
   return [
+    {
+      type: 'checkbox',
+      width: 40,
+    },
     {
       field: 'id',
       title: '编号',

apps/web-ele/src/views/system/sms/channel/index.vue

@@ -5,15 +5,17 @@ import type {
 } from '#/adapter/vxe-table';
 import type { SystemSmsChannelApi } from '#/api/system/sms/channel';
 
+import { ref } from 'vue';
+
 import { DocAlert, Page, useVbenModal } from '@vben/common-ui';
-import { Download, Plus } from '@vben/icons';
+import { downloadFileFromBlobPart, isEmpty } from '@vben/utils';
-import { downloadFileFromBlobPart } from '@vben/utils';
 
-import { ElButton, ElLoading, ElMessage } from 'element-plus';
+import { ElLoading, ElMessage } from 'element-plus';
 
-import { useVbenVxeGrid } from '#/adapter/vxe-table';
+import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
 import {
   deleteSmsChannel,
+  deleteSmsChannelList,
   exportSmsChannel,
   getSmsChannelPage,
 } from '#/api/system/sms/channel';
@@ -58,13 +60,35 @@ async function onDelete(row: SystemSmsChannelApi.SmsChannel) {
     await deleteSmsChannel(row.id as number);
     ElMessage.success($t('ui.actionMessage.deleteSuccess', [row.signature]));
     onRefresh();
-  } catch {
-    // 异常处理
   } finally {
     loadingInstance.close();
   }
 }
 
+/** 批量删除短信渠道 */
+async function onDeleteBatch() {
+  const loadingInstance = ElLoading.service({
+    text: $t('ui.actionMessage.deleting'),
+    fullscreen: true,
+  });
+  try {
+    await deleteSmsChannelList(checkedIds.value);
+    ElMessage.success($t('ui.actionMessage.deleteSuccess'));
+    onRefresh();
+  } finally {
+    loadingInstance.close();
+  }
+}
+
+const checkedIds = ref<number[]>([]);
+function handleRowCheckboxChange({
+  records,
+}: {
+  records: SystemSmsChannelApi.SmsChannel[];
+}) {
+  checkedIds.value = records.map((item) => item.id as number);
+}
+
 /** 表格操作按钮的回调函数 */
 function onActionClick({
   code,
@@ -109,6 +133,10 @@ const [Grid, gridApi] = useVbenVxeGrid({
       search: true,
     },
   } as VxeTableGridOptions<SystemSmsChannelApi.SmsChannel>,
+  gridEvents: {
+    checkboxAll: handleRowCheckboxChange,
+    checkboxChange: handleRowCheckboxChange,
+  },
 });
 </script>
 
@@ -121,23 +149,32 @@ const [Grid, gridApi] = useVbenVxeGrid({
     <FormModal @success="onRefresh" />
     <Grid table-title="短信渠道列表">
       <template #toolbar-tools>
-        <ElButton
+        <TableAction
-          type="primary"
+          :actions="[
-          @click="onCreate"
+            {
-          v-access:code="['system:sms-channel:create']"
+              label: $t('ui.actionTitle.create', ['短信渠道']),
-        >
+              type: 'primary',
-          <Plus class="mr-2 size-5" />
+              icon: ACTION_ICON.ADD,
-          {{ $t('ui.actionTitle.create', ['短信渠道']) }}
+              auth: ['system:sms-channel:create'],
-        </ElButton>
+              onClick: onCreate,
-        <ElButton
+            },
-          type="primary"
+            {
-          class="ml-2"
+              label: $t('ui.actionTitle.export'),
-          @click="onExport"
+              type: 'primary',
-          v-access:code="['system:sms-channel:export']"
+              icon: ACTION_ICON.DOWNLOAD,
-        >
+              auth: ['system:sms-channel:export'],
-          <Download class="mr-2 size-5" />
+              onClick: onExport,
-          {{ $t('ui.actionTitle.export') }}
+            },
-        </ElButton>
+            {
+              label: $t('ui.actionTitle.deleteBatch'),
+              type: 'danger',
+              icon: ACTION_ICON.DELETE,
+              disabled: isEmpty(checkedIds),
+              auth: ['system:sms-channel:delete'],
+              onClick: onDeleteBatch,
+            },
+          ]"
+        />
       </template>
     </Grid>
   </Page>

apps/web-ele/src/views/system/sms/template/data.ts

@@ -208,6 +208,10 @@ export function useGridColumns<T = SystemSmsTemplateApi.SmsTemplate>(
   onActionClick: OnActionClickFn<T>,
 ): VxeTableGridOptions['columns'] {
   return [
+    {
+      type: 'checkbox',
+      width: 40,
+    },
     {
       field: 'id',
       title: '编号',

apps/web-ele/src/views/system/sms/template/index.vue

@@ -5,15 +5,17 @@ import type {
 } from '#/adapter/vxe-table';
 import type { SystemSmsTemplateApi } from '#/api/system/sms/template';
 
+import { ref } from 'vue';
+
 import { DocAlert, Page, useVbenModal } from '@vben/common-ui';
-import { Download, Plus } from '@vben/icons';
+import { downloadFileFromBlobPart, isEmpty } from '@vben/utils';
-import { downloadFileFromBlobPart } from '@vben/utils';
 
-import { ElButton, ElLoading, ElMessage } from 'element-plus';
+import { ElLoading, ElMessage } from 'element-plus';
 
-import { useVbenVxeGrid } from '#/adapter/vxe-table';
+import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
 import {
   deleteSmsTemplate,
+  deleteSmsTemplateList,
   exportSmsTemplate,
   getSmsTemplatePage,
 } from '#/api/system/sms/template';
@@ -69,13 +71,35 @@ async function onDelete(row: SystemSmsTemplateApi.SmsTemplate) {
     await deleteSmsTemplate(row.id as number);
     ElMessage.success($t('ui.actionMessage.deleteSuccess', [row.name]));
     onRefresh();
-  } catch {
-    // 异常处理
   } finally {
     loadingInstance.close();
   }
 }
 
+/** 批量删除短信模板 */
+async function onDeleteBatch() {
+  const loadingInstance = ElLoading.service({
+    text: $t('ui.actionMessage.deleting'),
+    fullscreen: true,
+  });
+  try {
+    await deleteSmsTemplateList(checkedIds.value);
+    ElMessage.success($t('ui.actionMessage.deleteSuccess'));
+    onRefresh();
+  } finally {
+    loadingInstance.close();
+  }
+}
+
+const checkedIds = ref<number[]>([]);
+function handleRowCheckboxChange({
+  records,
+}: {
+  records: SystemSmsTemplateApi.SmsTemplate[];
+}) {
+  checkedIds.value = records.map((item) => item.id as number);
+}
+
 /** 表格操作按钮的回调函数 */
 function onActionClick({
   code,
@@ -124,6 +148,10 @@ const [Grid, gridApi] = useVbenVxeGrid({
       search: true,
     },
   } as VxeTableGridOptions<SystemSmsTemplateApi.SmsTemplate>,
+  gridEvents: {
+    checkboxAll: handleRowCheckboxChange,
+    checkboxChange: handleRowCheckboxChange,
+  },
 });
 </script>
 
@@ -137,23 +165,32 @@ const [Grid, gridApi] = useVbenVxeGrid({
     <SendModal />
     <Grid table-title="短信模板列表">
       <template #toolbar-tools>
-        <ElButton
+        <TableAction
-          type="primary"
+          :actions="[
-          @click="onCreate"
+            {
-          v-access:code="['system:sms-template:create']"
+              label: $t('ui.actionTitle.create', ['短信模板']),
-        >
+              type: 'primary',
-          <Plus class="mr-2 size-5" />
+              icon: ACTION_ICON.ADD,
-          {{ $t('ui.actionTitle.create', ['短信模板']) }}
+              auth: ['system:sms-template:create'],
-        </ElButton>
+              onClick: onCreate,
-        <ElButton
+            },
-          type="primary"
+            {
-          class="ml-2"
+              label: $t('ui.actionTitle.export'),
-          @click="onExport"
+              type: 'primary',
-          v-access:code="['system:sms-template:export']"
+              icon: ACTION_ICON.DOWNLOAD,
-        >
+              auth: ['system:sms-template:export'],
-          <Download class="mr-2 size-5" />
+              onClick: onExport,
-          {{ $t('ui.actionTitle.export') }}
+            },
-        </ElButton>
+            {
+              label: $t('ui.actionTitle.deleteBatch'),
+              type: 'danger',
+              icon: ACTION_ICON.DELETE,
+              disabled: isEmpty(checkedIds),
+              auth: ['system:sms-template:delete'],
+              onClick: onDeleteBatch,
+            },
+          ]"
+        />
       </template>
     </Grid>
   </Page>

apps/web-ele/src/views/system/social/client/data.ts

@@ -156,6 +156,10 @@ export function useGridColumns<T = SystemSocialClientApi.SocialClient>(
   onActionClick: OnActionClickFn<T>,
 ): VxeTableGridOptions['columns'] {
   return [
+    {
+      type: 'checkbox',
+      width: 40,
+    },
     {
       field: 'id',
       title: '编号',

apps/web-ele/src/views/system/social/client/index.vue

@@ -5,14 +5,17 @@ import type {
 } from '#/adapter/vxe-table';
 import type { SystemSocialClientApi } from '#/api/system/social/client';
 
+import { ref } from 'vue';
+
 import { DocAlert, Page, useVbenModal } from '@vben/common-ui';
-import { Plus } from '@vben/icons';
+import { isEmpty } from '@vben/utils';
 
-import { ElButton, ElLoading, ElMessage } from 'element-plus';
+import { ElLoading, ElMessage } from 'element-plus';
 
-import { useVbenVxeGrid } from '#/adapter/vxe-table';
+import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
 import {
   deleteSocialClient,
+  deleteSocialClientList,
   getSocialClientPage,
 } from '#/api/system/social/client';
 import { $t } from '#/locales';
@@ -50,13 +53,35 @@ async function onDelete(row: SystemSocialClientApi.SocialClient) {
     await deleteSocialClient(row.id as number);
     ElMessage.success($t('ui.actionMessage.deleteSuccess', [row.name]));
     onRefresh();
-  } catch {
-    // 发生错误时不需要做特殊处理，finally会关闭loading
   } finally {
     loadingInstance.close();
   }
 }
 
+/** 批量删除社交客户端 */
+async function onDeleteBatch() {
+  const loadingInstance = ElLoading.service({
+    text: $t('ui.actionMessage.deleting'),
+    fullscreen: true,
+  });
+  try {
+    await deleteSocialClientList(checkedIds.value);
+    ElMessage.success($t('ui.actionMessage.deleteSuccess'));
+    onRefresh();
+  } finally {
+    loadingInstance.close();
+  }
+}
+
+const checkedIds = ref<number[]>([]);
+function handleRowCheckboxChange({
+  records,
+}: {
+  records: SystemSocialClientApi.SocialClient[];
+}) {
+  checkedIds.value = records.map((item) => item.id as number);
+}
+
 /** 表格操作按钮的回调函数 */
 function onActionClick({
   code,
@@ -101,6 +126,10 @@ const [Grid, gridApi] = useVbenVxeGrid({
       search: true,
     },
   } as VxeTableGridOptions<SystemSocialClientApi.SocialClient>,
+  gridEvents: {
+    checkboxAll: handleRowCheckboxChange,
+    checkboxChange: handleRowCheckboxChange,
+  },
 });
 </script>
 
@@ -113,14 +142,25 @@ const [Grid, gridApi] = useVbenVxeGrid({
     <FormModal @success="onRefresh" />
     <Grid table-title="社交客户端列表">
       <template #toolbar-tools>
-        <ElButton
+        <TableAction
-          type="primary"
+          :actions="[
-          @click="onCreate"
+            {
-          v-access:code="['system:social-client:create']"
+              label: $t('ui.actionTitle.create', ['社交客户端']),
-        >
+              type: 'primary',
-          <Plus class="mr-2 size-5" />
+              icon: ACTION_ICON.ADD,
-          {{ $t('ui.actionTitle.create', ['社交客户端']) }}
+              auth: ['system:social-client:create'],
-        </ElButton>
+              onClick: onCreate,
+            },
+            {
+              label: $t('ui.actionTitle.deleteBatch'),
+              type: 'danger',
+              icon: ACTION_ICON.DELETE,
+              disabled: isEmpty(checkedIds),
+              auth: ['system:social-client:delete'],
+              onClick: onDeleteBatch,
+            },
+          ]"
+        />
       </template>
     </Grid>
   </Page>

apps/web-ele/src/views/system/tenant/data.ts

@@ -167,6 +167,10 @@ export function useGridColumns<T = SystemTenantApi.Tenant>(
   getPackageName?: (packageId: number) => string | undefined,
 ): VxeTableGridOptions['columns'] {
   return [
+    {
+      type: 'checkbox',
+      width: 40,
+    },
     {
       field: 'id',
       title: '租户编号',

apps/web-ele/src/views/system/tenant/index.vue

@@ -9,13 +9,17 @@ import type { SystemTenantPackageApi } from '#/api/system/tenant-package';
 import { onMounted, ref } from 'vue';
 
 import { DocAlert, Page, useVbenModal } from '@vben/common-ui';
-import { Download, Plus } from '@vben/icons';
+import { downloadFileFromBlobPart, isEmpty } from '@vben/utils';
-import { downloadFileFromBlobPart } from '@vben/utils';
 
-import { ElButton, ElLoading, ElMessage } from 'element-plus';
+import { ElLoading, ElMessage } from 'element-plus';
 
-import { useVbenVxeGrid } from '#/adapter/vxe-table';
+import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
-import { deleteTenant, exportTenant, getTenantPage } from '#/api/system/tenant';
+import {
+  deleteTenant,
+  deleteTenantList,
+  exportTenant,
+  getTenantPage,
+} from '#/api/system/tenant';
 import { getTenantPackageList } from '#/api/system/tenant-package';
 import { $t } from '#/locales';
 
@@ -69,13 +73,36 @@ async function onDelete(row: SystemTenantApi.Tenant) {
     await deleteTenant(row.id as number);
     ElMessage.success($t('ui.actionMessage.deleteSuccess', [row.name]));
     onRefresh();
-  } catch {
-    // 错误处理
   } finally {
     loading.close();
   }
 }
 
+/** 批量删除租户 */
+async function onDeleteBatch() {
+  const loading = ElLoading.service({
+    lock: true,
+    text: $t('ui.actionMessage.deleting'),
+    background: 'rgba(0, 0, 0, 0.7)',
+  });
+  try {
+    await deleteTenantList(checkedIds.value);
+    ElMessage.success($t('ui.actionMessage.deleteSuccess'));
+    onRefresh();
+  } finally {
+    loading.close();
+  }
+}
+
+const checkedIds = ref<number[]>([]);
+function handleRowCheckboxChange({
+  records,
+}: {
+  records: SystemTenantApi.Tenant[];
+}) {
+  checkedIds.value = records.map((item) => item.id as number);
+}
+
 /** 表格操作按钮的回调函数 */
 function onActionClick({
   code,
@@ -120,6 +147,10 @@ const [Grid, gridApi] = useVbenVxeGrid({
       search: true,
     },
   } as VxeTableGridOptions<SystemTenantApi.Tenant>,
+  gridEvents: {
+    checkboxAll: handleRowCheckboxChange,
+    checkboxChange: handleRowCheckboxChange,
+  },
 });
 
 /** 初始化 */
@@ -136,23 +167,32 @@ onMounted(async () => {
     <FormModal @success="onRefresh" />
     <Grid table-title="租户列表">
       <template #toolbar-tools>
-        <ElButton
+        <TableAction
-          type="primary"
+          :actions="[
-          @click="onCreate"
+            {
-          v-access:code="['system:tenant:create']"
+              label: $t('ui.actionTitle.create', ['租户']),
-        >
+              type: 'primary',
-          <Plus class="mr-2 size-5" />
+              icon: ACTION_ICON.ADD,
-          {{ $t('ui.actionTitle.create', ['租户']) }}
+              auth: ['system:tenant:create'],
-        </ElButton>
+              onClick: onCreate,
-        <ElButton
+            },
-          type="primary"
+            {
-          class="ml-2"
+              label: $t('ui.actionTitle.export'),
-          @click="onExport"
+              type: 'primary',
-          v-access:code="['system:tenant:export']"
+              icon: ACTION_ICON.DOWNLOAD,
-        >
+              auth: ['system:tenant:export'],
-          <Download class="mr-2 size-5" />
+              onClick: onExport,
-          {{ $t('ui.actionTitle.export') }}
+            },
-        </ElButton>
+            {
+              label: $t('ui.actionTitle.deleteBatch'),
+              type: 'danger',
+              icon: ACTION_ICON.DELETE,
+              disabled: isEmpty(checkedIds),
+              auth: ['system:tenant:delete'],
+              onClick: onDeleteBatch,
+            },
+          ]"
+        />
       </template>
     </Grid>
   </Page>

apps/web-ele/src/views/system/tenantPackage/data.ts

@@ -95,6 +95,10 @@ export function useGridColumns<T = SystemTenantPackageApi.TenantPackage>(
   onActionClick: OnActionClickFn<T>,
 ): VxeTableGridOptions['columns'] {
   return [
+    {
+      type: 'checkbox',
+      width: 40,
+    },
     {
       field: 'id',
       title: '套餐编号',

apps/web-ele/src/views/system/tenantPackage/index.vue

@@ -5,14 +5,17 @@ import type {
 } from '#/adapter/vxe-table';
 import type { SystemTenantPackageApi } from '#/api/system/tenant-package';
 
+import { ref } from 'vue';
+
 import { DocAlert, Page, useVbenModal } from '@vben/common-ui';
-import { Plus } from '@vben/icons';
+import { isEmpty } from '@vben/utils';
 
-import { ElButton, ElMessage } from 'element-plus';
+import { ElMessage } from 'element-plus';
 
-import { useVbenVxeGrid } from '#/adapter/vxe-table';
+import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
 import {
   deleteTenantPackage,
+  deleteTenantPackageList,
   getTenantPackagePage,
 } from '#/api/system/tenant-package';
 import { $t } from '#/locales';
@@ -52,11 +55,37 @@ async function onDelete(row: SystemTenantPackageApi.TenantPackage) {
     loadingInstance.close();
     ElMessage.success($t('ui.actionMessage.deleteSuccess', [row.name]));
     onRefresh();
-  } catch {
+  } finally {
     loadingInstance.close();
   }
 }
 
+/** 批量删除租户套餐 */
+async function onDeleteBatch() {
+  const loadingInstance = ElMessage({
+    message: $t('ui.actionMessage.deleting'),
+    type: 'info',
+    duration: 0,
+  });
+  try {
+    await deleteTenantPackageList(checkedIds.value);
+    loadingInstance.close();
+    ElMessage.success($t('ui.actionMessage.deleteSuccess'));
+    onRefresh();
+  } finally {
+    loadingInstance.close();
+  }
+}
+
+const checkedIds = ref<number[]>([]);
+function handleRowCheckboxChange({
+  records,
+}: {
+  records: SystemTenantPackageApi.TenantPackage[];
+}) {
+  checkedIds.value = records.map((item) => item.id as number);
+}
+
 /** 表格操作按钮的回调函数 */
 function onActionClick({
   code,
@@ -102,6 +131,10 @@ const [Grid, gridApi] = useVbenVxeGrid({
       search: true,
     },
   } as VxeTableGridOptions<SystemTenantPackageApi.TenantPackage>,
+  gridEvents: {
+    checkboxAll: handleRowCheckboxChange,
+    checkboxChange: handleRowCheckboxChange,
+  },
 });
 </script>
 
@@ -114,14 +147,25 @@ const [Grid, gridApi] = useVbenVxeGrid({
     <FormModal @success="onRefresh" />
     <Grid table-title="租户套餐列表">
       <template #toolbar-tools>
-        <ElButton
+        <TableAction
-          type="primary"
+          :actions="[
-          @click="onCreate"
+            {
-          v-access:code="['system:tenant-package:create']"
+              label: $t('ui.actionTitle.create', ['套餐']),
-        >
+              type: 'primary',
-          <Plus class="mr-2 size-5" />
+              icon: ACTION_ICON.ADD,
-          {{ $t('ui.actionTitle.create', ['套餐']) }}
+              auth: ['system:tenant-package:create'],
-        </ElButton>
+              onClick: onCreate,
+            },
+            {
+              label: $t('ui.actionTitle.deleteBatch'),
+              type: 'danger',
+              icon: ACTION_ICON.DELETE,
+              disabled: isEmpty(checkedIds),
+              auth: ['system:tenant-package:delete'],
+              onClick: onDeleteBatch,
+            },
+          ]"
+        />
       </template>
     </Grid>
   </Page>

apps/web-ele/src/views/system/user/data.ts

@@ -285,6 +285,10 @@ export function useGridColumns<T = SystemUserApi.User>(
   ) => PromiseLike<boolean | undefined>,
 ): VxeTableGridOptions['columns'] {
   return [
+    {
+      type: 'checkbox',
+      width: 40,
+    },
     {
       field: 'id',
       title: '用户编号',

apps/web-ele/src/views/system/user/index.vue

@@ -6,13 +6,14 @@ import type { SystemUserApi } from '#/api/system/user';
 import { ref } from 'vue';
 
 import { confirm, DocAlert, Page, useVbenModal } from '@vben/common-ui';
-import { downloadFileFromBlobPart } from '@vben/utils';
+import { downloadFileFromBlobPart, isEmpty } from '@vben/utils';
 
 import { ElLoading, ElMessage } from 'element-plus';
 
 import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
 import {
   deleteUser,
+  deleteUserList,
   exportUser,
   getUserPage,
   updateUserStatus,
@@ -90,13 +91,35 @@ async function onDelete(row: SystemUserApi.User) {
     await deleteUser(row.id as number);
     ElMessage.success($t('ui.actionMessage.deleteSuccess', [row.username]));
     onRefresh();
-  } catch {
-    // 异常处理
   } finally {
     loadingInstance.close();
   }
 }
 
+/** 批量删除用户 */
+async function onDeleteBatch() {
+  const loadingInstance = ElLoading.service({
+    text: $t('ui.actionMessage.deleting'),
+    fullscreen: true,
+  });
+  try {
+    await deleteUserList(checkedIds.value);
+    ElMessage.success($t('ui.actionMessage.deleteSuccess'));
+    onRefresh();
+  } finally {
+    loadingInstance.close();
+  }
+}
+
+const checkedIds = ref<number[]>([]);
+function handleRowCheckboxChange({
+  records,
+}: {
+  records: SystemUserApi.User[];
+}) {
+  checkedIds.value = records.map((item) => item.id as number);
+}
+
 /** 重置密码 */
 function onResetPassword(row: SystemUserApi.User) {
   resetPasswordModalApi.setData(row).open();
@@ -161,6 +184,10 @@ const [Grid, gridApi] = useVbenVxeGrid({
       search: true,
     },
   } as VxeTableGridOptions<SystemUserApi.User>,
+  gridEvents: {
+    checkboxAll: handleRowCheckboxChange,
+    checkboxChange: handleRowCheckboxChange,
+  },
 });
 </script>
 
@@ -212,6 +239,14 @@ const [Grid, gridApi] = useVbenVxeGrid({
                   auth: ['system:user:import'],
                   onClick: onImport,
                 },
+                {
+                  label: $t('ui.actionTitle.deleteBatch'),
+                  type: 'danger',
+                  icon: ACTION_ICON.DELETE,
+                  disabled: isEmpty(checkedIds),
+                  auth: ['system:user:delete'],
+                  onClick: onDeleteBatch,
+                },
               ]"
             />
           </template>