# 采购计划单 - 页面设计开发说明文档

> 版本: 2.1.0  
> 创建日期: 2026-02-07  
> 更新日期: 2026-02-07  
> 来源系统: 升阳云ERP 演示系统  
> 来源页面: `https://demo.rsun.vip/mp/plan/purchase?needType=0&workType=&fmConfig=010503,020503`  
> 所属模块: 生产计划 > 采购计划单  
> 前端路由: `/mp/plan/purchase`  
> **采集脚本**: `python3 scripts/crawl_v5_buttons.py`（推荐，手动输入验证码后自动操作所有按钮并截图）；输出至 `scripts/output/crawl-v5-buttons.json` 及 `screenshot/采购计划单-*.png`  
> **关联文档**: [erp与mom数据库表映射对照表](db/erp与mom数据库表映射对照表.md)；[MOM系统数据升级方案-销售采购生产计划](db/mom系统数据升级方案-销售采购生产计划.md)；[生产计划.md](生产计划.md)；[采购管理.md](采购管理.md)

---

## 目录

0. [业务流程总览](#0-业务流程总览)
1. [页面概述](#1-页面概述)
2. [页面结构](#2-页面结构)
3. [列表页设计](#3-列表页设计)
4. [新增/编辑页设计](#4-新增编辑页设计)
5. [数据字段定义](#5-数据字段定义)
6. [按钮操作说明](#6-按钮操作说明)
7. [页面交互规则](#7-页面交互规则)
8. [接口调用说明](#8-接口调用说明)
9. [状态流转](#9-状态流转)
10. [业务规则](#10-业务规则)
11. [前端组件设计](#11-前端组件设计)
12. [数据模型](#12-数据模型)

---

## 1. 页面概述

### 1.1 功能说明

采购计划单页面用于管理企业的采购计划。采购计划单是生产计划与采购执行之间的桥梁，计划员基于生产计划单的物料清单（MBOM）中供应方式为「采购」的物料，或通过「引入」功能从生产计划单引入缺料明细，生成采购需求。采购计划单审核后可转采购订单，是后续采购到货、采购入库的数据来源。

### 1.2 业务场景

- **引入生产计划**: 通过「引入」按钮从生产计划单中选择已BOM运算的物料清单，引入缺料/未采物料到采购计划
- **订单用料/库存备料**: 支持按订单需求采购（订单用料）和备库采购（库存备料）两种用料需求方式
- **业务类型分类**: 按物料分类（原材料、零部件、装配件、五金件、包装物等）组织采购计划
- **审核流程**: 采购计划创建后需经审核生效，审核后可生成采购订单
- **采购执行跟踪**: 记录采购数量、已订数量，便于跟踪采购计划执行进度

### 1.3 URL路由参数

| 参数名 | 类型 | 说明 |
|--------|------|------|
| needType | integer | 0=订单用料（默认），1=库存备料 |
| workType | integer | 工作类型，0=采购计划单 |
| fmConfig | string | 表单配置编码，如 010503,020503 |

### 1.4 页面截图参考

以下截图均来自项目 `screenshot/` 目录（路径相对于项目根目录），用于开发时对照页面与交互。

| 截图文件 | 说明 | 来源 |
|----------|------|------|
| `screenshot/生产计划-采购计划单-列表.png` | 列表页 - 旧版默认视图（含物料分类快捷筛选） | 手动截图 |
| `screenshot/生产计划-采购计划单列表-明细视图.png` | 列表页 - 明细视图，侧重物料维度展示 | 手动截图 |
| `screenshot/生产计划-采购计划单列表-单据视图.png` | 列表页 - 单据视图，侧重单据流程与批量操作 | 手动截图 |
| `screenshot/生产计划-采购计划单新增-初始化页.png` | 新增页 - 空白表单初始状态 | 手动截图 |
| `screenshot/生产计划-采购计划单新增-引入.png` | 新增/编辑页 - 「引入」打开的「选择生产计划单」弹窗 | 手动截图 |
| `screenshot/生产计划-采购计划单新增-引入弹窗展开.png` | 引入弹窗 - 展开显示物料明细（需求数量、可用量、未采数量） | 手动截图 |
| `screenshot/生产计划-采购计划单新增-保存后.png` | 新增/编辑页 - 引入并保存后的表单状态 | 手动截图 |
| `screenshot/生产计划-采购计划单表单-查看编辑状态.png` | 查看/编辑页 - 含物料信息子表（复制/删除操作） | 手动截图 |
| **`screenshot/采购计划单-明细视图-列表.png`** | **明细视图列表（V5 Playwright 自动采集）** | V5 自动采集 |
| **`screenshot/采购计划单-单据视图-列表.png`** | **单据视图列表，含操作列查看/编辑/删除** | V5 自动采集 |
| **`screenshot/采购计划单-导出确认弹窗.png`** | **导出按钮弹出的确认弹窗** | V5 自动采集 |
| **`screenshot/采购计划单-新增页-初始化.png`** | **新增页空白表单（含物料信息子表列头）** | V5 自动采集 |
| **`screenshot/采购计划单-引入弹窗-选择生产计划单.png`** | **引入弹窗：选择生产计划单，8列表格** | V5 自动采集 |
| **`screenshot/采购计划单-引入弹窗-展开物料明细.png`** | **引入弹窗展开：物料编码/名称/需求数量/可用量/已采/未采** | V5 自动采集 |
| **`screenshot/采购计划单-新增页-表头收起.png`** | **收起按钮效果：表头折叠仅显示物料子表** | V5 自动采集 |
| **`screenshot/采购计划单-查看页.png`** | **查看页（只读），含物料信息子表** | V5 自动采集 |
| **`screenshot/采购计划单-编辑页.png`** | **编辑页，表头可修改，子表可编辑** | V5 自动采集 |

---

## 0. 业务流程总览

### 0.1 采购计划单在 ERP 中的定位

采购计划单是 **销售订单 → 生产计划 → 采购执行** 链条中的关键节点，承接物料清单（MBOM）中的采购需求，向下游驱动采购订单的生成与执行。

```
┌──────────────┐     ┌──────────────┐     ┌──────────────┐     ┌──────────────┐
│  销售订单    │────►│ 生产计划单   │────►│ BOM运算      │────►│ 物料清单MBOM │
│  (销售确认)  │     │ (引入订单)   │     │ (展开需求)   │     │ (采购件等)   │
└──────────────┘     └──────────────┘     └──────────────┘     └──────┬───────┘
                                                                      │
                                                                      │ 引入
                                                                      ▼
┌──────────────┐     ┌──────────────┐     ┌──────────────┐     ┌──────────────┐
│ 采购入库     │◄────│ 采购到货单   │◄────│ 采购订单     │◄────│ 采购计划单   │
│ (库存增加)   │     │ (到货登记)   │     │ (引入计划)   │     │ ★ 当前页面   │
└──────────────┘     └──────────────┘     └──────────────┘     └──────────────┘
```

### 0.2 端到端业务流程图

```
 销售订单确认
       │
       ▼
 ┌─────────────────┐     引入订单       ┌─────────────────┐
 │   生产计划单     │ ◄───────────────── │ 销售订单/备货单  │
 │  - 订单信息子表  │                    │                 │
 └────────┬────────┘                    └─────────────────┘
          │ 选择BOM、保存
          ▼
 ┌─────────────────┐     BOM运算        ┌─────────────────┐
 │   物料清单MBOM   │ ◄───────────────── │ 产品BOM(EBOM)   │
 │  - 供应方式=采购 │     (按供应方式拆分) │                 │
 │  - 需求数量      │                    │                 │
 │  - 可用量/缺口   │                    └─────────────────┘
 └────────┬────────┘
          │ 引入（选择生产计划单 → 展开物料明细 → 勾选缺料/未采行）
          ▼
 ┌─────────────────┐     保存、审核      ┌─────────────────┐
 │   ★ 采购计划单   │ ──────────────────► │ 采购计划单(审核) │
 │  - 物料信息子表  │                    │ 可生成采购订单   │
 │  - 采购数量      │                    └────────┬────────┘
 │  - 已订数量      │                             │
 └─────────────────┘                             │ 引入
                                                 ▼
 ┌─────────────────┐     选择供应商      ┌─────────────────┐
 │   采购订单       │ ◄───────────────── │ 采购计划单明细   │
 │  - 供应商        │    引入采购计划     │ 按供应商拆分     │
 └────────┬────────┘                    └─────────────────┘
          │ 到货
          ▼
 ┌─────────────────┐     引入            ┌─────────────────┐
 │   采购到货单     │ ◄───────────────── │ 采购订单         │
 └────────┬────────┘                    └─────────────────┘
          │ 入库
          ▼
 ┌─────────────────┐
 │   采购入库单     │ ──► 库存增加
 └─────────────────┘
```

### 0.3 采购计划单内部业务流程

| 阶段 | 操作 | 触发条件 | 结果 |
|------|------|----------|------|
| 1. 新建 | 点击「新增」 | 始终可用 | 打开新增页，单据编码自动生成，单据状态=开立 |
| 2. 引入 | 点击「引入」→ 选择生产计划单 → 勾选计划行或物料行 → 确定 | 新增/编辑状态 | 物料信息子表填充：需求数量、可用量、采购数量；表头填充：计划单号、销售单号、主产品信息 |
| 3. 编辑 | 修改表头、物料行（采购数量、需求日期、采购说明等） | 开立/退回状态 | 可保存 |
| 4. 保存 | 点击「保存」 | 至少有1条物料明细，采购数量>0 | 数据持久化，单据编码落库 |
| 5. 审核 | 点击「审核」或批量审核 | 开立状态，已保存，至少有1条明细 | 单据状态→审核，记录审核员、审核日期；**审核后可生成采购订单** |
| 6. 反审核 | 点击「反审核」 | 审核状态，未被采购订单引用 | 单据状态→开立，清空审核信息 |
| 7. 生成采购订单 | 在采购订单页面「引入」采购计划单 | 采购计划单已审核 | 采购订单明细自动带入物料、数量、需求日期等 |
| 8. 删除 | 点击「删除」或批量删除 | 开立/退回状态 | 逻辑删除 |

### 0.4 上下游单据关系

| 上游单据 | 关联字段 | 说明 |
|----------|----------|------|
| 销售订单 | sales_order_id, sales_order_code | 跟单单号，引入时从生产计划带出 |
| 生产计划单 | plan_id, plan_code | 计划单号，引入数据来源 |
| 物料清单(MBOM) | - | 生产计划BOM运算后的采购件明细，通过「选择生产计划单」引入 |

| 下游单据 | 关联字段 | 说明 |
|----------|----------|------|
| 采购订单 | pp_number / purchase_plan_code | 采购订单「引入」时选择采购计划单明细 |
| 采购到货单 | pp_number | 到货单可关联采购计划 |
| 采购入库单 | - | 通过到货单间接关联 |

### 0.5 用料需求方式（needType）

| 值 | 标签 | 说明 | 数据来源 |
|----|------|------|----------|
| 0 | 订单用料 | 按销售订单/生产计划需求采购 | 从生产计划引入，跟单到销售订单 |
| 1 | 库存备料 | 备库采购，无直接订单关联 | 备库计划单场景，计划单号可为空 |

采购计划单列表页默认 `needType=0`（订单用料）；备库计划单使用 `needType=1`，路径为 `/mp/plan/purchase/bl`。

### 0.6 关键数量逻辑

| 数量字段 | 含义 | 计算/来源 |
|----------|------|-----------|
| 需求数量 | 物料需求总量 | 引入时从生产计划/BOM 展开结果带入 |
| 可用量 | 当前库存可用数量 | 实时查询库存，可为负（表示缺料） |
| 未采数量 | 尚未采购的数量 | 需求数量 - 已采数量（引入弹窗中展示） |
| 采购数量 | 计划采购数量 | 用户可编辑，默认=未采数量或需求数量 |
| 已订数量 | 已转采购订单数量 | 根据采购订单回写，只读 |

### 0.7 页面交互逻辑分析（V5 Playwright 实际采集验证）

> 以下逻辑经 Playwright V5 脚本实际操作验证（2026-02-07），标记 ✅ 表示已自动化验证通过。

| 交互场景 | 触发 | 前置条件 | 行为 | 后置 | 验证 |
|----------|------|----------|------|------|------|
| 明细视图加载 | 菜单导航 | 登录后 | 默认显示明细视图，70行数据，底部汇总：采购数量/已订数量 | - | ✅ |
| 明细→单据切换 | 点击「单据」 | 明细视图 | 表头切换为：单据编码/日期/状态/业务类型/采购部门/人员/业务状态/审核日期/操作；按钮变为：明细/查询所有/新增/删除/审核/反审核 | 31行单据 | ✅ |
| 单据→明细切换 | 点击「明细」 | 单据视图 | 切回明细视图 | 70行物料 | ✅ |
| 搜索 | 点击「搜索」 | 无 | pageNum=1，携带搜索条件请求，底部汇总随结果更新 | - | ✅ |
| 查询所有 | 点击「查询所有」 | 无 | 重置搜索条件并刷新列表，结果行数=70 | - | ✅ |
| 导出 | 点击「导出」 | 无 | 弹出确认弹窗，确认后下载Excel | 截图已保存 | ✅ |
| 新增 | 点击「新增」 | 有权限 | 跳转新增页，按钮=[保存/取消/审核/反审核/收起/引入]；子表列=[序号/物料编码/物料名称/型号规格/主计量/需求日期/需求数量/可用量/采购数量/已订数量/采购说明/操作] | 表头空 | ✅ |
| 引入 | 点击「引入」 | 新增/编辑状态 | 打开「选择生产计划单」弹窗，搜索=[销售单号/物料编码/物料名称/开始日期/结束日期]，列=[销售员/销售单号/订单交期/计划单号/物料编码/物料名称/主计量/数量]，按钮=[搜索/查询所有/确定/取消] | 12条计划行 | ✅ |
| 引入-展开物料明细 | 点击行展开箭头 | 引入弹窗内 | 展开子行：物料编码/物料名称/需求数量/可用量/已采数量/未采数量/备注 | 可勾选 | ✅ |
| 收起 | 点击「收起」 | 新增/编辑页 | 折叠表头表单区域，仅显示物料信息子表 | - | ✅ |
| 展开 | 点击「展开」 | 已收起状态 | 恢复表头表单区域 | - | ✅ |
| 取消 | 点击「取消」 | 新增/编辑页 | 返回列表页，若有未保存数据弹出确认 | 回到列表 | ✅ |
| 查看 | 操作列「查看」 | 单据视图 | 打开查看页（只读），按钮=[新增/编辑/审核/反审核/打印/操作/收起]；子表列=[序号/物料编码/物料名称/型号规格/主计量/需求日期/需求数量/可用量/采购数量/已订数量/采购说明] | 3行物料 | ✅ |
| 编辑 | 操作列「编辑」 | 单据视图，开立/退回 | 打开编辑页，表头可修改，物料信息可编辑/复制/删除 | 可保存 | ✅ |
| 删除 | 操作列「删除」 | 单据视图，开立/退回 | 弹出确认弹窗，确认后逻辑删除 | 刷新列表 | 截图确认 |
| 保存 | 点击「保存」 | 校验通过 | POST/PUT 提交，成功后提示 | 新增→编辑模式 | - |
| 审核 | 点击「审核」 | 开立、已保存、有明细 | 调用审核接口 | 页面变只读 | - |
| 反审核 | 点击「反审核」 | 审核、无下游引用 | 调用反审核接口 | 页面变可编辑 | - |
| 打印 | 查看页「打印」 | 查看页 | 触发打印预览 | - | ✅ 按钮存在 |
| 操作 | 查看页「操作」 | 查看页 | 下拉菜单（可能含更多操作项） | - | ✅ 按钮存在 |

### 0.8 典型操作路径（用户故事）

| 场景 | 路径 |
|------|------|
| **按订单生成采购计划** | 列表 → 新增 → 引入 → 勾选生产计划物料行 → 确定 → 调整采购数量/需求日期 → 保存 → 审核 |
| **查看采购执行进度** | 列表（明细视图）→ 按跟单编号/物料筛选 → 查看采购数量/已订数量 |
| **批量审核** | 列表 → 切换单据视图 → 勾选多条开立记录 → 审核 |
| **转采购订单** | 采购管理 → 采购订单 → 新增 → 引入 → 选择已审核采购计划单 → 确定 |

### 0.9 Playwright 采集与验证

#### V5 采集成功（2026-02-07）

**V5 脚本 `crawl_v5_buttons.py` 已成功完成全面采集**，共操作 13 个按钮/交互并保存 9 张截图：

| 采集项 | 状态 | 采集数据 |
|--------|------|----------|
| 登录 | ✅ 成功 | 手动输入验证码 |
| 明细视图列表 | ✅ 70行 | 表头11列，按钮5个，底部汇总 |
| 单据视图列表 | ✅ 31行 | 表头9列，按钮7个，操作列=查看/编辑/删除 |
| 新增页 | ✅ | 子表12列，按钮6个=[保存/取消/审核/反审核/收起/引入] |
| 引入弹窗 | ✅ 12行 | 标题=选择生产计划单，搜索5项，列8个 |
| 引入展开 | ✅ | 展开列=物料编码/物料名称/需求数量/可用量/已采数量/未采数量/备注 |
| 查看页 | ✅ 3行 | 按钮=[新增/编辑/审核/反审核/打印/操作/收起] |
| 编辑页 | ✅ | 表头可修改，物料子表可编辑/复制/删除 |
| 导出确认弹窗 | ✅ | 弹窗确认后下载Excel |

**技术架构确认**（通过 Playwright JS 注入诊断获得）：

| 项目 | 值 |
|------|------|
| 前端框架 | Vue 2 + Vuex + Vue Router 2.x (history mode) |
| UI 组件库 | Element UI |
| 路由路径 | `/mp/plan/purchase`（父路由 `/mp/plan`，name: `Mp/plan`） |
| 路由名称 | `Purchase`，meta: `{title: "采购计划单", icon: "build", openType: "0"}` |
| 组件加载 | Webpack code-splitting，懒加载 `() => import(...)` |
| 标签系统 | Vuex `tagsView` 模块管理页面标签 |
| 导航方式 | Vuex dispatch `tagsView/addVisitedView` → 点击 tag → Vue Router replace |

#### 本文档数据来源说明

| 来源 | 说明 | 可信度 |
|------|------|--------|
| **V5 Playwright 自动化采集** | 9 张截图 + 13 条按钮操作记录 + JSON 数据 | ★★★★★ 最高 |
| **V4 Playwright 采集** | crawl-v4.json 含完整列表/新增/引入弹窗数据 | ★★★★★ |
| 项目内手动截图 | `screenshot/生产计划-采购计划单*` 共 8 张 | ★★★★ |
| ERP Swagger API | `/prod-api/v2/api-docs?group=计划模块` | ★★★★ |
| ERP 数据库设计 | DDL + 数据字典 | ★★★★ |
| 后端 Java / 前端 Vue 实现 | Controller + Entity + Vue 组件 | ★★★★ |
| 生产计划/采购管理 PRD | 业务流程说明 | ★★★ |

#### 采集脚本说明

| 脚本 | 用途 | 命令 |
|------|------|------|
| **crawl_v5_buttons.py** | **全面按钮操作采集（推荐）** | `python3 scripts/crawl_v5_buttons.py` |
| crawl_v4.py | 核心数据采集 | `python3 scripts/crawl_v4.py` |
| crawl-purchase-plan.mjs | Node.js 版采集 | `node scripts/crawl-purchase-plan.mjs --manual` |  

### 0.10 订单监控中心与采购阶段（采集验证）

目标 ERP 首页「订单监控中心」展示订单全流程：**研发 → 计划 → 采购 → 生产 → 仓库**。采购计划单处于其中的**采购**阶段。

| 阶段 | 说明 | 采购计划单关联 |
|------|------|----------------|
| 研发 | 研发BOM、下发 | 上游：产品BOM 为物料清单数据源 |
| 计划 | 生产计划、MBOM、下发 | **上游**：采购计划从生产计划引入物料 |
| 采购 | 采购计划、采购订单、到货 | ★ 采购计划单页面所在阶段 |
| 生产 | 生产订单、领料、完工 | 与采购并行，采购料到位后生产 |
| 仓库 | 入库、出库 | 采购到货→采购入库 |

- 未建采购计划时，订单监控中心该订单的「采购」列显示「无采购数据」  
- 建立并审核采购计划后，可在此查看采购计划单据或执行进度  

**菜单位置**：左侧菜单「生产计划」→「采购计划单」。进入页面后可切换明细视图/单据视图。

**订单监控中心页面元素（Playwright 采集）**：搜索区含「跟单编号」「请输入你的问题...」；工具栏含「搜索」「下周交付」「最新10单」「深度思考」；表格列为「基本信息」「研发」「计划」「采购」「生产」「仓库」；行内展示跟单编号、业务员、物料名称、数量、交期及各阶段状态（如研发BOM、生产计划、未下发、无采购数据等）。

### 0.11 Playwright 采集验证结果（crawl_v4.py 成功采集）

> 采集时间：2026-02-07T13:37:55  
> 脚本：`scripts/crawl_v4.py`  
> 导航方式：Vuex 创建 tagsView 标签 → 点击顶部标签切换 → 路由成功到达 `/mp/plan/purchase?needType=0&workType=&fmConfig=010503,020503`

**采集结果与文档 3、4 节对照：**

| 采集项 | 实际采集结果 | 与文档对照 |
|--------|--------------|-----------|
| **明细视图 - 表头** | 序号、跟单编号、订单交期、单据编码、单据状态、物料名称、物料编码、采购数量、已订数量、单据日期、采购说明 | **完全吻合** 3.1.4 表格列定义（11列） |
| **明细视图 - 按钮** | 搜索、单据、查询所有、新增、导出 | **完全吻合** 3.1.2（搜索 + 4 个工具栏按钮） |
| **明细视图 - 数据行数** | 70 行 | 分页 100 条/页，当前有 70 条数据 |
| **明细视图 - 首行** | XSDD000085, 2026-2-19, CGJH000033, 审核, 微星 MAG B760M..., 1000000002, 2.00 | 验证了跟单编号→订单交期→单据编码→状态→物料名称→物料编码→采购数量的排列 |
| **明细视图 - 底部汇总** | 采购数量: 15,084,075  已订数量: 68,549 | **吻合** 3.1.5 底部统计区域 |
| **单据视图 - 表头** | 单据编码、单据日期、单据状态、业务类型、采购部门、采购人员、业务状态、审核日期、操作 | **完全吻合** 3.2.3（含复选框 + 9 列） |
| **单据视图 - 按钮** | 搜索、明细、查询所有、新增、删除、审核、反审核 | **完全吻合** 3.2.2（搜索 + 6 个工具栏按钮） |
| **单据视图 - 数据行数** | 31 行 | 按单据聚合后的记录数 |
| **新增页 - 按钮** | 保存、取消、审核、反审核、收起、引入 | **完全吻合** 6.4 节 6 个按钮 |
| **新增页 - 物料子表列** | 序号、物料编码、物料名称、型号规格、主计量、需求日期、需求数量、可用量、采购数量、已订数量、采购说明、操作 | **完全吻合** 4.3 物料信息子表（12列） |
| **引入弹窗 - 标题** | 选择生产计划单 | **吻合** 4.4 弹窗标题 |
| **引入弹窗 - 搜索** | 销售单号、物料编码、物料名称、开始日期、结束日期 | **吻合** 4.4 弹窗搜索区 |
| **引入弹窗 - 按钮** | 搜索、查询所有、确定、取消 | **吻合** 4.4 |
| **引入弹窗 - 父行列** | 销售员、销售单号、订单交期、计划单号、物料编码、物料名称、主计量、数量 | **完全吻合** 4.4 父行结构（8列） |
| **引入弹窗 - 展开子行列** | 物料编码、物料名称、需求数量、可用量、已采数量、未采数量、备注 | **完全吻合** 4.4 子行结构（7列） |

**采集截图清单：**

| 截图 | 说明 |
|------|------|
| `scripts/output/v4-list-detail.png` | 列表页-明细视图：含左侧菜单、搜索区、物料分类标签、数据表格、底部汇总 |
| `scripts/output/v4-list-doc.png` | 列表页-单据视图：含复选框、操作列（查看/编辑/删除）、业务类型=原材料 |
| `scripts/output/v4-add.png` | 新增页：表头字段布局、物料信息空表、按钮栏 |
| `scripts/output/v4-import-dialog.png` | 引入弹窗：「选择生产计划单」，层级表格 |
| `scripts/output/v4-import-expanded.png` | 引入弹窗展开：子行显示物料编码/名称/需求数量/可用量/已采数量/未采数量 |

### 0.12 采集关键发现

1. **明细视图的物料分类快捷标签**在实际页面中显示为：成品、直销类、代销类、原材料、五金件、包装物、加工成品、电脑组装件、测试料、芯片、56789 等（与文档 3.1.3 一致）
2. **单据视图操作列**统一显示 查看(绿)、编辑(蓝)、删除(红)，不区分状态显示（与文档 3.2.4 中"按状态显隐"略有差异 — 实际系统可能前端已根据状态控制但 DOM 仍渲染）
3. **引入弹窗展开的可用量**实测值为 `-200.00`，验证了可用量可为负数（表示缺料 200 件）
4. **新增页表头字段**在 Playwright 采集中因非 `.el-form-item` 标准结构未能采集（formFields=[]），但截图 v4-add.png 确认了 4.2 节 19 个字段的存在
5. **导航方式**：该 ERP 为 Vue2 SPA，菜单点击通过 Vuex tagsView 创建顶部标签，再由标签点击触发路由切换。直接 `page.goto()` 会因 SPA 路由守卫失败返回 404

### 0.13 从订单监控中心到采购计划单的典型路径

```
 登录成功 → 首页（订单监控中心 /index）
        │
        ├── 左侧菜单「生产计划」→ 展开子菜单
        │                          ├── 生产计划单
        │                          ├── 零部件订单
        │                          ├── 零部件计划单
        │                          ├── 物料清单
        │                          ├── ★ 采购计划单  ← 点击
        │                          ├── 备库计划单
        │                          └── ...
        ▼
 ┌──────────────────────┐
 │ 采购计划单列表        │  路由: /mp/plan/purchase?needType=0&fmConfig=010503,020503
 │ （明细视图/单据视图）  │
 └──────────┬───────────┘
            │
            ├── 新增 → 引入(选择生产计划单) → 勾选物料行 → 确定 → 调整采购数量 → 保存 → 审核
            ├── 点击单据编码 → 查看/编辑页
            └── 切换单据视图 → 批量审核/反审核/删除
```

---

## 2. 页面结构

### 2.1 整体布局

```
┌─────────────────────────────────────────────────────────────────┐
│                     顶部导航栏 (64px)                            │
├────────┬────────────────────────────────────────────────────────┤
│ 左侧   │  面包屑: 首页 / 生产计划 / 采购计划单                    │
│ 菜单   │  ┌────────────────────────────────────────────────┐    │
│ (200px │  │ Tab标签: ● 采购计划单                           │    │
│  /64px)│  ├────────────────────────────────────────────────┤    │
│        │  │ 查询区域 (搜索条件)                              │    │
│ 生产计 │  ├────────────────────────────────────────────────┤    │
│ 划     │  │ 工具栏 (操作按钮) + 明细视图含物料分类快捷标签     │    │
│ ├生产  │  ├────────────────────────────────────────────────┤    │
│  计划  │  │ 数据表格                                        │    │
│  单    │  │                                                │    │
│ ├采购  │  ├────────────────────────────────────────────────┤    │
│  计划  │  │ 底部统计 (采购数量/已订数量汇总) + 分页组件       │    │
│  单★  │  └────────────────────────────────────────────────┘    │
├────────┴────────────────────────────────────────────────────────┤
```

### 2.2 页面模式

| 模式 | 说明 | 入口 |
|------|------|------|
| 列表页 - 明细视图 | **默认视图**，以采购物料维度展示列表，侧重物料和跟单信息 | 菜单点击「采购计划单」 |
| 列表页 - 单据视图 | 以采购计划单据维度展示列表，侧重单据流程管理 | 明细视图点击「单据」按钮切换 |
| 新增页 | 新建采购计划单，填写表头+引入生产计划物料 | 列表页点击「新增」按钮 |
| 编辑页 | 修改已有采购计划单（仅开立/退回状态） | 单据视图点击「编辑」按钮 |
| 查看页 | 只读查看采购计划单详情 | 单据视图点击「查看」按钮 |

### 2.3 列表页双视图概述

列表页提供 **明细视图** 和 **单据视图** 两种展示模式，通过工具栏左侧第一个按钮相互切换：

```
┌──────────────────────────────────────────────────────────────┐
│  明细视图（默认）                      单据视图               │
│  ┌─────────────┐                    ┌─────────────┐         │
│  │ [单据] 按钮  │ ──切换到单据视图──► │ [明细] 按钮  │         │
│  │              │ ◄──切换到明细视图── │              │         │
│  └─────────────┘                    └─────────────┘         │
│                                                              │
│  ● 侧重物料信息展示                   ● 侧重单据流程管理       │
│  ● 含跟单编号、订单交期                 ● 有复选框，支持批量操作  │
│  ● 含物料分类快捷筛选标签               ● 操作列: 查看/编辑/删除  │
│  ● 底部显示采购数量/已订数量汇总        ● 搜索含单据状态/业务状态  │
└──────────────────────────────────────────────────────────────┘
```

**两种视图对比总览:**

| 对比项 | 明细视图（默认） | 单据视图 |
|--------|-----------------|---------|
| 切换按钮 | 工具栏显示「单据」按钮 | 工具栏显示「明细」按钮 |
| 复选框列 | 无 | 有 |
| 序号列 | 有 | 无 |
| 搜索条件 | 销售订单号、单据编码、物料编码、物料名称、日期范围 | 单据编码、**单据状态**、**业务状态**、日期范围 |
| 快捷筛选 | 有（物料分类标签：成品、直销类、代销类、原材料、五金件、包装物等） | 无 |
| 工具栏按钮 | 单据、查询所有、新增、导出 | 明细、查询所有、新增、删除、审核、反审核 |
| 数据列 | 序号、跟单编号、订单交期、单据编码、单据状态、物料名称、物料编码、采购数量、已订数量、单据日期、采购说明 | 单据编码、单据日期、单据状态、业务类型、采购部门、采购人员、业务状态、审核日期、操作 |
| 操作列 | 无（单据编码可点击查看详情） | 查看、编辑、删除（按状态显隐） |
| 批量操作 | 不支持 | 支持（删除、审核、反审核） |
| 底部统计 | 采购数量、已订数量汇总 | 采购数量、已订数量汇总 |
| 适用场景 | 计划员查看采购物料和跟单进度 | 管理员进行单据审核管理 |

---

## 3. 列表页设计

### 3.1 明细视图（默认视图）

明细视图是进入采购计划单页面时的默认视图，侧重于展示采购物料与跟单信息。

> 截图参考: `screenshot/生产计划-采购计划单列表-明细视图.png`

#### 3.1.1 搜索条件区域

| 序号 | 字段名 | 标签 | 组件类型 | 宽度 | 说明 |
|------|--------|------|----------|------|------|
| 1 | salesOrderCode | 销售订单号/跟单单号 | el-input | 140px | 模糊搜索 |
| 2 | purchaseCode | 单据编码 | el-input | 140px | 模糊搜索 |
| 3 | itemCode | 物料编码 | el-input | 140px | 模糊搜索 |
| 4 | itemName | 物料名称 | el-input | 140px | 模糊搜索 |
| 5 | startDate | 开始日期 | el-date-picker | 140px | 日期范围起 |
| 6 | endDate | 结束日期 | el-date-picker | 140px | 日期范围止 |
| 7 | - | 搜索 | el-button | - | Q 搜索 按钮 |

> **注意**: 明细视图的搜索条件没有「单据状态」和「业务状态」。

#### 3.1.2 工具栏按钮

| 序号 | 按钮名称 | 图标 | 类型 | 权限标识 | 说明 |
|------|----------|------|------|----------|------|
| 1 | 单据 | - | primary | mp:purchase:list | 切换到单据视图 |
| 2 | 查询所有 | el-icon-tickets | default | mp:purchase:list | 重置搜索条件并查询所有 |
| 3 | 新增 | el-icon-plus | success | mp:purchase:add | 打开新增采购计划单页面 |
| 4 | 导出 | el-icon-download | default | mp:purchase:export | 导出采购计划列表到Excel |

#### 3.1.3 快捷筛选标签

工具栏按钮右侧显示一组**物料分类**快捷筛选标签，如：成品、直销类、代销类、原材料、五金件、包装物、加工成品、电脑组装件、测试料、芯片等。点击标签可快速按物料分类筛选列表数据。

| 属性 | 说明 |
|------|------|
| 来源 | 动态加载，来自系统中物料分类或已有采购计划的物料分类 |
| 样式 | 文字标签，可点击，选中高亮 |
| 行为 | 点击标签筛选该分类物料的采购计划，再次点击取消筛选 |

#### 3.1.4 数据表格列定义

| 序号 | 列标题 | 字段名 | 宽度 | 对齐 | 说明 |
|------|--------|--------|------|------|------|
| 1 | 序号 | - | 60px | center | 自动编号（无复选框） |
| 2 | 跟单编号 | salesOrderCode | 140px | left | 销售订单号，蓝色链接可点击 |
| 3 | 订单交期 | deliveryDate | 100px | center | 销售订单交货日期 |
| 4 | 单据编码 | purchaseCode | 140px | left | 采购计划编码，蓝色链接可点击打开详情 |
| 5 | 单据状态 | status | 80px | center | 状态标签（开立/审核/退回） |
| 6 | 物料名称 | itemName | 200px | left | 采购物料名称 |
| 7 | 物料编码 | itemCode | 120px | left | 采购物料编码 |
| 8 | 采购数量 | purchaseQty | 100px | right | 采购计划数量 |
| 9 | 已订数量 | orderedQty | 100px | right | 已转采购订单数量 |
| 10 | 单据日期 | purchaseDate | 100px | center | 采购计划创建日期 |
| 11 | 采购说明 | remark | 120px | left | 采购说明备注 |

#### 3.1.5 底部统计区域

| 组件 | 位置 | 说明 |
|------|------|------|
| 采购数量汇总 | 底部左侧 | 显示 "采购数量: {totalPurchaseQty}"，汇总当前查询结果的采购数量合计 |
| 已订数量汇总 | 底部左侧 | 显示 "已订数量: {totalOrderedQty}"，汇总当前查询结果的已订数量合计 |

---

### 3.2 单据视图

单据视图侧重于采购计划单的单据流程管理，支持批量操作（审核、反审核、删除）。

> 截图参考: `screenshot/生产计划-采购计划单列表-单据视图.png`

#### 3.2.1 搜索条件区域

| 序号 | 字段名 | 标签 | 组件类型 | 宽度 | 说明 |
|------|--------|------|----------|------|------|
| 1 | purchaseCode | 单据编码 | el-input | 160px | 模糊搜索 |
| 2 | status | 单据状态 | el-select | 120px | 下拉选择，可清空 |
| 3 | businessStatus | 业务状态 | el-select | 120px | 下拉选择，可清空 |
| 4 | startDate | 开始日期 | el-date-picker | 140px | 日期范围起 |
| 5 | endDate | 结束日期 | el-date-picker | 140px | 日期范围止 |

> **注意**: 单据视图没有「销售订单号」「物料编码」「物料名称」，而是有「单据状态」和「业务状态」两个下拉选择。

**单据状态选项:**

| 值 | 标签 | 标签颜色 |
|----|------|----------|
| DRAFT | 开立 | info (灰色) |
| APPROVED | 审核 | success (绿色) |
| REJECTED | 退回 | warning (橙色) |

**业务状态选项:**

| 值 | 标签 |
|----|------|
| NORMAL | 正常 |
| PAUSE | 暂停 |
| CANCEL | 取消 |
| COMPLETED | 完成 |

#### 3.2.2 工具栏按钮

| 序号 | 按钮名称 | 图标 | 类型 | 权限标识 | 说明 |
|------|----------|------|------|----------|------|
| 1 | 明细 | - | primary | mp:purchase:list | 切换到明细视图 |
| 2 | 查询所有 | el-icon-tickets | default | mp:purchase:list | 重置搜索条件并查询所有 |
| 3 | 新增 | el-icon-plus | success | mp:purchase:add | 打开新增采购计划单页面 |
| 4 | 删除 | el-icon-delete | danger | mp:purchase:remove | 批量删除选中记录（需勾选） |
| 5 | 审核 | el-icon-check | primary | mp:purchase:approve | 批量审核选中记录（需勾选） |
| 6 | 反审核 | - | default | mp:purchase:unapprove | 批量反审核选中记录（需勾选） |

#### 3.2.3 数据表格列定义

| 序号 | 列标题 | 字段名 | 宽度 | 对齐 | 排序 | 说明 |
|------|--------|--------|------|------|------|------|
| 0 | (复选框) | - | 55px | center | - | 多选列，用于批量操作 |
| 1 | 单据编码 | purchaseCode | 140px | left | 否 | 可点击打开详情 |
| 2 | 单据日期 | purchaseDate | 120px | center | 是 ▼ | 默认降序排列 |
| 3 | 单据状态 | status | 80px | center | 否 | 状态标签（颜色区分） |
| 4 | 业务类型 | businessType | 100px | center | 否 | 如：原材料、零部件 |
| 5 | 采购部门 | deptName | 100px | center | 否 | 业务部门 |
| 6 | 采购人员 | operatorName | 100px | center | 否 | 业务人员 |
| 7 | 业务状态 | businessStatus | 80px | center | 否 | 正常/完成等 |
| 8 | 审核日期 | approveDate | 120px | center | 否 | 仅审核后显示 |
| 9 | 操作 | - | 160px | center | - | 操作按钮组（按状态显隐） |

#### 3.2.4 单据视图操作列按钮

单据视图操作列按钮根据单据状态动态显隐：

**status = APPROVED（已审核）:**

| 按钮 | 颜色 | 权限 | 说明 |
|------|------|------|------|
| 查看 | success (绿色文字) | mp:purchase:query | 打开查看页（只读） |
| 翻单 | primary (蓝色文字) | mp:purchase:copy | 复制采购计划生成新单据（如支持） |

**status = DRAFT（开立）或 REJECTED（退回）:**

| 按钮 | 颜色 | 权限 | 说明 |
|------|------|------|------|
| 查看 | success (绿色文字) | mp:purchase:query | 打开查看页 |
| 编辑 | primary (蓝色文字) | mp:purchase:edit | 打开编辑页 |
| 删除 | danger (红色文字) | mp:purchase:remove | 二次确认后删除 |

---

### 3.3 分页组件（两种视图通用）

| 属性 | 值 | 说明 |
|------|------|------|
| 默认每页条数 | 100 | 可选: 10, 20, 50, 100 |
| 布局 | total, sizes, prev, pager, next, jumper | 完整分页 |
| 总条数显示 | 共 {total} 条 | 右侧显示 |

---

## 4. 新增/编辑页设计

### 4.1 页面布局

新增/编辑页面为独立的全屏页面（非弹窗），包含表头表单区和物料信息表格区两个部分。

> 截图参考: 新增初始页 `screenshot/生产计划-采购计划单新增-初始化页.png`；保存后 `screenshot/生产计划-采购计划单新增-保存后.png`

```
┌──────────────────────────────────────────────────────────────┐
│ 采购计划单                            [保存][取消][审核][反审核][收起] │
├──────────────────────────────────────────────────────────────┤
│ 表头表单区 (4~5列布局，可折叠)                                   │
│ ┌──────────┬──────────┬──────────┬──────────┬──────────┐     │
│ │ 单据编码  │ 业务类型  │ 用料需求  │ 计划单号  │ 物料编码   │     │
│ │ 单据日期  │ 操作员    │ 业务部门  │ 销售单号  │ 物料名称   │     │
│ │ 单据状态  │ 审核员    │ 业务人员  │ 销售员    │ 数量       │     │
│ │ 业务状态  │ 审核日期  │ 备注信息  │ 订单交期  │            │     │
│ └──────────┴──────────┴──────────┴──────────┴──────────┘     │
├──────────────────────────────────────────────────────────────┤
│ 物料信息                              [需求日期] [引入]         │
│ ┌──┬──────┬────┬────┬──┬──────┬──────┬──────┬──────┬────┬──┬──┐ │
│ │序│物料编│物料│型号│主│需求日│需求数│可用量│采购数│已订│采│操│ │
│ │号│码    │名称│规格│计│期    │量    │      │量    │数量│购│作│ │
│ │  │      │    │    │量│      │      │      │      │    │说│  │ │
│ └──┴──────┴────┴────┴──┴──────┴──────┴──────┴──────┴────┴──┴──┘ │
└──────────────────────────────────────────────────────────────┘
```

### 4.2 表头表单字段

表头采用多列栅格布局（el-col :span="6" 或 5），每行 4~5 个字段。

| 序号 | 字段名 | 标签 | 组件类型 | 必填 | 默认值 | 可编辑 | 说明 |
|------|--------|------|----------|------|--------|--------|------|
| 1 | purchaseCode | 单据编码 | el-input | 是 | 自动生成 | 否(只读) | 格式: CGJH000XXX，后端自动生成 |
| 2 | businessType | 业务类型 | el-select | 是 | 原材料 | 是 | 下拉选择：原材料、零部件、装配件、五金件、包装物等 |
| 3 | needType | 用料需求 | el-select | 是 | 订单用料 | 是 | 订单用料/库存备料 |
| 4 | planCode | 计划单号 | el-input | 否 | - | 否(只读) | 引入生产计划后自动带入 |
| 5 | itemCode | 物料编码 | el-input | 否 | - | 否(只读) | 主产品物料编码，引入后自动带入 |
| 6 | purchaseDate | 单据日期 | el-date-picker | 是 | 当天日期 | 是 | 日期选择器 |
| 7 | operatorName | 操作员 | el-input | 是 | 当前登录用户 | 否(只读) | 自动填充当前登录用户名 |
| 8 | deptId | 业务部门 | el-select | 否 | - | 是 | 下拉选择部门 |
| 9 | salesOrderCode | 销售单号 | el-input | 否 | - | 否(只读) | 引入后自动带入 |
| 10 | itemName | 物料名称 | el-input | 否 | - | 否(只读) | 主产品物料名称 |
| 11 | status | 单据状态 | el-tag | - | 开立 | 否(只读) | 标签显示 |
| 12 | approverName | 审核员 | el-input | 否 | - | 否(只读) | 审核时自动填充 |
| 13 | operatorName2 | 业务人员 | el-select | 否 | - | 是 | 采购人员下拉选择 |
| 14 | salesUserName | 销售员 | el-input | 否 | - | 否(只读) | 引入后自动带入 |
| 15 | totalQuantity | 数量 | el-input | 否 | - | 否(只读) | 主产品计划数量，引入后自动带入 |
| 16 | businessStatus | 业务状态 | el-select | 是 | 正常 | 是 | 下拉选择 |
| 17 | approveDate | 审核日期 | el-date-picker | 否 | - | 否(只读) | 审核时自动填充 |
| 18 | remark | 备注信息 | el-input(textarea) | 否 | - | 是 | 多行文本 |
| 19 | deliveryDate | 订单交期 | el-date-picker | 否 | - | 否(只读) | 引入后自动带入 |

**业务类型选项:**

| 值 | 标签 |
|----|------|
| RAW_MATERIAL | 原材料 |
| PARTS | 零部件 |
| ASSEMBLY | 装配件 |
| FINISHED | 成品 |
| HARDWARE | 五金件 |
| PACKAGING | 包装物 |

**用料需求选项:**

| 值 | 标签 |
|----|------|
| 0 / ORDER_USE | 订单用料 |
| 1 / STOCK_USE | 库存备料 |

### 4.3 物料信息子表

物料信息子表位于表头下方，标题为「物料信息」。通过「引入」按钮从生产计划单引入缺料/未采物料。

| 序号 | 列标题 | 字段名 | 宽度 | 组件类型 | 必填 | 说明 |
|------|--------|--------|------|----------|------|------|
| 1 | 序号 | lineNo | 60px | 自动编号 | - | 行序号，自动递增 |
| 2 | 物料编码 | itemCode | 150px | el-input + 选择按钮 | 是 | 可点击「选择」弹窗选择物料；引入时自动填充 |
| 3 | 物料名称 | itemName | 200px | el-input | - | 只读，选择或引入后自动带入 |
| 4 | 型号规格 | specification | 150px | el-input | 否 | 只读，选择物料后自动带入 |
| 5 | 主计量 | unitName | 80px | el-input | - | 只读 |
| 6 | 需求日期 | demandDate | 120px | el-date-picker | 否 | 物料需求日期 |
| 7 | 需求数量 | demandQty | 100px | el-input-number | 是 | 引入时从生产计划/BOM 带入 |
| 8 | 可用量 | availableQty | 100px | el-input | - | 只读，库存可用量，可为负 |
| 9 | 采购数量 | purchaseQty | 100px | el-input-number | 是 | 可编辑，计划采购数量 |
| 10 | 已订数量 | orderedQty | 100px | el-input | - | 只读，已转采购订单数量 |
| 11 | 采购说明 | purchaseRemark | 120px | el-input | 否 | 行级采购说明 |
| 12 | 操作 | - | 100px | el-button | - | 复制、删除按钮 |

> **注意**: 「可用量」为负值时表示缺料，是引入物料的重要依据；「未采数量」= 需求数量 - 已采数量，引入弹窗中展示。

### 4.4 引入弹窗（选择生产计划单）

点击物料信息区域的「引入」按钮，打开生产计划单选择弹窗。

> 截图参考: `screenshot/生产计划-采购计划单新增-引入.png`；`screenshot/生产计划-采购计划单新增-引入弹窗展开.png`

| 属性 | 值 |
|------|------|
| 弹窗标题 | 选择生产计划单 |
| 弹窗宽度 | 1000px |
| 弹窗高度 | 自适应，最大70vh |
| 关闭方式 | 右上角 X 按钮、取消按钮 |
| 选择模式 | 可勾选生产计划行或展开后勾选物料明细行（多选） |

**弹窗搜索区:**

| 组件 | 说明 |
|------|------|
| 销售单号 | 模糊搜索销售订单号 |
| 物料编码 | 模糊搜索物料编码 |
| 物料名称 | 模糊搜索物料名称 |
| 开始日期、结束日期 | 日期范围筛选 |
| 搜索按钮 | primary 类型，执行搜索 |
| 查询所有按钮 | 清空条件并刷新列表 |

**弹窗列表结构（层级表格）:**

- **父行**（生产计划订单行）：销售员、销售单号、订单交期、计划单号、物料编码、物料名称、主计量、数量；左侧可展开/收起箭头。
- **子行**（物料明细，展开后显示）：物料编码、物料名称、需求数量、可用量、已采数量、未采数量、备注；每行有复选框。
- 选择可在父行勾选（整单物料引入）或子行勾选（按物料行引入）。底部「确定」将所选物料引入到表单「物料信息」子表。

**引入交互:**
- 勾选一条或多条生产计划行或物料明细行，点击「确定」按钮
- 引入后自动填充物料信息子表：物料编码、物料名称、型号规格、主计量、需求数量、可用量、采购数量（默认=未采数量或需求数量）
- 同时自动填充表头：计划单号、销售单号、物料编码、物料名称、数量、销售员、订单交期
- 引入后采购数量、需求日期、采购说明可修改

### 4.5 表头折叠

点击「收起」按钮，表头表单区域收起，仅显示物料信息；点击「展开」恢复。

---

## 5. 数据字段定义

### 5.1 采购计划单字段（erp_mp_purchase）

> 字段定义以 **《erp数据库设计-数据字典》** 与 **erp数据库设计-DDL.sql** 为准。ERP 中 erp_mp_purchase 为**扁平结构**：一条记录对应一个物料的采购计划，同一单据编码（purchase_code）下可有多条记录（不同物料）。单据视图需按 purchase_code 聚合展示。

| 字段名 | 数据库字段 | 类型 | 长度 | 必填 | 默认值 | 说明 |
|--------|-----------|------|------|------|--------|------|
| 采购计划ID | purchase_id | bigint | - | 是 | AUTO | 主键，自增 |
| 租户ID | tenant_id | varchar | 20 | 是 | - | 多租户隔离 |
| 采购计划编码 | purchase_code | varchar | 32 | 是 | 自动生成 | 格式: CGJH + 6位流水号 |
| 计划日期 | purchase_date | date | - | 是 | 当天 | 单据创建日期 |
| 单据状态 | status | varchar | 20 | 是 | DRAFT | 开立/审核/退回 |
| 需求方式 | need_type | int | - | 是 | 0 | 0=订单用料/1=库存备料 |
| 生产计划ID | plan_id | bigint | - | 否 | - | 外键 → erp_mp_plan |
| 生产计划编码 | plan_code | varchar | 32 | 否 | - | 冗余 |
| 销售订单ID | sales_order_id | bigint | - | 否 | - | 外键 → erp_sl_order |
| 销售订单编码 | sales_order_code | varchar | 32 | 否 | - | 跟单单号 |
| 订单交期 | delivery_date | date | - | 否 | - | 销售订单交货日期 |
| 物料ID | item_id | bigint | - | 是 | - | 外键 → erp_md_item |
| 物料编码 | item_code | varchar | 32 | 是 | - | 冗余 |
| 物料名称 | item_name | varchar | 100 | 是 | - | 冗余 |
| 型号规格 | specification | varchar | 200 | 否 | - | |
| 计量单位 | unit_name | varchar | 20 | 否 | - | |
| 采购数量 | purchase_qty | decimal | 18,4 | 是 | 0 | 采购计划数量 |
| 已订数量 | ordered_qty | decimal | 18,4 | 否 | 0 | 已转采购订单数量 |
| 备注 | remark | varchar | 500 | 否 | - | |
| 操作员ID | operator_id | bigint | - | 否 | - | |
| 操作员名称 | operator_name | varchar | 50 | 否 | - | |
| 审核员ID | approver_id | bigint | - | 否 | - | |
| 审核员名称 | approver_name | varchar | 50 | 否 | - | |
| 审核日期 | approve_date | datetime | - | 否 | - | |
| 删除标志 | del_flag | char | 1 | 是 | 0 | 0存在/1删除 |
| 创建者 | create_by | varchar | 64 | 否 | - | |
| 创建时间 | create_time | datetime | - | 否 | - | |
| 更新者 | update_by | varchar | 64 | 否 | - | |
| 更新时间 | update_time | datetime | - | 否 | - | |

> **说明**: 目标 ERP 表单中可能存在业务类型（business_type）、业务部门（dept_id）、业务人员等扩展字段，若后端有对应表结构可一并接入；否则可通过配置或扩展表实现。

### 5.2 与 MOM 系统表映射关系

根据 **《erp与mom数据库表映射对照表》** 与 **《MOM系统数据升级方案-销售采购生产计划》**：

| ERP表名 | MOM 镜像表 | 说明 |
|---------|------------|------|
| erp_mp_purchase | erp_mp_purchase | 采购计划审核后 1:1 同步到 MOM 镜像表；可关联 wm_arrival_notice.purchase_plan_code |

---

## 6. 按钮操作说明

### 6.1 明细视图工具栏按钮

#### 6.1.1 「单据」按钮（视图切换）

| 项目 | 说明 |
|------|------|
| 触发条件 | 始终可用 |
| 操作 | 切换到单据视图，重新加载列表数据 |
| 权限 | mp:purchase:list |
| 效果 | 搜索区域、工具栏、表格列全部切换为单据视图样式 |

#### 6.1.2 查询所有按钮

| 项目 | 说明 |
|------|------|
| 触发条件 | 始终可用 |
| 操作 | 清空所有搜索条件（包括物料分类快捷筛选），重新加载列表（pageNum=1） |
| 权限 | mp:purchase:list |

#### 6.1.3 新增按钮

| 项目 | 说明 |
|------|------|
| 触发条件 | 始终可用 |
| 操作 | 路由跳转到新增采购计划单页面 |
| 权限 | mp:purchase:add |
| 路由 | `/mp/plan/purchase/add` |

#### 6.1.4 导出按钮

| 项目 | 说明 |
|------|------|
| 触发条件 | 始终可用 |
| 操作 | 按当前搜索条件导出采购计划列表到Excel |
| 权限 | mp:purchase:export |

### 6.2 单据视图工具栏按钮

#### 6.2.1 「明细」按钮（视图切换）

| 项目 | 说明 |
|------|------|
| 触发条件 | 始终可用 |
| 操作 | 切换到明细视图，重新加载列表数据 |
| 权限 | mp:purchase:list |

#### 6.2.2 删除按钮（批量）

| 项目 | 说明 |
|------|------|
| 触发条件 | 勾选一条或多条记录 |
| 前置校验 | 仅开立(DRAFT)/退回(REJECTED)状态允许删除；已审核状态记录跳过并提示 |
| 操作 | 弹出确认框，确认后调用删除接口 |
| 权限 | mp:purchase:remove |

#### 6.2.3 审核按钮（批量）

| 项目 | 说明 |
|------|------|
| 触发条件 | 勾选一条或多条记录 |
| 前置校验 | 仅开立(DRAFT)状态允许审核；需至少有1条物料明细 |
| 操作 | 弹出确认框，确认后批量审核 |
| 权限 | mp:purchase:approve |
| 结果 | status → APPROVED，自动记录审核员和审核日期 |

#### 6.2.4 反审核按钮（批量）

| 项目 | 说明 |
|------|------|
| 触发条件 | 勾选一条或多条记录 |
| 前置校验 | 仅审核(APPROVED)状态允许反审核；需检查该采购计划未被下游引用 |
| 操作 | 弹出确认框，确认后批量反审核 |
| 权限 | mp:purchase:unapprove |
| 结果 | status → DRAFT，清空审核员和审核日期 |

### 6.3 单据视图操作列按钮

#### 6.3.1 查看按钮

| 项目 | 说明 |
|------|------|
| 显示条件 | 所有状态均显示 |
| 操作 | 路由跳转到采购计划查看页面（只读模式） |
| 权限 | mp:purchase:query |

#### 6.3.2 编辑按钮

| 项目 | 说明 |
|------|------|
| 显示条件 | 仅 status = DRAFT（开立）或 status = REJECTED（退回） |
| 操作 | 路由跳转到采购计划编辑页面 |
| 权限 | mp:purchase:edit |

#### 6.3.3 删除按钮（行操作）

| 项目 | 说明 |
|------|------|
| 显示条件 | 仅 status = DRAFT（开立）或 status = REJECTED（退回） |
| 操作 | 弹出确认框，确认后删除当前采购计划 |
| 权限 | mp:purchase:remove |

### 6.4 新增/编辑页按钮

#### 6.4.1 保存按钮

| 项目 | 说明 |
|------|------|
| 位置 | 页面右上角 |
| 颜色 | primary (蓝色) |
| 触发条件 | 表单校验通过 |
| 操作 | 保存采购计划表头和物料明细数据 |
| 成功提示 | "保存成功" |

#### 6.4.2 取消按钮

| 项目 | 说明 |
|------|------|
| 位置 | 保存按钮右侧 |
| 颜色 | default (灰色) |
| 操作 | 如有未保存修改，弹出确认框；返回列表页 |

#### 6.4.3 审核按钮

| 项目 | 说明 |
|------|------|
| 位置 | 取消按钮右侧 |
| 颜色 | success (绿色) |
| 显示条件 | 仅在编辑模式且 status = DRAFT 时显示 |
| 前置条件 | 需先保存，至少有1条物料明细 |
| 操作 | 调用审核接口，成功后页面变为只读 |

#### 6.4.4 反审核按钮

| 项目 | 说明 |
|------|------|
| 位置 | 审核按钮右侧 |
| 颜色 | warning (橙色) |
| 显示条件 | 仅在查看模式且 status = APPROVED 时显示 |
| 前置条件 | 该采购计划未被下游业务引用 |
| 操作 | 调用反审核接口，成功后页面变为可编辑 |

#### 6.4.5 收起/展开按钮

| 项目 | 说明 |
|------|------|
| 位置 | 页面右上角最右侧 |
| 操作 | 折叠/展开表头表单区域 |

#### 6.4.6 引入按钮（物料信息区）

| 项目 | 说明 |
|------|------|
| 位置 | 物料信息区域右上角 |
| 颜色 | warning (黄色) |
| 操作 | 打开「选择生产计划单」弹窗，引入缺料物料 |
| 显示条件 | 仅编辑/新增状态显示 |

#### 6.4.7 复制行按钮（子表操作列）

| 项目 | 说明 |
|------|------|
| 位置 | 每行操作列 |
| 颜色 | primary (蓝色文字) |
| 操作 | 复制当前行为新行，自动填充物料信息 |
| 显示条件 | 仅编辑状态显示 |

#### 6.4.8 删除行按钮（子表操作列）

| 项目 | 说明 |
|------|------|
| 位置 | 每行操作列 |
| 颜色 | danger (红色文字) |
| 操作 | 删除当前行，需二次确认 |
| 显示条件 | 仅编辑状态显示 |

---

## 7. 页面交互规则

### 7.1 列表页通用交互

| 序号 | 交互场景 | 交互规则 |
|------|----------|----------|
| 1 | 页面首次加载 | 默认以明细视图加载第1页数据，按单据日期降序排列 |
| 2 | 搜索操作 | 点击搜索按钮，重置 pageNum=1，保持当前 pageSize 不变 |
| 3 | 单据编码点击 | 点击单据编码列蓝色链接文字，路由跳转到查看页面 |
| 4 | 跟单编号点击 | 点击跟单编号列蓝色链接，可跳转到销售订单或相关页面 |
| 5 | 状态标签 | 用 el-tag 组件渲染：开立=info(灰), 审核=success(绿), 退回=warning(橙) |
| 6 | 空数据状态 | 列表无数据时显示空状态图标和"暂无数据"文字 |
| 7 | 视图切换 | 切换视图时保留搜索条件中的公共字段（单据编码、日期范围），清空视图特有字段 |

### 7.2 明细视图特有交互

| 序号 | 交互场景 | 交互规则 |
|------|----------|----------|
| 1 | 物料分类筛选 | 点击物料分类标签后，列表按该分类过滤 |
| 2 | 无批量操作 | 明细视图无复选框，不支持批量选择和批量操作 |
| 3 | 底部汇总 | 实时汇总当前页或当前查询结果的采购数量、已订数量 |

### 7.3 单据视图特有交互

| 序号 | 交互场景 | 交互规则 |
|------|----------|----------|
| 1 | 批量选择 | 复选框勾选多条记录后，批量操作按钮（删/审核/反审核）启用；未勾选时置灰 |
| 2 | 操作列动态显隐 | 根据 status 动态渲染操作按钮：审核状态显示查看+翻单；开立/退回状态显示查看+编辑+删除 |
| 3 | 单条删除 | 点击行操作列「删除」→ 确认弹窗 → 调用删除接口 → 刷新列表 |
| 4 | 批量删除 | 勾选记录 → 点击工具栏「删除」→ 校验状态 → 确认弹窗 → 调用删除接口 |
| 5 | 批量审核 | 勾选记录 → 点击工具栏「审核」→ 校验状态和明细 → 确认弹窗 → 调用审核接口 |
| 6 | 批量反审核 | 勾选记录 → 点击工具栏「反审核」→ 校验状态和下游引用 → 确认弹窗 → 调用反审核接口 |

### 7.4 新增/编辑页交互

| 序号 | 交互场景 | 交互规则 |
|------|----------|----------|
| 1 | 页面加载(新增) | 自动填充：单据编码(调接口获取)、单据日期(当天)、操作员(当前用户)、单据状态(开立)、业务状态(正常)、用料需求(订单用料)、业务类型(原材料) |
| 2 | 页面加载(编辑) | 调用详情接口加载采购计划表头和物料明细数据 |
| 3 | 引入物料 | 点击「引入」→ 打开选择生产计划单弹窗 → 勾选计划行或物料行 → 确定 → 自动填充表头和物料信息子表 |
| 4 | 选择物料 | 物料编码旁「选择」按钮 → 打开物料选择弹窗 → 选中后自动填充物料编码、物料名称、型号规格、主计量 |
| 5 | 复制行 | 点击行操作列「复制」→ 在末尾新增一行，复制当前行物料信息，采购数量、需求日期等可修改 |
| 6 | 删除行 | 点击行操作列「删除」→ 确认弹窗 → 确认后删除该行，重新编号 |
| 7 | 保存操作 | 前端表单校验 → 校验通过调用保存接口 → 成功提示 → 页面变为编辑模式 |
| 8 | 审核操作 | 需先保存 → 确认弹窗 → 调用审核接口 → 成功后页面变只读 |
| 9 | 反审核操作 | 确认弹窗 → 调用反审核接口 → 成功后页面变可编辑 |
| 10 | 表头折叠 | 点击「收起」→ 表头表单区域收起；点击「展开」→ 恢复 |
| 11 | 上一条/下一条 | 查看/编辑模式下，可点击「上一条」「下一条」在相邻采购计划间切换 |

### 7.5 表单校验规则

#### 表头校验

| 字段 | 规则 | 提示信息 |
|------|------|----------|
| purchaseCode | 必填 | 单据编码不能为空 |
| purchaseDate | 必填 | 单据日期不能为空 |
| businessType | 必填 | 业务类型不能为空 |
| needType | 必填 | 用料需求不能为空 |

#### 明细校验

| 字段 | 规则 | 提示信息 |
|------|------|----------|
| itemCode | 必填 | 请选择物料 |
| purchaseQty | 必填，min=0.0001 | 采购数量必须大于0 |
| demandQty | 必填，min=0 | 需求数量不能为负 |

#### 业务校验

| 规则 | 说明 |
|------|------|
| 至少一行明细 | 保存时至少要有一条物料明细 |
| 物料不重复 | 同一采购计划中同一物料不重复（可选，依业务需求） |

---

## 8. 接口调用说明

### 8.1 接口总览

| 序号 | 功能 | 方法 | 路径 | 说明 |
|------|------|------|------|------|
| 1 | 查询采购计划列表 | GET | /mp/plan/purchase/list | 分页查询采购计划列表 |
| 2 | 获取采购计划详情 | GET | /mp/plan/purchase/{purchaseId} | 获取单条采购计划（按单据聚合时需包含同 purchase_code 的多行） |
| 3 | 新增采购计划 | POST | /mp/plan/purchase | 创建新采购计划（表头+明细） |
| 4 | 修改采购计划 | PUT | /mp/plan/purchase | 更新采购计划表头+明细 |
| 5 | 删除采购计划 | DELETE | /mp/plan/purchase/{purchaseIds} | 批量删除采购计划 |
| 6 | 审核采购计划 | PUT | /mp/plan/purchase/approve/{purchaseId} | 审核单据 |
| 7 | 反审核采购计划 | PUT | /mp/plan/purchase/unapprove/{purchaseId} | 反审核单据 |
| 8 | 获取采购计划编码 | GET | /mp/plan/purchase/genCode | 生成新的采购计划编码 |
| 9 | 采购计划导出 | GET | /mp/plan/purchase/export | 导出采购计划列表 |
| 10 | 生成采购订单 | POST | /mp/plan/purchase/generate/{ids} | 根据采购计划生成采购订单 |
| 11 | 生产计划列表（引入用） | GET | /mp/plan/order/list | 选择生产计划单弹窗数据源 |
| 12 | 生产计划物料明细 | GET | /mp/plan/mbom/list 或类似 | 引入弹窗展开的物料明细（需求数量、可用量、未采数量） |
| 13 | 选择物料 | GET | /md/item/list | 物料选择弹窗数据 |

### 8.2 接口详细说明

#### 8.2.1 查询采购计划列表

```
GET /mp/plan/purchase/list
```

**请求参数（明细视图）:**

| 参数名 | 类型 | 必填 | 说明 |
|--------|------|------|------|
| pageNum | integer | 否 | 页码，默认1 |
| pageSize | integer | 否 | 每页数，默认100 |
| salesOrderCode | string | 否 | 销售订单号/跟单单号（模糊） |
| purchaseCode | string | 否 | 单据编码（模糊） |
| itemCode | string | 否 | 物料编码（模糊） |
| itemName | string | 否 | 物料名称（模糊） |
| itemTypeId | integer | 否 | 物料分类ID（快捷筛选） |
| beginDate | string | 否 | 开始日期 (yyyy-MM-dd) |
| endDate | string | 否 | 结束日期 (yyyy-MM-dd) |

**请求参数（单据视图）:**

在明细视图参数基础上，增加：

| 参数名 | 类型 | 必填 | 说明 |
|--------|------|------|------|
| status | string | 否 | 单据状态 |
| businessStatus | string | 否 | 业务状态 |

**响应说明:**

- 明细视图：返回扁平列表，每行一条物料记录。
- 单据视图：需按 purchase_code 聚合，每行一条单据（可从明细聚合或后端直接返回单据维度数据）。

**响应示例（明细）:**

```json
{
  "total": 63,
  "rows": [
    {
      "purchaseId": 31,
      "purchaseCode": "CGJH000031",
      "purchaseDate": "2026-02-06",
      "status": "APPROVED",
      "salesOrderCode": "XSDD000091",
      "deliveryDate": "2026-02-27",
      "itemId": 100,
      "itemCode": "1000000002",
      "itemName": "微星 MAG B760M MORTAR WIFI DDR5 主板",
      "unitName": "台",
      "purchaseQty": 60.00,
      "orderedQty": 0.00,
      "operatorName": "admin"
    }
  ],
  "code": 200,
  "msg": "查询成功"
}
```

#### 8.2.2 获取采购计划详情

```
GET /mp/plan/purchase/{purchaseId}
```

**说明**: 若 erp_mp_purchase 为扁平结构（一物料一行），则详情接口需按 purchase_code 聚合返回表头+多行物料明细。表头可取同 purchase_code 的首条记录的公共字段；明细为同 purchase_code 的所有行。

**路径参数:**

| 参数名 | 类型 | 必填 | 说明 |
|--------|------|------|------|
| purchaseId | integer | 是 | 采购计划ID（或使用 purchaseCode 查询） |

**响应示例:**

```json
{
  "code": 200,
  "msg": "操作成功",
  "data": {
    "purchaseCode": "CGJH000032",
    "purchaseDate": "2026-02-07",
    "status": "DRAFT",
    "businessType": "原材料",
    "needType": 0,
    "planCode": "SCJH000096",
    "salesOrderCode": "XSDD000081",
    "deliveryDate": "2026-01-23",
    "itemCode": "0103000002",
    "itemName": "组装电脑5400",
    "unitName": "台",
    "totalQuantity": 170,
    "operatorName": "admin",
    "salesUserName": "周桂东",
    "businessStatus": "NORMAL",
    "lines": [
      {
        "purchaseId": 101,
        "lineNo": 1,
        "itemCode": "1000000001",
        "itemName": "英特尔Core i5-14600KF",
        "specification": "",
        "unitName": "台",
        "demandDate": "2026-02-18",
        "demandQty": 10.00,
        "availableQty": -30.00,
        "purchaseQty": 170.00,
        "orderedQty": 0.00,
        "purchaseRemark": ""
      }
    ]
  }
}
```

#### 8.2.3 新增采购计划

```
POST /mp/plan/purchase
```

**请求体:**

```json
{
  "purchaseCode": "CGJH000033",
  "purchaseDate": "2026-02-07",
  "businessType": "RAW_MATERIAL",
  "needType": 0,
  "planId": 96,
  "planCode": "SCJH000096",
  "salesOrderId": 81,
  "salesOrderCode": "XSDD000081",
  "deliveryDate": "2026-01-23",
  "businessStatus": "NORMAL",
  "remark": "",
  "lines": [
    {
      "lineNo": 1,
      "itemId": 201,
      "itemCode": "1000000001",
      "itemName": "英特尔Core i5-14600KF",
      "unitName": "台",
      "demandQty": 170.00,
      "purchaseQty": 170.00,
      "demandDate": "2026-02-18",
      "purchaseRemark": ""
    }
  ]
}
```

**说明**: 若后端为扁平表，可将 lines 分别写入 erp_mp_purchase，共用同一 purchase_code。

#### 8.2.4 修改采购计划

```
PUT /mp/plan/purchase
```

**请求体:** 同新增，但包含 `purchaseId` 或 `purchaseCode` 及各明细行 ID。采用全量提交策略：无 lineId 的行→新增，有 lineId 的行→修改，请求中不存在的行→删除。

#### 8.2.5 删除采购计划

```
DELETE /mp/plan/purchase/{purchaseIds}
```

**路径参数:**

| 参数名 | 类型 | 必填 | 说明 |
|--------|------|------|------|
| purchaseIds | string | 是 | 采购计划ID，多个用逗号分隔；或按 purchaseCode 删除同单据下所有行 |

**业务规则:** 仅允许删除开立(DRAFT)/退回(REJECTED)状态；逻辑删除（del_flag=1）。

#### 8.2.6 审核采购计划

```
PUT /mp/plan/purchase/approve/{purchaseId}
```

**业务规则:** 仅开立(DRAFT)状态允许审核；至少有一条物料明细；审核后自动填充审核员和审核日期；status→APPROVED。

#### 8.2.7 反审核采购计划

```
PUT /mp/plan/purchase/unapprove/{purchaseId}
```

**业务规则:** 仅审核(APPROVED)状态允许反审核；需校验该采购计划未被采购订单等下游引用；反审核后清空审核员和审核日期；status→DRAFT。

#### 8.2.8 生成采购订单

```
POST /mp/plan/purchase/generate/{ids}
```

**说明:** 根据选中的采购计划生成采购订单，将采购计划中的物料及数量写入采购订单。

---

## 9. 状态流转

### 9.1 单据状态流转图

```
                    ┌──────────────┐
                    │              │
         ┌─────────►  开立(DRAFT)  ◄──────────┐
         │          │              │           │
         │          └──────┬───────┘           │
         │                 │                   │
         │            [审核操作]            [反审核操作]
         │                 │                   │
         │                 ▼                   │
         │          ┌──────────────┐           │
         │          │              │           │
   [反审核未通过]    │ 审核(APPROVED)├───────────┘
         │          │              │
         │          └──────┬───────┘
         │                 │
         │                 ▼
         │          ┌──────────────┐
         └──────────┤              │
                    │  退回(REJECTED)│
                    │              │
                    └──────────────┘
```

### 9.2 状态说明

| 状态 | 编码 | 可执行操作 | 说明 |
|------|------|-----------|------|
| 开立 | DRAFT | 编辑、保存、删除、审核 | 初始状态，可自由编辑 |
| 审核 | APPROVED | 查看、反审核、翻单、生成采购订单 | 生效状态，不可编辑 |
| 退回 | REJECTED | 编辑、保存、审核 | 退回后可重新编辑提交 |

---

## 10. 业务规则

### 10.1 编码规则

| 规则 | 说明 |
|------|------|
| 前缀 | CGJH |
| 流水号 | 6位数字，不足补零 |
| 格式 | CGJH000001, CGJH000002, ... |
| 生成方式 | 后端自动生成，不可手动修改 |

### 10.2 引入规则

| 规则 | 说明 |
|------|------|
| 数据来源 | 生产计划单中已BOM运算的物料清单（MBOM） |
| 筛选条件 | 供应方式为采购的物料；或可用量为负、未采数量大于0的物料 |
| 引入层级 | 可按生产计划行（整单）引入，或展开后按物料明细行引入 |
| 数量逻辑 | 引入时采购数量默认=未采数量或需求数量，可修改 |

### 10.3 审核规则

| 规则 | 说明 |
|------|------|
| 前置条件 | 至少有一条物料明细；采购数量>0 |
| 审核后 | 可生成采购订单；不可编辑 |
| 反审核 | 需校验未被采购订单引用 |

### 10.4 下游引用规则

| 引用场景 | 影响 |
|----------|------|
| 被采购订单引用 | 不允许反审核、不允许删除 |
| 未被任何引用 | 可以反审核、可以删除（仅 DRAFT/REJECTED 状态） |

---

## 11. 前端组件设计

### 11.1 文件结构

```
src/
├── api/
│   └── mp/
│       └── purchase.js                    # 采购计划相关API接口定义
├── views/
│   └── mp/
│       └── purchase/
│           ├── index.vue                  # 采购计划列表页（含明细视图+单据视图切换）
│           ├── add.vue                    # 采购计划新增页
│           ├── edit.vue                   # 采购计划编辑页
│           ├── view.vue                   # 采购计划查看页
│           └── components/
│               ├── DetailViewTable.vue    # 明细视图表格组件
│               ├── DocumentViewTable.vue  # 单据视图表格组件
│               ├── PurchaseHeaderForm.vue # 表头表单组件
│               ├── PurchaseLineTable.vue  # 物料明细表格组件（可编辑子表）
│               └── PlanSelectDialog.vue   # 选择生产计划单弹窗组件
```

### 11.2 路由配置

```javascript
// src/router/modules/mp.js
{
  path: '/mp',
  component: Layout,
  redirect: '/mp/plan/purchase',
  name: 'Mp',
  meta: { title: '生产计划', icon: 'el-icon-document' },
  children: [
    {
      path: 'plan/purchase',
      name: 'PurchasePlan',
      component: () => import('@/views/mp/purchase/index'),
      meta: { title: '采购计划单', icon: 'el-icon-shopping-cart-2' }
    },
    {
      path: 'plan/purchase/add',
      name: 'PurchasePlanAdd',
      component: () => import('@/views/mp/purchase/add'),
      meta: { title: '新增采购计划', activeMenu: '/mp/plan/purchase' },
      hidden: true
    },
    {
      path: 'plan/purchase/edit/:purchaseId',
      name: 'PurchasePlanEdit',
      component: () => import('@/views/mp/purchase/edit'),
      meta: { title: '编辑采购计划', activeMenu: '/mp/plan/purchase' },
      hidden: true
    },
    {
      path: 'plan/purchase/view/:purchaseId',
      name: 'PurchasePlanView',
      component: () => import('@/views/mp/purchase/view'),
      meta: { title: '查看采购计划', activeMenu: '/mp/plan/purchase' },
      hidden: true
    }
  ]
}
```

---

## 12. 数据模型

### 12.1 表关系图

```
                    ┌──────────────────────────┐
                    │     erp_mp_plan          │
                    │   (生产计划单)            │
                    └──────────┬───────────────┘
                               │ 1:N
                               ▼
┌──────────────────────────┐  ┌──────────────────────────┐
│   erp_mp_mbom / _line    │  │   erp_mp_purchase        │
│   (物料清单-采购件)       │  │   (采购计划单)            │
│                          │  │                          │
│ supply_type=PURCHASE ────┼──► plan_id (FK)             │
│ item_id, quantity        │  │ purchase_code            │
└──────────────────────────┘  │ item_id, purchase_qty    │
                              │ ordered_qty              │
                              └──────────────────────────┘
```

### 12.2 MOM 系统表映射

| ERP表名 | MOM表名 | 说明 |
|---------|---------|------|
| erp_mp_purchase | erp_mp_purchase | 采购计划单（MOM 镜像表，1:1） |

### 12.3 数据同步方向

```
ERP (erp_mp_purchase) ──同步──► MOM (erp_mp_purchase)
```

- 同步方向: ERP → MOM（单向同步）
- 同步频率: 实时/准实时
- 同步触发: 采购计划审核后触发数据同步

---

## 附录A: 状态标签颜色映射

```javascript
// 状态标签类型映射
const statusTagMap = {
  'DRAFT': 'info',       // 灰色 - 开立
  'APPROVED': 'success', // 绿色 - 审核
  'REJECTED': 'warning'  // 橙色 - 退回
}

// 状态标签文字映射
const statusLabelMap = {
  'DRAFT': '开立',
  'APPROVED': '审核',
  'REJECTED': '退回'
}

// 业务状态映射
const businessStatusMap = {
  'NORMAL': '正常',
  'PAUSE': '暂停',
  'CANCEL': '取消',
  'COMPLETED': '完成'
}
```

---

## 附录B: 权限标识汇总

| 权限标识 | 说明 | 对应操作 | 所属视图 |
|----------|------|----------|----------|
| mp:purchase:list | 列表查询 | 查看采购计划列表、视图切换 | 通用 |
| mp:purchase:query | 详情查询 | 查看采购计划详情 | 单据视图 |
| mp:purchase:add | 新增 | 新增采购计划 | 通用 |
| mp:purchase:edit | 编辑 | 修改采购计划 | 单据视图 |
| mp:purchase:remove | 删除 | 删除采购计划 | 单据视图 |
| mp:purchase:approve | 审核 | 审核采购计划 | 单据视图 |
| mp:purchase:unapprove | 反审核 | 反审核采购计划 | 单据视图 |
| mp:purchase:export | 导出 | 导出采购计划列表 | 明细视图 |
| mp:purchase:copy | 翻单 | 复制采购计划生成新单据 | 单据视图 |
| mp:purchase:generate | 生成采购订单 | 根据采购计划生成采购订单 | 单据视图 |

---

## 附录C: 参考截图说明

| 截图文件 | 说明 |
|----------|------|
| `screenshot/生产计划-采购计划单-列表.png` | 列表页默认视图，含物料分类快捷筛选 |
| `screenshot/生产计划-采购计划单列表-明细视图.png` | 明细视图：序号列、跟单编号、订单交期、单据编码、物料信息、采购数量、已订数量、底部汇总 |
| `screenshot/生产计划-采购计划单列表-单据视图.png` | 单据视图：复选框列、单据维度、操作列（查看/编辑/删除） |
| `screenshot/生产计划-采购计划单新增-初始化页.png` | 新增页空白表单，表头字段布局和物料信息空表 |
| `screenshot/生产计划-采购计划单新增-引入.png` | 选择生产计划单弹窗：搜索区、计划列表、分页 |
| `screenshot/生产计划-采购计划单新增-引入弹窗展开.png` | 引入弹窗展开：物料明细（需求数量、可用量、已采数量、未采数量） |
| `screenshot/生产计划-采购计划单新增-保存后.png` | 引入并保存后的表单：表头与物料信息已填充 |
| `screenshot/生产计划-采购计划单表单-查看编辑状态.png` | 查看/编辑页：物料信息子表含复制、删除操作 |

---

## 修订历史

| 版本 | 日期 | 修订内容 | 修订人 |
|------|------|----------|--------|
| 1.0.0 | 2026-02-07 | 初始版本，完整页面设计开发说明 | System |
| 1.1.0 | 2026-02-07 | 新增「0. 业务流程总览」：端到端流程图、采购计划单内部流程、上下游单据关系、用料需求方式、关键数量逻辑；修正来源页面 URL；增加 Playwright 采集脚本说明 | System |
| 1.2.0 | 2026-02-07 | 新增 0.7 页面交互逻辑分析、0.8 典型操作路径、0.9 MCP Playwright 采集与验证说明 | System |
| 1.3.0 | 2026-02-07 | 执行 Playwright 采集脚本（登录超时/404 环境限制）；改进采集脚本超时；完善 0.9 节 MCP 采集步骤；补充 URL 参数 needType | System |
| 1.4.0 | 2026-02-07 | 确认登录页含验证码；增加采集脚本 --manual 手动登录模式；采集得到 login-page-debug.png 验证 | System |
| 1.5.0 | 2026-02-07 | 新增 Python Playwright 采集脚本 crawl_purchase_plan.py；完善 0.9 节采集说明 | System |
| 1.6.0 | 2026-02-07 | Python 脚本采集执行成功；新增 0.10 订单监控中心与采购阶段；脚本优先直接导航至采购计划页 | System |
| 1.7.0 | 2026-02-07 | 新增 0.11 Playwright 采集实际发现与业务流程映射；0.12 从订单监控中心到采购计划单的典型路径；完善 0.9 采集说明与 0.10 页面元素 | System |
| 1.8.0 | 2026-02-07 | **Playwright 6 轮深度诊断**：确认根因为 Vue 组件 chunk 文件加载超时（ChunkLoadError: chunk-7adc2ee3.js）；确认技术架构 Vue2+Vuex+VueRouter2+ElementUI；更新 0.9 节完整采集结论与技术架构表；标注文档数据来源 | System |
| **2.1.0** | **2026-02-07** | **V5 Playwright 全面按钮操作采集成功**：自动操作 13 个按钮/交互，保存 9 张截图至 `screenshot/采购计划单-*.png`；更新 0.7 节增加 ✅ 验证标记和实际采集数据（按钮列表、表头列、行数等）；更新 0.9 节采集结论；新增截图参考表（V5 自动采集列） | System |
| 2.0.0 | 2026-02-07 | **crawl_v4.py 采集成功**：通过 Vuex tagsView + 标签点击成功导航；采集明细视图（11列70行）、单据视图（9列31行）、新增页（6按钮12列子表）、引入弹窗（8列父行+7列子行展开），全部与文档 3/4 节吻合；更新 0.11 为完整采集对照表；新增 0.12 采集关键发现、0.13 典型路径 | System |