4.7 KiB

Raw Permalink Blame History

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

问题描述

点击工单管理页面的"测试中"等按钮时，页面跳转到错误的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
                 ^^^^^^^^^^^^^^^^ ^^^^^^^^^^^ ^^^^^^^^^^^^^^^^^^^^^^^^^
                 父菜单路径        子菜单路径   查询参数

可能的原因

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

按钮点击事件

原始代码：

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

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

修复方案

方案1：阻止事件默认行为（已实施）

在所有按钮的点击事件中添加 .prevent 修饰符，阻止默认行为：

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

修改的按钮：

全部工单
待领取
测试中
一审中
二审中
三审中
已完成

方案2：检查菜单配置

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

-- 查询工单管理菜单及其所有子菜单
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：修改按钮点击处理方法

将按钮点击事件改为调用方法，而不是内联代码：

<!-- 模板 -->
<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`

修改前：

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

修改后：

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

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

测试步骤

1. 清除浏览器缓存

按 Ctrl + Shift + R 强制刷新页面

2. 测试按钮点击

访问工单管理页面
点击"测试中"按钮
验证：
- 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 查询菜单配置：

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 中没有多余的路由配置。

检查全局事件监听

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

注意事项

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

预期结果

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

4.7 KiB Raw Permalink Blame History Unescape Escape