批量删除

main
risingLee 2026-01-19 17:01:03 +08:00
parent 347d9472ab
commit 9bdfd77963
3 changed files with 255 additions and 4 deletions

View File

@ -289,18 +289,18 @@
v-if="cur_page !== 'work_order'"
v-hasPermi="['system:test_order:edit']"
>修改</el-button>
</el-col>
</el-col> -->
<el-col :span="1.5">
<el-button
type="danger"
plain
icon="el-icon-delete"
:disabled="multiple"
@click="handleDelete"
@click="handleBatchDelete"
v-if="cur_page !== 'work_order'"
v-hasPermi="['system:test_order:remove']"
>删除</el-button>
</el-col> -->
>批量删除</el-button>
</el-col>
<el-col :span="1.5">
<el-button
type="warning"
@ -772,6 +772,20 @@ export default {
this.$modal.msgSuccess("删除成功");
}).catch(() => {});
},
/** 批量删除按钮操作 */
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', {

View File

@ -68,6 +68,16 @@
v-hasPermi="['system:test_work_order:list']"
>生成订单</el-button>
</el-col>
<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>
<el-col :span="1.5">
<el-button
type="success"
@ -812,6 +822,20 @@ export default {
this.$modal.msgSuccess("删除成功");
}).catch(() => {});
},
/** 批量删除按钮操作 */
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', {

View File

@ -0,0 +1,213 @@
# 批量删除功能实现说明
## 功能描述
为工单管理和订单管理页面添加批量删除功能,允许用户选中多个项目后一次性删除。
## 实现内容
### 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