risingLee
/
ETest-Vue-FastAPI
1
0
Fork 0
Code Issues 6 Pull Requests Packages Projects Releases Wiki Activity
ETest-Vue-FastAPI/批量删除功能实现说明.md

6.0 KiB
Raw Permalink Blame History

批量删除功能实现说明

功能描述

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

实现内容

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