我已经成功将客户管理模块的照片上传功能统一改造为使用 UnifiedAttachmentUpload 组件。以下是完成的修改:
📋 修改清单
前端修改
✓ 客户表单组件 (ui/src/views/business/customer/components/customer-form.vue:66-77)
已经使用了 UnifiedAttachmentUpload 组件
支持 v-model 双向绑定 customerPhotoUrl
支持 v-model:keys 双向绑定 customerPhotoKeys
配置:最多5张照片,单个文件最大10MB
✓ 客户列表页面 (ui/src/views/business/customer/index.vue:845-872)
优化了照片URL解析函数 getFirstPhotoUrl() 和 getPhotoUrlList()
兼容字符串(逗号分隔)和数组两种格式
正确处理多个照片URL的展示和预览
后端修改
✓ 实体类 (src/main/java/com/husky/business/domain/BzCustomer.java:93-119)
已包含 customerPhotoUrl 字段(支持多个照片,逗号分隔)
已包含 customerPhotoKeys 字段(OSS永久引用Key,逗号分隔)
配置了 Excel 导出注解
✓ MyBatis Mapper (src/main/resources/mapper/business/BzCustomerMapper.xml)
✅ 添加了 customer_photo_keys 字段映射(第27行)
✅ 更新了 SELECT 语句包含 customer_photo_keys(第36行)
✅ 更新了 INSERT 语句支持 customer_photo_keys(第108行)
✅ 更新了 UPDATE 语句支持 customer_photo_keys(第166行)
数据库修改
✓ 迁移SQL脚本 (db/update_customer_photo_fields.sql)
已存在完整的数据库迁移脚本
添加 customer_photo_keys 字段(VARCHAR(1000))
扩展 customer_photo_url 字段长度为 1000
🎯 核心功能
照片上传 - 使用统一的 UnifiedAttachmentUpload 组件
双向绑定 - 同时保存 URL 和 Key,支持 OSS 永久引用
多照片支持 - 最多支持5张照片,逗号分隔存储
预览功能 - 列表页悬停预览,详情页完整展示
数据兼容 - 兼容字符串和数组两种数据格式
📝 使用说明
表单组件中的配置:
⚠️ 注意事项
数据库迁移 - 需要执行 db/update_customer_photo_fields.sql 脚本
字段长度 - 确保数据库字段长度足够(VARCHAR(1000))
数据格式 - 支持逗号分隔的字符串格式
OSS配置 - 确保文件上传接口 /business/file/upload 正常工作
🚀 下一步操作
执行数据库迁移SQL脚本
重启后端服务
测试照片上传、预览、编辑功能
验证数据保存是否包含 customer_photo_keys 字段
所有修改已完成!系统现在已统一使用 UnifiedAttachmentUpload 组件进行客户照片管理。
最后编辑:聂盼盼 更新时间:2025-10-28 19:53