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

- 将 ElMessageBox 替换为自定义 confirm 函数- 添加全局 loading 功能
- 优化错误处理和消息提示- 调整部分组件属性和样式
This commit is contained in:
lrl
2025-08-01 13:56:55 +08:00
parent c447145d62
commit 38daaa2934
63 changed files with 674 additions and 662 deletions

View File

@@ -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();
}
}
/** 表格事件 */

View File

@@ -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({