ETest-Vue-FastAPI/工单路由跳转问题完整修复方案.md

262 lines
7.6 KiB
Markdown
Raw Normal View History

2026-01-09 10:05:35 +08:00
# 工单路由跳转问题完整修复方案
## 问题描述
点击工单管理页面的"测试中"、"已完成"等按钮时URL跳转到错误的路径
- 错误URL示例`http://123.56.98.4:8081/test_work_order/testWorkOrder02?page=work_order&state=1`
- 正确URL应该是`http://123.56.98.4:8081/system/test_work_order?state=1`
## 根本原因
数据库中存在错误的菜单配置这些菜单拦截了按钮的点击事件导致路由跳转到错误的URL。
### 错误的菜单配置特征:
1. **parent_id = 2098**(工单管理的子菜单)
2. **menu_type = 'C'**(菜单类型)
3. **path = 'testOrder01'****'testWorkOrder02'** 等错误路径
4. **menu_name = '进行中'、'已完成'** 等状态名称
5. **component = 'system/test_order/index'**(错误!应该是 test_work_order
## 修复步骤
### 步骤1诊断问题
运行诊断脚本查看当前菜单配置:
```bash
mysql -u your_username -p your_database < check_workorder_submenu.sql
```
或者在数据库客户端中执行:
```sql
-- 查看工单管理的所有子菜单
SELECT
menu_id,
menu_name,
parent_id,
path,
component,
query,
menu_type
FROM sys_menu
WHERE parent_id = 2098
ORDER BY order_num;
```
**预期结果**:应该只有一个子菜单"测试工单"menu_id=2092
**实际结果**:可能有多个错误的子菜单(进行中、已完成等)
### 步骤2备份数据库
在修改前务必备份:
```bash
mysqldump -u your_username -p your_database sys_menu > sys_menu_backup.sql
```
### 步骤3删除错误的子菜单
执行删除脚本:
```bash
mysql -u your_username -p your_database < delete_wrong_submenu.sql
```
或者手动执行:
```sql
-- 删除所有状态相关的错误子菜单
DELETE FROM sys_menu
WHERE parent_id = 2098
AND menu_type = 'C'
AND menu_name IN ('进行中', '已完成', '测试中', '待领取', '一审中', '二审中', '三审中', '全部工单');
-- 删除包含错误路径的菜单
DELETE FROM sys_menu
WHERE parent_id = 2098
AND path IN ('testOrder01', 'testWorkOrder02');
```
### 步骤4修复父菜单路径
确保工单管理父菜单的路径正确:
```sql
UPDATE sys_menu
SET
path = 'test_work_order',
update_time = NOW()
WHERE menu_id = 2098;
```
### 步骤5验证修复结果
```sql
-- 查看工单管理的菜单树
SELECT
m1.menu_id as parent_id,
m1.menu_name as parent_name,
m1.path as parent_path,
m2.menu_id as child_id,
m2.menu_name as child_name,
m2.path as child_path,
m2.component as child_component,
m2.menu_type as child_type
FROM sys_menu m1
LEFT JOIN sys_menu m2 ON m1.menu_id = m2.parent_id
WHERE m1.menu_id = 2098
ORDER BY m2.order_num;
```
**正确的结果应该是**
| parent_id | parent_name | parent_path | child_id | child_name | child_path | child_component | child_type |
|-----------|-------------|-------------|----------|------------|------------|-----------------|------------|
| 2098 | 工单管理 | test_work_order | 2092 | 测试工单 | test_work_order | system/test_work_order/index | C |
### 步骤6清除缓存并重新登录
1. **清除Redis缓存**如果使用了Redis
```bash
redis-cli
FLUSHDB
```
2. **重启后端服务**
```bash
# 停止服务
# 启动服务
```
3. **清除浏览器缓存**
-`Ctrl + Shift + Delete`
- 或者按 `Ctrl + Shift + R` 强制刷新
4. **重新登录系统**
- 退出登录
- 重新登录
### 步骤7测试功能
1. **测试菜单导航**
- 点击左侧菜单"工单管理" → "测试工单"
- URL应该是`http://123.56.98.4:8081/system/test_work_order`
2. **测试状态筛选按钮**
- 点击"测试中"按钮
- URL应该保持`http://123.56.98.4:8081/system/test_work_order`(不跳转)
- 页面应该只显示 testStep=1 的工单
3. **测试URL参数**
- 访问:`http://123.56.98.4:8081/system/test_work_order?state=0`
- 应该显示测试中的工单
- 访问:`http://123.56.98.4:8081/system/test_work_order?state=1`
- 应该显示已完成的工单
## 如果需要保留状态子菜单
如果您确实需要在菜单中显示"进行中"、"已完成"等快捷入口,请按以下方式配置:
### 正确的菜单配置
**进行中菜单**
- 菜单名称:进行中
- 上级菜单工单管理menu_id=2098
- 菜单类型菜单C
- 路由地址:`test_work_order`(不是 testOrder01
- 组件路径:`system/test_work_order/index`(不是 test_order
- 路由参数:`{"state": 0}`
- 权限字符:`system:test_work_order:list`
- 显示顺序2
**已完成菜单**
- 菜单名称:已完成
- 上级菜单工单管理menu_id=2098
- 菜单类型菜单C
- 路由地址:`test_work_order`(不是 testWorkOrder02
- 组件路径:`system/test_work_order/index`(不是 test_order
- 路由参数:`{"state": 1}`
- 权限字符:`system:test_work_order:list`
- 显示顺序3
### 添加菜单的SQL
```sql
-- 添加"进行中"菜单
INSERT INTO sys_menu (
menu_name, parent_id, order_num, path, component,
query, is_frame, is_cache, menu_type, visible,
status, perms, icon, create_time
) VALUES (
'进行中', 2098, 2, 'test_work_order', 'system/test_work_order/index',
'{"state": 0}', 1, 0, 'C', '0',
'0', 'system:test_work_order:list', 'education', NOW()
);
-- 添加"已完成"菜单
INSERT INTO sys_menu (
menu_name, parent_id, order_num, path, component,
query, is_frame, is_cache, menu_type, visible,
status, perms, icon, create_time
) VALUES (
'已完成', 2098, 3, 'test_work_order', 'system/test_work_order/index',
'{"state": 1}', 1, 0, 'C', '0',
'0', 'system:test_work_order:list', 'education', NOW()
);
```
## 常见问题
### Q1: 删除菜单后还是跳转错误?
**A**: 需要清除缓存并重新登录:
1. 清除Redis缓存
2. 重启后端服务
3. 清除浏览器缓存Ctrl+Shift+R
4. 退出并重新登录
### Q2: 点击按钮还是会跳转?
**A**: 检查前端代码是否添加了 `.prevent` 修饰符:
```vue
<el-button @click.prevent="queryParams.testStep = 1; getList()">
测试中
</el-button>
```
### Q3: URL参数不生效
**A**: 检查路由监听器是否正确处理了 `state` 参数(参考 `工单状态参数筛选功能实现说明.md`
### Q4: 如何确认菜单配置正确?
**A**: 运行以下SQL查询
```sql
SELECT menu_id, menu_name, parent_id, path, component, query
FROM sys_menu
WHERE parent_id = 2098
ORDER BY order_num;
```
应该只看到"测试工单"这一个子菜单,或者您手动添加的正确配置的子菜单。
## 相关文件
- `check_workorder_submenu.sql` - 诊断脚本
- `delete_wrong_submenu.sql` - 删除错误菜单脚本
- `fix_workorder_menu_path.sql` - 修复父菜单路径脚本
- `工单状态参数筛选功能实现说明.md` - state参数功能说明
- `工单按钮点击事件修复说明.md` - 按钮事件修复说明
- `工单菜单错误子菜单修复说明.md` - 菜单配置说明
## 修复时间线
1. ✅ 前端按钮添加 `.prevent` 修饰符
2. ✅ 前端路由监听器添加 `state` 参数处理
3. ⚠️ **待完成:删除数据库中的错误菜单配置**
4. ⚠️ **待完成:清除缓存并重新登录**
## 总结
路由跳转问题的根本原因是数据库中存在错误的菜单配置。这些菜单的路径(如 testOrder01、testWorkOrder02和组件路径system/test_order/index都是错误的导致点击按钮时被这些菜单拦截跳转到错误的URL。
**解决方案**:删除这些错误的菜单配置,或者修改为正确的配置。修改后必须清除缓存并重新登录才能生效。