liyuqi/202504-Wms-MengYang
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
52586a5d92
202504-Wms-MengYang/202504-Wms-MengYang-tp/wms_web_mengyang/CLAUDE.md
btobab ad9ee93500 1.0版本提交
2025-07-25 12:35:54 +08:00

8.3 KiB
Raw Blame History

CLAUDE.md

This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.

项目概述

这是宝应梦阳WMS前端项目（TP托盘库版本），基于Vue 3和Element Plus开发的现代化Web管理界面，专门用于托盘库存储场景的仓库管理系统操作和监控。

项目特点

TP托盘库版本特性

  • 专为托盘存储场景设计的UI界面
  • 支持大型货物的托盘化存储管理操作
  • 与BOX料箱库版本在业务功能上有所差异
  • 针对托盘库的专用业务流程和界面优化

开发环境设置

基本命令

# 进入项目目录
cd 202504-Wms-MengYang-tp/wms_web_mengyang

# 安装依赖
npm install

# 启动开发服务器
npm run serve

# 构建生产版本
npm run build

# 代码检查和修复
npm run lint

开发配置

  • 开发端口：12306
  • 路由模式：Hash路由 (createWebHashHistory)
  • 默认路由：登录页面 (/) -> 主页 (/home) -> 库存页面 (/stock)
  • 代理配置：Microsoft OAuth认证代理

与BOX版本的区别

  • 项目结构和技术栈基本相同
  • 主要差异在业务逻辑：托盘存储相关的界面和交互
  • 后端API对接：调用TP版本后端的专用接口
  • 数据展示：针对托盘库的数据字段和格式

技术栈

核心框架

  • Vue 3.2.13 - 前端框架（Composition API）
  • Vue Router 4.0.3 - 路由管理
  • Vuex 4.0.0 - 状态管理
  • Element Plus 2.4.0 - UI组件库

主要依赖

  • Axios 1.3.3 - HTTP请求库
  • Moment 2.29.4 - 日期处理
  • XLSX 0.18.5 - Excel文件处理
  • QRCode.vue 3.4.1 - 二维码生成
  • Vue3-print-nb 0.1.4 - 打印功能
  • File-saver 2.0.5 - 文件下载

开发工具

  • Sass 1.83.4 - CSS预处理器
  • Vue CLI 5.0 - 构建工具
  • ESLint - 代码质量检查（已关闭未使用变量警告）

项目架构

目录结构

src/
├── api/           # API接口封装（托盘库专用接口）
├── assets/        # 静态资源
├── components/    # 可复用组件
├── constant/      # 常量配置（托盘库相关常量）
├── excel/         # Excel上传组件（托盘库数据）
├── http/          # HTTP请求配置
├── layout/        # 业务页面组件（托盘库业务界面）
├── print/         # 打印相关组件
├── router/        # 路由配置
├── store/         # Vuex状态管理
├── styles/        # 全局样式
├── utils/         # 工具函数
└── views/         # 主要视图组件

核心业务模块（托盘库专用）

1. 托盘仓库作业 (layout/)

库存管理

  • stock.vue - 托盘库存查询和管理
  • inventory.vue - 托盘库存盘点
  • inventoryRecord.vue - 盘点记录

入出库作业

  • goodsIn.vue - 托盘入库作业界面
  • goodsOut.vue - 托盘出库作业界面
  • orderIn.vue - 托盘入库单管理
  • orderOut.vue - 托盘出库单管理

任务监控

  • taskMonitor.vue - 托盘任务执行监控
  • pickTaskMonitor.vue - 托盘拣选任务监控
  • inTaskRecord.vue - 入库任务记录
  • outTaskRecord.vue - 出库任务记录

2. 托盘基础数据管理

  • goods.vue - 托盘物料信息管理
  • locationsTable.vue - 托盘库位信息管理
  • standSettings.vue - 托盘站台（库口）设置
  • vehicle.vue - 托盘载具监控

3. 托盘配料系统

  • kitting.vue - 托盘配料作业
  • kittingList.vue - 托盘配料单管理
  • kittingRelation.vue - 托盘配料关系配置
  • clcKanban.vue - 托盘需求看板

4. 系统管理

  • wmsConfigNew.vue - 托盘库系统配置
  • role_user.vue - 用户角色管理
  • role_permission.vue - 权限管理
  • wmsLog.vue - 系统日志

API接口模块 (api/)

托盘库核心业务接口

  • goods.js - 托盘物料信息API
  • stock.js - 托盘库存相关API
  • task.js - 托盘任务管理API
  • location.js - 托盘库位管理API

