314 lines
7.3 KiB
Markdown
314 lines
7.3 KiB
Markdown
|
|
# 监管任务模块问题诊断报告
|
|||
|
|
|
|||
|
|
## 诊断时间
|
|||
|
|
2025年10月9日
|
|||
|
|
|
|||
|
|
## 问题描述
|
|||
|
|
用户反映:监管任务结项管理模块,表中有数据,但是前端页面没有数据,后端API接口返回也没数据。
|
|||
|
|
|
|||
|
|
## 诊断结果
|
|||
|
|
|
|||
|
|
### ✅ 后端状态 - 完全正常
|
|||
|
|
|
|||
|
|
#### 1. 数据库层面
|
|||
|
|
- **表名**:`supervisory_tasks`
|
|||
|
|
- **数据**:存在1条测试数据
|
|||
|
|
- **结构**:正确
|
|||
|
|
|
|||
|
|
```sql
|
|||
|
|
SELECT COUNT(*) FROM supervisory_tasks;
|
|||
|
|
-- 结果: 1条记录
|
|||
|
|
|
|||
|
|
SELECT * FROM supervisory_tasks LIMIT 1;
|
|||
|
|
-- 数据正常,包含完整字段
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
#### 2. Model层面
|
|||
|
|
- **模型文件**:`models/SupervisoryTask.js`
|
|||
|
|
- **表映射**:正确 (`tableName: 'supervisory_tasks'`)
|
|||
|
|
- **查询测试**:✅ 通过
|
|||
|
|
```javascript
|
|||
|
|
// 直接通过Model查询成功
|
|||
|
|
const tasks = await SupervisoryTask.findAll();
|
|||
|
|
// 结果: 返回1条记录
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
#### 3. API层面
|
|||
|
|
- **控制器**:`controllers/supervisoryTaskController.js`
|
|||
|
|
- **路由**:`routes/supervisoryTasks.js`
|
|||
|
|
- **注册**:✅ 正确注册在 `src/app.js`
|
|||
|
|
- `/api/supervisory-tasks` (备用路径)
|
|||
|
|
- `/api/supervision-tasks` (主要路径 - 前端使用)
|
|||
|
|
- **API测试**:✅ 完全正常
|
|||
|
|
|
|||
|
|
**API测试结果:**
|
|||
|
|
```bash
|
|||
|
|
GET /api/supervision-tasks?page=1&limit=10
|
|||
|
|
Authorization: Bearer <token>
|
|||
|
|
|
|||
|
|
响应:
|
|||
|
|
{
|
|||
|
|
"code": 200,
|
|||
|
|
"status": "success",
|
|||
|
|
"message": "获取监管任务列表成功",
|
|||
|
|
"data": {
|
|||
|
|
"list": [
|
|||
|
|
{
|
|||
|
|
"id": 1,
|
|||
|
|
"applicationNumber": "APP2025001",
|
|||
|
|
"policyNumber": "POL2025001",
|
|||
|
|
"productName": "农业保险产品",
|
|||
|
|
"customerName": "张三",
|
|||
|
|
"taskStatus": "待处理",
|
|||
|
|
"priority": "中",
|
|||
|
|
...
|
|||
|
|
}
|
|||
|
|
],
|
|||
|
|
"total": 1,
|
|||
|
|
"page": 1,
|
|||
|
|
"limit": 10
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
#### 4. 后端服务状态
|
|||
|
|
- **端口**:3000
|
|||
|
|
- **状态**:✅ 正在运行
|
|||
|
|
- **PID**:19340
|
|||
|
|
|
|||
|
|
### ✅ 前端状态
|
|||
|
|
|
|||
|
|
#### 1. 服务状态
|
|||
|
|
- **端口**:3001
|
|||
|
|
- **状态**:✅ 正在运行
|
|||
|
|
- **PID**:18648
|
|||
|
|
|
|||
|
|
#### 2. 代理配置
|
|||
|
|
```javascript
|
|||
|
|
// vite.config.js
|
|||
|
|
proxy: {
|
|||
|
|
'/insurance/api': {
|
|||
|
|
target: 'http://localhost:3000',
|
|||
|
|
changeOrigin: true,
|
|||
|
|
rewrite: (path) => path.replace(/^\/insurance/, '')
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
```
|
|||
|
|
配置:✅ 正确
|
|||
|
|
|
|||
|
|
#### 3. API配置
|
|||
|
|
```javascript
|
|||
|
|
// src/utils/api.js
|
|||
|
|
export const supervisionTaskApi = {
|
|||
|
|
getList: (params) => api.get('/supervision-tasks', { params }),
|
|||
|
|
getStats: () => api.get('/supervision-tasks/stats'),
|
|||
|
|
export: (params) => api.get('/supervision-tasks/export', { params, responseType: 'blob' }),
|
|||
|
|
...
|
|||
|
|
}
|
|||
|
|
```
|
|||
|
|
配置:✅ 正确
|
|||
|
|
|
|||
|
|
#### 4. 环境配置
|
|||
|
|
```javascript
|
|||
|
|
// src/config/env.js
|
|||
|
|
const envConfig = {
|
|||
|
|
baseURL: '/insurance/api',
|
|||
|
|
timeout: 10000
|
|||
|
|
}
|
|||
|
|
```
|
|||
|
|
配置:✅ 正确
|
|||
|
|
|
|||
|
|
## 可能的问题原因
|
|||
|
|
|
|||
|
|
### 1. 认证Token问题 ⚠️
|
|||
|
|
前端可能没有正确发送认证token或token已过期。
|
|||
|
|
|
|||
|
|
**验证方法**:
|
|||
|
|
```javascript
|
|||
|
|
// 在浏览器控制台检查
|
|||
|
|
localStorage.getItem('accessToken')
|
|||
|
|
localStorage.getItem('refreshToken')
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
### 2. 请求拦截器问题 ⚠️
|
|||
|
|
前端的请求拦截器可能没有正确添加Authorization头。
|
|||
|
|
|
|||
|
|
**检查文件**:`insurance_admin-system/src/utils/request.js`
|
|||
|
|
|
|||
|
|
### 3. 数据响应格式解析问题 ⚠️
|
|||
|
|
前端页面可能没有正确解析后端返回的数据格式。
|
|||
|
|
|
|||
|
|
**后端返回格式**:
|
|||
|
|
```javascript
|
|||
|
|
{
|
|||
|
|
data: {
|
|||
|
|
status: 'success',
|
|||
|
|
data: {
|
|||
|
|
list: [...],
|
|||
|
|
total: 1
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
**前端期望格式**:需要检查 `CompletedTaskManagement.vue` 和 `SupervisionTaskManagement.vue`
|
|||
|
|
|
|||
|
|
### 4. 路由路径不匹配 ⚠️
|
|||
|
|
如果前端使用了错误的API路径。
|
|||
|
|
|
|||
|
|
### 5. 跨域问题 ⚠️
|
|||
|
|
虽然后端配置了CORS,但可能存在配置问题。
|
|||
|
|
|
|||
|
|
## 建议的解决步骤
|
|||
|
|
|
|||
|
|
### 步骤1:检查用户登录状态
|
|||
|
|
```javascript
|
|||
|
|
// 在浏览器控制台执行
|
|||
|
|
console.log('Token:', localStorage.getItem('accessToken'));
|
|||
|
|
console.log('是否登录:', !!localStorage.getItem('accessToken'));
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
### 步骤2:检查网络请求
|
|||
|
|
1. 打开浏览器开发者工具 (F12)
|
|||
|
|
2. 切换到 Network 标签
|
|||
|
|
3. 刷新页面
|
|||
|
|
4. 查找 `/supervision-tasks` 请求
|
|||
|
|
5. 检查:
|
|||
|
|
- 请求URL是否正确
|
|||
|
|
- 请求头是否包含 `Authorization: Bearer <token>`
|
|||
|
|
- 响应状态码
|
|||
|
|
- 响应内容
|
|||
|
|
|
|||
|
|
### 步骤3:检查控制台错误
|
|||
|
|
1. 打开浏览器开发者工具Console标签
|
|||
|
|
2. 查看是否有JavaScript错误
|
|||
|
|
3. 查看是否有API请求失败的错误信息
|
|||
|
|
|
|||
|
|
### 步骤4:强制刷新Token
|
|||
|
|
```javascript
|
|||
|
|
// 在前端代码中
|
|||
|
|
1. 清除现有token
|
|||
|
|
localStorage.clear()
|
|||
|
|
|
|||
|
|
2. 重新登录
|
|||
|
|
使用账号: admin
|
|||
|
|
密码: 123456
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
### 步骤5:检查数据处理逻辑
|
|||
|
|
检查前端页面中的数据响应处理:
|
|||
|
|
|
|||
|
|
**CompletedTaskManagement.vue**:
|
|||
|
|
```javascript
|
|||
|
|
// 第466-476行
|
|||
|
|
const response = await supervisionTaskApi.getList(params)
|
|||
|
|
console.log('监管任务结项API响应:', response)
|
|||
|
|
|
|||
|
|
if (response.data && response.data.status === 'success') {
|
|||
|
|
taskList.value = response.data.data.list || []
|
|||
|
|
pagination.total = response.data.data.total || 0
|
|||
|
|
}
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
**SupervisionTaskManagement.vue**:
|
|||
|
|
```javascript
|
|||
|
|
// 第513-522行
|
|||
|
|
const response = await supervisionTaskApi.getList(params)
|
|||
|
|
console.log('监管任务API响应:', response)
|
|||
|
|
|
|||
|
|
if (response.data && response.data.status === 'success') {
|
|||
|
|
tableData.value = response.data.data.list
|
|||
|
|
pagination.total = response.data.data.total
|
|||
|
|
}
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
## 测试命令
|
|||
|
|
|
|||
|
|
### 测试数据库
|
|||
|
|
```bash
|
|||
|
|
cd insurance_backend
|
|||
|
|
node test-supervisory-table.js
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
### 测试API(需要后端服务运行)
|
|||
|
|
```bash
|
|||
|
|
cd insurance_backend
|
|||
|
|
node test-full-api-flow.js
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
### 启动后端服务
|
|||
|
|
```bash
|
|||
|
|
cd insurance_backend
|
|||
|
|
npm start
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
### 启动前端服务
|
|||
|
|
```bash
|
|||
|
|
cd insurance_admin-system
|
|||
|
|
npm run dev
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
## 前端调试代码
|
|||
|
|
|
|||
|
|
在浏览器控制台执行以下代码测试API:
|
|||
|
|
|
|||
|
|
```javascript
|
|||
|
|
// 1. 获取token
|
|||
|
|
const token = localStorage.getItem('accessToken');
|
|||
|
|
console.log('Token:', token);
|
|||
|
|
|
|||
|
|
// 2. 手动测试API
|
|||
|
|
fetch('/insurance/api/supervision-tasks?page=1&limit=10', {
|
|||
|
|
headers: {
|
|||
|
|
'Authorization': `Bearer ${token}`,
|
|||
|
|
'Content-Type': 'application/json'
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
.then(res => res.json())
|
|||
|
|
.then(data => {
|
|||
|
|
console.log('API响应:', data);
|
|||
|
|
if (data.status === 'success') {
|
|||
|
|
console.log('✓ 数据获取成功');
|
|||
|
|
console.log('记录数:', data.data.total);
|
|||
|
|
console.log('数据列表:', data.data.list);
|
|||
|
|
} else {
|
|||
|
|
console.log('✗ 响应状态异常');
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
.catch(err => console.error('✗ 请求失败:', err));
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
## 结论
|
|||
|
|
|
|||
|
|
**后端完全正常**,问题很可能出在前端的以下几个方面:
|
|||
|
|
|
|||
|
|
1. **认证token未正确发送**(最可能)
|
|||
|
|
2. **数据响应格式解析错误**
|
|||
|
|
3. **页面组件渲染逻辑问题**
|
|||
|
|
4. **浏览器缓存问题**
|
|||
|
|
|
|||
|
|
建议用户按照上述步骤逐一排查,特别是先检查浏览器Network标签中的实际请求情况。
|
|||
|
|
|
|||
|
|
## 文件清单
|
|||
|
|
|
|||
|
|
### 后端文件
|
|||
|
|
- ✅ `models/SupervisoryTask.js` - 模型定义正确
|
|||
|
|
- ✅ `controllers/supervisoryTaskController.js` - 控制器逻辑正确
|
|||
|
|
- ✅ `routes/supervisoryTasks.js` - 路由配置正确
|
|||
|
|
- ✅ `src/app.js` - 路由注册正确
|
|||
|
|
|
|||
|
|
### 前端文件
|
|||
|
|
- ✅ `src/config/env.js` - 环境配置(新增)
|
|||
|
|
- ✅ `src/utils/api.js` - API封装正确
|
|||
|
|
- ✅ `src/utils/request.js` - 请求工具配置正确
|
|||
|
|
- ✅ `src/views/CompletedTaskManagement.vue` - 已更新使用API
|
|||
|
|
- ✅ `src/views/SupervisionTaskManagement.vue` - 已使用API
|
|||
|
|
- ✅ `vite.config.js` - 代理配置正确
|
|||
|
|
|
|||
|
|
### 测试文件(可删除)
|
|||
|
|
- `insurance_backend/test-supervisory-table.js`
|
|||
|
|
- `insurance_backend/test-api-response.js`
|
|||
|
|
- `insurance_backend/test-api-direct.js`
|
|||
|
|
- `insurance_backend/test-full-api-flow.js`
|
|||
|
|
|