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

apps/web-antd/src/api/system/dept/index.ts

@@ -45,3 +45,8 @@ export async function updateDept(data: SystemDeptApi.Dept) {
 export async function deleteDept(id: number) {
   return requestClient.delete(`/system/dept/delete?id=${id}`);
 }
+
+/** 批量删除部门 */
+export async function deleteDeptList(ids: number[]) {
+  return requestClient.delete(`/system/dept/delete-list?ids=${ids.join(',')}`);
+}

apps/web-antd/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-antd/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-antd/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-antd/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-antd/src/api/system/menu/index.ts

@@ -52,3 +52,8 @@ export async function updateMenu(data: SystemMenuApi.Menu) {
 export async function deleteMenu(id: number) {
   return requestClient.delete(`/system/menu/delete?id=${id}`);
 }
+
+/** 批量删除菜单 */
+export async function deleteMenuList(ids: number[]) {
+  return requestClient.delete(`/system/menu/delete-list?ids=${ids.join(',')}`);
+}

apps/web-antd/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-antd/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-antd/src/api/system/oauth2/token/index.ts

@@ -32,3 +32,10 @@ export function deleteOAuth2Token(accessToken: string) {
     `/system/oauth2-token/delete?accessToken=${accessToken}`,
   );
 }
+
+/** 批量删除 OAuth2.0 令牌 */
+export function deleteOAuth2TokenList(accessTokens: string[]) {
+  return requestClient.delete(
+    `/system/oauth2-token/delete-list?accessTokens=${accessTokens.join(',')}`,
+  );
+}

apps/web-antd/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-antd/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-antd/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-antd/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-antd/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-antd/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-antd/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-antd/src/views/system/dept/data.ts

@@ -113,6 +113,7 @@ export function useGridColumns(
   getLeaderName?: (userId: number) => string | undefined,
 ): VxeTableGridOptions<SystemDeptApi.Dept>['columns'] {
   return [
+    { type: 'checkbox', width: 40 },
     {
       field: 'name',
       title: '部门名称',

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

@@ -6,11 +6,12 @@ import type { SystemUserApi } from '#/api/system/user';
 import { onMounted, ref } from 'vue';
 
 import { Page, useVbenModal } from '@vben/common-ui';
+import { isEmpty } from '@vben/utils';
 
 import { message } from 'ant-design-vue';
 
 import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
-import { deleteDept, getDeptList } from '#/api/system/dept';
+import { deleteDept, deleteDeptList, getDeptList } from '#/api/system/dept';
 import { getSimpleUserList } from '#/api/system/user';
 import { $t } from '#/locales';
 
@@ -60,14 +61,37 @@ function handleEdit(row: SystemDeptApi.Dept) {
 async function handleDelete(row: SystemDeptApi.Dept) {
   const hideLoading = message.loading({
     content: $t('ui.actionMessage.deleting', [row.name]),
-    key: 'action_key_msg',
+    duration: 0,
+    key: 'action_process_msg',
   });
   try {
     await deleteDept(row.id as number);
-    message.success({
+    message.success($t('ui.actionMessage.deleteSuccess', [row.name]));
-      content: $t('ui.actionMessage.deleteSuccess', [row.name]),
+    onRefresh();
-      key: 'action_key_msg',
+  } finally {
-    });
+    hideLoading();
+  }
+}
+
+const checkedIds = ref<number[]>([]);
+function handleRowCheckboxChange({
+  records,
+}: {
+  records: SystemDeptApi.Dept[];
+}) {
+  checkedIds.value = records.map((item) => item.id as number);
+}
+
+/** 批量删除部门 */
+async function handleDeleteBatch() {
+  const hideLoading = message.loading({
+    content: $t('ui.actionMessage.deleting'),
+    duration: 0,
+    key: 'action_process_msg',
+  });
+  try {
+    await deleteDeptList(checkedIds.value);
+    message.success($t('ui.actionMessage.deleteSuccess'));
     onRefresh();
   } finally {
     hideLoading();
@@ -78,31 +102,33 @@ const [Grid, gridApi] = useVbenVxeGrid({
   gridOptions: {
     columns: useGridColumns(getLeaderName),
     height: 'auto',
-    keepSource: true,
-    pagerConfig: {
-      enabled: false,
-    },
     proxyConfig: {
       ajax: {
-        query: async (_params) => {
+        query: async () => {
           return await getDeptList();
         },
       },
     },
     rowConfig: {
       keyField: 'id',
+      isHover: true,
     },
     toolbarConfig: {
       refresh: { code: 'query' },
+      search: true,
     },
     treeConfig: {
-      parentField: 'parentId',
-      rowField: 'id',
       transform: true,
+      rowField: 'id',
+      parentField: 'parentId',
       expandAll: true,
-      reserve: true,
+      accordion: false,
     },
-  } as VxeTableGridOptions,
+  } as VxeTableGridOptions<SystemDeptApi.Dept>,
+  gridEvents: {
+    checkboxAll: handleRowCheckboxChange,
+    checkboxChange: handleRowCheckboxChange,
+  },
 });
 
 /** 初始化 */
@@ -130,6 +156,15 @@ onMounted(async () => {
               type: 'primary',
               onClick: toggleExpand,
             },
+            {
+              label: '批量删除',
+              type: 'primary',
+              danger: true,
+              disabled: isEmpty(checkedIds),
+              icon: ACTION_ICON.DELETE,
+              auth: ['system:dept:delete'],
+              onClick: handleDeleteBatch,
+            },
           ]"
         />
       </template>

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

@@ -101,6 +101,7 @@ export function useTypeGridFormSchema(): VbenFormSchema[] {
 /** 类型列表的字段 */
 export function useTypeGridColumns(): VxeTableGridOptions['columns'] {
   return [
+    { type: 'checkbox', width: 40 },
     {
       field: 'id',
       title: '字典编号',
@@ -288,6 +289,7 @@ export function useDataGridFormSchema(): VbenFormSchema[] {
  */
 export function useDataGridColumns(): VxeTableGridOptions['columns'] {
   return [
+    { type: 'checkbox', width: 40 },
     {
       field: 'id',
       title: '字典编码',

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

@@ -2,16 +2,17 @@
 import type { VxeTableGridOptions } 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 { downloadFileFromBlobPart } from '@vben/utils';
+import { downloadFileFromBlobPart, isEmpty } from '@vben/utils';
 
 import { message } from 'ant-design-vue';
 
 import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
 import {
   deleteDictData,
+  deleteDictDataList,
   exportDictData,
   getDictDataPage,
 } from '#/api/system/dict/data';
@@ -57,14 +58,37 @@ function handleEdit(row: SystemDictDataApi.DictData) {
 async function handleDelete(row: SystemDictDataApi.DictData) {
   const hideLoading = message.loading({
     content: $t('ui.actionMessage.deleting', [row.label]),
-    key: 'action_key_msg',
+    duration: 0,
+    key: 'action_process_msg',
   });
   try {
     await deleteDictData(row.id as number);
-    message.success({
+    message.success($t('ui.actionMessage.deleteSuccess', [row.label]));
-      content: $t('ui.actionMessage.deleteSuccess', [row.label]),
+    onRefresh();
-      key: 'action_key_msg',
+  } finally {
-    });
+    hideLoading();
+  }
+}
+
+const checkedIds = ref<number[]>([]);
+function handleRowCheckboxChange({
+  records,
+}: {
+  records: SystemDictDataApi.DictData[];
+}) {
+  checkedIds.value = records.map((item) => item.id as number);
+}
+
+/** 批量删除字典数据 */
+async function handleDeleteBatch() {
+  const hideLoading = message.loading({
+    content: $t('ui.actionMessage.deleting'),
+    duration: 0,
+    key: 'action_process_msg',
+  });
+  try {
+    await deleteDictDataList(checkedIds.value);
+    message.success($t('ui.actionMessage.deleteSuccess'));
     onRefresh();
   } finally {
     hideLoading();
@@ -93,12 +117,17 @@ const [Grid, gridApi] = useVbenVxeGrid({
     },
     rowConfig: {
       keyField: 'id',
+      isHover: true,
     },
     toolbarConfig: {
       refresh: { code: 'query' },
       search: true,
     },
   } as VxeTableGridOptions<SystemDictDataApi.DictData>,
+  gridEvents: {
+    checkboxAll: handleRowCheckboxChange,
+    checkboxChange: handleRowCheckboxChange,
+  },
 });
 
 /** 监听 dictType 变化，重新查询 */
@@ -134,6 +163,15 @@ watch(
               auth: ['system:dict:export'],
               onClick: handleExport,
             },
+            {
+              label: '批量删除',
+              type: 'primary',
+              danger: true,
+              disabled: isEmpty(checkedIds),
+              icon: ACTION_ICON.DELETE,
+              auth: ['system:dict:delete'],
+              onClick: handleDeleteBatch,
+            },
           ]"
         />
       </template>

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

@@ -5,14 +5,17 @@ import type {
 } from '#/adapter/vxe-table';
 import type { SystemDictTypeApi } from '#/api/system/dict/type';
 
+import { ref } from 'vue';
+
 import { useVbenModal } from '@vben/common-ui';
-import { downloadFileFromBlobPart } from '@vben/utils';
+import { downloadFileFromBlobPart, isEmpty } from '@vben/utils';
 
 import { message } from 'ant-design-vue';
 
 import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
 import {
   deleteDictType,
+  deleteDictTypeList,
   exportDictType,
   getDictTypePage,
 } from '#/api/system/dict/type';
@@ -53,14 +56,37 @@ function handleEdit(row: any) {
 async function handleDelete(row: SystemDictTypeApi.DictType) {
   const hideLoading = message.loading({
     content: $t('ui.actionMessage.deleting', [row.name]),
-    key: 'action_key_msg',
+    duration: 0,
+    key: 'action_process_msg',
   });
   try {
     await deleteDictType(row.id as number);
-    message.success({
+    message.success($t('ui.actionMessage.deleteSuccess', [row.name]));
-      content: $t('ui.actionMessage.deleteSuccess', [row.name]),
+    onRefresh();
-      key: 'action_key_msg',
+  } finally {
-    });
+    hideLoading();
+  }
+}
+
+const checkedIds = ref<number[]>([]);
+function handleRowCheckboxChange({
+  records,
+}: {
+  records: SystemDictTypeApi.DictType[];
+}) {
+  checkedIds.value = records.map((item) => item.id as number);
+}
+
+/** 批量删除字典类型 */
+async function handleDeleteBatch() {
+  const hideLoading = message.loading({
+    content: $t('ui.actionMessage.deleting'),
+    duration: 0,
+    key: 'action_process_msg',
+  });
+  try {
+    await deleteDictTypeList(checkedIds.value);
+    message.success($t('ui.actionMessage.deleteSuccess'));
     onRefresh();
   } finally {
     hideLoading();
@@ -72,6 +98,8 @@ const gridEvents: VxeGridListeners<SystemDictTypeApi.DictType> = {
   cellClick: ({ row }) => {
     emit('select', row.type);
   },
+  checkboxAll: handleRowCheckboxChange,
+  checkboxChange: handleRowCheckboxChange,
 };
 
 const [Grid, gridApi] = useVbenVxeGrid({
@@ -81,7 +109,6 @@ const [Grid, gridApi] = useVbenVxeGrid({
   gridOptions: {
     columns: useTypeGridColumns(),
     height: 'auto',
-    keepSource: true,
     proxyConfig: {
       ajax: {
         query: async ({ page }, formValues) => {
@@ -96,6 +123,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
     rowConfig: {
       keyField: 'id',
       isCurrent: true,
+      isHover: true,
     },
     toolbarConfig: {
       refresh: { code: 'query' },
@@ -128,6 +156,15 @@ const [Grid, gridApi] = useVbenVxeGrid({
               auth: ['system:dict:export'],
               onClick: handleExport,
             },
+            {
+              label: '批量删除',
+              type: 'primary',
+              danger: true,
+              disabled: isEmpty(checkedIds),
+              icon: ACTION_ICON.DELETE,
+              auth: ['system:dict:delete'],
+              onClick: handleDeleteBatch,
+            },
           ]"
         />
       </template>

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

@@ -122,6 +122,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
 /** 列表的字段 */
 export function useGridColumns(): VxeTableGridOptions['columns'] {
   return [
+    { type: 'checkbox', width: 40 },
     {
       field: 'id',
       title: '编号',

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

@@ -2,13 +2,17 @@
 import type { VxeTableGridOptions } 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 { isEmpty } from '@vben/utils';
 
 import { message } from 'ant-design-vue';
 
 import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
 import {
   deleteMailAccount,
+  deleteMailAccountList,
   getMailAccountPage,
 } from '#/api/system/mail/account';
 import { $t } from '#/locales';
@@ -40,14 +44,37 @@ function handleEdit(row: SystemMailAccountApi.MailAccount) {
 async function handleDelete(row: SystemMailAccountApi.MailAccount) {
   const hideLoading = message.loading({
     content: $t('ui.actionMessage.deleting', [row.mail]),
-    key: 'action_key_msg',
+    duration: 0,
+    key: 'action_process_msg',
   });
   try {
     await deleteMailAccount(row.id as number);
-    message.success({
+    message.success($t('ui.actionMessage.deleteSuccess', [row.mail]));
-      content: $t('ui.actionMessage.deleteSuccess', [row.mail]),
+    onRefresh();
-      key: 'action_key_msg',
+  } finally {
-    });
+    hideLoading();
+  }
+}
+
+const checkedIds = ref<number[]>([]);
+function handleRowCheckboxChange({
+  records,
+}: {
+  records: SystemMailAccountApi.MailAccount[];
+}) {
+  checkedIds.value = records.map((item) => item.id as number);
+}
+
+/** 批量删除邮箱账号 */
+async function handleDeleteBatch() {
+  const hideLoading = message.loading({
+    content: $t('ui.actionMessage.deleting'),
+    duration: 0,
+    key: 'action_process_msg',
+  });
+  try {
+    await deleteMailAccountList(checkedIds.value);
+    message.success($t('ui.actionMessage.deleteSuccess'));
     onRefresh();
   } finally {
     hideLoading();
@@ -75,12 +102,17 @@ const [Grid, gridApi] = useVbenVxeGrid({
     },
     rowConfig: {
       keyField: 'id',
+      isHover: true,
     },
     toolbarConfig: {
       refresh: { code: 'query' },
       search: true,
     },
   } as VxeTableGridOptions<SystemMailAccountApi.MailAccount>,
+  gridEvents: {
+    checkboxAll: handleRowCheckboxChange,
+    checkboxChange: handleRowCheckboxChange,
+  },
 });
 </script>
 <template>
@@ -101,6 +133,15 @@ const [Grid, gridApi] = useVbenVxeGrid({
               auth: ['system:mail-account:create'],
               onClick: handleCreate,
             },
+            {
+              label: '批量删除',
+              type: 'primary',
+              danger: true,
+              disabled: isEmpty(checkedIds),
+              icon: ACTION_ICON.DELETE,
+              auth: ['system:mail-account:delete'],
+              onClick: handleDeleteBatch,
+            },
           ]"
         />
       </template>
@@ -121,7 +162,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
               icon: ACTION_ICON.DELETE,
               auth: ['system:mail-account:delete'],
               popConfirm: {
-                title: $t('ui.actionMessage.deleteConfirm', [row.name]),
+                title: $t('ui.actionMessage.deleteConfirm', [row.mail]),
                 confirm: handleDelete.bind(null, row),
               },
             },

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

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

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

@@ -6,6 +6,7 @@ import type { SystemMailTemplateApi } from '#/api/system/mail/template';
 import { onMounted, ref } from 'vue';
 
 import { DocAlert, Page, useVbenModal } from '@vben/common-ui';
+import { isEmpty } from '@vben/utils';
 
 import { message } from 'ant-design-vue';
 
@@ -13,6 +14,7 @@ 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';
@@ -55,17 +57,43 @@ function handleSend(row: SystemMailTemplateApi.MailTemplate) {
 
 /** 删除邮件模板 */
 async function handleDelete(row: SystemMailTemplateApi.MailTemplate) {
-  message.loading({
+  const hideLoading = message.loading({
     content: $t('ui.actionMessage.deleting', [row.name]),
     duration: 0,
     key: 'action_process_msg',
   });
-  await deleteMailTemplate(row.id as number);
+  try {
-  message.success({
+    await deleteMailTemplate(row.id as number);
-    content: $t('ui.actionMessage.deleteSuccess', [row.name]),
+    message.success($t('ui.actionMessage.deleteSuccess', [row.name]));
-    key: 'action_key_msg',
+    onRefresh();
+  } finally {
+    hideLoading();
+  }
+}
+
+const checkedIds = ref<number[]>([]);
+function handleRowCheckboxChange({
+  records,
+}: {
+  records: SystemMailTemplateApi.MailTemplate[];
+}) {
+  checkedIds.value = records.map((item) => item.id as number);
+}
+
+/** 批量删除邮件模板 */
+async function handleDeleteBatch() {
+  const hideLoading = message.loading({
+    content: $t('ui.actionMessage.deleting'),
+    duration: 0,
+    key: 'action_process_msg',
   });
-  onRefresh();
+  try {
+    await deleteMailTemplateList(checkedIds.value);
+    message.success($t('ui.actionMessage.deleteSuccess'));
+    onRefresh();
+  } finally {
+    hideLoading();
+  }
 }
 
 /** 获取邮箱账号 */
@@ -94,12 +122,17 @@ const [Grid, gridApi] = useVbenVxeGrid({
     },
     rowConfig: {
       keyField: 'id',
+      isHover: true,
     },
     toolbarConfig: {
       refresh: { code: 'query' },
       search: true,
     },
   } as VxeTableGridOptions<SystemMailTemplateApi.MailTemplate>,
+  gridEvents: {
+    checkboxAll: handleRowCheckboxChange,
+    checkboxChange: handleRowCheckboxChange,
+  },
 });
 
 /** 初始化 */
@@ -126,6 +159,15 @@ onMounted(async () => {
               auth: ['system:mail-template:create'],
               onClick: handleCreate,
             },
+            {
+              label: '批量删除',
+              type: 'primary',
+              danger: true,
+              disabled: isEmpty(checkedIds),
+              icon: ACTION_ICON.DELETE,
+              auth: ['system:mail-template:delete'],
+              onClick: handleDeleteBatch,
+            },
           ]"
         />
       </template>

apps/web-antd/src/views/system/menu/data.ts

@@ -268,6 +268,7 @@ export function useFormSchema(): VbenFormSchema[] {
 /** 列表的字段 */
 export function useGridColumns(): VxeTableGridOptions<SystemMenuApi.Menu>['columns'] {
   return [
+    { type: 'checkbox', width: 40 },
     {
       field: 'name',
       title: '菜单名称',

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

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

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

@@ -88,6 +88,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
 /** 列表的字段 */
 export function useGridColumns(): VxeTableGridOptions['columns'] {
   return [
+    { type: 'checkbox', width: 40 },
     {
       field: 'id',
       title: '公告编号',

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

@@ -2,12 +2,20 @@
 import type { VxeTableGridOptions } from '#/adapter/vxe-table';
 import type { SystemNoticeApi } from '#/api/system/notice';
 
+import { ref } from 'vue';
+
 import { Page, useVbenModal } from '@vben/common-ui';
+import { isEmpty } from '@vben/utils';
 
 import { message } from 'ant-design-vue';
 
 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';
@@ -37,14 +45,37 @@ function handleEdit(row: SystemNoticeApi.Notice) {
 async function handleDelete(row: SystemNoticeApi.Notice) {
   const hideLoading = message.loading({
     content: $t('ui.actionMessage.deleting', [row.title]),
-    key: 'action_key_msg',
+    duration: 0,
+    key: 'action_process_msg',
   });
   try {
     await deleteNotice(row.id as number);
-    message.success({
+    message.success($t('ui.actionMessage.deleteSuccess', [row.title]));
-      content: $t('ui.actionMessage.deleteSuccess', [row.title]),
+    onRefresh();
-      key: 'action_key_msg',
+  } finally {
-    });
+    hideLoading();
+  }
+}
+
+const checkedIds = ref<number[]>([]);
+function handleRowCheckboxChange({
+  records,
+}: {
+  records: SystemNoticeApi.Notice[];
+}) {
+  checkedIds.value = records.map((item) => item.id as number);
+}
+
+/** 批量删除公告 */
+async function handleDeleteBatch() {
+  const hideLoading = message.loading({
+    content: $t('ui.actionMessage.deleting'),
+    duration: 0,
+    key: 'action_process_msg',
+  });
+  try {
+    await deleteNoticeList(checkedIds.value);
+    message.success($t('ui.actionMessage.deleteSuccess'));
     onRefresh();
   } finally {
     hideLoading();
@@ -59,10 +90,7 @@ async function handlePush(row: SystemNoticeApi.Notice) {
   });
   try {
     await pushNotice(row.id as number);
-    message.success({
+    message.success($t('ui.actionMessage.operationSuccess'));
-      content: $t('ui.actionMessage.operationSuccess'),
-      key: 'action_key_msg',
-    });
   } finally {
     hideLoading();
   }
@@ -89,12 +117,17 @@ const [Grid, gridApi] = useVbenVxeGrid({
     },
     rowConfig: {
       keyField: 'id',
+      isHover: true,
     },
     toolbarConfig: {
       refresh: { code: 'query' },
       search: true,
     },
   } as VxeTableGridOptions<SystemNoticeApi.Notice>,
+  gridEvents: {
+    checkboxAll: handleRowCheckboxChange,
+    checkboxChange: handleRowCheckboxChange,
+  },
 });
 </script>
 
@@ -112,6 +145,15 @@ const [Grid, gridApi] = useVbenVxeGrid({
               auth: ['system:notice:create'],
               onClick: handleCreate,
             },
+            {
+              label: '批量删除',
+              type: 'primary',
+              danger: true,
+              disabled: isEmpty(checkedIds),
+              icon: ACTION_ICON.DELETE,
+              auth: ['system:notice:delete'],
+              onClick: handleDeleteBatch,
+            },
           ]"
         />
       </template>
@@ -139,7 +181,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
               icon: ACTION_ICON.DELETE,
               auth: ['system:notice:delete'],
               popConfirm: {
-                title: $t('ui.actionMessage.deleteConfirm', [row.name]),
+                title: $t('ui.actionMessage.deleteConfirm', [row.title]),
                 confirm: handleDelete.bind(null, row),
               },
             },

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

@@ -226,6 +226,7 @@ export function useSendNotifyFormSchema(): VbenFormSchema[] {
 /** 列表的字段 */
 export function useGridColumns(): VxeTableGridOptions['columns'] {
   return [
+    { type: 'checkbox', width: 40 },
     {
       field: 'id',
       title: '编号',

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

@@ -2,14 +2,17 @@
 import type { VxeTableGridOptions } 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 { downloadFileFromBlobPart } from '@vben/utils';
+import { downloadFileFromBlobPart, isEmpty } from '@vben/utils';
 
 import { message } from 'ant-design-vue';
 
 import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
 import {
   deleteNotifyTemplate,
+  deleteNotifyTemplateList,
   exportNotifyTemplate,
   getNotifyTemplatePage,
 } from '#/api/system/notify/template';
@@ -59,14 +62,37 @@ function handleSend(row: SystemNotifyTemplateApi.NotifyTemplate) {
 async function handleDelete(row: SystemNotifyTemplateApi.NotifyTemplate) {
   const hideLoading = message.loading({
     content: $t('ui.actionMessage.deleting', [row.name]),
-    key: 'action_key_msg',
+    duration: 0,
+    key: 'action_process_msg',
   });
   try {
     await deleteNotifyTemplate(row.id as number);
-    message.success({
+    message.success($t('ui.actionMessage.deleteSuccess', [row.name]));
-      content: $t('ui.actionMessage.deleteSuccess', [row.name]),
+    onRefresh();
-      key: 'action_key_msg',
+  } finally {
-    });
+    hideLoading();
+  }
+}
+
+const checkedIds = ref<number[]>([]);
+function handleRowCheckboxChange({
+  records,
+}: {
+  records: SystemNotifyTemplateApi.NotifyTemplate[];
+}) {
+  checkedIds.value = records.map((item) => item.id as number);
+}
+
+/** 批量删除站内信模板 */
+async function handleDeleteBatch() {
+  const hideLoading = message.loading({
+    content: $t('ui.actionMessage.deleting'),
+    duration: 0,
+    key: 'action_process_msg',
+  });
+  try {
+    await deleteNotifyTemplateList(checkedIds.value);
+    message.success($t('ui.actionMessage.deleteSuccess'));
     onRefresh();
   } finally {
     hideLoading();
@@ -94,12 +120,17 @@ const [Grid, gridApi] = useVbenVxeGrid({
     },
     rowConfig: {
       keyField: 'id',
+      isHover: true,
     },
     toolbarConfig: {
       refresh: { code: 'query' },
       search: true,
     },
   } as VxeTableGridOptions<SystemNotifyTemplateApi.NotifyTemplate>,
+  gridEvents: {
+    checkboxAll: handleRowCheckboxChange,
+    checkboxChange: handleRowCheckboxChange,
+  },
 });
 </script>
 
@@ -129,6 +160,15 @@ const [Grid, gridApi] = useVbenVxeGrid({
               auth: ['system:notify-template:export'],
               onClick: handleExport,
             },
+            {
+              label: '批量删除',
+              type: 'primary',
+              danger: true,
+              disabled: isEmpty(checkedIds),
+              icon: ACTION_ICON.DELETE,
+              auth: ['system:notify-template:delete'],
+              onClick: handleDeleteBatch,
+            },
           ]"
         />
       </template>

apps/web-antd/src/views/system/oauth2/token/data.ts

@@ -37,6 +37,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
 /** 列表的字段 */
 export function useGridColumns(): VxeTableGridOptions['columns'] {
   return [
+    { type: 'checkbox', width: 40 },
     {
       field: 'accessToken',
       title: '访问令牌',

apps/web-antd/src/views/system/oauth2/token/index.vue

@@ -2,6 +2,8 @@
 import type { VxeTableGridOptions } from '#/adapter/vxe-table';
 import type { SystemOAuth2TokenApi } from '#/api/system/oauth2/token';
 
+import { ref } from 'vue';
+
 import { DocAlert, Page } from '@vben/common-ui';
 
 import { message } from 'ant-design-vue';
@@ -9,6 +11,7 @@ import { message } from 'ant-design-vue';
 import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
 import {
   deleteOAuth2Token,
+  deleteOAuth2TokenList,
   getOAuth2TokenPage,
 } from '#/api/system/oauth2/token';
 import { $t } from '#/locales';
@@ -38,6 +41,41 @@ async function handleDelete(row: SystemOAuth2TokenApi.OAuth2Token) {
   }
 }
 
+// 选中的令牌ID
+const checkedAccessTokens = ref<string[]>([]);
+
+/** 处理表格选择变化 */
+function handleSelectionChange({
+  selectRecords,
+}: {
+  selectRecords: SystemOAuth2TokenApi.OAuth2Token[];
+}) {
+  checkedAccessTokens.value = selectRecords.map((row) => row.accessToken);
+}
+
+/** 批量删除处理 */
+async function handleDeleteBatch() {
+  if (checkedAccessTokens.value.length === 0) {
+    message.warning('请至少选择一条数据');
+    return;
+  }
+  const hideLoading = message.loading({
+    content: $t('ui.actionMessage.deleting', ['令牌']),
+    key: 'action_key_msg',
+  });
+  try {
+    await deleteOAuth2TokenList(checkedAccessTokens.value);
+    message.success({
+      content: $t('ui.actionMessage.deleteSuccess', ['令牌']),
+      key: 'action_key_msg',
+    });
+    checkedAccessTokens.value = [];
+    onRefresh();
+  } finally {
+    hideLoading();
+  }
+}
+
 const [Grid, gridApi] = useVbenVxeGrid({
   formOptions: {
     schema: useGridFormSchema(),
@@ -63,6 +101,18 @@ const [Grid, gridApi] = useVbenVxeGrid({
     toolbarConfig: {
       refresh: { code: 'query' },
       search: true,
+      slots: {
+        buttons: 'toolbar_buttons',
+      },
+    },
+    checkboxConfig: {
+      checkField: 'checked',
+      trigger: 'row',
+      highlight: true,
+      range: true,
+    },
+    events: {
+      checkboxChange: handleSelectionChange,
     },
   } as VxeTableGridOptions<SystemOAuth2TokenApi.OAuth2Token>,
 });
@@ -78,6 +128,20 @@ const [Grid, gridApi] = useVbenVxeGrid({
     </template>
 
     <Grid table-title="令牌列表">
+      <template #toolbar_buttons>
+        <a-button
+          v-auth="['system:oauth2-token:delete']"
+          type="primary"
+          danger
+          :disabled="checkedAccessTokens.length === 0"
+          @click="handleDeleteBatch"
+        >
+          <template #icon>
+            <component :is="ACTION_ICON.DELETE" />
+          </template>
+          批量强退
+        </a-button>
+      </template>
       <template #actions="{ row }">
         <TableAction
           :actions="[

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

@@ -83,6 +83,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
 /** 列表的字段 */
 export function useGridColumns(): VxeTableGridOptions['columns'] {
   return [
+    { type: 'checkbox', width: 40 },
     {
       field: 'id',
       title: '岗位编号',

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

@@ -2,13 +2,20 @@
 import type { VxeTableGridOptions } from '#/adapter/vxe-table';
 import type { SystemPostApi } from '#/api/system/post';
 
+import { ref } from 'vue';
+
 import { Page, useVbenModal } from '@vben/common-ui';
-import { downloadFileFromBlobPart } from '@vben/utils';
+import { downloadFileFromBlobPart, isEmpty } from '@vben/utils';
 
 import { message } from 'ant-design-vue';
 
 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';
@@ -44,14 +51,37 @@ function handleEdit(row: SystemPostApi.Post) {
 async function handleDelete(row: SystemPostApi.Post) {
   const hideLoading = message.loading({
     content: $t('ui.actionMessage.deleting', [row.name]),
-    key: 'action_key_msg',
+    duration: 0,
+    key: 'action_process_msg',
   });
   try {
     await deletePost(row.id as number);
-    message.success({
+    message.success($t('ui.actionMessage.deleteSuccess', [row.name]));
-      content: $t('ui.actionMessage.deleteSuccess', [row.name]),
+    onRefresh();
-      key: 'action_key_msg',
+  } finally {
-    });
+    hideLoading();
+  }
+}
+
+const checkedIds = ref<number[]>([]);
+function handleRowCheckboxChange({
+  records,
+}: {
+  records: SystemPostApi.Post[];
+}) {
+  checkedIds.value = records.map((item) => item.id as number);
+}
+
+/** 批量删除岗位 */
+async function handleDeleteBatch() {
+  const hideLoading = message.loading({
+    content: $t('ui.actionMessage.deleting'),
+    duration: 0,
+    key: 'action_process_msg',
+  });
+  try {
+    await deletePostList(checkedIds.value);
+    message.success($t('ui.actionMessage.deleteSuccess'));
     onRefresh();
   } finally {
     hideLoading();
@@ -79,12 +109,17 @@ const [Grid, gridApi] = useVbenVxeGrid({
     },
     rowConfig: {
       keyField: 'id',
+      isHover: true,
     },
     toolbarConfig: {
       refresh: { code: 'query' },
       search: true,
     },
   } as VxeTableGridOptions<SystemPostApi.Post>,
+  gridEvents: {
+    checkboxAll: handleRowCheckboxChange,
+    checkboxChange: handleRowCheckboxChange,
+  },
 });
 </script>
 
@@ -109,6 +144,15 @@ const [Grid, gridApi] = useVbenVxeGrid({
               auth: ['system:post:export'],
               onClick: handleExport,
             },
+            {
+              label: '批量删除',
+              type: 'primary',
+              danger: true,
+              disabled: isEmpty(checkedIds),
+              icon: ACTION_ICON.DELETE,
+              auth: ['system:post:delete'],
+              onClick: handleDeleteBatch,
+            },
           ]"
         />
       </template>

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

@@ -186,6 +186,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
 /** 列表的字段 */
 export function useGridColumns(): VxeTableGridOptions['columns'] {
   return [
+    { type: 'checkbox', width: 40 },
     {
       field: 'id',
       title: '角色编号',

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

@@ -2,13 +2,20 @@
 import type { VxeTableGridOptions } from '#/adapter/vxe-table';
 import type { SystemRoleApi } from '#/api/system/role';
 
+import { ref } from 'vue';
+
 import { DocAlert, Page, useVbenModal } from '@vben/common-ui';
-import { downloadFileFromBlobPart } from '@vben/utils';
+import { downloadFileFromBlobPart, isEmpty } from '@vben/utils';
 
 import { message } from 'ant-design-vue';
 
 import { ACTION_ICON, TableAction, 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';
@@ -21,17 +28,16 @@ const [FormModal, formModalApi] = useVbenModal({
   destroyOnClose: true,
 });
 
-const [AssignDataPermissionFormModel, assignDataPermissionFormApi] =
+const [AssignMenuModal, assignMenuModalApi] = useVbenModal({
-  useVbenModal({
-    connectedComponent: AssignDataPermissionForm,
-    destroyOnClose: true,
-  });
-
-const [AssignMenuFormModel, assignMenuFormApi] = useVbenModal({
   connectedComponent: AssignMenuForm,
   destroyOnClose: true,
 });
 
+const [AssignDataPermissionModal, assignDataPermissionModalApi] = useVbenModal({
+  connectedComponent: AssignDataPermissionForm,
+  destroyOnClose: true,
+});
+
 /** 刷新表格 */
 function onRefresh() {
   gridApi.query();
@@ -40,12 +46,7 @@ function onRefresh() {
 /** 导出表格 */
 async function handleExport() {
   const data = await exportRole(await gridApi.formApi.getValues());
-  downloadFileFromBlobPart({ fileName: '角色.xls', source: data });
+  downloadFileFromBlobPart({ fileName: '角色数据.xls', source: data });
-}
-
-/** 编辑角色 */
-function handleEdit(row: SystemRoleApi.Role) {
-  formModalApi.setData(row).open();
 }
 
 /** 创建角色 */
@@ -53,32 +54,60 @@ function handleCreate() {
   formModalApi.setData(null).open();
 }
 
+/** 编辑角色 */
+function handleEdit(row: SystemRoleApi.Role) {
+  formModalApi.setData(row).open();
+}
+
 /** 删除角色 */
 async function handleDelete(row: SystemRoleApi.Role) {
   const hideLoading = message.loading({
     content: $t('ui.actionMessage.deleting', [row.name]),
-    key: 'action_key_msg',
+    duration: 0,
+    key: 'action_process_msg',
   });
   try {
     await deleteRole(row.id as number);
-    message.success({
+    message.success($t('ui.actionMessage.deleteSuccess', [row.name]));
-      content: $t('ui.actionMessage.deleteSuccess', [row.name]),
-      key: 'action_key_msg',
-    });
     onRefresh();
   } finally {
     hideLoading();
   }
 }
 
-/** 分配角色的数据权限 */
+const checkedIds = ref<number[]>([]);
-function handleAssignDataPermission(row: SystemRoleApi.Role) {
+function handleRowCheckboxChange({
-  assignDataPermissionFormApi.setData(row).open();
+  records,
+}: {
+  records: SystemRoleApi.Role[];
+}) {
+  checkedIds.value = records.map((item) => item.id as number);
 }
 
-/** 分配角色的菜单权限 */
+/** 批量删除角色 */
+async function handleDeleteBatch() {
+  const hideLoading = message.loading({
+    content: $t('ui.actionMessage.deleting'),
+    duration: 0,
+    key: 'action_process_msg',
+  });
+  try {
+    await deleteRoleList(checkedIds.value);
+    message.success($t('ui.actionMessage.deleteSuccess'));
+    onRefresh();
+  } finally {
+    hideLoading();
+  }
+}
+
+/** 分配菜单 */
 function handleAssignMenu(row: SystemRoleApi.Role) {
-  assignMenuFormApi.setData(row).open();
+  assignMenuModalApi.setData(row).open();
+}
+
+/** 分配数据权限 */
+function handleAssignDataPermission(row: SystemRoleApi.Role) {
+  assignDataPermissionModalApi.setData(row).open();
 }
 
 const [Grid, gridApi] = useVbenVxeGrid({
@@ -88,12 +117,11 @@ const [Grid, gridApi] = useVbenVxeGrid({
   gridOptions: {
     columns: useGridColumns(),
     height: 'auto',
-    keepSource: true,
     proxyConfig: {
       ajax: {
         query: async ({ page }, formValues) => {
           return await getRolePage({
-            page: page.currentPage,
+            pageNo: page.currentPage,
             pageSize: page.pageSize,
             ...formValues,
           });
@@ -102,12 +130,17 @@ const [Grid, gridApi] = useVbenVxeGrid({
     },
     rowConfig: {
       keyField: 'id',
+      isHover: true,
     },
     toolbarConfig: {
       refresh: { code: 'query' },
       search: true,
     },
   } as VxeTableGridOptions<SystemRoleApi.Role>,
+  gridEvents: {
+    checkboxAll: handleRowCheckboxChange,
+    checkboxChange: handleRowCheckboxChange,
+  },
 });
 </script>
 
@@ -122,8 +155,8 @@ const [Grid, gridApi] = useVbenVxeGrid({
     </template>
 
     <FormModal @success="onRefresh" />
-    <AssignDataPermissionFormModel @success="onRefresh" />
+    <AssignMenuModal @success="onRefresh" />
-    <AssignMenuFormModel @success="onRefresh" />
+    <AssignDataPermissionModal @success="onRefresh" />
     <Grid table-title="角色列表">
       <template #toolbar-tools>
         <TableAction
@@ -142,6 +175,15 @@ const [Grid, gridApi] = useVbenVxeGrid({
               auth: ['system:role:export'],
               onClick: handleExport,
             },
+            {
+              label: '批量删除',
+              type: 'primary',
+              danger: true,
+              disabled: isEmpty(checkedIds),
+              icon: ACTION_ICON.DELETE,
+              auth: ['system:role:delete'],
+              onClick: handleDeleteBatch,
+            },
           ]"
         />
       </template>
@@ -169,17 +211,17 @@ const [Grid, gridApi] = useVbenVxeGrid({
           ]"
           :drop-down-actions="[
             {
-              label: '数据权限',
+              label: '分配菜单',
-              type: 'link',
-              auth: ['system:permission:assign-role-data-scope'],
-              onClick: handleAssignDataPermission.bind(null, row),
-            },
-            {
-              label: '菜单权限',
               type: 'link',
               auth: ['system:permission:assign-role-menu'],
               onClick: handleAssignMenu.bind(null, row),
             },
+            {
+              label: '分配数据权限',
+              type: 'link',
+              auth: ['system:permission:assign-role-data-scope'],
+              onClick: handleAssignDataPermission.bind(null, row),
+            },
           ]"
         />
       </template>

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

@@ -202,6 +202,7 @@ export function useSendSmsFormSchema(): VbenFormSchema[] {
 /** 列表的字段 */
 export function useGridColumns(): VxeTableGridOptions['columns'] {
   return [
+    { type: 'checkbox', width: 40 },
     {
       field: 'id',
       title: '编号',

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

@@ -2,14 +2,17 @@
 import type { VxeTableGridOptions } 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 { downloadFileFromBlobPart } from '@vben/utils';
+import { downloadFileFromBlobPart, isEmpty } from '@vben/utils';
 
 import { message } from 'ant-design-vue';
 
 import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
 import {
   deleteSmsTemplate,
+  deleteSmsTemplateList,
   exportSmsTemplate,
   getSmsTemplatePage,
 } from '#/api/system/sms/template';
@@ -59,14 +62,37 @@ function handleSend(row: SystemSmsTemplateApi.SmsTemplate) {
 async function handleDelete(row: SystemSmsTemplateApi.SmsTemplate) {
   const hideLoading = message.loading({
     content: $t('ui.actionMessage.deleting', [row.name]),
-    key: 'action_key_msg',
+    duration: 0,
+    key: 'action_process_msg',
   });
   try {
     await deleteSmsTemplate(row.id as number);
-    message.success({
+    message.success($t('ui.actionMessage.deleteSuccess', [row.name]));
-      content: $t('ui.actionMessage.deleteSuccess', [row.name]),
+    onRefresh();
-      key: 'action_key_msg',
+  } finally {
-    });
+    hideLoading();
+  }
+}
+
+const checkedIds = ref<number[]>([]);
+function handleRowCheckboxChange({
+  records,
+}: {
+  records: SystemSmsTemplateApi.SmsTemplate[];
+}) {
+  checkedIds.value = records.map((item) => item.id as number);
+}
+
+/** 批量删除短信模板 */
+async function handleDeleteBatch() {
+  const hideLoading = message.loading({
+    content: $t('ui.actionMessage.deleting'),
+    duration: 0,
+    key: 'action_process_msg',
+  });
+  try {
+    await deleteSmsTemplateList(checkedIds.value);
+    message.success($t('ui.actionMessage.deleteSuccess'));
     onRefresh();
   } finally {
     hideLoading();
@@ -94,12 +120,17 @@ const [Grid, gridApi] = useVbenVxeGrid({
     },
     rowConfig: {
       keyField: 'id',
+      isHover: true,
     },
     toolbarConfig: {
       refresh: { code: 'query' },
       search: true,
     },
   } as VxeTableGridOptions<SystemSmsTemplateApi.SmsTemplate>,
+  gridEvents: {
+    checkboxAll: handleRowCheckboxChange,
+    checkboxChange: handleRowCheckboxChange,
+  },
 });
 </script>
 
@@ -129,6 +160,15 @@ const [Grid, gridApi] = useVbenVxeGrid({
               auth: ['system:sms-template:export'],
               onClick: handleExport,
             },
+            {
+              label: '批量删除',
+              type: 'primary',
+              danger: true,
+              disabled: isEmpty(checkedIds),
+              icon: ACTION_ICON.DELETE,
+              auth: ['system:sms-template:delete'],
+              onClick: handleDeleteBatch,
+            },
           ]"
         />
       </template>

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

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

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

@@ -6,12 +6,17 @@ import type { SystemTenantPackageApi } from '#/api/system/tenant-package';
 import { onMounted, ref } from 'vue';
 
 import { DocAlert, Page, useVbenModal } from '@vben/common-ui';
-import { downloadFileFromBlobPart } from '@vben/utils';
+import { downloadFileFromBlobPart, isEmpty } from '@vben/utils';
 
 import { message } from 'ant-design-vue';
 
 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';
 
@@ -58,14 +63,37 @@ function handleEdit(row: SystemTenantApi.Tenant) {
 async function handleDelete(row: SystemTenantApi.Tenant) {
   const hideLoading = message.loading({
     content: $t('ui.actionMessage.deleting', [row.name]),
-    key: 'action_key_msg',
+    duration: 0,
+    key: 'action_process_msg',
   });
   try {
     await deleteTenant(row.id as number);
-    message.success({
+    message.success($t('ui.actionMessage.deleteSuccess', [row.name]));
-      content: $t('ui.actionMessage.deleteSuccess', [row.name]),
+    onRefresh();
-      key: 'action_key_msg',
+  } finally {
-    });
+    hideLoading();
+  }
+}
+
+const checkedIds = ref<number[]>([]);
+function handleRowCheckboxChange({
+  records,
+}: {
+  records: SystemTenantApi.Tenant[];
+}) {
+  checkedIds.value = records.map((item) => item.id as number);
+}
+
+/** 批量删除租户 */
+async function handleDeleteBatch() {
+  const hideLoading = message.loading({
+    content: $t('ui.actionMessage.deleting'),
+    duration: 0,
+    key: 'action_process_msg',
+  });
+  try {
+    await deleteTenantList(checkedIds.value);
+    message.success($t('ui.actionMessage.deleteSuccess'));
     onRefresh();
   } finally {
     hideLoading();
@@ -91,12 +119,17 @@ const [Grid, gridApi] = useVbenVxeGrid({
     },
     rowConfig: {
       keyField: 'id',
+      isHover: true,
     },
     toolbarConfig: {
       refresh: { code: 'query' },
       search: true,
     },
   } as VxeTableGridOptions<SystemTenantApi.Tenant>,
+  gridEvents: {
+    checkboxAll: handleRowCheckboxChange,
+    checkboxChange: handleRowCheckboxChange,
+  },
 });
 
 /** 初始化 */
@@ -129,6 +162,15 @@ onMounted(async () => {
               auth: ['system:tenant:export'],
               onClick: handleExport,
             },
+            {
+              label: '批量删除',
+              type: 'primary',
+              danger: true,
+              disabled: isEmpty(checkedIds),
+              icon: ACTION_ICON.DELETE,
+              auth: ['system:tenant:delete'],
+              onClick: handleDeleteBatch,
+            },
           ]"
         />
       </template>

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

@@ -88,6 +88,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
 /** 列表的字段 */
 export function useGridColumns(): VxeTableGridOptions['columns'] {
   return [
+    { type: 'checkbox', width: 40 },
     {
       field: 'id',
       title: '套餐编号',

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

@@ -2,13 +2,17 @@
 import type { VxeTableGridOptions } 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 { isEmpty } from '@vben/utils';
 
 import { message } from 'ant-design-vue';
 
 import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
 import {
   deleteTenantPackage,
+  deleteTenantPackageList,
   getTenantPackagePage,
 } from '#/api/system/tenant-package';
 import { $t } from '#/locales';
@@ -40,14 +44,37 @@ function handleEdit(row: SystemTenantPackageApi.TenantPackage) {
 async function handleDelete(row: SystemTenantPackageApi.TenantPackage) {
   const hideLoading = message.loading({
     content: $t('ui.actionMessage.deleting', [row.name]),
-    key: 'action_key_msg',
+    duration: 0,
+    key: 'action_process_msg',
   });
   try {
     await deleteTenantPackage(row.id as number);
-    message.success({
+    message.success($t('ui.actionMessage.deleteSuccess', [row.name]));
-      content: $t('ui.actionMessage.deleteSuccess', [row.name]),
+    onRefresh();
-      key: 'action_key_msg',
+  } finally {
-    });
+    hideLoading();
+  }
+}
+
+const checkedIds = ref<number[]>([]);
+function handleRowCheckboxChange({
+  records,
+}: {
+  records: SystemTenantPackageApi.TenantPackage[];
+}) {
+  checkedIds.value = records.map((item) => item.id as number);
+}
+
+/** 批量删除租户套餐 */
+async function handleDeleteBatch() {
+  const hideLoading = message.loading({
+    content: $t('ui.actionMessage.deleting'),
+    duration: 0,
+    key: 'action_process_msg',
+  });
+  try {
+    await deleteTenantPackageList(checkedIds.value);
+    message.success($t('ui.actionMessage.deleteSuccess'));
     onRefresh();
   } finally {
     hideLoading();
@@ -75,12 +102,17 @@ const [Grid, gridApi] = useVbenVxeGrid({
     },
     rowConfig: {
       keyField: 'id',
+      isHover: true,
     },
     toolbarConfig: {
       refresh: { code: 'query' },
       search: true,
     },
   } as VxeTableGridOptions<SystemTenantPackageApi.TenantPackage>,
+  gridEvents: {
+    checkboxAll: handleRowCheckboxChange,
+    checkboxChange: handleRowCheckboxChange,
+  },
 });
 </script>
 
@@ -102,6 +134,15 @@ const [Grid, gridApi] = useVbenVxeGrid({
               auth: ['system:tenant-package:create'],
               onClick: handleCreate,
             },
+            {
+              label: '批量删除',
+              type: 'primary',
+              danger: true,
+              disabled: isEmpty(checkedIds),
+              icon: ACTION_ICON.DELETE,
+              auth: ['system:tenant-package:delete'],
+              onClick: handleDeleteBatch,
+            },
           ]"
         />
       </template>

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

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

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

@@ -1,28 +1,28 @@
 <script lang="ts" setup>
 import type { VxeTableGridOptions } from '#/adapter/vxe-table';
-import type { SystemDeptApi } from '#/api/system/dept';
 import type { SystemUserApi } from '#/api/system/user';
 
 import { ref } from 'vue';
 
-import { confirm, DocAlert, Page, useVbenModal } from '@vben/common-ui';
+import { Page, useVbenModal } from '@vben/common-ui';
-import { downloadFileFromBlobPart } from '@vben/utils';
+import { downloadFileFromBlobPart, isEmpty } from '@vben/utils';
 
 import { message } from 'ant-design-vue';
 
 import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
 import {
   deleteUser,
+  deleteUserList,
   exportUser,
   getUserPage,
+  importUserTemplate,
   updateUserStatus,
 } from '#/api/system/user';
 import { $t } from '#/locales';
-import { DICT_TYPE, getDictLabel } from '#/utils';
+import { CommonStatusEnum } from '#/utils';
 
 import { useGridColumns, useGridFormSchema } from './data';
 import AssignRoleForm from './modules/assign-role-form.vue';
-import DeptTree from './modules/dept-tree.vue';
 import Form from './modules/form.vue';
 import ImportForm from './modules/import-form.vue';
 import ResetPasswordForm from './modules/reset-password-form.vue';
@@ -52,30 +52,11 @@ function onRefresh() {
   gridApi.query();
 }
 
-/** 导出表格 */
-async function handleExport() {
-  const data = await exportUser(await gridApi.formApi.getValues());
-  downloadFileFromBlobPart({ fileName: '用户.xls', source: data });
-}
-
-/** 选择部门 */
-const searchDeptId = ref<number | undefined>(undefined);
-
-async function handleDeptSelect(dept: SystemDeptApi.Dept) {
-  searchDeptId.value = dept.id;
-  onRefresh();
-}
-
 /** 创建用户 */
 function handleCreate() {
   formModalApi.setData(null).open();
 }
 
-/** 导入用户 */
-function handleImport() {
-  importModalApi.open();
-}
-
 /** 编辑用户 */
 function handleEdit(row: SystemUserApi.User) {
   formModalApi.setData(row).open();
@@ -85,14 +66,37 @@ function handleEdit(row: SystemUserApi.User) {
 async function handleDelete(row: SystemUserApi.User) {
   const hideLoading = message.loading({
     content: $t('ui.actionMessage.deleting', [row.username]),
-    key: 'action_key_msg',
+    duration: 0,
+    key: 'action_process_msg',
   });
   try {
     await deleteUser(row.id as number);
-    message.success({
+    message.success($t('ui.actionMessage.deleteSuccess', [row.username]));
-      content: $t('ui.actionMessage.deleteSuccess', [row.username]),
+    onRefresh();
-      key: 'action_key_msg',
+  } finally {
-    });
+    hideLoading();
+  }
+}
+
+const checkedIds = ref<number[]>([]);
+function handleRowCheckboxChange({
+  records,
+}: {
+  records: SystemUserApi.User[];
+}) {
+  checkedIds.value = records.map((item) => item.id as number);
+}
+
+/** 批量删除用户 */
+async function handleDeleteBatch() {
+  const hideLoading = message.loading({
+    content: $t('ui.actionMessage.deleting'),
+    duration: 0,
+    key: 'action_process_msg',
+  });
+  try {
+    await deleteUserList(checkedIds.value);
+    message.success($t('ui.actionMessage.deleteSuccess'));
     onRefresh();
   } finally {
     hideLoading();
@@ -101,7 +105,7 @@ async function handleDelete(row: SystemUserApi.User) {
 
 /** 重置密码 */
 function handleResetPassword(row: SystemUserApi.User) {
-  resetPasswordModalApi.setData(row).open();
+  resetPasswordModalApi.setData({ id: row.id }).open();
 }
 
 /** 分配角色 */
@@ -109,30 +113,40 @@ function handleAssignRole(row: SystemUserApi.User) {
   assignRoleModalApi.setData(row).open();
 }
 
-/** 更新用户状态 */
+/** 导入用户 */
+function handleImport() {
+  importModalApi.open();
+}
+
+/** 导出用户 */
+async function handleExport() {
+  const data = await exportUser(await gridApi.formApi.getValues());
+  downloadFileFromBlobPart({ fileName: '用户数据.xls', source: data });
+}
+
+/** 下载导入模板 */
+async function handleImportTemplate() {
+  const data = await importUserTemplate();
+  downloadFileFromBlobPart({ fileName: '用户导入模板.xlsx', source: data });
+}
+
+/** 用户状态修改 */
 async function handleStatusChange(
   newStatus: number,
   row: SystemUserApi.User,
 ): Promise<boolean | undefined> {
-  return new Promise((resolve, reject) => {
+  try {
-    confirm({
+    await updateUserStatus(row.id as number, newStatus);
-      content: `你要将${row.username}的状态切换为【${getDictLabel(DICT_TYPE.COMMON_STATUS, newStatus)}】吗？`,
+    message.success(
-    })
+      $t('ui.actionMessage.updateSuccess', [
-      .then(async () => {
+        row.username,
-        // 更新用户状态
+        newStatus === CommonStatusEnum.ENABLE ? '启用' : '停用',
-        const res = await updateUserStatus(row.id as number, newStatus);
+      ]),
-        if (res) {
+    );
-          // 提示并返回成功
+    return true;
-          message.success($t('ui.actionMessage.operationSuccess'));
+  } catch {
-          resolve(true);
+    return false;
-        } else {
+  }
-          reject(new Error('更新失败'));
-        }
-      })
-      .catch(() => {
-        reject(new Error('取消操作'));
-      });
-  });
 }
 
 const [Grid, gridApi] = useVbenVxeGrid({
@@ -142,7 +156,6 @@ const [Grid, gridApi] = useVbenVxeGrid({
   gridOptions: {
     columns: useGridColumns(handleStatusChange),
     height: 'auto',
-    keepSource: true,
     proxyConfig: {
       ajax: {
         query: async ({ page }, formValues) => {
@@ -150,113 +163,115 @@ const [Grid, gridApi] = useVbenVxeGrid({
             pageNo: page.currentPage,
             pageSize: page.pageSize,
             ...formValues,
-            deptId: searchDeptId.value,
           });
         },
       },
     },
     rowConfig: {
       keyField: 'id',
+      isHover: true,
     },
     toolbarConfig: {
       refresh: { code: 'query' },
       search: true,
     },
   } as VxeTableGridOptions<SystemUserApi.User>,
+  gridEvents: {
+    checkboxAll: handleRowCheckboxChange,
+    checkboxChange: handleRowCheckboxChange,
+  },
 });
 </script>
 
 <template>
   <Page auto-content-height>
-    <template #doc>
-      <DocAlert title="用户体系" url="https://doc.iocoder.cn/user-center/" />
-      <DocAlert title="三方登陆" url="https://doc.iocoder.cn/social-user/" />
-      <DocAlert
-        title="Excel 导入导出"
-        url="https://doc.iocoder.cn/excel-import-and-export/"
-      />
-    </template>
-
     <FormModal @success="onRefresh" />
     <ResetPasswordModal @success="onRefresh" />
     <AssignRoleModal @success="onRefresh" />
     <ImportModal @success="onRefresh" />
 
-    <div class="flex h-full w-full">
+    <Grid table-title="用户列表">
-      <!-- 左侧部门树 -->
+      <template #toolbar-tools>
-      <div class="h-full w-1/6 pr-4">
+        <TableAction
-        <DeptTree @select="handleDeptSelect" />
+          :actions="[
-      </div>
+            {
-      <!-- 右侧用户列表 -->
+              label: $t('ui.actionTitle.create', ['用户']),
-      <div class="w-5/6">
+              type: 'primary',
-        <Grid table-title="用户列表">
+              icon: ACTION_ICON.ADD,
-          <template #toolbar-tools>
+              auth: ['system:user:create'],
-            <TableAction
+              onClick: handleCreate,
-              :actions="[
+            },
-                {
+            {
-                  label: $t('ui.actionTitle.create', ['用户']),
+              label: $t('ui.actionTitle.import'),
-                  type: 'primary',
+              type: 'primary',
-                  icon: ACTION_ICON.ADD,
+              icon: ACTION_ICON.UPLOAD,
-                  auth: ['system:user:create'],
+              auth: ['system:user:import'],
-                  onClick: handleCreate,
+              onClick: handleImport,
-                },
+            },
-                {
+            {
-                  label: $t('ui.actionTitle.export'),
+              label: $t('ui.actionTitle.export'),
-                  type: 'primary',
+              type: 'primary',
-                  icon: ACTION_ICON.DOWNLOAD,
+              icon: ACTION_ICON.DOWNLOAD,
-                  auth: ['system:user:export'],
+              auth: ['system:user:export'],
-                  onClick: handleExport,
+              onClick: handleExport,
-                },
+            },
-                {
+            {
-                  label: $t('ui.actionTitle.import', ['用户']),
+              label: '下载模板',
-                  type: 'primary',
+              type: 'primary',
-                  icon: ACTION_ICON.UPLOAD,
+              icon: ACTION_ICON.DOWNLOAD,
-                  auth: ['system:user:import'],
+              auth: ['system:user:import'],
-                  onClick: handleImport,
+              onClick: handleImportTemplate,
-                },
+            },
-              ]"
+            {
-            />
+              label: '批量删除',
-          </template>
+              type: 'primary',
-          <template #actions="{ row }">
+              danger: true,
-            <TableAction
+              disabled: isEmpty(checkedIds),
-              :actions="[
+              icon: ACTION_ICON.DELETE,
-                {
+              auth: ['system:user:delete'],
-                  label: $t('common.edit'),
+              onClick: handleDeleteBatch,
-                  type: 'link',
+            },
-                  icon: ACTION_ICON.EDIT,
+          ]"
-                  auth: ['system:user:update'],
+        />
-                  onClick: handleEdit.bind(null, row),
+      </template>
-                },
+      <template #actions="{ row }">
-                {
+        <TableAction
-                  label: $t('common.delete'),
+          :actions="[
-                  type: 'link',
+            {
-                  danger: true,
+              label: $t('common.edit'),
-                  icon: ACTION_ICON.DELETE,
+              type: 'link',
-                  auth: ['system:user:delete'],
+              icon: ACTION_ICON.EDIT,
-                  popConfirm: {
+              auth: ['system:user:update'],
-                    title: $t('ui.actionMessage.deleteConfirm', [row.name]),
+              onClick: handleEdit.bind(null, row),
-                    confirm: handleDelete.bind(null, row),
+            },
-                  },
+            {
-                },
+              label: $t('common.delete'),
-              ]"
+              type: 'link',
-              :drop-down-actions="[
+              danger: true,
-                {
+              icon: ACTION_ICON.DELETE,
-                  label: '分配角色',
+              auth: ['system:user:delete'],
-                  type: 'link',
+              popConfirm: {
-                  auth: ['system:permission:assign-user-role'],
+                title: $t('ui.actionMessage.deleteConfirm', [row.username]),
-                  onClick: handleAssignRole.bind(null, row),
+                confirm: handleDelete.bind(null, row),
-                },
+              },
-                {
+            },
-                  label: '重置密码',
+          ]"
-                  type: 'link',
+          :drop-down-actions="[
-                  auth: ['system:user:update-password'],
+            {
-                  onClick: handleResetPassword.bind(null, row),
+              label: '重置密码',
-                },
+              type: 'link',
-              ]"
+              auth: ['system:user:update-password'],
-            />
+              onClick: handleResetPassword.bind(null, row),
-          </template>
+            },
-        </Grid>
+            {
-      </div>
+              label: '分配角色',
-    </div>
+              type: 'link',
+              auth: ['system:permission:assign-user-role'],
+              onClick: handleAssignRole.bind(null, row),
+            },
+          ]"
+        />
+      </template>
+    </Grid>
   </Page>
 </template>