报告厅预约页面OSS图片处理功能修改记录

修改时间: 2025-01-27 15:30:00
修改人员: AI Assistant
修改文件: web/src/views/hq/bgtgl/hallReservation/index.vue

修改背景

用户反馈界面中 getHallImages 函数的 imageUrl 参数实际上是 OSS ID，需要调用接口获取真实的 URL 信息。

修改内容

1. 修改 `getHallImages` 函数

原功能: 直接处理URL格式的图片字符串

const getHallImages = (imageUrl: string): string[] => {
  // 直接返回分割后的URL数组
}

新功能: 支持OSS ID和URL两种格式

const getHallImages = async (imageUrl: string): Promise<string[]> => {
  // 1. 判断输入格式（OSS ID 或 URL）
  // 2. 如果是OSS ID，调用接口获取真实URL
  // 3. 如果是URL，直接使用
}

2. 主要改进点

智能格式识别: 自动判断输入是OSS ID（纯数字）还是URL格式
动态模块导入: 使用 await import('@/api/system/oss') 避免TypeScript编译错误
批量处理: 支持多个OSS ID的批量查询
错误处理: 完善的异常捕获和日志记录
异步处理: 将函数改为异步，支持接口调用

3. 相关函数修改

getHallList: 在获取报告厅列表时预加载图片URL
handleHallChange: 使用预加载的图片URL
handleView: 查看详情时使用预加载的图片URL
handleUpdate: 编辑时使用预加载的图片URL

4. 模板修改

将模板中的 getHallImages() 调用改为使用预加载的 hall.imageUrls 属性
避免在模板中直接调用异步函数

技术实现细节

OSS ID处理流程

格式检测: 使用正则表达式 /^\d+$/ 判断是否为纯数字
批量查询: 将多个OSS ID用逗号连接，调用 listByIds 接口
URL提取: 从返回的OSS信息中提取 url 字段
缓存机制: 在报告厅列表加载时预加载所有图片URL

错误处理

OSS接口调用失败时返回空数组
单个图片获取失败不影响其他图片
详细的错误日志记录

测试建议

OSS ID格式测试: 使用纯数字的OSS ID测试
URL格式测试: 使用直接URL测试
混合格式测试: 测试OSS ID和URL混合的情况
错误情况测试: 测试无效OSS ID的处理

后续优化建议

缓存优化: 可以添加图片URL缓存机制，避免重复请求
懒加载: 对于大量图片，可以考虑懒加载策略
图片压缩: 可以添加图片压缩和优化功能
CDN支持: 可以支持CDN URL的自动处理

2.9 KiB Raw Blame History