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

5.6 KiB
Raw Blame History

CLAUDE.md

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

项目概述

这是宝应梦阳WMS前端项目（BOX料箱库版本），基于Vue 3和Element Plus开发的现代化Web管理界面，用于仓库管理系统的操作和监控。

开发环境设置

基本命令

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

# 安装依赖
npm install

# 启动开发服务器
npm run serve

# 构建生产版本
npm run build

# 代码检查和修复
npm run lint

开发配置

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

技术栈

核心框架

  • 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 - 消息提示封装

开发注意事项

路由配置

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

状态管理

  • 使用Vuex进行全局状态管理
  • 主要管理用户信息、菜单权限、标签页状态

HTTP请求

  • 统一使用Axios进行API调用
  • 请求封装在/http/request.js中
  • API接口按业务模块分类组织

Excel处理

  • 支持Excel文件上传和解析
  • 专门的Excel上传组件位于excel/目录
  • 支持多种业务数据的Excel导入导出

打印功能

  • 使用vue3-print-nb实现打印功能
  • 打印组件位于print/目录

样式规范

  • 使用Sass预处理器
  • 全局样式文件：styles/index.scss
  • 响应式设计，支持不同屏幕尺寸

常见开发任务

添加新页面

  1. 在layout/目录创建Vue组件
  2. 在router/index.js中配置路由
  3. 如需API调用，在api/目录创建对应接口文件
  4. 更新侧边菜单配置

Excel上传功能

  1. 参考excel/目录下的现有组件
  2. 使用Element Plus的上传组件
  3. 后端API处理Excel数据解析

新增API接口

  1. 在api/目录按模块创建文件
  2. 使用@/http/request进行请求封装
  3. 导出接口函数供组件使用

调试和测试

  • 使用Vue DevTools检查组件状态
  • 浏览器开发者工具调试网络请求
  • ESLint检查代码质量
  • 在不同浏览器中测试兼容性

后端API集成

默认后端地址

根据当前配置，后端API地址需要在http/request.js中配置，通常为：

  • 开发环境：http://localhost:12315
  • 生产环境：http://10.18.58.21:12315

认证机制

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