托盘作业流程接口

  • orderIn.js - 托盘入库订单API
  • orderOut.js - 托盘出库订单API
  • kateWork.js - 托盘配料作业API

系统功能接口

  • login.js - 登录认证API
  • user.js - 用户管理API
  • config.js - 托盘库系统配置API
  • excel.js - 托盘库Excel处理API

公共组件 (components/)

  • sideMenu.vue - 侧边菜单导航（托盘库功能菜单）
  • appTag.vue - 标签页管理

工具模块 (utils/)

  • dateUtils.js - 日期处理工具
  • formatter.js - 数据格式化（托盘库数据格式）
  • hashUtils.js - 哈希计算
  • stringUtils.js - 字符串处理
  • loading.js - 加载状态管理
  • myMessageBox.js - 消息提示封装

托盘库特色功能

托盘存储特点

  • 大型货物管理：支持重型和大尺寸货物的界面展示
  • 托盘堆叠显示：可视化托盘堆叠状态和高度限制
  • 存取路径优化：界面显示最优存取路径建议
  • 托盘载具追踪：实时显示托盘在系统中的位置

与BOX版本的界面差异

  1. 数据字段不同：托盘尺寸、重量、堆叠层数等专用字段
  2. 操作流程优化：针对托盘存储的特殊操作步骤
  3. 监控界面：托盘堆垛机状态、托盘载具位置等专用监控
  4. 报表格式：托盘库专用的统计和报表格式

开发注意事项

路由配置

  • 使用Hash路由模式，兼容性更好
  • 实现了路由守卫，未登录用户自动跳转登录页
  • 登录状态通过sessionStorage中的user字段判断

状态管理

  • 使用Vuex进行全局状态管理
  • 主要管理用户信息、菜单权限、标签页状态
  • 托盘库专用状态：托盘载具状态、堆垛机状态等

HTTP请求

  • 统一使用Axios进行API调用
  • 请求封装在/http/request.js中
  • API接口按托盘库业务模块分类组织
  • 注意：对接TP版本后端API（端口12315）

Excel处理（托盘库数据）

  • 支持托盘库专用Excel模板的上传和解析
  • 专门的Excel上传组件位于excel/目录
  • 支持托盘物料、库存、任务等数据的Excel导入导出

打印功能

  • 使用vue3-print-nb实现打印功能
  • 打印组件位于print/目录
  • 托盘库专用：托盘标签、任务单等打印格式

样式规范

  • 使用Sass预处理器
  • 全局样式文件：styles/index.scss
  • 响应式设计，支持不同屏幕尺寸
  • 托盘库界面优化：适配托盘库的数据展示需求

常见开发任务

添加托盘库新页面

  1. 在layout/目录创建Vue组件
  2. 在router/index.js中配置路由
  3. 如需API调用，在api/目录创建对应的托盘库接口文件
  4. 更新侧边菜单配置
  5. 注意：考虑托盘库的业务特点和数据格式

托盘库Excel上传功能

  1. 参考excel/目录下的现有组件
  2. 使用Element Plus的上传组件
  3. 后端TP版本API处理托盘Excel数据解析
  4. 关键：使用托盘库专用的Excel模板格式

新增托盘库API接口

  1. 在api/目录按模块创建文件
  2. 使用@/http/request进行请求封装
  3. 导出接口函数供组件使用
  4. 重要：确保对接TP版本后端API

调试和测试

  • 使用Vue DevTools检查组件状态
  • 浏览器开发者工具调试网络请求
  • ESLint检查代码质量
  • 在不同浏览器中测试兼容性
  • 托盘库专用测试：验证托盘数据格式和业务逻辑

后端API集成

默认后端地址

根据当前配置，后端TP版本API地址需要在http/request.js中配置：

  • 开发环境：http://localhost:12315（TP版本后端）
  • 生产环境：http://10.18.58.21:12315

认证机制

  • 支持Microsoft OAuth认证代理
  • 登录状态存储在sessionStorage中
  • 路由守卫自动验证用户登录状态

开发建议

TP与BOX版本协同开发

  1. 代码复用：公共组件和工具函数可以复用
  2. 业务差异：注意托盘库和料箱库的业务逻辑差异
  3. 数据格式：确保使用正确的数据字段和格式
  4. API对接：确认对接的是TP版本后端而非BOX版本

性能优化

  • 托盘库数据量通常较大，注意列表分页和懒加载
  • 图表和监控界面的实时更新优化
  • Excel处理时的内存管理

用户体验

  • 托盘库操作相对复杂，提供清晰的操作指引
  • 错误提示和状态反馈要及时准确
  • 支持键盘快捷操作，提高操作效率