hzdyjs/出国申请附件不显示问题排查指南.md

出国申请附件不显示问题排查指南

问题描述

点击出国申请菜单下的出国申请选项卡中的"查看详情"按钮，弹窗界面已经增加了附件字段（显示"申请附件"标题），但看不到附件内容，只显示"暂无附件"。

问题分析

根据代码分析（web/src/views/rs/overseas/index.vue），附件显示逻辑如下：

<!-- 申请附件列表区域 -->
<div v-if="state.viewData && 'applicationId' in state.viewData && !('recordId' in state.viewData)" style="margin-top: 20px;">
  <el-divider content-position="left">
    <span style="font-size: 16px; font-weight: 500;">
      <el-icon><Paperclip /></el-icon>
      申请附件
    </span>
  </el-divider>
  <el-table 
    v-if="viewAttachmentList.length > 0"
    :data="viewAttachmentList" 
    border 
    size="small"
  >
    <!-- 表格列定义 -->
  </el-table>
  <el-empty v-else description="暂无附件" :image-size="100" />
</div>

关键点：

• 附件区域已经显示（说明条件判断通过）
• 表格不显示，说明 viewAttachmentList.length === 0
• 显示"暂无附件"，证实了数据为空

排查步骤

步骤1：检查浏览器控制台

1. 打开浏览器（Chrome/Edge）
2. 按 F12 打开开发者工具
3. 点击 Console（控制台） 标签
4. 清空现有日志（点击🚫图标）
5. 再次点击"查看详情"按钮
6. 观察控制台输出

可能的错误信息：

• ❌ 加载附件列表失败: ... - API调用失败
• ❌ 403 Forbidden - 权限不足
• ❌ 401 Unauthorized - 未授权
• ❌ Cannot read property of undefined - JavaScript错误

步骤2：检查网络请求

1. 开发者工具中点击 Network（网络） 标签
2. 清空现有请求（点击🚫图标）
3. 再次点击"查看详情"按钮
4. 查找附件相关的请求

查找步骤：

• 在过滤器中输入：attachment
• 找到类似 /rs/overseas/attachment/list/xxx 的请求

检查请求详情：

• Status（状态码）：

  • ✅ 200 - 请求成功
  • ❌ 403 - 权限不足
  • ❌ 404 - 接口不存在
  • ❌ 500 - 服务器错误

• Response（响应）：

  {
    "code": 200,
    "msg": "操作成功",
    "data": []  // 空数组说明确实没有附件
  }
  

步骤3：检查该申请是否有附件

附件数据可能确实为空，需要先上传附件：

1. 在出国申请列表中，点击该申请的 修改 按钮
2. 在修改弹窗中，找到 申请附件 区域
3. 点击 添加附件 按钮
4. 填写附件信息：
   • 附件标题：必填，如"护照复印件"
   • 附件说明：选填
   • 选择文件：必填
5. 点击 确定 上传
6. 保存申请表单
7. 再次查看详情，确认附件是否显示

步骤4：检查权限配置

附件接口需要 rs:overseas:query 权限。

检查方法：

1. 登录系统管理后台
2. 进入 系统管理 > 角色管理
3. 找到当前用户的角色
4. 点击 菜单权限
5. 展开 人事管理 > 出国管理
6. 确认已勾选：
   • ☑ 查询
   • ☑ 详情

权限标识：

• rs:overseas:query - 查询权限（必需）
• rs:overseas:list - 列表权限（必需）

步骤5：使用Vue Devtools检查数据

如果已安装Vue Devtools：

1. 开发者工具中点击 Vue 标签
2. 在组件树中找到 index.vue 组件
3. 在右侧面板查看：
   • viewAttachmentList - 查看其值
   • 如果是 []，说明确实没有数据
   • 如果是 undefined，说明变量未初始化

步骤6：添加调试日志

如果以上步骤无法定位问题，可以临时添加调试代码：

在 loadViewAttachmentList 函数中添加日志：

// 查询详情的附件列表
const loadViewAttachmentList = async (applicationId: number | string) => {
  console.log('🔍 开始加载附件列表，applicationId:', applicationId);
  try {
    const response = await listOverseasAttachments(applicationId);
    console.log('✅ 附件接口响应:', response);
    viewAttachmentList.value = response.data || [];
    console.log('📋 附件列表数据:', viewAttachmentList.value);
    console.log('📊 附件数量:', viewAttachmentList.value.length);
  } catch (error) {
    console.error('❌ 加载附件列表失败:', error);
    viewAttachmentList.value = [];
  }
};

