# 工单按钮点击事件修复说明

## 问题描述
点击工单管理页面的"测试中"等按钮时，页面跳转到错误的URL：
```
http://127.0.0.1/test_work_order/testOrder01?page=work_order&state=0
```

## 问题分析

### URL结构分析
```
http://127.0.0.1/test_work_order/testOrder01?page=work_order&state=0
                 ^^^^^^^^^^^^^^^^ ^^^^^^^^^^^ ^^^^^^^^^^^^^^^^^^^^^^^^^
                 父菜单路径        子菜单路径   查询参数
```

### 可能的原因
1. **菜单配置问题**：工单管理菜单下可能有一个子菜单，path是 `testOrder01`
2. **事件冒泡问题**：按钮点击事件可能触发了父元素的点击事件
3. **路由守卫问题**：可能有全局路由守卫拦截了按钮点击

### 按钮点击事件
原始代码：
```vue
<el-button @click="queryParams.testStep = 1; getList()">测试中</el-button>
```

这个点击事件只是设置查询参数并调用 `getList()` 方法，不应该触发路由跳转。

## 修复方案

### 方案1：阻止事件默认行为（已实施）
在所有按钮的点击事件中添加 `.prevent` 修饰符，阻止默认行为：

```vue
<el-button @click.prevent="queryParams.testStep = 1; getList()">测试中</el-button>
```

修改的按钮：
- 全部工单
- 待领取
- 测试中
- 一审中
- 二审中
- 三审中
- 已完成

### 方案2：检查菜单配置
需要检查数据库中是否有错误的子菜单配置：

```sql
-- 查询工单管理菜单及其所有子菜单
SELECT 
    menu_id,
    menu_name,
    parent_id,
    path,
    component,
    query,
    menu_type
FROM sys_menu
WHERE menu_id IN (2098, 2092)
   OR parent_id IN (2098, 2092)
ORDER BY parent_id, order_num;
```

如果发现有 path 为 `testOrder01` 的子菜单，需要删除或修改它。

### 方案3：修改按钮点击处理方法
将按钮点击事件改为调用方法，而不是内联代码：

```vue
<!-- 模板 -->
<el-button @click="handleFilterByStep(1)">测试中</el-button>

<!-- 脚本 -->
methods: {
  handleFilterByStep(step) {
    // 阻止任何可能的路由跳转
    event.preventDefault();
    event.stopPropagation();
    
    // 设置查询参数
    this.queryParams.testStep = step;
    
    // 刷新列表
    this.getList();
  }
}
```

## 修改内容

### 文件：`ruoyi-fastapi-frontend/src/views/system/test_work_order/index.vue`

**修改前：**
```vue
<el-button @click="queryParams.testStep = 1; getList()">测试中</el-button>
```

**修改后：**
```vue
<el-button @click.prevent="queryParams.testStep = 1; getList()">测试中</el-button>
```

所有状态筛选按钮都添加了 `.prevent` 修饰符。

## 测试步骤

### 1. 清除浏览器缓存
- 按 `Ctrl + Shift + R` 强制刷新页面

### 2. 测试按钮点击
1. 访问工单管理页面
2. 点击"测试中"按钮
3. 验证：
   - URL 应该保持为：`http://127.0.0.1/system/test_work_order`
   - 数据列表应该显示 testStep=1 的工单
   - 不应该有任何路由跳转

### 3. 测试所有按钮
依次点击以下按钮，验证都不会触发路由跳转：
- 全部工单
- 待领取
- 测试中
- 一审中
- 二审中
- 三审中
- 已完成

### 4. 检查浏览器控制台
打开浏览器开发者工具（F12），检查：
- Console 标签：是否有 JavaScript 错误
- Network 标签：是否有正确的 API 请求
- 请求 URL 应该是：`http://127.0.0.1:9099/system/test_work_order/list?testStep=1&pageNum=1&pageSize=10`

## 如果问题仍然存在

### 检查菜单配置
运行 `check_workorder_submenu.sql` 查询菜单配置：

```bash
mysql -h127.0.0.1 -P3306 -uroot -p123456 ry-fastapi < check_workorder_submenu.sql
```

查找是否有：
- path 为 `testOrder01` 的菜单
- query 参数包含 `page=work_order&state=0` 的菜单

如果找到，需要删除或修改这些菜单配置。

### 检查路由配置
确认 `router/index.js` 中没有多余的路由配置。

### 检查全局事件监听
检查是否有全局的点击事件监听器拦截了按钮点击。

## 相关文件
- `ruoyi-fastapi-frontend/src/views/system/test_work_order/index.vue` - 工单管理页面（已修改）
- `check_workorder_submenu.sql` - 菜单配置查询脚本
- `fix_workorder_menu_path.sql` - 菜单路径修复脚本
- `工单菜单路径配置错误修复说明.md` - 菜单配置修复说明

## 注意事项
1. `.prevent` 修饰符会阻止事件的默认行为
2. 如果按钮在 `<a>` 标签或 `<router-link>` 中，`.prevent` 会阻止链接跳转
3. 确保没有其他代码监听了这些按钮的点击事件
4. 如果使用了事件委托，可能需要添加 `.stop` 修饰符阻止事件冒泡

## 预期结果
- ✅ 点击按钮后，URL 保持不变
- ✅ 数据列表正确筛选
- ✅ 不会触发路由跳转
- ✅ 浏览器控制台没有错误