up功能基本完成

This commit is contained in:
2026-04-23 22:52:55 +08:00
parent 78b70d4fec
commit 1b1ec7f64d
9 changed files with 467 additions and 228 deletions
+28 -32
View File
@@ -1,35 +1,31 @@
# 2026-04-23 工作日志
# 2026-04-23 日志
## warehouse 模块前端开发
## 物品详情页编辑弹窗增加图片管理功能
### 今日完成
- `apiWarehouse.go` 重写,参照 `apiWorkOrder.go` 模式
- 修复 4 处图片绑定查询 `hash` 未使用的问题
- 清理 6 处重复的 `AuthenticationAuthority` 调用
- 容器列表页 (`WarehouseContainerList.vue`) — 根容器列表 + 统计卡片
- 容器详情页 (`WarehouseContainerDetail.vue`) — 子容器/物品 Tab + 新增子容器弹窗
- 新增物品独立页 (`WarehouseAddItem.vue`) + 路由注册
- 路由: `/warehouse/container/:id/add-item`
- 物品 Tab 按钮从弹窗改为跳转独立页面
- 使用 `useDropzone` 组件上传图片
- 物品详情页 (`WarehouseItemDetail.vue`) — 物品信息 + 移动历史/关联工单 Tab
- **合并页面 (`WarehouseOverview.vue`)** — 容器+物品合并到一个页面
- 路由 `/warehouse/container` 直接渲染此页面
- 顶部 3 格统计卡片(容器数/物品数/未入库)
- Tab 切换「容器」/「物品」
- 容器 Tab:搜索+表格+分页+新增/编辑弹窗+删除确认
- 物品 Tab:搜索(400ms防抖)+表格+分页+删除确认
- 删除了 `/warehouse/item` 独立路由和侧边栏「物品总览」入口
- 补充 i18n key(中/英双语)
**涉及文件:**
- `frontend/ops_vue_js/src/views/warehouse/WarehouseItemDetail.vue` — 编辑弹窗增加 `useDropzone` 组件,支持加载已有图片、上传新图片、删除图片
- `frontend/ops_vue_js/src/components/useDropzone.vue` — 导出 `loadInitialFiles` 方法供外部调用
### 踩坑
- 后端 `TabWarehouseItem.SerialNumber` JSON 字段名为 `serial_number`(小写),前端须对应
- `useDropzone` 组件通过 `dropzoneRef.value.return_files()` 获取已上传文件的 hash 数组
- `RouterLink` 在此项目为全局组件,无需 import
- `watch` 需要显式 import`import { ref, reactive, computed, onMounted, watch } from 'vue'`
- **项目没有 daisyUI**,所有样式均用纯 Tailwind CSS v4 实现
- 不用 `btn``tabs``tab``input-bordered``table``modal``join``form-control``badge``card` 等 daisyUI 类
- 用 Tailwind 自定义样式:`rounded-xl border border-gray-200 bg-white shadow dark:border-dk-muted dark:bg-dk-card`
- 加载动画用自定义 SVG spinner,不用 `loading loading-spinner`
- **弹窗用 `<Transition name="fade">` + `v-if` + `@click.self` 关闭,不用 `<dialog :open>`**`<dialog>``:open` 属性在某些场景不会正确响应 false
- **批量修改 Vue 模板后务必检查缩进**:逐块替换时外层 div 的闭合标签容易被吞,造成 "Element is missing end tag" 错误
**实现方式:**
- 编辑弹窗中新增 `editDropzoneRef` ref,绑定 `useDropzone` 组件
- `openEdit()` 时调用 `loadInitialFiles()` 刷新初始文件
- `submitEdit()` 时从 dropzone 获取所有图片哈希(包含新上传和已存在的),一并传给 `updateItem` API
- 后端 `update_item` API 已支持 `photos` 字段,会重建图片绑定
**关键代码片段:**
```javascript
// 提交时获取所有图片哈希
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