nxxmdata/docs/监管任务结项管理API封装修复说明.md

监管任务结项管理API封装修复说明

修复日期

2025年10月9日

问题描述

监管任务结项管理模块（CompletedTaskManagement.vue）中使用了模拟数据，没有调用真实的后端API接口。需要将其改为使用封装的API工具类。

修复内容

1. 创建环境配置文件 src/config/env.js

创建了统一的环境配置文件，用于管理所有API URL和环境变量：

主要功能：

• 支持多环境配置（development、production、test）
• 统一管理API基础URL、超时时间等配置
• 定义了所有API端点的路径常量

配置项：

{
  baseURL: '/insurance/api',
  timeout: 10000,
  wsURL: 'ws://localhost:3000'
}

2. 更新 API 工具类 src/utils/api.js

在 supervisionTaskApi 中添加了两个新的API方法：

export const supervisionTaskApi = {
  // ... 现有方法
  archive: (id) => api.patch(`/supervision-tasks/${id}/archive`),
  downloadReport: (id) => api.get(`/supervision-tasks/${id}/report`, { responseType: 'blob' })
}

3. 更新请求工具 src/utils/request.js

• 导入环境配置文件
• 使用 envConfig.baseURL 和 envConfig.timeout 替代硬编码的配置

修改前：

const API_CONFIG = {
  baseURL: '/insurance/api',
  timeout: 10000
}

修改后：

import envConfig from '@/config/env'

const API_CONFIG = {
  baseURL: envConfig.baseURL,
  timeout: envConfig.timeout
}

4. 更新用户状态管理 src/stores/user.js

• 导入环境配置文件
• 在刷新token的fetch请求中使用 envConfig.baseURL

修改前：

const response = await fetch('/insurance/api/auth/refresh', {
  // ...
})

修改后：

import envConfig from '@/config/env'

const response = await fetch(`${envConfig.baseURL}/auth/refresh`, {
  // ...
})

5. 完善监管任务结项管理 src/views/CompletedTaskManagement.vue

5.1 获取任务列表 fetchTaskList

修改前： 使用模拟数据

修改后： 调用真实API

const fetchTaskList = async () => {
  loading.value = true
  try {
    const params = {
      page: pagination.current,
      limit: pagination.pageSize,
      taskStatus: 'completed' // 只获取已完成的任务
    }
    
    // 添加搜索条件
    if (searchForm.taskName) {
      params.taskName = searchForm.taskName
    }
    if (searchForm.status) {
      params.status = searchForm.status
    }
    if (searchForm.dateRange && searchForm.dateRange.length === 2) {
      params.startDate = searchForm.dateRange[0].format('YYYY-MM-DD')
      params.endDate = searchForm.dateRange[1].format('YYYY-MM-DD')
    }
    
    const response = await supervisionTaskApi.getList(params)
    // 处理响应...
  }
}

5.2 获取统计数据 fetchStats

新增函数，调用统计API获取实时数据：

const fetchStats = async () => {
  try {
    const response = await supervisionTaskApi.getStats()
    if (response.data && response.data.status === 'success') {
      const statsData = response.data.data
      stats.total = statsData.total || 0
      stats.thisMonth = statsData.thisMonth || 0
      stats.archived = statsData.archived || 0
      stats.avgDuration = statsData.avgDuration || 0
    }
  } catch (error) {
    console.error('获取统计数据失败:', error)
  }
}

5.3 下载报告 handleDownload

修改前： 仅显示提示信息

修改后： 调用API下载报告文件

const handleDownload = async (record) => {
  try {
    message.loading(`正在下载 ${record.taskName} 的报告...`, 0)
    
    const response = await supervisionTaskApi.downloadReport(record.id)
    
    // 创建下载链接
    const url = window.URL.createObjectURL(response.data)
    const link = document.createElement('a')
    link.href = url
    link.setAttribute('download', `${record.taskName}_报告_${new Date().getTime()}.pdf`)
    document.body.appendChild(link)
    link.click()
    document.body.removeChild(link)
    window.URL.revokeObjectURL(url)
    
    message.destroy()
    message.success('报告下载成功')
  } catch (error) {
    message.destroy()
    console.error('下载报告失败:', error)
    message.error('下载报告失败，请稍后重试')
  }
}

5.4 归档任务 handleArchive

修改前： 仅显示成功提示

修改后： 调用API执行归档操作

const handleArchive = async (record) => {
  try {
    const response = await supervisionTaskApi.archive(record.id)
    if (response.data && response.data.status === 'success') {
      message.success(`任务 ${record.taskName} 已归档`)
      fetchTaskList()
    } else {
      message.error(response.data?.message || '归档失败')
    }
  } catch (error) {
    console.error('归档任务失败:', error)
    message.error('归档任务失败，请稍后重试')
  }
}

修复后的优势

1. 统一配置管理：所有API URL通过env.js统一管理，便于维护和切换环境
2. 代码规范：所有API调用都使用封装的工具类，符合项目规范
3. 功能完整：实现了真实的数据获取、统计、导出、归档、下载报告等功能
4. 错误处理：完善的错误提示和异常处理
5. 用户体验：添加了加载提示和操作反馈

后端需要实现的接口

为了使前端功能完整可用，后端需要实现以下接口：

1. 获取监管任务列表（支持已完成任务筛选）

• 路径：GET /supervision-tasks
• 参数：
  • page: 页码
  • limit: 每页数量
  • taskStatus: 任务状态（completed）
  • taskName: 任务名称（可选）
  • status: 状态（completed/archived）（可选）
  • startDate: 开始日期（可选）
  • endDate: 结束日期（可选）

2. 获取统计数据

• 路径：GET /supervision-tasks/stats
• 返回数据：

  {
    total: 总结项任务数,
    thisMonth: 本月结项数,
    archived: 已归档任务数,
    avgDuration: 平均处理时长（天）
  }
  

3. 归档任务

• 路径：PATCH /supervision-tasks/:id/archive
• 说明：将已完成的任务标记为已归档

4. 下载任务报告

• 路径：GET /supervision-tasks/:id/report
• 返回：PDF文件流
• 说明：生成并下载任务报告

5. 导出任务列表

• 路径：GET /supervision-tasks/export
• 参数：与获取列表接口相同的筛选参数
• 返回：Excel文件流

测试建议

1. 测试获取已完成任务列表功能
2. 测试搜索和筛选功能
3. 测试统计数据显示
4. 测试任务归档功能
5. 测试报告下载功能
6. 测试导出Excel功能
7. 测试不同环境下的API调用（开发、测试、生产）

相关文件

• insurance_admin-system/src/config/env.js - 环境配置文件（新增）
• insurance_admin-system/src/utils/api.js - API工具类（修改）
• insurance_admin-system/src/utils/request.js - 请求工具（修改）
• insurance_admin-system/src/stores/user.js - 用户状态管理（修改）
• insurance_admin-system/src/views/CompletedTaskManagement.vue - 结项管理页面（修改）

注意事项

1. 所有fetch调用都已改为使用封装的API工具类
2. 环境配置文件支持多环境切换，部署时需要根据实际情况配置
3. 请确保后端API接口已实现并测试通过
4. 导出和下载功能需要后端返回正确的文件流和Content-Disposition头