<think>我们将在删除按钮操作时添加一个确认提示框。在Element Plus中,我们可以使用ElMessageBox来创建一个确认对话框。
具体修改点:
1. 在删除单个品牌时,点击删除按钮弹出确认对话框
2. 在批量删除时,同样弹出确认对话框
3. 用户确认后执行删除操作,取消则不执行
我们将修改两个函数:handleDelete(单个删除)和handleBatchDelete(批量删除)
注意:需要从element-plus中导入ElMessageBox</think>我将为删除按钮添加确认提示功能,确保用户不会误操作删除重要数据。以下是优化后的代码:
```vue
<template>
<!-- ...其他代码保持不变... -->
</template>
<script setup>
import { ref, onMounted } from 'vue'
import {
getBrandsByPage,
addBrand,
updateBrand,
deleteBrand,
batchDelete
} from '@/api/brandApi'
import { ElMessage, ElMessageBox } from 'element-plus' // 引入ElMessageBox
import {
Goods,
OfficeBuilding,
ShoppingCart,
CircleCheckFilled,
Clock
} from '@element-plus/icons-vue'
// ...其他代码保持不变...
// 删除操作 - 添加确认提示
const handleDelete = async (id) => {
try {
// 显示确认对话框
await ElMessageBox.confirm(
'确定要删除该品牌吗?此操作不可撤销!',
'删除确认',
{
confirmButtonText: '确认删除',
cancelButtonText: '取消',
type: 'warning',
customClass: 'delete-confirm-dialog',
confirmButtonClass: 'confirm-delete-button',
cancelButtonClass: 'cancel-delete-button',
beforeClose: async (action, instance, done) => {
if (action === 'confirm') {
instance.confirmButtonLoading = true;
try {
await deleteBrand(id)
showSuccess('删除成功')
done()
loadData()
} catch (error) {
instance.confirmButtonLoading = false;
showError('删除失败')
}
} else {
done()
}
}
}
)
} catch (error) {
// 用户点击取消
showInfo('已取消删除操作')
}
}
// 批量删除操作 - 添加确认提示
const handleBatchDelete = async () => {
if (!selectedIds.value.length) {
return showWarning('请至少选择一条记录')
}
try {
// 显示确认对话框
await ElMessageBox.confirm(
`确定要删除选中的 ${selectedIds.value.length} 个品牌吗?此操作不可撤销!`,
'批量删除确认',
{
confirmButtonText: '确认删除',
cancelButtonText: '取消',
type: 'warning',
customClass: 'batch-delete-dialog',
confirmButtonClass: 'confirm-delete-button',
cancelButtonClass: 'cancel-delete-button',
beforeClose: async (action, instance, done) => {
if (action === 'confirm') {
instance.confirmButtonLoading = true;
try {
await batchDelete(selectedIds.value)
showSuccess(`已成功删除 ${selectedIds.value.length} 个品牌`)
selectedIds.value = []
done()
loadData()
} catch (error) {
instance.confirmButtonLoading = false;
showError('删除失败')
}
} else {
done()
}
}
}
)
} catch (error) {
// 用户点击取消
showInfo('已取消批量删除操作')
}
}
// 消息通知
const showSuccess = (message) => ElMessage.success(message)
const showError = (message) => ElMessage.error(message)
const showWarning = (message) => ElMessage.warning(message)
const showInfo = (message) => ElMessage.info(message) // 新增信息提示
// ...其他代码保持不变...
</script>
<style scoped lang="scss">
/* ...其他样式保持不变... */
/* 删除确认对话框样式 */
.delete-confirm-dialog,
.batch-delete-dialog {
border-radius: 12px;
overflow: hidden;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
:deep(.el-message-box__header) {
background-color: #fff8f0;
padding: 15px 20px;
border-bottom: 1px solid #ffe4c4;
.el-message-box__title {
color: #e6a23c;
font-weight: 600;
}
}
:deep(.el-message-box__content) {
padding: 20px;
color: #606266;
font-size: 16px;
line-height: 1.6;
.el-icon-warning {
color: #e6a23c;
font-size: 24px;
margin-right: 10px;
vertical-align: middle;
}
}
:deep(.el-message-box__btns) {
padding: 15px 20px;
display: flex;
justify-content: flex-end;
gap: 12px;
background-color: #f9f9f9;
border-top: 1px solid #eee;
}
}
.confirm-delete-button {
background-color: #f56c6c;
border-color: #f56c6c;
color: white;
border-radius: 8px;
padding: 10px 20px;
transition: all 0.3s;
&:hover {
background-color: #e65050;
border-color: #e65050;
transform: translateY(-2px);
box-shadow: 0 4px 8px rgba(245, 108, 108, 0.3);
}
&:active {
transform: translateY(0);
}
}
.cancel-delete-button {
border-radius: 8px;
padding: 10px 20px;
transition: all 0.3s;
&:hover {
background-color: #f0f2f5;
transform: translateY(-2px);
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
&:active {
transform: translateY(0);
}
}
</style>
```
### 删除确认功能实现详解:
1. **使用 Element Plus 的 ElMessageBox 组件**:
- 通过 `ElMessageBox.confirm` 创建确认对话框
- 自定义对话框标题、内容和按钮文本
- 设置警告类型(type: 'warning')增强警示效果
2. **单条删除确认**:
```javascript
await ElMessageBox.confirm(
'确定要删除该品牌吗?此操作不可撤销!',
'删除确认',
{
// 配置选项
}
)
```
3. **批量删除确认**:
```javascript
await ElMessageBox.confirm(
`确定要删除选中的 ${selectedIds.value.length} 个品牌吗?此操作不可撤销!`,
'批量删除确认',
{
// 配置选项
}
)
```
4. **高级配置选项**:
- `beforeClose`:自定义关闭逻辑,在确认删除时显示加载状态
- `customClass`:自定义对话框样式类
- `confirmButtonClass`/`cancelButtonClass`:自定义按钮样式
5. **用户体验优化**:
- 确认按钮显示加载状态防止重复点击
- 成功/失败后显示相应的提示信息
- 用户取消操作时显示取消提示
6. **样式优化**:
- 自定义对话框样式与整体设计风格一致
- 确认按钮使用红色强调操作风险
- 添加按钮悬停动画增强交互感
- 对话框添加阴影提升层次感
### 功能优势:
1. **防止误操作**:用户必须明确确认才能执行删除操作
2. **操作可逆**:用户有机会在确认前取消操作
3. **风险提示**:明确告知用户操作不可撤销
4. **视觉强调**:使用警告图标和颜色增强警示效果
5. **批量操作明确**:显示将要删除的记录数量
这个实现既保持了原有功能,又添加了必要的安全措施,确保用户不会意外删除重要数据,同时提供了良好的用户体验。