DOPJAVA/jiaohuo/manage-vue/ORDER_MANAGEMENT.md

订单管理系统 - 项目概要

📋 项目说明

本项目基于 Vue 3 + Element Plus 构建的订单管理系统，包含订单评审、订单交付、出货计划、订单发货等完整的订单管理流程。

🎯 主要功能模块

1. 订单评审

路径: /order-review 功能:

• 订单列表展示（支持搜索、筛选、分页）
• 添加/编辑/查看销售订单
• 订单评审（批量操作）
• 交期确认
• 资源解锁
• 订单变更申请与审批流程

相关文件:

• src/views/OrderReview.vue - 订单评审列表页
• src/views/components/SalesOrderForm.vue - 销售订单表单
• src/views/components/OrderChangeForm.vue - 订单变更表单

2. 订单交付

路径: /order-delivery 功能:

• 订单交付列表展示（支持搜索、筛选、分页）
• 交付进度可视化（7个步骤：评审→排产→齐套→采购→备料→生产→发运）
• 创建出货计划
• 查看销售订单
• 交付跟踪（价值流分析）

相关文件:

• src/views/OrderDelivery.vue - 订单交付列表页
• src/views/components/ValueStreamForm.vue - 价值流表单（包含8个Tab页）

价值流Tab页:

1. 订单信息 - 基本订单信息展示
2. 订单评审 - 评审信息及变更记录
3. 计划排程 - 生产排程计划
4. 物料需求 - BOM物料需求分析
5. 执行采购 - 采购订单、采购申请、物料交货单
6. 生产备料 - 备料单信息
7. 生产执行 - 生产报工、IQC信息
8. 入库发运 - FQC信息、生产入库、成品发运

3. 出货计划

路径: /shipping-plan 功能:

• 出货计划列表展示（支持搜索、筛选、分页）
• 添加/编辑/查看出货计划
• 销售出库操作（批量）

相关文件:

• src/views/ShippingPlan.vue - 出货计划列表页
• src/views/components/ShippingPlanForm.vue - 出货计划表单

4. 订单发货

路径: /order-shipment 功能:

• 发货单列表展示（支持搜索、筛选、分页）
• 添加/编辑/查看发货单
• 删除发货单（仅非关闭状态）

相关文件:

• src/views/OrderShipment.vue - 订单发货列表页
• src/views/components/ShipmentForm.vue - 发货单表单

🧩 通用组件

1. 客户选择器

文件: src/components/CustomerSelector.vue 功能:

• 客户列表搜索与展示
• 支持双击选择
• 支持排序

2. 物料选择器

文件: src/components/MaterialSelector.vue 功能:

• 物料列表搜索与展示
• 显示物料详细信息（编号、名称、规格、单位、库位、版本、图纸号）
• 支持双击选择
• 支持排序

🔌 API 接口

文件: src/api/order.js

接口分类:

1. 订单评审相关

   • 获取订单评审列表
   • 订单评审
   • 交期确认
   • 资源解锁
   • 销售订单CRUD

2. 订单变更相关

   • 保存订单变更
   • 提交订单变更审批
   • 获取审批流程

3. 订单交付相关

   • 获取订单交付列表
   • 获取销售订单价值流

4. 出货计划相关

   • 出货计划CRUD
   • 销售出库

5. 订单发货相关

   • 发货单CRUD

6. 基础数据

   • 客户列表
   • 物料列表

📂 文件结构

src/
├── api/
│   ├── delivery.js          # 原有的物料交货计划API
│   └── order.js             # 新增订单管理API ✨
├── components/
│   ├── BatchAddDelivery.vue
│   ├── CustomerSelector.vue # 新增客户选择器 ✨
│   ├── MaterialSelector.vue # 新增物料选择器 ✨
│   └── PurchaseOrderSelector.vue
├── layouts/
│   └── MainLayout.vue       # 已更新菜单 ✨
├── router/
│   └── index.js             # 已更新路由 ✨
├── views/
│   ├── components/          # 新增视图组件目录 ✨
│   │   ├── OrderChangeForm.vue      # 订单变更表单
│   │   ├── SalesOrderForm.vue       # 销售订单表单
│   │   ├── ShipmentForm.vue         # 发货单表单
│   │   ├── ShippingPlanForm.vue     # 出货计划表单
│   │   └── ValueStreamForm.vue      # 价值流表单
│   ├── DeliverySchedule.vue # 原有的物料交货计划
│   ├── OrderDelivery.vue    # 新增订单交付 ✨
│   ├── OrderReview.vue      # 新增订单评审 ✨
│   ├── OrderShipment.vue    # 新增订单发货 ✨
│   └── ShippingPlan.vue     # 新增出货计划 ✨
└── ...

🎨 UI 特性

全局规范

• ✅ 顶部导航：我的流程、我的关注/常用、帮助
• ✅ 左侧菜单：订单管理（一级）+ 4个子菜单（二级）
• ✅ 默认落地页：订单评审
• ✅ 统一的搜索筛选
• ✅ 统一的分页（20/50/100）
• ✅ 日期格式：YYYY-MM-DD HH:mm
• ✅ 数值格式：支持千分位

交互特性

• 列表支持选择、排序
• 表单支持添加/编辑/查看三种模式
• 弹窗表单支持子表操作
• 批量操作带确认提示
• 完善的错误处理和成功提示

🚀 运行项目

开发环境

npm run dev

构建生产

npm run build

📝 待实现功能

由于后端API尚未实现，以下功能需要后端支持：

1. 订单评审

   • 实际的订单评审算法（系统建议交期计算）
   • 资源占用计算

2. 订单交付

   • 价值流各Tab页的数据查询（需要关联多个表）
   • 交付进度实时计算

3. 出货计划

   • 销售出库存储过程调用（pr_WMS_AutoCreateShipper）
   • 从订单交付页面传入ids后自动加载订单数据

4. 审批流程

   • 订单变更审批流程集成
   • 流程图可视化

🔧 技术栈

• 前端框架: Vue 3.4.0
• UI组件库: Element Plus 2.5.0
• 路由管理: Vue Router 4.2.5
• 状态管理: Pinia 2.1.7
• HTTP客户端: Axios 1.6.2
• 日期处理: Day.js 1.11.10
• 构建工具: Vite 5.0.0
• 样式预处理: Sass 1.69.5

📖 开发说明

命名规范

• 文件名：PascalCase（如：OrderReview.vue）
• 组件名：PascalCase（如：<SalesOrderForm>）
• 路由路径：kebab-case（如：/order-review）
• API方法：camelCase（如：getOrderReviewList）

代码组织

• 页面级组件放在 views/ 目录
• 页面专用组件放在 views/components/ 目录
• 通用组件放在 components/ 目录
• API接口按模块分文件存放在 api/ 目录

样式规范

• 使用 SCSS 预处理器
• 使用 scoped 限制样式作用域
• 引用全局变量：@import '@/styles/variables.scss'

📞 联系方式

如有问题或建议，请联系开发团队。

---

创建日期: 2025-10-31 版本: v1.0.0