refactor: (web-ele)优化多个组件的删除操作和确认逻辑

- 将 ElMessageBox 替换为自定义 confirm 函数- 添加全局 loading 功能
- 优化错误处理和消息提示- 调整部分组件属性和样式

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

@@ -11,7 +11,7 @@ import { onMounted, ref } from 'vue';
 import { Page, useVbenModal } from '@vben/common-ui';
 import { Plus } from '@vben/icons';
 
-import { ElButton, ElMessage, ElMessageBox } from 'element-plus';
+import { ElButton, ElLoading, ElMessage } from 'element-plus';
 
 import { useVbenVxeGrid } from '#/adapter/vxe-table';
 import { deleteDept, getDeptList } from '#/api/system/dept';
@@ -62,14 +62,17 @@ function onEdit(row: SystemDeptApi.Dept) {
 
 /** 删除部门 */
 async function onDelete(row: SystemDeptApi.Dept) {
-  await ElMessageBox.confirm('确定要删除该部门吗？', {
-    confirmButtonText: '确定',
-    cancelButtonText: '取消',
-    type: 'warning',
+  const loadingInstance = ElLoading.service({
+    text: $t('ui.actionMessage.deleting', [row.name]),
+    fullscreen: true,
   });
-  await deleteDept(row.id as number);
-  ElMessage.success($t('ui.actionMessage.deleteSuccess', [row.name]));
-  onRefresh();
+  try {
+    await deleteDept(row.id as number);
+    ElMessage.success($t('ui.actionMessage.deleteSuccess', [row.name]));
+    onRefresh();
+  } finally {
+    loadingInstance.close();
+  }
 }
 
 /** 表格操作按钮的回调函数 */

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

@@ -7,10 +7,10 @@ import type { SystemDictDataApi } from '#/api/system/dict/data';
 
 import { ref, watch } from 'vue';
 
-import { useVbenModal } from '@vben/common-ui';
+import { confirm, useVbenModal } from '@vben/common-ui';
 import { downloadFileFromBlobPart, isEmpty } from '@vben/utils';
 
-import { ElMessage, ElMessageBox } from 'element-plus';
+import { ElLoading, ElMessage } from 'element-plus';
 
 import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
 import {
@@ -59,23 +59,22 @@ function onEdit(row: any) {
 
 /** 删除字典数据 */
 async function onDelete(row: any) {
-  await ElMessageBox.confirm('确定要删除该字典数据吗？', {
-    confirmButtonText: '确定',
-    cancelButtonText: '取消',
-    type: 'warning',
+  const loadingInstance = ElLoading.service({
+    text: $t('ui.actionMessage.deleting', [row.name]),
+    fullscreen: true,
   });
-  await deleteDictData(row.id);
-  ElMessage.success($t('common.operationSuccess'));
-  onRefresh();
+  try {
+    await deleteDictData(row.id);
+    ElMessage.success($t('ui.actionMessage.deleteSuccess', [row.name]));
+    onRefresh();
+  } finally {
+    loadingInstance.close();
+  }
 }
 
 /** 批量删除字典数据 */
 async function onDeleteBatch() {
-  await ElMessageBox.confirm('确定要删除该字典数据吗？', {
-    confirmButtonText: '确定',
-    cancelButtonText: '取消',
-    type: 'warning',
-  });
+  await confirm('确定要批量删除该字典数据吗？');
   await deleteDictDataList(checkedIds.value);
   ElMessage.success($t('ui.actionMessage.deleteSuccess'));
   onRefresh();

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

@@ -7,10 +7,10 @@ import type { SystemDictTypeApi } from '#/api/system/dict/type';
 
 import { ref } from 'vue';
 
-import { useVbenModal } from '@vben/common-ui';
+import { confirm, useVbenModal } from '@vben/common-ui';
 import { downloadFileFromBlobPart, isEmpty } from '@vben/utils';
 
-import { ElMessage, ElMessageBox } from 'element-plus';
+import { ElLoading, ElMessage } from 'element-plus';
 
 import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
 import {
@@ -54,23 +54,22 @@ function onEdit(row: any) {
 
 /** 删除字典类型 */
 async function onDelete(row: SystemDictTypeApi.DictType) {
-  await ElMessageBox.confirm('确定要删除该字典类型吗？', {
-    confirmButtonText: '确定',
-    cancelButtonText: '取消',
-    type: 'warning',
+  const loadingInstance = ElLoading.service({
+    text: $t('ui.actionMessage.deleting', [row.name]),
+    fullscreen: true,
   });
-  await deleteDictType(row.id as number);
-  ElMessage.success($t('common.operationSuccess'));
-  onRefresh();
+  try {
+    await deleteDictType(row.id as number);
+    ElMessage.success($t('ui.actionMessage.deleteSuccess', [row.name]));
+    onRefresh();
+  } finally {
+    loadingInstance.close();
+  }
 }
 
 /** 批量删除字典类型 */
 async function onDeleteBatch() {
-  await ElMessageBox.confirm('确定要删除该字典类型吗？', {
-    confirmButtonText: '确定',
-    cancelButtonText: '取消',
-    type: 'warning',
-  });
+  await confirm('确定要批量删除该字典类型吗？');
   await deleteDictTypeList(checkedIds.value);
   ElMessage.success($t('ui.actionMessage.deleteSuccess'));
   onRefresh();

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

@@ -7,10 +7,10 @@ import type { SystemMailAccountApi } from '#/api/system/mail/account';
 
 import { ref } from 'vue';
 
-import { DocAlert, Page, useVbenModal } from '@vben/common-ui';
+import { confirm, DocAlert, Page, useVbenModal } from '@vben/common-ui';
 import { isEmpty } from '@vben/utils';
 
-import { ElMessage, ElMessageBox } from 'element-plus';
+import { ElLoading, ElMessage } from 'element-plus';
 
 import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
 import {
@@ -45,23 +45,22 @@ function onEdit(row: SystemMailAccountApi.MailAccount) {
 
 /** 删除邮箱账号 */
 async function onDelete(row: SystemMailAccountApi.MailAccount) {
-  await ElMessageBox.confirm('确定要删除该邮箱账号吗？', {
-    confirmButtonText: '确定',
-    cancelButtonText: '取消',
-    type: 'warning',
+  const loadingInstance = ElLoading.service({
+    text: $t('ui.actionMessage.deleting', [row.mail]),
+    fullscreen: true,
   });
-  await deleteMailAccount(row.id as number);
-  ElMessage.success($t('ui.actionMessage.deleteSuccess', [row.mail]));
-  onRefresh();
+  try {
+    await deleteMailAccount(row.id as number);
+    ElMessage.success($t('ui.actionMessage.deleteSuccess', [row.mail]));
+    onRefresh();
+  } finally {
+    loadingInstance.close();
+  }
 }
 
 /** 批量删除邮箱账号 */
 async function onDeleteBatch() {
-  await ElMessageBox.confirm('确定要删除该邮箱账号吗？', {
-    confirmButtonText: '确定',
-    cancelButtonText: '取消',
-    type: 'warning',
-  });
+  await confirm('确定要批量删除该邮箱账号吗？');
   await deleteMailAccountList(checkedIds.value);
   ElMessage.success($t('ui.actionMessage.deleteSuccess'));
   onRefresh();

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

@@ -8,10 +8,10 @@ import type { SystemMailTemplateApi } from '#/api/system/mail/template';
 
 import { onMounted, ref } from 'vue';
 
-import { DocAlert, Page, useVbenModal } from '@vben/common-ui';
+import { confirm, DocAlert, Page, useVbenModal } from '@vben/common-ui';
 import { isEmpty } from '@vben/utils';
 
-import { ElMessage, ElMessageBox } from 'element-plus';
+import { ElLoading, ElMessage } from 'element-plus';
 
 import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
 import { getSimpleMailAccountList } from '#/api/system/mail/account';
@@ -65,23 +65,22 @@ function onSend(row: SystemMailTemplateApi.MailTemplate) {
 
 /** 删除邮件模板 */
 async function onDelete(row: SystemMailTemplateApi.MailTemplate) {
-  await ElMessageBox.confirm('确定要删除该邮件模板吗？', {
-    confirmButtonText: '确定',
-    cancelButtonText: '取消',
-    type: 'warning',
+  const loadingInstance = ElLoading.service({
+    text: $t('ui.actionMessage.deleting', [row.name]),
+    fullscreen: true,
   });
-  await deleteMailTemplate(row.id as number);
-  ElMessage.success($t('ui.actionMessage.deleteSuccess', [row.name]));
-  onRefresh();
+  try {
+    await deleteMailTemplate(row.id as number);
+    ElMessage.success($t('ui.actionMessage.deleteSuccess', [row.name]));
+    onRefresh();
+  } finally {
+    loadingInstance.close();
+  }
 }
 
 /** 批量删除邮件模板 */
 async function onDeleteBatch() {
-  await ElMessageBox.confirm('确定要删除该邮件模板吗？', {
-    confirmButtonText: '确定',
-    cancelButtonText: '取消',
-    type: 'warning',
-  });
+  await confirm('确定要批量删除该邮件模板吗？');
   await deleteMailTemplateList(checkedIds.value);
   ElMessage.success($t('ui.actionMessage.deleteSuccess'));
   onRefresh();

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

@@ -10,7 +10,7 @@ import { ref } from 'vue';
 import { DocAlert, Page, useVbenModal } from '@vben/common-ui';
 import { IconifyIcon, Plus } from '@vben/icons';
 
-import { ElButton, ElMessage, ElMessageBox } from 'element-plus';
+import { ElButton, ElLoading, ElMessage } from 'element-plus';
 
 import { useVbenVxeGrid } from '#/adapter/vxe-table';
 import { deleteMenu, getMenuList } from '#/api/system/menu';
@@ -47,14 +47,17 @@ function onEdit(row: SystemMenuApi.Menu) {
 
 /** 删除菜单 */
 async function onDelete(row: SystemMenuApi.Menu) {
-  await ElMessageBox.confirm('确定要删除该菜单吗？', {
-    confirmButtonText: '确定',
-    cancelButtonText: '取消',
-    type: 'warning',
+  const loadingInstance = ElLoading.service({
+    text: $t('ui.actionMessage.deleting', [row.name]),
+    fullscreen: true,
   });
-  await deleteMenu(row.id as number);
-  ElMessage.success($t('ui.actionMessage.deleteSuccess', [row.name]));
-  onRefresh();
+  try {
+    await deleteMenu(row.id as number);
+    ElMessage.success($t('ui.actionMessage.deleteSuccess', [row.name]));
+    onRefresh();
+  } finally {
+    loadingInstance.close();
+  }
 }
 
 /** 表格操作按钮的回调函数 */

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

@@ -7,10 +7,10 @@ import type { SystemNoticeApi } from '#/api/system/notice';
 
 import { ref } from 'vue';
 
-import { Page, useVbenModal } from '@vben/common-ui';
+import { confirm, Page, useVbenModal } from '@vben/common-ui';
 import { isEmpty } from '@vben/utils';
 
-import { ElMessage, ElMessageBox } from 'element-plus';
+import { ElLoading, ElMessage } from 'element-plus';
 
 import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
 import {
@@ -46,23 +46,22 @@ function onEdit(row: SystemNoticeApi.Notice) {
 
 /** 删除公告 */
 async function onDelete(row: SystemNoticeApi.Notice) {
-  await ElMessageBox.confirm('确定要删除该公告吗？', {
-    confirmButtonText: '确定',
-    cancelButtonText: '取消',
-    type: 'warning',
+  const loadingInstance = ElLoading.service({
+    text: $t('ui.actionMessage.deleting', [row.title]),
+    fullscreen: true,
   });
-  await deleteNotice(row.id as number);
-  ElMessage.success($t('ui.actionMessage.deleteSuccess', [row.title]));
-  onRefresh();
+  try {
+    await deleteNotice(row.id as number);
+    ElMessage.success($t('ui.actionMessage.deleteSuccess', [row.title]));
+    onRefresh();
+  } finally {
+    loadingInstance.close();
+  }
 }
 
 /** 批量删除公告 */
 async function onDeleteBatch() {
-  await ElMessageBox.confirm('确定要删除该公告吗？', {
-    confirmButtonText: '确定',
-    cancelButtonText: '取消',
-    type: 'warning',
-  });
+  await confirm('确定要批量删除该公告吗？');
   await deleteNoticeList(checkedIds.value);
   ElMessage.success($t('ui.actionMessage.deleteSuccess'));
   onRefresh();

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

@@ -7,10 +7,10 @@ import type { SystemOAuth2ClientApi } from '#/api/system/oauth2/client';
 
 import { ref } from 'vue';
 
-import { DocAlert, Page, useVbenModal } from '@vben/common-ui';
+import { confirm, DocAlert, Page, useVbenModal } from '@vben/common-ui';
 import { isEmpty } from '@vben/utils';
 
-import { ElMessage, ElMessageBox } from 'element-plus';
+import { ElLoading, ElMessage } from 'element-plus';
 
 import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
 import {
@@ -45,23 +45,22 @@ function onEdit(row: SystemOAuth2ClientApi.OAuth2Client) {
 
 /** 删除 OAuth2 客户端 */
 async function onDelete(row: SystemOAuth2ClientApi.OAuth2Client) {
-  await ElMessageBox.confirm('确定要删除该 OAuth2 客户端吗？', {
-    confirmButtonText: '确定',
-    cancelButtonText: '取消',
-    type: 'warning',
+  const loadingInstance = ElLoading.service({
+    text: $t('ui.actionMessage.deleting', [row.name]),
+    fullscreen: true,
   });
-  await deleteOAuth2Client(row.id as number);
-  ElMessage.success($t('ui.actionMessage.deleteSuccess', [row.name]));
-  onRefresh();
+  try {
+    await deleteOAuth2Client(row.id as number);
+    ElMessage.success($t('ui.actionMessage.deleteSuccess', [row.name]));
+    onRefresh();
+  } finally {
+    loadingInstance.close();
+  }
 }
 
 /** 批量删除 OAuth2 客户端 */
 async function onDeleteBatch() {
-  await ElMessageBox.confirm('确定要删除该 OAuth2 客户端吗？', {
-    confirmButtonText: '确定',
-    cancelButtonText: '取消',
-    type: 'warning',
-  });
+  await confirm('确定要批量删除该 OAuth2 客户端吗？');
   await deleteOAuth2ClientList(checkedIds.value);
   ElMessage.success($t('ui.actionMessage.deleteSuccess'));
   onRefresh();

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

@@ -7,7 +7,7 @@ import type { SystemOAuth2TokenApi } from '#/api/system/oauth2/token';
 
 import { DocAlert, Page } from '@vben/common-ui';
 
-import { ElMessage, ElMessageBox } from 'element-plus';
+import { ElLoading, ElMessage } from 'element-plus';
 
 import { useVbenVxeGrid } from '#/adapter/vxe-table';
 import {
@@ -25,14 +25,17 @@ function onRefresh() {
 
 /** 删除 OAuth2 令牌 */
 async function onDelete(row: SystemOAuth2TokenApi.OAuth2Token) {
-  await ElMessageBox.confirm('确定要删除该令牌吗？', {
-    confirmButtonText: '确定',
-    cancelButtonText: '取消',
-    type: 'warning',
+  const loadingInstance = ElLoading.service({
+    text: $t('ui.actionMessage.deleting', [row.accessToken]),
+    fullscreen: true,
   });
-  await deleteOAuth2Token(row.accessToken);
-  ElMessage.success($t('ui.actionMessage.operationSuccess'));
-  onRefresh();
+  try {
+    await deleteOAuth2Token(row.accessToken);
+    ElMessage.success($t('ui.actionMessage.deleteSuccess', [row.accessToken]));
+    onRefresh();
+  } finally {
+    loadingInstance.close();
+  }
 }
 
 /** 表格操作按钮的回调函数 */

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

@@ -7,10 +7,10 @@ import type { SystemPostApi } from '#/api/system/post';
 
 import { ref } from 'vue';
 
-import { Page, useVbenModal } from '@vben/common-ui';
+import { confirm, Page, useVbenModal } from '@vben/common-ui';
 import { downloadFileFromBlobPart, isEmpty } from '@vben/utils';
 
-import { ElMessage, ElMessageBox } from 'element-plus';
+import { ElLoading, ElMessage } from 'element-plus';
 
 import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
 import {
@@ -52,23 +52,22 @@ function onEdit(row: SystemPostApi.Post) {
 
 /** 删除岗位 */
 async function onDelete(row: SystemPostApi.Post) {
-  await ElMessageBox.confirm('确定要删除该岗位吗？', {
-    confirmButtonText: '确定',
-    cancelButtonText: '取消',
-    type: 'warning',
+  const loadingInstance = ElLoading.service({
+    text: $t('ui.actionMessage.deleting', [row.name]),
+    fullscreen: true,
   });
-  await deletePost(row.id as number);
-  ElMessage.success($t('ui.actionMessage.deleteSuccess', [row.name]));
-  onRefresh();
+  try {
+    await deletePost(row.id as number);
+    ElMessage.success($t('ui.actionMessage.deleteSuccess', [row.name]));
+    onRefresh();
+  } finally {
+    loadingInstance.close();
+  }
 }
 
 /** 批量删除岗位 */
 async function onDeleteBatch() {
-  await ElMessageBox.confirm('确定要删除该岗位吗？', {
-    confirmButtonText: '确定',
-    cancelButtonText: '取消',
-    type: 'warning',
-  });
+  await confirm('确定要批量删除该岗位吗？');
   await deletePostList(checkedIds.value);
   ElMessage.success($t('ui.actionMessage.deleteSuccess'));
   onRefresh();

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

@@ -7,11 +7,11 @@ import type { SystemRoleApi } from '#/api/system/role';
 
 import { ref } from 'vue';
 
-import { DocAlert, Page, useVbenModal } from '@vben/common-ui';
+import { confirm, DocAlert, Page, useVbenModal } from '@vben/common-ui';
 import { Download, Plus } from '@vben/icons';
 import { downloadFileFromBlobPart, isEmpty } from '@vben/utils';
 
-import { ElButton, ElMessage, ElMessageBox } from 'element-plus';
+import { ElButton, ElLoading, ElMessage } from 'element-plus';
 
 import { useVbenVxeGrid } from '#/adapter/vxe-table';
 import {
@@ -66,23 +66,22 @@ function onCreate() {
 
 /** 删除角色 */
 async function onDelete(row: SystemRoleApi.Role) {
-  await ElMessageBox.confirm('确定要删除该角色吗？', {
-    confirmButtonText: '确定',
-    cancelButtonText: '取消',
-    type: 'warning',
+  const loadingInstance = ElLoading.service({
+    text: $t('ui.actionMessage.deleting', [row.name]),
+    fullscreen: true,
   });
-  await deleteRole(row.id as number);
-  ElMessage.success($t('ui.actionMessage.deleteSuccess', [row.name]));
-  onRefresh();
+  try {
+    await deleteRole(row.id as number);
+    ElMessage.success($t('ui.actionMessage.deleteSuccess', [row.name]));
+    onRefresh();
+  } finally {
+    loadingInstance.close();
+  }
 }
 
 /** 批量删除角色 */
 async function onDeleteBatch() {
-  await ElMessageBox.confirm('确定要删除该角色吗？', {
-    confirmButtonText: '确定',
-    cancelButtonText: '取消',
-    type: 'warning',
-  });
+  await confirm('确定要批量删除该角色吗？');
   await deleteRoleList(checkedIds.value);
   ElMessage.success($t('ui.actionMessage.deleteSuccess'));
   onRefresh();

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

@@ -7,10 +7,10 @@ import type { SystemSmsChannelApi } from '#/api/system/sms/channel';
 
 import { ref } from 'vue';
 
-import { DocAlert, Page, useVbenModal } from '@vben/common-ui';
+import { confirm, DocAlert, Page, useVbenModal } from '@vben/common-ui';
 import { downloadFileFromBlobPart, isEmpty } from '@vben/utils';
 
-import { ElMessage, ElMessageBox } from 'element-plus';
+import { ElLoading, ElMessage } from 'element-plus';
 
 import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
 import {
@@ -52,23 +52,22 @@ function onEdit(row: SystemSmsChannelApi.SmsChannel) {
 
 /** 删除短信渠道 */
 async function onDelete(row: SystemSmsChannelApi.SmsChannel) {
-  await ElMessageBox.confirm('确定要删除该短信渠道吗？', {
-    confirmButtonText: '确定',
-    cancelButtonText: '取消',
-    type: 'warning',
+  const loadingInstance = ElLoading.service({
+    text: $t('ui.actionMessage.deleting', [row.signature]),
+    fullscreen: true,
   });
-  await deleteSmsChannel(row.id as number);
-  ElMessage.success($t('ui.actionMessage.deleteSuccess', [row.signature]));
-  onRefresh();
+  try {
+    await deleteSmsChannel(row.id as number);
+    ElMessage.success($t('ui.actionMessage.deleteSuccess', [row.signature]));
+    onRefresh();
+  } finally {
+    loadingInstance.close();
+  }
 }
 
 /** 批量删除短信渠道 */
 async function onDeleteBatch() {
-  await ElMessageBox.confirm('确定要删除该短信渠道吗？', {
-    confirmButtonText: '确定',
-    cancelButtonText: '取消',
-    type: 'warning',
-  });
+  await confirm('确定要批量删除该短信渠道吗？');
   await deleteSmsChannelList(checkedIds.value);
   ElMessage.success($t('ui.actionMessage.deleteSuccess'));
   onRefresh();

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

@@ -7,10 +7,10 @@ import type { SystemSmsTemplateApi } from '#/api/system/sms/template';
 
 import { ref } from 'vue';
 
-import { DocAlert, Page, useVbenModal } from '@vben/common-ui';
+import { confirm, DocAlert, Page, useVbenModal } from '@vben/common-ui';
 import { downloadFileFromBlobPart, isEmpty } from '@vben/utils';
 
-import { ElMessage, ElMessageBox } from 'element-plus';
+import { ElLoading, ElMessage } from 'element-plus';
 
 import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
 import {
@@ -63,23 +63,22 @@ function onSend(row: SystemSmsTemplateApi.SmsTemplate) {
 
 /** 删除短信模板 */
 async function onDelete(row: SystemSmsTemplateApi.SmsTemplate) {
-  await ElMessageBox.confirm('确定要删除该短信模板吗？', {
-    confirmButtonText: '确定',
-    cancelButtonText: '取消',
-    type: 'warning',
+  const loadingInstance = ElLoading.service({
+    text: $t('ui.actionMessage.deleting', [row.name]),
+    fullscreen: true,
   });
-  await deleteSmsTemplate(row.id as number);
-  ElMessage.success($t('ui.actionMessage.deleteSuccess', [row.name]));
-  onRefresh();
+  try {
+    await deleteSmsTemplate(row.id as number);
+    ElMessage.success($t('ui.actionMessage.deleteSuccess', [row.name]));
+    onRefresh();
+  } finally {
+    loadingInstance.close();
+  }
 }
 
 /** 批量删除短信模板 */
 async function onDeleteBatch() {
-  await ElMessageBox.confirm('确定要删除该短信模板吗？', {
-    confirmButtonText: '确定',
-    cancelButtonText: '取消',
-    type: 'warning',
-  });
+  await confirm('确定要批量删除该短信模板吗？');
   await deleteSmsTemplateList(checkedIds.value);
   ElMessage.success($t('ui.actionMessage.deleteSuccess'));
   onRefresh();

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

@@ -7,10 +7,10 @@ import type { SystemSocialClientApi } from '#/api/system/social/client';
 
 import { ref } from 'vue';
 
-import { DocAlert, Page, useVbenModal } from '@vben/common-ui';
+import { confirm, DocAlert, Page, useVbenModal } from '@vben/common-ui';
 import { isEmpty } from '@vben/utils';
 
-import { ElMessage, ElMessageBox } from 'element-plus';
+import { ElLoading, ElMessage } from 'element-plus';
 
 import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
 import {
@@ -45,23 +45,22 @@ function onEdit(row: SystemSocialClientApi.SocialClient) {
 
 /** 删除社交客户端 */
 async function onDelete(row: SystemSocialClientApi.SocialClient) {
-  await ElMessageBox.confirm('确定要删除该社交客户端吗？', {
-    confirmButtonText: '确定',
-    cancelButtonText: '取消',
-    type: 'warning',
+  const loadingInstance = ElLoading.service({
+    text: $t('ui.actionMessage.deleting', [row.name]),
+    fullscreen: true,
   });
-  await deleteSocialClient(row.id as number);
-  ElMessage.success($t('ui.actionMessage.deleteSuccess', [row.name]));
-  onRefresh();
+  try {
+    await deleteSocialClient(row.id as number);
+    ElMessage.success($t('ui.actionMessage.deleteSuccess', [row.name]));
+    onRefresh();
+  } finally {
+    loadingInstance.close();
+  }
 }
 
 /** 批量删除社交客户端 */
 async function onDeleteBatch() {
-  await ElMessageBox.confirm('确定要删除该社交客户端吗？', {
-    confirmButtonText: '确定',
-    cancelButtonText: '取消',
-    type: 'warning',
-  });
+  await confirm('确定要批量删除该社交客户端吗？');
   await deleteSocialClientList(checkedIds.value);
   ElMessage.success($t('ui.actionMessage.deleteSuccess'));
   onRefresh();

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

@@ -8,10 +8,10 @@ import type { SystemTenantPackageApi } from '#/api/system/tenant-package';
 
 import { onMounted, ref } from 'vue';
 
-import { DocAlert, Page, useVbenModal } from '@vben/common-ui';
+import { confirm, DocAlert, Page, useVbenModal } from '@vben/common-ui';
 import { downloadFileFromBlobPart, isEmpty } from '@vben/utils';
 
-import { ElMessage, ElMessageBox } from 'element-plus';
+import { ElLoading, ElMessage } from 'element-plus';
 
 import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
 import {
@@ -64,23 +64,22 @@ function onEdit(row: SystemTenantApi.Tenant) {
 
 /** 删除租户 */
 async function onDelete(row: SystemTenantApi.Tenant) {
-  await ElMessageBox.confirm('确定要删除该租户吗？', {
-    confirmButtonText: '确定',
-    cancelButtonText: '取消',
-    type: 'warning',
+  const loadingInstance = ElLoading.service({
+    text: $t('ui.actionMessage.deleting', [row.name]),
+    fullscreen: true,
   });
-  await deleteTenant(row.id as number);
-  ElMessage.success($t('ui.actionMessage.deleteSuccess', [row.name]));
-  onRefresh();
+  try {
+    await deleteTenant(row.id as number);
+    ElMessage.success($t('ui.actionMessage.deleteSuccess', [row.name]));
+    onRefresh();
+  } finally {
+    loadingInstance.close();
+  }
 }
 
 /** 批量删除租户 */
 async function onDeleteBatch() {
-  await ElMessageBox.confirm('确定要删除该租户吗？', {
-    confirmButtonText: '确定',
-    cancelButtonText: '取消',
-    type: 'warning',
-  });
+  await confirm('确定要批量删除该租户吗？');
   await deleteTenantList(checkedIds.value);
   ElMessage.success($t('ui.actionMessage.deleteSuccess'));
   onRefresh();

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

@@ -7,10 +7,10 @@ import type { SystemTenantPackageApi } from '#/api/system/tenant-package';
 
 import { ref } from 'vue';
 
-import { DocAlert, Page, useVbenModal } from '@vben/common-ui';
+import { confirm, DocAlert, Page, useVbenModal } from '@vben/common-ui';
 import { isEmpty } from '@vben/utils';
 
-import { ElMessage, ElMessageBox } from 'element-plus';
+import { ElLoading, ElMessage } from 'element-plus';
 
 import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
 import {
@@ -45,23 +45,22 @@ function onEdit(row: SystemTenantPackageApi.TenantPackage) {
 
 /** 删除租户套餐 */
 async function onDelete(row: SystemTenantPackageApi.TenantPackage) {
-  await ElMessageBox.confirm('确定要删除该租户套餐吗？', {
-    confirmButtonText: '确定',
-    cancelButtonText: '取消',
-    type: 'warning',
+  const loadingInstance = ElLoading.service({
+    text: $t('ui.actionMessage.deleting', [row.name]),
+    fullscreen: true,
   });
-  await deleteTenantPackage(row.id as number);
-  ElMessage.success($t('ui.actionMessage.deleteSuccess', [row.name]));
-  onRefresh();
+  try {
+    await deleteTenantPackage(row.id as number);
+    ElMessage.success($t('ui.actionMessage.deleteSuccess', [row.name]));
+    onRefresh();
+  } finally {
+    loadingInstance.close();
+  }
 }
 
 /** 批量删除租户套餐 */
 async function onDeleteBatch() {
-  await ElMessageBox.confirm('确定要删除该租户套餐吗？', {
-    confirmButtonText: '确定',
-    cancelButtonText: '取消',
-    type: 'warning',
-  });
+  await confirm('确定要批量删除该租户套餐吗？');
   await deleteTenantPackageList(checkedIds.value);
   ElMessage.success($t('ui.actionMessage.deleteSuccess'));
   onRefresh();

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

@@ -336,7 +336,7 @@ export function useGridColumns<T = SystemUserApi.User>(
     },
     {
       title: '操作',
-      width: 180,
+      width: 250,
       fixed: 'right',
       slots: { default: 'actions' },
     },

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

@@ -8,7 +8,7 @@ import { ref } from 'vue';
 import { confirm, DocAlert, Page, useVbenModal } from '@vben/common-ui';
 import { downloadFileFromBlobPart, isEmpty } from '@vben/utils';
 
-import { ElMessage, ElMessageBox } from 'element-plus';
+import { ElLoading, ElMessage } from 'element-plus';
 
 import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
 import {
@@ -83,23 +83,22 @@ function onEdit(row: SystemUserApi.User) {
 
 /** 删除用户 */
 async function onDelete(row: SystemUserApi.User) {
-  await ElMessageBox.confirm('确定要删除该用户吗？', {
-    confirmButtonText: '确定',
-    cancelButtonText: '取消',
-    type: 'warning',
+  const loadingInstance = ElLoading.service({
+    text: $t('ui.actionMessage.deleting', [row.username]),
+    fullscreen: true,
   });
-  await deleteUser(row.id as number);
-  ElMessage.success($t('ui.actionMessage.deleteSuccess', [row.username]));
-  onRefresh();
+  try {
+    await deleteUser(row.id as number);
+    ElMessage.success($t('ui.actionMessage.deleteSuccess', [row.username]));
+    onRefresh();
+  } finally {
+    loadingInstance.close();
+  }
 }
 
 /** 批量删除用户 */
 async function onDeleteBatch() {
-  await ElMessageBox.confirm('确定要删除该用户吗？', {
-    confirmButtonText: '确定',
-    cancelButtonText: '取消',
-    type: 'warning',
-  });
+  await confirm('确定要批量删除该用户吗？');
   await deleteUserList(checkedIds.value);
   ElMessage.success($t('ui.actionMessage.deleteSuccess'));
   onRefresh();
@@ -261,7 +260,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
                   icon: ACTION_ICON.DELETE,
                   auth: ['system:user:delete'],
                   popConfirm: {
-                    title: $t('ui.actionMessage.deleteConfirm', [row.name]),
+                    title: $t('ui.actionMessage.deleteConfirm', [row.username]),
                     confirm: onDelete.bind(null, row),
                   },
                 },