ETest-Vue-FastAPI/批量删除功能实现说明.md

批量删除功能实现说明

功能描述

为工单管理和订单管理页面添加批量删除功能，允许用户选中多个项目后一次性删除。

实现内容

1. 工单管理页面（test_work_order/index.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

添加的方法

/** 批量删除按钮操作 */
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）

添加的按钮

在订单管理页面的按钮行中添加了"批量删除"按钮：

<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

添加的方法

/** 批量删除按钮操作 */
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