常见问题与解决方案

问题1：显示"暂无附件"但实际有数据

原因：

• viewAttachmentList 未正确更新
• Vue响应式数据未触发更新

解决方案：

// 确保使用 .value 更新 ref
viewAttachmentList.value = response.data || [];

// 如果还不行，强制触发更新
nextTick(() => {
  viewAttachmentList.value = [...response.data];
});

问题2：403权限错误

原因：用户没有查询权限

解决方案：

1. 数据库执行：

-- 查看当前角色权限
SELECT * FROM sys_role_menu WHERE role_id = 2;

-- 添加查询权限（假设菜单ID是1234）
INSERT INTO sys_role_menu (role_id, menu_id) VALUES (2, 1234);

2. 或通过界面配置（参见步骤4）

问题3：接口返回空数组

原因：该申请确实没有附件

解决方案：

1. 上传附件（参见步骤3）
2. 或检查数据库：

-- 查询附件数据
SELECT * FROM rs_overseas_application_attachment 
WHERE application_id = xxx 
AND deleted = 0;

问题4：文件路径错误导致下载失败

原因：

• 文件存储路径配置错误
• OSS配置问题

解决方案： 检查 application.yml 中的文件上传配置：

# 文件上传配置
ruoyi:
  file:
    upload-path: /path/to/upload/
    domain: http://localhost:8080

快速测试方法

使用以下SQL直接插入测试附件数据：

-- 插入测试附件（请替换application_id为实际值）
INSERT INTO rs_overseas_application_attachment (
    attachment_id, 
    application_id, 
    attachment_title, 
    attachment_content, 
    file_name, 
    file_original_name, 
    file_path, 
    file_size, 
    file_size_formatted, 
    mime_type, 
    upload_time, 
    upload_user_id, 
    upload_user_name,
    create_time,
    create_by,
    deleted
) VALUES (
    1234567890123456789,  -- 雪花ID
    YOUR_APPLICATION_ID,   -- 替换为实际的申请ID
    '测试附件',
    '这是一个测试附件',
    'test_20251010.pdf',
    'test.pdf',
    '/upload/test.pdf',
    1024000,
    '1.00 MB',
    'application/pdf',
    NOW(),
    1,
    'admin',
    NOW(),
    1,
    0
);

插入后再次查看详情，应该能看到附件了。

预期效果

修复后，查看详情应该显示：

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
              📎 申请附件
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
┌────┬──────────┬────────────┬───────┬────────┬─────────────┬────┐
│序号│附件标题  │附件说明    │文件名│文件大小│上传时间     │操作│
├────┼──────────┼────────────┼───────┼────────┼─────────────┼────┤
│ 1  │护照复印件│有效期至... │xxx.pdf│1.2 MB  │2025-10-10..│下载│
└────┴──────────┴────────────┴───────┴────────┴─────────────┴────┘

总结

最可能的原因（按概率排序）：

1. ⭐⭐⭐⭐⭐ 该申请确实没有上传附件 - 需要先添加附件
2. ⭐⭐⭐⭐ 权限不足 - 需要配置 rs:overseas:query 权限
3. ⭐⭐⭐ API接口调用失败 - 检查控制台错误
4. ⭐⭐ 后端服务异常 - 检查后端日志
5. ⭐ 前端代码bug - 检查Vue响应式数据

建议操作顺序：

1. 先检查浏览器控制台和网络请求（步骤1、2）
2. 确认该申请是否有附件数据（步骤3）
3. 检查权限配置（步骤4）
4. 如果以上都正常，添加调试日志定位具体问题（步骤6）

联系支持

如果按照以上步骤仍无法解决，请提供以下信息：

• 浏览器控制台错误截图
• 网络请求详情截图（包括Request和Response）
• 该申请的ID
• 当前用户的角色和权限
• 后端日志（如果有错误）

---

文档更新时间：2025-10-10
适用版本：v1.0.0+
相关文件：web/src/views/rs/overseas/index.vue