all-project/test/approval-page-debug.md

出国审批页面问题诊断指南

🔍 问题排查步骤

1. 检查浏览器控制台错误

请按以下步骤操作：

1. 打开浏览器访问：http://localhost/rs/overseasApproval
2. 按 F12 打开开发者工具
3. 点击 Console 标签
4. 刷新页面，查看是否有红色错误信息
5. 点击 Network 标签，查看API请求状态

2. 检查API请求状态

在Network标签中查找以下请求：

• pending/list - 待审批申请列表API
• my/list - 我的审批记录API

状态码说明：

• 200 - 正常
• 401 - 未登录或token过期
• 403 - 权限不足
• 404 - 接口不存在
• 500 - 服务器错误

3. 常见问题及解决方案

问题1: API返回401未授权

原因: 用户未登录或登录状态过期 解决: 重新登录系统

问题2: API返回403权限不足

原因: 当前用户没有审批相关权限 解决: 联系管理员分配审批权限

问题3: 页面完全空白

原因: Vue组件加载失败或API调用异常 解决: 查看控制台具体错误信息

问题4: API返回空数据

原因: 数据库中没有待审批的数据 解决: 这是正常情况，数据库已包含测试数据

4. 快速验证方法

打开浏览器控制台，输入以下代码进行测试：

// 测试API连通性
fetch('/rs/overseas/application/pending/list?pageNum=1&pageSize=10')
  .then(response => response.json())
  .then(data => {
    console.log('待审批API响应:', data);
    if (data.code === 200) {
      console.log('✅ API正常，数据条数:', data.total);
    } else {
      console.log('❌ API异常，错误:', data.msg);
    }
  })
  .catch(error => console.log('🔴 请求失败:', error));

fetch('/rs/overseas/approval/my/list?pageNum=1&pageSize=10')
  .then(response => response.json())
  .then(data => {
    console.log('审批记录API响应:', data);
    if (data.code === 200) {
      console.log('✅ API正常，数据条数:', data.total);
    } else {
      console.log('❌ API异常，错误:', data.msg);
    }
  })
  .catch(error => console.log('🔴 请求失败:', error));

5. 数据验证

预期数据：

• 待审批申请：应该显示2条记录（张测试、李测试）
• 审批记录：应该显示5条历史审批记录

📋 请提供的信息

为了进一步协助诊断，请提供以下信息：

1. 浏览器控制台的完整错误信息
2. Network标签中API请求的状态码和响应
3. 页面显示的具体情况（完全空白 or 有加载动画 or 显示错误信息）

🚀 临时解决方案

如果问题仍然存在，可以尝试：

1. 清除浏览器缓存和Cookie
2. 使用无痕模式重新登录
3. 检查是否有浏览器插件干扰
4. 尝试不同的浏览器

---

创建时间: 2025-01-28 14:30:00 状态: 等待用户反馈具体错误信息