Files
hzdyjs/docs/变更管理/code-adjust-record-2025-08-01-cw-menu-fix.md
T
2025-07-30 23:24:43 +08:00

4.9 KiB

财务项目预算审批模块404问题修复记录

变更时间: 2025-08-01 15:30:00
操作人员: 系统管理员
变更类型: 功能修复
影响模块: 财务管理 - 项目预算审批

🚨 问题描述

原始问题

  1. 前端404错误: 点击"新增"、"修改"、"详情"按钮时出现404错误
  2. 控制台错误: Uncaught (in promise) Error: 404
  3. 列表页面: 正常显示,但无法进行操作

问题根因

  1. 动态路由系统: 系统使用动态路由,每个可访问页面都需要对应的菜单配置
  2. 缺失菜单配置: form和detail页面没有对应的菜单配置
  3. 前端路径错误: handleAdd函数中存在错误路径 "/cw/application/form.vue"

🔧 解决方案

1. 前端修复

文件: web/src/views/cw/application/index.vue

修复内容:

// 修复前 (第194行)
proxy.$router.push("/cw/application/form.vue");

// 修复后
proxy.$router.push("/cw/application/form");

2. 菜单配置分析

实际前端页面结构:

web/src/views/cw/
├── application/
│   ├── index.vue    ✅ 列表页面
│   ├── form.vue     ✅ 表单页面(新增/编辑)
│   ├── detail.vue   ✅ 详情页面
│   └── summary.vue  ✅ 汇总页面(基本为空)
├── dashboard/
│   └── index.vue    ✅ 财务概览
├── approverConfig/   ❌ 空目录
├── approvalRecord/   ❌ 空目录
├── expenditureDetail/❌ 空目录
└── performanceIndicator/ ❌ 空目录

3. 数据库菜单配置

执行SQL脚本: backend/script/sql/cw-menu-config-actual.sql

关键配置:

-- 显示在菜单中的页面 (visible='0')
(5000, '财务管理', 'finance', NULL)                    -- 根菜单
(5100, '项目预算审批', 'budget-approval', NULL)        -- 二级菜单  
(5105, '财务概览', 'dashboard', 'cw/dashboard/index')   -- 概览页面
(5110, '预算申报管理', 'application', 'cw/application/index') -- 主列表

-- 隐藏但可路由访问的页面 (visible='1') ★ 解决404关键
(5118, '预算申报表单', 'form', 'cw/application/form')      -- 新增/编辑表单
(5119, '预算申报详情', 'detail', 'cw/application/detail')  -- 详情页面

-- 功能权限配置
(5111-5117, 预算申报相关权限按钮)

✅ 修复结果

菜单结构验证

主菜单
└── 项目预算审批 (5100) ✅ 直接显示在主菜单
    ├── 财务概览 (5105) ✅ 显示
    ├── 预算申报管理 (5110) ✅ 显示
    ├── 预算申报表单 (5118) ❌ 隐藏,可路由访问
    ├── 预算申报详情 (5119) ❌ 隐藏,可路由访问
    └── 预留功能 (5120-5150) ❌ 隐藏,预留扩展

菜单结构调整 (2025-08-01 15:45:00)

调整原因: 用户反馈多了一级目录,不需要"财务管理"一级菜单 调整内容:

-- 删除"财务管理"一级菜单
DELETE FROM sys_menu WHERE menu_id = 5000;

-- 将"项目预算审批"设为主菜单 
UPDATE sys_menu SET parent_id = 0 WHERE menu_id = 5100;

功能测试结果

  • ✅ 访问列表页: 项目预算审批 → 预算申报管理
  • ✅ 点击"新增": 正常打开表单页面 /cw/application/form
  • ✅ 点击"修改": 正常打开编辑表单 /cw/application/form?id=xxx
  • ✅ 点击"详情": 正常显示详情页面 /cw/application/detail?id=xxx
  • ✅ 前端路由: 所有跳转路径正确

📋 用户操作指南

清除缓存步骤

  1. 系统管理缓存: 系统管理 → 缓存管理 → 清除菜单缓存
  2. 浏览器缓存: Ctrl + F5 硬刷新 或 清除浏览器缓存
  3. 重新登录: 退出系统重新登录,获取最新菜单

菜单导航路径

主菜单 → 项目预算审批 → 预算申报管理

🔮 预留扩展

隐藏的预留功能 (visible='1')

  • 审批人配置 (5120): cw/approverConfig/index
  • 审批记录查询 (5130): cw/approvalRecord/index
  • 支出明细管理 (5140): cw/expenditureDetail/index
  • 绩效指标管理 (5150): cw/performanceIndicator/index

扩展说明

  • 当前前端页面不存在,暂时隐藏 (visible='1')
  • 菜单配置已预留,开发完成后修改 visible='0' 即可显示
  • 权限配置已预配置,开发时可直接使用

📝 技术总结

关键技术点

  1. 动态路由机制: loadView函数根据菜单component字段映射Vue组件
  2. 隐藏页面配置: visible='1'不在侧边栏显示,但支持路由访问
  3. 权限控制: 每个功能都有对应的权限配置和按钮权限

最佳实践

  1. 前端页面开发: 必须先创建菜单配置才能路由访问
  2. 菜单配置原则: 主页面显示,功能页面隐藏
  3. 权限设计: 完整的CRUD权限配置,便于权限管理

修复状态: ✅ 完成
测试状态: ✅ 通过
部署状态: ✅ 已上线