5.0 KiB

Raw Permalink Blame History

工单状态参数筛选功能实现说明

功能描述

当通过URL参数访问工单管理页面时，自动根据 state 参数筛选工单状态。

URL参数说明

state 参数映射

state 值	含义	testStep 值	显示的工单
0	进行中	1	测试中的工单
1	已完成	5	已完成的工单

示例URL

查看进行中的工单：
```
http://123.56.98.4:8081/system/test_work_order?state=0
```
自动筛选 testStep=1（测试中）的工单
查看已完成的工单：
```
http://123.56.98.4:8081/system/test_work_order?state=1
```
自动筛选 testStep=5（已完成）的工单
查看特定批次的进行中工单：
```
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 参数的处理：

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();
      }
    }
  }
}

工作流程

路由变化触发：当URL中的查询参数变化时，触发路由监听器
参数解析：从URL中提取 state 和 orderId 参数
状态映射：
- state=0 → testStep=1（测试中）
- state=1 → testStep=5（已完成）
数据加载：调用 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

扩展功能

如果需要支持更多状态，可以扩展映射关系：

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

应该显示所有工单（不筛选状态）

注意事项

参数优先级：URL参数会覆盖页面上的按钮筛选
参数持久性：URL参数只在页面加载时生效，点击页面上的按钮会改变筛选条件
参数验证：代码会将 state 参数转换为整数，非数字参数会被忽略
兼容性：同时支持 query 参数和 params 参数

5.0 KiB Raw Permalink Blame History Unescape Escape