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

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

apps/web-ele/src/views/mall/trade/afterSale/modules/detail.vue

@@ -5,7 +5,7 @@ import type { MallOrderApi } from '#/api/mall/trade/order';
 import { onMounted, ref } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
 
-import { Page } from '@vben/common-ui';
+import { confirm, Page } from '@vben/common-ui';
 import { $t } from '@vben/locales';
 import { fenToYuan, formatDate } from '@vben/utils';
 
@@ -14,7 +14,6 @@ import {
   ElDescriptionsItem,
   ElImage,
   ElMessage,
-  ElMessageBox,
   ElTimeline,
   ElTimelineItem,
 } from 'element-plus';
@@ -74,11 +73,7 @@ const getDetail = async () => {
 /** 同意售后 */
 const agree = async () => {
   // 二次确认
-  await ElMessageBox.confirm('是否同意售后？', '提示', {
-    confirmButtonText: '确定',
-    cancelButtonText: '取消',
-    type: 'warning',
-  });
+  await confirm('是否同意售后？');
   await AfterSaleApi.agree(formData.value.id!);
   // 提示成功
   ElMessage.success($t('page.common.success'));
@@ -93,11 +88,7 @@ const disagree = async () => {
 /** 确认收货 */
 const receive = async () => {
   // 二次确认
-  await ElMessageBox.confirm('是否确认收货？', '提示', {
-    confirmButtonText: '确定',
-    cancelButtonText: '取消',
-    type: 'warning',
-  });
+  await confirm('是否确认收货？');
   await AfterSaleApi.receive(formData.value.id!);
   // 提示成功
   ElMessage.success($t('page.common.success'));
@@ -107,11 +98,7 @@ const receive = async () => {
 /** 拒绝收货 */
 const refuse = async () => {
   // 二次确认
-  await ElMessageBox.confirm('是否拒绝收货？', '提示', {
-    confirmButtonText: '确定',
-    cancelButtonText: '取消',
-    type: 'warning',
-  });
+  await confirm('是否拒绝收货？');
   await AfterSaleApi.refuse(formData.value.id!);
   // 提示成功
   ElMessage.success($t('page.common.success'));
@@ -121,11 +108,7 @@ const refuse = async () => {
 /** 确认退款 */
 const refund = async () => {
   // 二次确认
-  await ElMessageBox.confirm('是否确认退款？', '提示', {
-    confirmButtonText: '确定',
-    cancelButtonText: '取消',
-    type: 'warning',
-  });
+  await confirm('是否确认退款？');
   await AfterSaleApi.refund(formData.value.id!);
   // 提示成功
   ElMessage.success($t('page.common.success'));

apps/web-ele/src/views/mall/trade/brokerage/user/index.vue

@@ -3,10 +3,10 @@ import type { VxeTableGridOptions } from '#/adapter/vxe-table';
 import type { MallBrokerageUserApi } from '#/api/mall/trade/brokerage/user';
 
 import { useAccess } from '@vben/access';
-import { DocAlert, Page, useVbenModal } from '@vben/common-ui';
+import { confirm, DocAlert, Page, useVbenModal } from '@vben/common-ui';
 import { $t } from '@vben/locales';
 
-import { ElLoading, ElMessage, ElMessageBox, ElSwitch } from 'element-plus';
+import { ElLoading, ElMessage, ElSwitch } from 'element-plus';
 
 import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
 import {
@@ -68,11 +68,7 @@ function openCreateUserForm() {
 
 /** 清除上级推广人 */
 async function handleClearBindUser(row: MallBrokerageUserApi.BrokerageUser) {
-  await ElMessageBox.confirm(`确定清除"${row.nickname}"的上级推广人吗？`, {
-    confirmButtonText: '确定',
-    cancelButtonText: '取消',
-    type: 'warning',
-  });
+  await confirm(`确定清除"${row.nickname}"的上级推广人吗？`);
   await clearBindUser({ id: row.id as number });
   ElMessage.success('清除成功');
   onRefresh();

apps/web-ele/src/views/mall/trade/brokerage/withdraw/index.vue

@@ -4,10 +4,10 @@ import type { MallBrokerageWithdrawApi } from '#/api/mall/trade/brokerage/withdr
 
 import { h } from 'vue';
 
-import { Page, prompt } from '@vben/common-ui';
+import { confirm, Page, prompt } from '@vben/common-ui';
 import { formatDateTime } from '@vben/utils';
 
-import { ElInput, ElMessage, ElMessageBox } from 'element-plus';
+import { ElInput, ElMessage } from 'element-plus';
 
 import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
 import {
@@ -35,11 +35,7 @@ function onRefresh() {
 
 /** 审核通过 */
 async function handleApprove(row: MallBrokerageWithdrawApi.BrokerageWithdraw) {
-  await ElMessageBox.confirm('确定要审核通过吗？', {
-    confirmButtonText: '确定',
-    cancelButtonText: '取消',
-    type: 'warning',
-  });
+  await confirm('确定要审核通过吗？');
   await approveBrokerageWithdraw(row.id);
   ElMessage.success($t('ui.actionMessage.operationSuccess'));
   onRefresh();
@@ -73,11 +69,7 @@ function handleReject(row: MallBrokerageWithdrawApi.BrokerageWithdraw) {
 async function handleRetryTransfer(
   row: MallBrokerageWithdrawApi.BrokerageWithdraw,
 ) {
-  await ElMessageBox.confirm('确定要重新转账吗？', {
-    confirmButtonText: '确定',
-    cancelButtonText: '取消',
-    type: 'warning',
-  });
+  await confirm('确定要重新转账吗？');
   await approveBrokerageWithdraw(row.id);
   ElMessage.success($t('ui.actionMessage.operationSuccess'));
   onRefresh();

apps/web-ele/src/views/mall/trade/config/data.ts

@@ -26,9 +26,13 @@ export function useFormSchema(): VbenFormSchema[] {
       label: '退款理由',
       component: 'Select',
       componentProps: {
-        mode: 'tags',
         placeholder: '请直接输入退款理由',
+        multiple: true,
+        options: [],
         class: 'w-full',
+        allowCreate: true,
+        filterable: true,
+        reserveKeyword: false,
       },
       dependencies: {
         triggerFields: ['type'],
@@ -40,9 +44,13 @@ export function useFormSchema(): VbenFormSchema[] {
       label: '退货理由',
       component: 'Select',
       componentProps: {
-        mode: 'tags',
         placeholder: '请直接输入退货理由',
+        multiple: true,
+        options: [],
         class: 'w-full',
+        allowCreate: true,
+        filterable: true,
+        reserveKeyword: false,
       },
       dependencies: {
         triggerFields: ['type'],

apps/web-ele/src/views/mall/trade/config/index.vue

@@ -59,10 +59,6 @@ onMounted(() => {
 });
 
 const [Form, formApi] = useVbenForm({
-  commonConfig: {
-    // 所有表单项
-    labelClass: 'w-2/6',
-  },
   wrapperClass: 'grid-cols-1',
   actionWrapperClass: 'text-center',
   handleSubmit: onSubmit,
@@ -75,7 +71,7 @@ const [Form, formApi] = useVbenForm({
 </script>
 
 <template>
-  <Page>
+  <Page auto-content-height>
     <template #doc>
       <DocAlert
         title="【交易】交易订单"
@@ -86,11 +82,11 @@ const [Form, formApi] = useVbenForm({
         url="https://doc.iocoder.cn/mall/trade-cart/"
       />
     </template>
-    <ElCard>
-      <ElTabs :active-key="activeKey" @change="handleTabChange">
-        <ElTabPane tab="售后" key="afterSale" :force-render="true" />
-        <ElTabPane tab="配送" key="delivery" :force-render="true" />
-        <ElTabPane tab="分销" key="brokerage" :force-render="true" />
+    <ElCard class="h-full">
+      <ElTabs v-model="activeKey" @tab-change="handleTabChange">
+        <ElTabPane label="售后" name="afterSale" :force-render="true" />
+        <ElTabPane label="配送" name="delivery" :force-render="true" />
+        <ElTabPane label="分销" name="brokerage" :force-render="true" />
       </ElTabs>
       <Form class="w-3/5" />
     </ElCard>

apps/web-ele/src/views/mall/trade/delivery/express/index.vue

@@ -5,7 +5,7 @@ import type { MallDeliveryExpressApi } from '#/api/mall/trade/delivery/express';
 import { Page, useVbenModal } from '@vben/common-ui';
 import { downloadFileFromBlobPart } 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,14 +46,17 @@ function handleEdit(row: MallDeliveryExpressApi.DeliveryExpress) {
 
 /** 删除快递公司 */
 async function handleDelete(row: MallDeliveryExpressApi.DeliveryExpress) {
-  await ElMessageBox.confirm($t('ui.actionMessage.deleting', [row.name]), {
-    confirmButtonText: '确定',
-    cancelButtonText: '取消',
-    type: 'warning',
+  const loadingInstance = ElLoading.service({
+    text: $t('ui.actionMessage.deleting', [row.name]),
+    fullscreen: true,
   });
-  await deleteDeliveryExpress(row.id as number);
-  ElMessage.success($t('ui.actionMessage.deleteSuccess', [row.name]));
-  onRefresh();
+  try {
+    await deleteDeliveryExpress(row.id as number);
+    ElMessage.success($t('ui.actionMessage.deleteSuccess', [row.name]));
+    onRefresh();
+  } finally {
+    loadingInstance.close();
+  }
 }
 
 const [Grid, gridApi] = useVbenVxeGrid({

apps/web-ele/src/views/mall/trade/delivery/expressTemplate/index.vue

@@ -4,7 +4,7 @@ import type { MallDeliveryExpressTemplateApi } from '#/api/mall/trade/delivery/e
 
 import { Page, useVbenModal } from '@vben/common-ui';
 
-import { ElMessage, ElMessageBox } from 'element-plus';
+import { ElLoading, ElMessage } from 'element-plus';
 
 import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
 import {
@@ -40,14 +40,17 @@ function handleEdit(row: MallDeliveryExpressTemplateApi.ExpressTemplate) {
 async function handleDelete(
   row: MallDeliveryExpressTemplateApi.ExpressTemplate,
 ) {
-  await ElMessageBox.confirm($t('ui.actionMessage.deleting', [row.name]), {
-    confirmButtonText: '确定',
-    cancelButtonText: '取消',
-    type: 'warning',
+  const loadingInstance = ElLoading.service({
+    text: $t('ui.actionMessage.deleting', [row.name]),
+    fullscreen: true,
   });
-  await deleteDeliveryExpressTemplate(row.id as number);
-  ElMessage.success($t('ui.actionMessage.deleteSuccess', [row.name]));
-  onRefresh();
+  try {
+    await deleteDeliveryExpressTemplate(row.id as number);
+    ElMessage.success($t('ui.actionMessage.deleteSuccess', [row.name]));
+    onRefresh();
+  } finally {
+    loadingInstance.close();
+  }
 }
 
 const [Grid, gridApi] = useVbenVxeGrid({

apps/web-ele/src/views/mall/trade/delivery/pickUpStore/index.vue

@@ -4,7 +4,7 @@ import type { MallDeliveryPickUpStoreApi } from '#/api/mall/trade/delivery/pickU
 
 import { Page, useVbenModal } from '@vben/common-ui';
 
-import { ElMessage, ElMessageBox } from 'element-plus';
+import { ElLoading, ElMessage } from 'element-plus';
 
 import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
 import {
@@ -49,14 +49,17 @@ function handleBind(row: MallDeliveryPickUpStoreApi.PickUpStore) {
 
 /** 删除门店 */
 async function handleDelete(row: MallDeliveryPickUpStoreApi.PickUpStore) {
-  await ElMessageBox.confirm('确定要删除该门店吗？', {
-    confirmButtonText: '确定',
-    cancelButtonText: '取消',
-    type: 'warning',
+  const loadingInstance = ElLoading.service({
+    text: $t('ui.actionMessage.deleting', [row.name]),
+    fullscreen: true,
   });
-  await deleteDeliveryPickUpStore(row.id as number);
-  ElMessage.success($t('ui.actionMessage.deleteSuccess', [row.name]));
-  onRefresh();
+  try {
+    await deleteDeliveryPickUpStore(row.id as number);
+    ElMessage.success($t('ui.actionMessage.deleteSuccess', [row.name]));
+    onRefresh();
+  } finally {
+    loadingInstance.close();
+  }
 }
 
 const [Grid, gridApi] = useVbenVxeGrid({

apps/web-ele/src/views/mall/trade/order/index.vue

@@ -117,7 +117,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
         <div class="order-items">
           <div v-for="item in row.items" :key="item.id" class="order-item">
             <div class="order-item-image">
-              <ElImage :src="item.picUrl" :width="40" :height="40" />
+              <ElImage :src="item.picUrl" class="h-40 w-40" />
             </div>
             <div class="order-item-content">
               <div class="order-item-name">
@@ -131,11 +131,11 @@ const [Grid, gridApi] = useVbenVxeGrid({
                 </ElTag>
               </div>
               <div class="order-item-info">
-                <span
-                  >原价：{{ fenToYuan(item.price) }} 元 / 数量：{{
+                <span>
+                  原价：{{ fenToYuan(item.price) }} 元 / 数量：{{
                     item.count
-                  }}个</span
-                >
+                  }}个
+                </span>
                 <DictTag
                   :type="DICT_TYPE.TRADE_ORDER_ITEM_AFTER_SALE_STATUS"
                   :value="item.afterSaleStatus"

apps/web-ele/src/views/mall/trade/order/modules/detail.vue

@@ -6,14 +6,13 @@ import type { MallOrderApi } from '#/api/mall/trade/order';
 import { onMounted, ref } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
 
-import { Page, useVbenModal } from '@vben/common-ui';
+import { confirm, Page, useVbenModal } from '@vben/common-ui';
 import { fenToYuan, formatDate } from '@vben/utils';
 
 import {
   ElDescriptions,
   ElDescriptionsItem,
   ElMessage,
-  ElMessageBox,
   ElTimeline,
   ElTimelineItem,
 } from 'element-plus';
@@ -109,12 +108,7 @@ const updatePrice = () => {
 /** 核销 */
 const handlePickUp = async () => {
   // 二次确认
-  await ElMessageBox.confirm('确认核销订单吗？', {
-    confirmButtonText: '确定',
-    cancelButtonText: '取消',
-    type: 'warning',
-  });
-  // 提交
+  await confirm(`确认核销订单吗？`);
   await TradeOrderApi.pickUpOrder(formData.value.id!);
   ElMessage.success('核销成功');
   // 刷新列表