采购计划单 - 页面设计开发说明文档
版本: 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数据库表映射对照表；MOM系统数据升级方案-销售采购生产计划；生产计划.md；采购管理.md
目录
- 业务流程总览
- 页面概述
- 页面结构
- 列表页设计
- 新增/编辑页设计
- 数据字段定义
- 按钮操作说明
- 页面交互规则
- 接口调用说明
- 状态流转
- 业务规则
- 前端组件设计
- 数据模型
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）中的采购需求，向下游驱动采购订单的生成与执行。
0.2 端到端业务流程图
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 采集关键发现
- 明细视图的物料分类快捷标签在实际页面中显示为：成品、直销类、代销类、原材料、五金件、包装物、加工成品、电脑组装件、测试料、芯片、56789 等（与文档 3.1.3 一致）
- 单据视图操作列统一显示 查看(绿)、编辑(蓝)、删除(红)，不区分状态显示（与文档 3.2.4 中"按状态显隐"略有差异 — 实际系统可能前端已根据状态控制但 DOM 仍渲染）
- 引入弹窗展开的可用量实测值为
-200.00，验证了可用量可为负数（表示缺料 200 件）
- 新增页表头字段在 Playwright 采集中因非
.el-form-item 标准结构未能采集（formFields=[]），但截图 v4-add.png 确认了 4.2 节 19 个字段的存在
- 导航方式：该 ERP 为 Vue2 SPA，菜单点击通过 Vuex tagsView 创建顶部标签，再由标签点击触发路由切换。直接
page.goto() 会因 SPA 路由守卫失败返回 404
0.13 从订单监控中心到采购计划单的典型路径
2. 页面结构
2.1 整体布局
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.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 查询采购计划列表
请求参数（明细视图）:
| 参数名 |
类型 |
必填 |
说明 |
| 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 聚合，每行一条单据（可从明细聚合或后端直接返回单据维度数据）。
响应示例（明细）:
8.2.2 获取采购计划详情
说明: 若 erp_mp_purchase 为扁平结构（一物料一行），则详情接口需按 purchase_code 聚合返回表头+多行物料明细。表头可取同 purchase_code 的首条记录的公共字段；明细为同 purchase_code 的所有行。
路径参数:
| 参数名 |
类型 |
必填 |
说明 |
| purchaseId |
integer |
是 |
采购计划ID（或使用 purchaseCode 查询） |
响应示例:
8.2.3 新增采购计划
请求体:
说明: 若后端为扁平表，可将 lines 分别写入 erp_mp_purchase，共用同一 purchase_code。
8.2.4 修改采购计划
请求体: 同新增，但包含 purchaseId 或 purchaseCode 及各明细行 ID。采用全量提交策略：无 lineId 的行→新增，有 lineId 的行→修改，请求中不存在的行→删除。
8.2.5 删除采购计划
路径参数:
| 参数名 |
类型 |
必填 |
说明 |
| purchaseIds |
string |
是 |
采购计划ID，多个用逗号分隔；或按 purchaseCode 删除同单据下所有行 |
业务规则: 仅允许删除开立(DRAFT)/退回(REJECTED)状态；逻辑删除（del_flag=1）。
8.2.6 审核采购计划
业务规则: 仅开立(DRAFT)状态允许审核；至少有一条物料明细；审核后自动填充审核员和审核日期；status→APPROVED。
8.2.7 反审核采购计划
业务规则: 仅审核(APPROVED)状态允许反审核；需校验该采购计划未被采购订单等下游引用；反审核后清空审核员和审核日期；status→DRAFT。
8.2.8 生成采购订单
说明: 根据选中的采购计划生成采购订单，将采购计划中的物料及数量写入采购订单。
9. 状态流转
9.1 单据状态流转图
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 文件结构
11.2 路由配置
12. 数据模型
12.1 表关系图
12.2 MOM 系统表映射
| ERP表名 |
MOM表名 |
说明 |
| erp_mp_purchase |
erp_mp_purchase |
采购计划单（MOM 镜像表，1:1） |
12.3 数据同步方向
- 同步方向: ERP → MOM（单向同步）
- 同步频率: 实时/准实时
- 同步触发: 采购计划审核后触发数据同步
附录A: 状态标签颜色映射
附录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 |
