ops2/.workbuddy/memory/2026-04-23.md

2026-04-23 日志

物品详情页编辑弹窗增加图片管理功能

涉及文件：

• frontend/ops_vue_js/src/views/warehouse/WarehouseItemDetail.vue — 编辑弹窗增加 useDropzone 组件，支持加载已有图片、上传新图片、删除图片
• frontend/ops_vue_js/src/components/useDropzone.vue — 导出 loadInitialFiles 方法供外部调用

实现方式：

• 编辑弹窗中新增 editDropzoneRef ref，绑定 useDropzone 组件
• openEdit() 时调用 loadInitialFiles() 刷新初始文件
• submitEdit() 时从 dropzone 获取所有图片哈希（包含新上传和已存在的），一并传给 updateItem API
• 后端 update_item API 已支持 photos 字段，会重建图片绑定

关键代码片段：

// 提交时获取所有图片哈希
const photos = getEditPhotoHashes()
warehouseApi.updateItem({ id, name, serial_number, remark, quantity, photos })

物品编辑改为独立页面

涉及文件：

• frontend/ops_vue_js/src/views/warehouse/WarehouseItemEdit.vue — 新建，物品编辑独立页面
• frontend/ops_vue_js/src/views/warehouse/WarehouseItemDetail.vue — 编辑按钮改为 router.push('/warehouse/item/edit/:id')，移除弹窗代码
• frontend/ops_vue_js/src/router/index.js — 新增 /warehouse/item/edit/:id 路由

实现方式：

• 创建 WarehouseItemEdit.vue，onMounted 获取物品数据（包含已有图片），通过 setTimeout 调用 loadInitialFiles() 加载到 dropzone
• 详情页编辑按钮改为跳转，移除弹窗及相关 state/function