diff --git a/ruoyi-fastapi-frontend/src/views/system/test_order/index.vue b/ruoyi-fastapi-frontend/src/views/system/test_order/index.vue index b47833e..2f4dd69 100644 --- a/ruoyi-fastapi-frontend/src/views/system/test_order/index.vue +++ b/ruoyi-fastapi-frontend/src/views/system/test_order/index.vue @@ -289,18 +289,18 @@ v-if="cur_page !== 'work_order'" v-hasPermi="['system:test_order:edit']" >修改 - + --> 删除 - --> + >批量删除 + {}); }, + /** 批量删除按钮操作 */ + 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(() => {}); + }, /** 导出按钮操作 */ handleExport() { this.download('system/test_order/export', { diff --git a/ruoyi-fastapi-frontend/src/views/system/test_work_order/index.vue b/ruoyi-fastapi-frontend/src/views/system/test_work_order/index.vue index e864574..f406ce3 100644 --- a/ruoyi-fastapi-frontend/src/views/system/test_work_order/index.vue +++ b/ruoyi-fastapi-frontend/src/views/system/test_work_order/index.vue @@ -68,6 +68,16 @@ v-hasPermi="['system:test_work_order:list']" >生成订单 + + 批量删除 + {}); }, + /** 批量删除按钮操作 */ + 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(() => {}); + }, /** 导出按钮操作 */ handleExport() { this.download('system/test_work_order/export', { diff --git a/批量删除功能实现说明.md b/批量删除功能实现说明.md new file mode 100644 index 0000000..fdc091c --- /dev/null +++ b/批量删除功能实现说明.md @@ -0,0 +1,213 @@ +# 批量删除功能实现说明 + +## 功能描述 + +为工单管理和订单管理页面添加批量删除功能,允许用户选中多个项目后一次性删除。 + +## 实现内容 + +### 1. 工单管理页面(test_work_order/index.vue) + +#### 添加的按钮 +在工单管理页面的按钮行中添加了"批量删除"按钮: + +```vue + + 批量删除 + +``` + +**按钮特性**: +- 位置:在"生成订单"按钮之后 +- 权限控制:只有非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 + + 批量删除 + +``` + +**按钮特性**: +- 位置:替换了原来注释掉的删除按钮位置 +- 显示条件:只在订单页面显示(`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