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

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

apps/web-ele/src/views/mall/product/brand/index.vue

@@ -4,7 +4,7 @@ import type { MallBrandApi } from '#/api/mall/product/brand';
 
 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 { deleteBrand, getBrandPage } from '#/api/mall/product/brand';
@@ -35,15 +35,17 @@ function handleEdit(row: MallBrandApi.Brand) {
 
 /** 删除品牌 */
 async function handleDelete(row: MallBrandApi.Brand) {
-  // 二次确认
-  await ElMessageBox.confirm('确定删除该品牌吗？', {
-    confirmButtonText: '确定',
-    cancelButtonText: '取消',
-    type: 'warning',
+  const loadingInstance = ElLoading.service({
+    text: $t('ui.actionMessage.deleting', [row.name]),
+    fullscreen: true,
   });
-  await deleteBrand(row.id as number);
-  ElMessage.success($t('ui.actionMessage.deleteSuccess', [row.name]));
-  onRefresh();
+  try {
+    await deleteBrand(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/product/category/index.vue

@@ -7,7 +7,7 @@ import { useRouter } from 'vue-router';
 
 import { DocAlert, 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 { deleteCategory, getCategoryList } from '#/api/mall/product/category';
@@ -52,14 +52,17 @@ const handleViewSpu = (id: number) => {
 
 /** 删除分类 */
 async function handleDelete(row: MallCategoryApi.Category) {
-  await ElMessageBox.confirm('确定删除该分类吗？', {
-    confirmButtonText: '确定',
-    cancelButtonText: '取消',
-    type: 'warning',
+  const loadingInstance = ElLoading.service({
+    text: $t('ui.actionMessage.deleting', [row.name]),
+    fullscreen: true,
   });
-  await deleteCategory(row.id as number);
-  ElMessage.success($t('ui.actionMessage.deleteSuccess', [row.name]));
-  onRefresh();
+  try {
+    await deleteCategory(row.id as number);
+    ElMessage.success($t('ui.actionMessage.deleteSuccess', [row.name]));
+    onRefresh();
+  } finally {
+    loadingInstance.close();
+  }
 }
 
 /** 切换树形展开/收缩状态 */
@@ -162,8 +165,8 @@ const [Grid, gridApi] = useVbenVxeGrid({
               link: true,
               icon: ACTION_ICON.VIEW,
               auth: ['product:category:update'],
-              ifShow: row.parentId > 0,
-              onClick: handleViewSpu.bind(null, row),
+              ifShow: row.parentId !== undefined && row.parentId > 0,
+              onClick: handleViewSpu.bind(null, row.id || 0),
             },
             {
               label: $t('common.delete'),

apps/web-ele/src/views/mall/product/comment/data.ts

@@ -187,8 +187,8 @@ export function useGridColumns<T = MallCommentApi.Comment>(
         attrs: { beforeChange: onStatusChange },
         name: 'CellSwitch',
         props: {
-          checkedValue: true,
-          unCheckedValue: false,
+          activeValue: true,
+          inactiveValue: false,
         },
       },
     },

apps/web-ele/src/views/mall/product/property/modules/property-grid.vue

@@ -7,7 +7,7 @@ import type { MallPropertyApi } from '#/api/mall/product/property';
 
 import { 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 { deleteProperty, getPropertyPage } from '#/api/mall/product/property';
@@ -40,14 +40,17 @@ function handleEdit(row: any) {
 
 /** 删除属性 */
 async function handleDelete(row: MallPropertyApi.Property) {
-  await ElMessageBox.confirm('确定删除该属性吗？', {
-    confirmButtonText: '确定',
-    cancelButtonText: '取消',
-    type: 'warning',
+  const loadingInstance = ElLoading.service({
+    text: $t('ui.actionMessage.deleting', [row.name]),
+    fullscreen: true,
   });
-  await deleteProperty(row.id as number);
-  ElMessage.success($t('ui.actionMessage.deleteSuccess', [row.name]));
-  onRefresh();
+  try {
+    await deleteProperty(row.id as number);
+    ElMessage.success($t('ui.actionMessage.deleteSuccess', [row.name]));
+    onRefresh();
+  } finally {
+    loadingInstance.close();
+  }
 }
 
 /** 表格事件 */

apps/web-ele/src/views/mall/product/property/modules/value-grid.vue

@@ -6,7 +6,7 @@ import { watch } from 'vue';
 
 import { 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 {
@@ -47,14 +47,17 @@ function handleEdit(row: MallPropertyApi.PropertyValue) {
 
 /** 删除字典数据 */
 async function handleDelete(row: MallPropertyApi.PropertyValue) {
-  await ElMessageBox.confirm('确定删除该属性值吗？', {
-    confirmButtonText: '确定',
-    cancelButtonText: '取消',
-    type: 'warning',
+  const loadingInstance = ElLoading.service({
+    text: $t('ui.actionMessage.deleting', [row.name]),
+    fullscreen: true,
   });
-  await deletePropertyValue(row.id as number);
-  ElMessage.success($t('ui.actionMessage.deleteSuccess', [row.name]));
-  onRefresh();
+  try {
+    await deletePropertyValue(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/product/spu/index.vue

@@ -3,7 +3,7 @@ import type { VxeTableGridOptions } from '#/adapter/vxe-table';
 import type { MallSpuApi } from '#/api/mall/product/spu';
 
 import { onMounted, ref } from 'vue';
-import { useRouter } from 'vue-router';
+import { useRoute, useRouter } from 'vue-router';
 
 import { confirm, DocAlert, Page } from '@vben/common-ui';
 import {
@@ -13,7 +13,7 @@ import {
   treeToString,
 } from '@vben/utils';
 
-import { ElDescriptions, ElMessage, ElMessageBox, ElTabs } from 'element-plus';
+import { ElDescriptions, ElLoading, ElMessage, ElTabs } from 'element-plus';
 
 import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
 import { getCategoryList } from '#/api/mall/product/category';
@@ -31,7 +31,7 @@ import { useGridColumns, useGridFormSchema } from './data';
 
 const { push } = useRouter();
 const tabType = ref(0);
-
+const route = useRoute(); // 路由
 const categoryList = ref();
 
 // tabs 数据
@@ -64,8 +64,9 @@ const tabsData = ref([
 ]);
 
 /** 刷新表格 */
-function onRefresh() {
+async function onRefresh() {
   gridApi.query();
+  await getTabCount();
 }
 
 /** 获得每个 Tab 的数量 */
@@ -97,28 +98,27 @@ function handleEdit(row: MallSpuApi.Spu) {
 
 /** 删除商品 */
 async function handleDelete(row: MallSpuApi.Spu) {
-  await ElMessageBox.confirm('确定删除该商品吗？', {
-    confirmButtonText: '确定',
-    cancelButtonText: '取消',
-    type: 'warning',
+  const hideLoading = ElLoading.service({
+    text: $t('ui.actionMessage.deleting', [row.name]),
+    fullscreen: true,
   });
-  await deleteSpu(row.id as number);
-  ElMessage.success($t('ui.actionMessage.deleteSuccess', [row.name]));
-  onRefresh();
+  try {
+    await deleteSpu(row.id as number);
+    ElMessage.success($t('ui.actionMessage.deleteSuccess', [row.name]));
+    onRefresh();
+  } finally {
+    hideLoading.close();
+  }
 }
 
 /** 添加到仓库 / 回收站的状态 */
 async function handleStatus02Change(row: MallSpuApi.Spu, newStatus: number) {
+  // 二次确认
   const text =
     newStatus === ProductSpuStatusEnum.RECYCLE.status
       ? '加入到回收站'
       : '恢复到仓库';
-  // 二次确认
-  await ElMessageBox.confirm(`确认要jian"${row.name}"${text}吗？`, {
-    confirmButtonText: '确定',
-    cancelButtonText: '取消',
-    type: 'warning',
-  });
+  await confirm(`确认要"${row.name}"${text}吗？`);
   await updateStatus({ id: row.id as number, status: newStatus });
   ElMessage.success(`${text}成功`);
   onRefresh();
@@ -202,11 +202,16 @@ function onChangeTab(key: any) {
   gridApi.query();
 }
 
-onMounted(() => {
-  getTabCount();
-  getCategoryList({}).then((res) => {
-    categoryList.value = handleTree(res, 'id', 'parentId', 'children');
-  });
+onMounted(async () => {
+  // 解析路由的 categoryId
+  if (route.query.categoryId) {
+    gridApi.formApi.setValues({
+      categoryId: Number(route.query.categoryId),
+    });
+  }
+  await getTabCount();
+  const res = await getCategoryList({});
+  categoryList.value = handleTree(res, 'id', 'parentId', 'children');
 });
 </script>
 
@@ -221,11 +226,12 @@ onMounted(() => {
 
     <Grid>
       <template #top>
-        <ElTabs class="border-none" @change="onChangeTab">
+        <ElTabs class="border-none" @tab-change="onChangeTab">
           <ElTabs.TabPane
             v-for="item in tabsData"
             :key="item.type"
-            :tab="`${item.name} (${item.count})`"
+            :label="`${item.name} (${item.count})`"
+            :name="item.type"
           />
         </ElTabs>
       </template>
@@ -261,23 +267,23 @@ onMounted(() => {
           :content-style="{ width: '100px', fontSize: '14px' }"
         >
           <ElDescriptions.Item label="商品分类">
-            {{ treeToString(categoryList, row.categoryId) }}
+            {{ treeToString(categoryList, row.categoryId || 0) }}
           </ElDescriptions.Item>
           <ElDescriptions.Item label="商品名称">
             {{ row.name }}
           </ElDescriptions.Item>
 
           <ElDescriptions.Item label="市场价">
-            {{ fenToYuan(row.marketPrice) }} 元
+            {{ fenToYuan(row.marketPrice || 0) }} 元
           </ElDescriptions.Item>
           <ElDescriptions.Item label="成本价">
-            {{ fenToYuan(row.costPrice) }} 元
+            {{ fenToYuan(row.costPrice || 0) }} 元
           </ElDescriptions.Item>
           <ElDescriptions.Item label="浏览量">
-            {{ row.browseCount }}
+            {{ row.browseCount || 0 }}
           </ElDescriptions.Item>
           <ElDescriptions.Item label="虚拟销量">
-            {{ row.virtualSalesCount }}
+            {{ row.virtualSalesCount || 0 }}
           </ElDescriptions.Item>
         </ElDescriptions>
       </template>
@@ -305,7 +311,7 @@ onMounted(() => {
               link: true,
               icon: ACTION_ICON.DELETE,
               auth: ['product:spu:delete'],
-              ifShow: () => row.type === 4,
+              ifShow: () => tabType === 4,
               popConfirm: {
                 title: $t('ui.actionMessage.deleteConfirm', [row.name]),
                 confirm: handleDelete.bind(null, row),
@@ -317,7 +323,7 @@ onMounted(() => {
               link: true,
               icon: ACTION_ICON.EDIT,
               auth: ['product:spu:update'],
-              ifShow: () => row.type === 4,
+              ifShow: () => tabType === 4,
               onClick: handleStatus02Change.bind(
                 null,
                 row,
@@ -330,7 +336,7 @@ onMounted(() => {
               link: true,
               icon: ACTION_ICON.EDIT,
               auth: ['product:spu:update'],
-              ifShow: () => row.type !== 4,
+              ifShow: () => tabType !== 4,
               onClick: handleStatus02Change.bind(
                 null,
                 row,