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

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

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

## 问题分析

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

```vue:952-985
<!-- 申请附件列表区域 -->
<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（响应）**：
  ```json
  {
    "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` 函数中添加日志：

```typescript
// 查询详情的附件列表
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响应式数据未触发更新

**解决方案**：
```typescript
// 确保使用 .value 更新 ref
viewAttachmentList.value = response.data || [];

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

### 问题2：403权限错误

**原因**：用户没有查询权限

**解决方案**：
1. 数据库执行：
```sql
-- 查看当前角色权限
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. 或检查数据库：
```sql
-- 查询附件数据
SELECT * FROM rs_overseas_application_attachment 
WHERE application_id = xxx 
AND deleted = 0;
```

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

**原因**：
- 文件存储路径配置错误
- OSS配置问题

**解决方案**：
检查 `application.yml` 中的文件上传配置：
```yaml
# 文件上传配置
ruoyi:
  file:
    upload-path: /path/to/upload/
    domain: http://localhost:8080
```

## 快速测试方法

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

```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`