Files
my-mom-system/prd/mom系统采购计划单-页面开发说明文档.md
panchengyong c28ada5050 commit content
2026-03-06 02:02:59 +08:00

1521 lines
79 KiB
Markdown
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
# 采购计划单 - 页面设计开发说明文档
> 版本: 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 |