# 批量删除功能实现说明

## 功能描述

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

## 实现内容

### 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