177 lines
5.0 KiB
Markdown
177 lines
5.0 KiB
Markdown
# 工单状态参数筛选功能实现说明
|
||
|
||
## 功能描述
|
||
|
||
当通过URL参数访问工单管理页面时，自动根据 `state` 参数筛选工单状态。
|
||
|
||
## URL参数说明
|
||
|
||
### state 参数映射
|
||
|
||
| state 值 | 含义 | testStep 值 | 显示的工单 |
|
||
|---------|------|------------|----------|
|
||
| 0 | 进行中 | 1 | 测试中的工单 |
|
||
| 1 | 已完成 | 5 | 已完成的工单 |
|
||
|
||
### 示例URL
|
||
|
||
1. **查看进行中的工单**：
|
||
```
|
||
http://123.56.98.4:8081/system/test_work_order?state=0
|
||
```
|
||
自动筛选 `testStep=1`（测试中）的工单
|
||
|
||
2. **查看已完成的工单**：
|
||
```
|
||
http://123.56.98.4:8081/system/test_work_order?state=1
|
||
```
|
||
自动筛选 `testStep=5`（已完成）的工单
|
||
|
||
3. **查看特定批次的进行中工单**：
|
||
```
|
||
http://123.56.98.4:8081/system/test_work_order?orderId=123&state=0
|
||
```
|
||
筛选批次ID为123且状态为测试中的工单
|
||
|
||
## 实现细节
|
||
|
||
### 修改文件
|
||
`ruoyi-fastapi-frontend/src/views/system/test_work_order/index.vue`
|
||
|
||
### 修改内容
|
||
|
||
在 `watch` 部分添加了对 `state` 参数的处理：
|
||
|
||
```javascript
|
||
watch: {
|
||
'$route': {
|
||
immediate: true,
|
||
deep: true,
|
||
handler(to) {
|
||
const orderId = to.query.orderId || to.params.orderId;
|
||
const state = to.query.state || to.params.state;
|
||
|
||
if(orderId !== undefined && orderId !== null) {
|
||
this.queryParams.batchId = orderId;
|
||
}
|
||
|
||
// 根据 state 参数设置 testStep 筛选条件
|
||
if(state !== undefined && state !== null) {
|
||
const stateNum = parseInt(state);
|
||
if (stateNum === 0) {
|
||
// state=0 表示进行中，对应 testStep=1
|
||
this.queryParams.testStep = 1;
|
||
} else if (stateNum === 1) {
|
||
// state=1 表示已完成，对应 testStep=5
|
||
this.queryParams.testStep = 5;
|
||
}
|
||
}
|
||
|
||
if(orderId !== undefined && orderId !== null || state !== undefined && state !== null) {
|
||
this.getList();
|
||
}
|
||
}
|
||
}
|
||
}
|
||
```
|
||
|
||
## 工作流程
|
||
|
||
1. **路由变化触发**：当URL中的查询参数变化时，触发路由监听器
|
||
2. **参数解析**：从URL中提取 `state` 和 `orderId` 参数
|
||
3. **状态映射**：
|
||
- `state=0` → `testStep=1`（测试中）
|
||
- `state=1` → `testStep=5`（已完成）
|
||
4. **数据加载**：调用 `getList()` 方法，根据设置的 `testStep` 筛选工单
|
||
|
||
## 与菜单配置的关系
|
||
|
||
### 菜单配置示例
|
||
|
||
如果您想在菜单中添加"进行中"和"已完成"的快捷入口：
|
||
|
||
**进行中菜单**：
|
||
- 菜单名称：进行中
|
||
- 上级菜单：工单管理
|
||
- 菜单类型：菜单（C）
|
||
- 路由地址：test_work_order
|
||
- 组件路径：system/test_work_order/index
|
||
- 路由参数：`{"state": 0}`
|
||
- 权限字符：system:test_work_order:list
|
||
|
||
**已完成菜单**：
|
||
- 菜单名称：已完成
|
||
- 上级菜单：工单管理
|
||
- 菜单类型：菜单（C）
|
||
- 路由地址：test_work_order
|
||
- 组件路径：system/test_work_order/index
|
||
- 路由参数：`{"state": 1}`
|
||
- 权限字符：system:test_work_order:list
|
||
|
||
## 扩展功能
|
||
|
||
如果需要支持更多状态，可以扩展映射关系：
|
||
|
||
```javascript
|
||
if(state !== undefined && state !== null) {
|
||
const stateNum = parseInt(state);
|
||
switch(stateNum) {
|
||
case 0:
|
||
this.queryParams.testStep = 1; // 测试中
|
||
break;
|
||
case 1:
|
||
this.queryParams.testStep = 5; // 已完成
|
||
break;
|
||
case 2:
|
||
this.queryParams.testStep = 0; // 待领取
|
||
break;
|
||
case 3:
|
||
this.queryParams.testStep = 2; // 一审中
|
||
break;
|
||
case 4:
|
||
this.queryParams.testStep = 3; // 二审中
|
||
break;
|
||
case 5:
|
||
this.queryParams.testStep = 4; // 三审中
|
||
break;
|
||
default:
|
||
this.queryParams.testStep = null; // 全部
|
||
}
|
||
}
|
||
```
|
||
|
||
## 测试步骤
|
||
|
||
### 1. 清除浏览器缓存
|
||
按 `Ctrl + Shift + R` 强制刷新页面
|
||
|
||
### 2. 测试进行中筛选
|
||
访问：`http://123.56.98.4:8081/system/test_work_order?state=0`
|
||
- 应该只显示 testStep=1 的工单
|
||
- 页面标题或筛选条件应该显示"测试中"
|
||
|
||
### 3. 测试已完成筛选
|
||
访问：`http://123.56.98.4:8081/system/test_work_order?state=1`
|
||
- 应该只显示 testStep=5 的工单
|
||
- 页面标题或筛选条件应该显示"已完成"
|
||
|
||
### 4. 测试组合筛选
|
||
访问：`http://123.56.98.4:8081/system/test_work_order?orderId=123&state=1`
|
||
- 应该显示批次ID为123且已完成的工单
|
||
|
||
### 5. 测试无参数访问
|
||
访问：`http://123.56.98.4:8081/system/test_work_order`
|
||
- 应该显示所有工单（不筛选状态）
|
||
|
||
## 注意事项
|
||
|
||
1. **参数优先级**：URL参数会覆盖页面上的按钮筛选
|
||
2. **参数持久性**：URL参数只在页面加载时生效，点击页面上的按钮会改变筛选条件
|
||
3. **参数验证**：代码会将 state 参数转换为整数，非数字参数会被忽略
|
||
4. **兼容性**：同时支持 query 参数和 params 参数
|
||
|
||
## 相关文件
|
||
- `ruoyi-fastapi-frontend/src/views/system/test_work_order/index.vue` - 工单管理页面（已修改）
|
||
- `工单菜单错误子菜单修复说明.md` - 菜单配置修复说明
|
||
- `工单按钮点击事件修复说明.md` - 按钮点击事件修复说明
|