145 lines
4.5 KiB
Markdown
145 lines
4.5 KiB
Markdown
|
|
# 用户管理删除功能实现报告
|
|||
|
|
|
|||
|
|
## 概述
|
|||
|
|
|
|||
|
|
实现用户管理页面中的删除按钮功能,可以删除数据库中的用户数据。
|
|||
|
|
|
|||
|
|
## 实现内容
|
|||
|
|
|
|||
|
|
### 1. 前端实现 (`pc-cattle-transportation/src/views/system/user.vue`)
|
|||
|
|
|
|||
|
|
#### 导入必要的依赖
|
|||
|
|
```javascript
|
|||
|
|
import { ElMessage, ElMessageBox } from 'element-plus';
|
|||
|
|
import { sysUserList, sysUserDel, sysUserSave } from '@/api/sys.js';
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
#### 删除用户方法
|
|||
|
|
```92:117:pc-cattle-transportation/src/views/system/user.vue
|
|||
|
|
// 删除用户
|
|||
|
|
const delClick = (row) => {
|
|||
|
|
ElMessageBox.confirm('请确认是否删除该用户?', '提示', {
|
|||
|
|
cancelButtonText: '取消',
|
|||
|
|
confirmButtonText: '确定',
|
|||
|
|
type: 'warning',
|
|||
|
|
})
|
|||
|
|
.then(() => {
|
|||
|
|
sysUserDel(row.id)
|
|||
|
|
.then(() => {
|
|||
|
|
ElMessage.success('删除成功');
|
|||
|
|
getDataList();
|
|||
|
|
})
|
|||
|
|
.catch((error) => {
|
|||
|
|
ElMessage.error('删除失败');
|
|||
|
|
console.error('删除失败:', error);
|
|||
|
|
});
|
|||
|
|
})
|
|||
|
|
.catch(() => {
|
|||
|
|
// 用户取消删除
|
|||
|
|
});
|
|||
|
|
};
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
#### 表格操作列
|
|||
|
|
```20:25:pc-cattle-transportation/src/views/system/user.vue
|
|||
|
|
<el-table-column label="操作" width="150">
|
|||
|
|
<template #default="scope">
|
|||
|
|
<el-button link type="primary" @click="showAddDialog(scope.row)">编辑</el-button>
|
|||
|
|
<el-button link type="primary" @click="delClick(scope.row)" style="color: #f56c6c;">删除</el-button>
|
|||
|
|
</template>
|
|||
|
|
</el-table-column>
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
### 2. API接口 (`pc-cattle-transportation/src/api/sys.js`)
|
|||
|
|
|
|||
|
|
```89:95:pc-cattle-transportation/src/api/sys.js
|
|||
|
|
// 子账号管理-删除
|
|||
|
|
export function sysUserDel(id) {
|
|||
|
|
return request({
|
|||
|
|
url: `/sysUser/delete?id=${id}`,
|
|||
|
|
method: 'GET',
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
### 3. 后端接口实现
|
|||
|
|
|
|||
|
|
#### Controller (`SysUserController.java`)
|
|||
|
|
```46:49:tradeCattle/aiotagro-cattle-trade/src/main/java/com/aiotagro/cattletrade/business/controller/SysUserController.java
|
|||
|
|
@GetMapping("/delete")
|
|||
|
|
public AjaxResult delete(@RequestParam Integer id) {
|
|||
|
|
return userService.delete(id);
|
|||
|
|
}
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
#### Service (`SysUserServiceImpl.java`)
|
|||
|
|
```80:84:tradeCattle/aiotagro-cattle-trade/src/main/java/com/aiotagro/cattletrade/business/service/impl/SysUserServiceImpl.java
|
|||
|
|
@Override
|
|||
|
|
public AjaxResult delete(Integer id) {
|
|||
|
|
removeById(id);
|
|||
|
|
return AjaxResult.success();
|
|||
|
|
}
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
## 功能特点
|
|||
|
|
|
|||
|
|
1. **二次确认**:点击删除按钮时,会弹出确认对话框
|
|||
|
|
2. **直接删除**:确认后直接调用后端接口删除数据库记录
|
|||
|
|
3. **自动刷新**:删除成功后自动刷新列表
|
|||
|
|
4. **错误处理**:删除失败时显示错误提示
|
|||
|
|
5. **用户友好**:删除按钮使用红色样式,清晰地表示危险操作
|
|||
|
|
|
|||
|
|
## 工作流程
|
|||
|
|
|
|||
|
|
1. 用户点击"删除"按钮
|
|||
|
|
2. 弹出确认对话框:"请确认是否删除该用户?"
|
|||
|
|
3. 用户点击"确定"
|
|||
|
|
4. 前端调用 `/sysUser/delete?id={userId}` 接口
|
|||
|
|
5. 后端执行 `removeById(id)` 删除数据库记录
|
|||
|
|
6. 返回成功响应
|
|||
|
|
7. 前端显示"删除成功"提示
|
|||
|
|
8. 自动刷新用户列表
|
|||
|
|
|
|||
|
|
## 测试建议
|
|||
|
|
|
|||
|
|
1. **功能测试**
|
|||
|
|
- 点击删除按钮,确认对话框正常弹出
|
|||
|
|
- 点击取消,不执行删除
|
|||
|
|
- 点击确定,用户被删除
|
|||
|
|
- 删除后列表自动刷新
|
|||
|
|
|
|||
|
|
2. **边界测试**
|
|||
|
|
- 测试删除不存在的用户ID
|
|||
|
|
- 测试网络异常情况
|
|||
|
|
|
|||
|
|
3. **权限测试**
|
|||
|
|
- 确认用户是否有删除权限
|
|||
|
|
|
|||
|
|
## 修改的文件
|
|||
|
|
|
|||
|
|
### 前端
|
|||
|
|
- ✅ `pc-cattle-transportation/src/views/system/user.vue` - 实现删除功能和完整的数据列表
|
|||
|
|
- ✅ `pc-cattle-transportation/src/api/sys.js` - API接口(已存在)
|
|||
|
|
|
|||
|
|
### 后端
|
|||
|
|
- ✅ `tradeCattle/aiotagro-cattle-trade/src/main/java/com/aiotagro/cattletrade/business/controller/SysUserController.java` - Controller接口(已存在)
|
|||
|
|
- ✅ `tradeCattle/aiotagro-cattle-trade/src/main/java/com/aiotagro/cattletrade/business/service/impl/SysUserServiceImpl.java` - Service实现(已存在)
|
|||
|
|
|
|||
|
|
## 注意事项
|
|||
|
|
|
|||
|
|
1. **数据安全**:删除操作是永久性的,不可恢复(除非有备份)
|
|||
|
|
2. **权限控制**:建议在后端添加权限校验,只允许特定角色删除用户
|
|||
|
|
3. **关联数据**:如果用户有关联数据(如订单、设备等),需要检查是否应该级联删除或阻止删除
|
|||
|
|
|
|||
|
|
## 后续改进建议
|
|||
|
|
|
|||
|
|
1. 添加权限校验
|
|||
|
|
2. 添加关联数据检查(如用户是否有关联的订单或设备)
|
|||
|
|
3. 实现软删除(添加 `isDelete` 标记,而不是物理删除)
|
|||
|
|
4. 添加操作日志记录
|
|||
|
|
|
|||
|
|
## 创建时间
|
|||
|
|
|
|||
|
|
2025-01-16
|
|||
|
|
|