176 lines
4.7 KiB
Markdown
176 lines
4.7 KiB
Markdown
# 工单按钮点击事件修复说明
|
||
|
||
## 问题描述
|
||
点击工单管理页面的"测试中"等按钮时，页面跳转到错误的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 保持不变
|
||
- ✅ 数据列表正确筛选
|
||
- ✅ 不会触发路由跳转
|
||
- ✅ 浏览器控制台没有错误
|