214 lines
6.0 KiB
Markdown
214 lines
6.0 KiB
Markdown
# 批量删除功能实现说明
|
||
|
||
## 功能描述
|
||
|
||
为工单管理和订单管理页面添加批量删除功能，允许用户选中多个项目后一次性删除。
|
||
|
||
## 实现内容
|
||
|
||
### 1. 工单管理页面（test_work_order/index.vue）
|
||
|
||
#### 添加的按钮
|
||
在工单管理页面的按钮行中添加了"批量删除"按钮：
|
||
|
||
```vue
|
||
<el-col :span="1.5" v-if="!$store.getters.roles.includes('common')">
|
||
<el-button
|
||
type="danger"
|
||
plain
|
||
icon="el-icon-delete"
|
||
:disabled="multiple"
|
||
@click="handleBatchDelete"
|
||
v-hasPermi="['system:test_work_order:remove']"
|
||
>批量删除</el-button>
|
||
</el-col>
|
||
```
|
||
|
||
**按钮特性**：
|
||
- 位置：在"生成订单"按钮之后
|
||
- 权限控制：只有非common角色的用户可见
|
||
- 禁用状态：当没有选中任何工单时禁用（`multiple`为true时）
|
||
- 权限标识：`system:test_work_order:remove`
|
||
|
||
#### 添加的方法
|
||
|
||
```javascript
|
||
/** 批量删除按钮操作 */
|
||
handleBatchDelete() {
|
||
if (this.ids.length === 0) {
|
||
this.$modal.msgWarning("请选择要删除的工单");
|
||
return;
|
||
}
|
||
const ids = this.ids.join(',');
|
||
this.$modal.confirm(`是否确认删除选中的 ${this.ids.length} 个工单？`).then(function() {
|
||
return delTest_work_order(ids);
|
||
}).then(() => {
|
||
this.getList();
|
||
this.$modal.msgSuccess("批量删除成功");
|
||
}).catch(() => {});
|
||
}
|
||
```
|
||
|
||
**方法功能**：
|
||
1. 检查是否选中了工单
|
||
2. 将选中的工单ID数组转换为逗号分隔的字符串
|
||
3. 显示确认对话框，提示要删除的工单数量
|
||
4. 调用删除API
|
||
5. 刷新列表并显示成功消息
|
||
|
||
### 2. 订单管理页面（test_order/index.vue）
|
||
|
||
#### 添加的按钮
|
||
在订单管理页面的按钮行中添加了"批量删除"按钮：
|
||
|
||
```vue
|
||
<el-col :span="1.5">
|
||
<el-button
|
||
type="danger"
|
||
plain
|
||
icon="el-icon-delete"
|
||
:disabled="multiple"
|
||
@click="handleBatchDelete"
|
||
v-if="cur_page !== 'work_order'"
|
||
v-hasPermi="['system:test_order:remove']"
|
||
>批量删除</el-button>
|
||
</el-col>
|
||
```
|
||
|
||
**按钮特性**：
|
||
- 位置：替换了原来注释掉的删除按钮位置
|
||
- 显示条件：只在订单页面显示（`cur_page !== 'work_order'`）
|
||
- 禁用状态：当没有选中任何订单时禁用
|
||
- 权限标识：`system:test_order:remove`
|
||
|
||
#### 添加的方法
|
||
|
||
```javascript
|
||
/** 批量删除按钮操作 */
|
||
handleBatchDelete() {
|
||
if (this.ids.length === 0) {
|
||
this.$modal.msgWarning("请选择要删除的订单");
|
||
return;
|
||
}
|
||
const ids = this.ids.join(',');
|
||
this.$modal.confirm(`是否确认删除选中的 ${this.ids.length} 个订单？`).then(function() {
|
||
return delTest_order(ids);
|
||
}).then(() => {
|
||
this.getList();
|
||
this.$modal.msgSuccess("批量删除成功");
|
||
}).catch(() => {});
|
||
}
|
||
```
|
||
|
||
**方法功能**：
|
||
1. 检查是否选中了订单
|
||
2. 将选中的订单ID数组转换为逗号分隔的字符串
|
||
3. 显示确认对话框，提示要删除的订单数量
|
||
4. 调用删除API
|
||
5. 刷新列表并显示成功消息
|
||
|
||
## 使用说明
|
||
|
||
### 工单管理页面
|
||
|
||
1. **访问页面**：进入"工单管理" → "测试工单"
|
||
2. **选择工单**：勾选要删除的工单（可多选）
|
||
3. **点击删除**：点击"批量删除"按钮
|
||
4. **确认操作**：在弹出的确认对话框中点击"确定"
|
||
5. **完成删除**：系统显示"批量删除成功"消息，列表自动刷新
|
||
|
||
### 订单管理页面
|
||
|
||
1. **访问页面**：进入"订单管理"
|
||
2. **选择订单**：勾选要删除的订单（可多选）
|
||
3. **点击删除**：点击"批量删除"按钮
|
||
4. **确认操作**：在弹出的确认对话框中点击"确定"
|
||
5. **完成删除**：系统显示"批量删除成功"消息，列表自动刷新
|
||
|
||
## 权限要求
|
||
|
||
### 工单管理
|
||
- 需要权限：`system:test_work_order:remove`
|
||
- 角色限制：common角色不可见批量删除按钮
|
||
|
||
### 订单管理
|
||
- 需要权限：`system:test_order:remove`
|
||
- 页面限制：只在订单页面显示（不在工单页面显示）
|
||
|
||
## 后端API
|
||
|
||
批量删除功能使用现有的删除API，支持传入逗号分隔的ID字符串：
|
||
|
||
### 工单删除API
|
||
- **接口**：`DELETE /system/test_work_order/{ids}`
|
||
- **参数**：`ids` - 逗号分隔的工单ID字符串（如："1,2,3"）
|
||
- **返回**：删除结果
|
||
|
||
### 订单删除API
|
||
- **接口**：`DELETE /system/test_order/{ids}`
|
||
- **参数**：`ids` - 逗号分隔的订单ID字符串（如："1,2,3"）
|
||
- **返回**：删除结果
|
||
|
||
## 注意事项
|
||
|
||
1. **选择验证**：
|
||
- 未选中任何项目时，按钮处于禁用状态
|
||
- 点击按钮时会再次验证是否有选中项
|
||
|
||
2. **确认对话框**：
|
||
- 显示要删除的项目数量
|
||
- 用户可以取消操作
|
||
|
||
3. **删除后操作**：
|
||
- 自动刷新列表
|
||
- 清空选中状态
|
||
- 显示成功消息
|
||
|
||
4. **错误处理**：
|
||
- 如果删除失败，会显示错误消息
|
||
- 不会影响其他已选中的项目
|
||
|
||
## 测试建议
|
||
|
||
### 功能测试
|
||
1. 选中单个项目删除
|
||
2. 选中多个项目删除
|
||
3. 未选中任何项目时按钮应禁用
|
||
4. 取消删除操作
|
||
5. 删除后列表应正确刷新
|
||
|
||
### 权限测试
|
||
1. 有权限的用户可以看到并使用批量删除按钮
|
||
2. 无权限的用户看不到批量删除按钮
|
||
3. common角色在工单页面看不到批量删除按钮
|
||
|
||
### 边界测试
|
||
1. 删除所有项目
|
||
2. 删除第一页的所有项目（应跳转到上一页）
|
||
3. 删除最后一页的所有项目（应跳转到上一页）
|
||
|
||
## 相关文件
|
||
|
||
- `ruoyi-fastapi-frontend/src/views/system/test_work_order/index.vue` - 工单管理页面
|
||
- `ruoyi-fastapi-frontend/src/views/system/test_order/index.vue` - 订单管理页面
|
||
- `ruoyi-fastapi-backend/module_admin/system/service/test_work_order_service.py` - 工单服务
|
||
- `ruoyi-fastapi-backend/module_admin/system/service/test_order_service.py` - 订单服务
|
||
|
||
## 修改总结
|
||
|
||
### 工单管理
|
||
- ✅ 添加批量删除按钮
|
||
- ✅ 添加 `handleBatchDelete` 方法
|
||
- ✅ 权限控制（非common角色）
|
||
- ✅ 禁用状态控制
|
||
|
||
### 订单管理
|
||
- ✅ 添加批量删除按钮
|
||
- ✅ 添加 `handleBatchDelete` 方法
|
||
- ✅ 权限控制
|
||
- ✅ 页面显示控制（只在订单页面显示）
|
||
- ✅ 禁用状态控制
|
||
|
||
## 完成时间
|
||
2026-01-09
|