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

59 KiB
Raw Blame History

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

版本: 2.3.0
创建日期: 2026-02-07
更新日期: 2026-02-13
来源系统: 升阳云ERP 演示系统
来源页面: https://demo.rsun.vip/po/purchase/order/plan?needType=0&workType=&fmConfig=010301,020301
所属模块: 采购管理 > 采购订单
前端路由: /po/purchase/order/plan
采集脚本: python3 scripts/crawl_purchase_order.py(列表+按钮采集);python3 scripts/crawl_po_form_deep.py(表单深度采集);共 19 张截图
关联文档: erp数据库设计-数据字典采购管理.md采购管理-前端开发规范.mdmom系统采购计划单-页面开发说明文档


目录

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

0. 业务流程总览

0.1 采购订单在 ERP 中的定位

采购订单是采购计划→采购执行→到货入库链条中的核心执行单据,承接采购计划单的物料需求,向供应商下达采购指令,下游驱动到货、入库、发票及退货。

┌──────────────┐     ┌──────────────┐     ┌──────────────┐     ┌──────────────┐
│  销售订单    │────►│ 生产计划单   │────►│ 采购计划单   │────►│ ★ 采购订单   │
│              │     │ + BOM运算    │     │ (物料需求)   │     │ (执行采购)   │
└──────────────┘     └──────────────┘     └──────────────┘     └──────┬───────┘
                                                                      │
                                          ┌───────────────────────────┼───────────────────────┐
                                          ▼                           ▼                       ▼
                                   ┌──────────────┐          ┌──────────────┐         ┌──────────────┐
                                   │ 采购到货单   │          │ 采购发票     │         │ 采购退货单   │
                                   │ (到货登记)   │          │ (财务核算)   │         │ (退货出库)   │
                                   └──────┬───────┘          └──────────────┘         └──────────────┘
                                          │
                                          ▼
                                   ┌──────────────┐
                                   │ 采购入库单   │
                                   │ (库存增加)   │
                                   └──────────────┘

0.2 端到端业务流程

 采购计划单(已审核)
       │ 引入(采购计划单明细)
       ▼
 ┌─────────────────┐     选择供应商      ┌─────────────────┐
 │  ★ 采购订单      │ ◄───────────────── │ 原料供应商档案   │
 │  - 表头+供应商   │                    │                 │
 │  - 物料明细子表  │                    └─────────────────┘
 │  - 数量/单价/金额│
 └────────┬────────┘
          │ 保存 → 审核
          ▼
 ┌─────────────────┐     引入采购订单    ┌─────────────────┐
 │  采购到货单      │ ◄───────────────── │ 采购订单(已审核) │
 │  - 到货数量      │                    └─────────────────┘
 └────────┬────────┘
          │ 到货 → 入库
          ▼
 ┌─────────────────┐
 │  采购入库单      │ ──► 库存增加
 └─────────────────┘

0.3 采购订单内部业务流程Playwright 实际验证

阶段 操作 触发条件 结果 验证
1. 新建 点击「新增」 始终可用 打开新增页,编码自动生成,状态=开立,按钮=[保存/取消/审核/反审核/收起/引入/新增物料]
2. 选择供应商 点击「选择」或「供方」旁按钮 新增/编辑页 打开供应商选择弹窗 截图确认
3. 引入 点击「引入」→ 弹窗「采购计划单明细」→ 勾选 → 确定 新增/编辑状态 物料明细子表填充:跟单编号、计划单号、物料、数量、需求日期
4. 新增物料 点击「新增物料」 新增/编辑状态 子表末尾新增空行;可通过「选择物料」弹窗选料并填数量/单价,详见 4.3.1
5. 保存 点击「保存」 至少 1 条物料明细 数据持久化 -
6. 审核 点击「审核」或批量审核 开立状态,已保存 状态→审核,记录审核员/日期;审核后可生成到货单 -
7. 反审核 点击「反审核」 审核状态,无下游引用 状态→开立 -
8. 撤回 编辑页点击「撤回」 编辑状态 撤回未保存修改 按钮确认
9. 打印 查看页点击「打印」 查看页 打印预览 按钮确认
10. 删除 操作列「删除」或批量删除 开立/退回状态 逻辑删除

0.4 上下游单据关系

上游单据 关联字段 说明
采购计划单 plan_code, plan_line_id 引入弹窗「采购计划单明细」
销售订单 track_code (跟单编号) 通过采购计划间接关联
供应商 supplier_id, supplier_name 选择供应商弹窗
下游单据 关联字段 说明
采购到货单 po_order_code, order_id 到货单引入采购订单
采购发票 order_code 发票关联采购订单
采购退货单 order_code 退货关联采购订单
采购入库单 - 通过到货单间接关联

0.5 关键数量与金额逻辑

字段 含义 计算/来源
数量 (quantity) 采购数量 引入时从计划带入,可手动修改
单价 (unit_price) 采购单价 手工输入或从市场价格表带入
金额 (amount) 行金额 数量 × 单价,自动计算
到货数量 (arrived_quantity) 已到货数量 从到货单回写,只读
总数量 (total_quantity) 订单总数量 明细行数量合计
总金额 (total_amount) 订单总金额 明细行金额合计

1. 页面概述

1.1 功能说明

采购订单页面用于管理企业的采购订单。采购订单是向供应商正式下达采购指令的核心单据,支持从采购计划引入物料需求或手工新增物料行,关联供应商后形成完整的采购订单。审核后作为到货、入库、发票的上游依据。

1.2 业务场景

  • 引入采购计划: 从已审核的采购计划单引入物料明细(跟单编号、计划单号、物料、需求数量、需求日期等)
  • 手工新增物料: 通过「+ 新增物料」按钮在子表末尾增加空行,再通过「选择物料」弹窗选择物料并填写数量、单价等(详见 4.3.1 手工新增物料
  • 选择供应商: 通过供应商选择弹窗关联供应商
  • 价格管理: 录入采购单价,自动计算金额(数量 × 单价)
  • 审核流程: 采购订单审核后不可编辑,可反审核
  • 到货跟踪: 跟踪每个物料的到货数量,订单数量 vs 到货数量

1.3 URL路由参数

参数名 类型 说明
needType integer 0=订单用料默认1=备库用料
workType string 工作类型
fmConfig string 表单配置编码,如 010301,020301

1.4 页面截图参考Playwright V1 自动采集)

截图文件 说明 来源
screenshot/采购订单-明细视图-列表.png 明细视图列表12列/83行 V1 采集
screenshot/采购订单-单据视图-列表.png 单据视图列表9列/44行操作列=查看/编辑/删除 V1 采集
screenshot/采购订单-导出确认弹窗.png 导出按钮弹出确认框 V1 采集
screenshot/采购订单-新增页-初始化.png 新增页空白表单 V1 采集
screenshot/采购订单-新增页-表头详情.png 新增页表头:单据编码/业务类型/操作员/供方/备注 + 14列子表 V2 深度采集
screenshot/采购订单-引入弹窗-采购计划单明细.png 引入弹窗10列搜索4项11行计划明细 V1 采集
screenshot/采购订单-引入弹窗-详情.png 引入弹窗详情:首行数据可见 V2 深度采集
screenshot/采购订单-选择供应商弹窗.png 选择供应商弹窗7列/79行/搜索+快速添加 V2 深度采集
screenshot/采购订单-新增页-新增物料后.png 新增物料后子表增加空行 V1 采集
screenshot/采购订单-新增页-新增物料行.png 新增物料行(含合计行) V2 深度采集
screenshot/采购订单-新增页-可新增物料.png 手工新增物料:物料信息表含「引入」「+ 新增物料」;已填行与空行(跟单/计划单号「手工单据」或「添加物料」);物料编码列「选择」打开物料选择 补充
screenshot/采购订单-新增页-点击添加物料.png 选择物料弹窗:分类树、物料编码/物料名称搜索、查询所有/连选;物料列表「选择」「查看」;背后可见「+ 新增物料」 补充
screenshot/采购订单-新增页-表头收起.png 表头折叠效果 V1 采集
screenshot/采购订单-查看页.png 查看页只读7个按钮 V1 采集
screenshot/采购订单-查看页-表头详情.png 查看页CGDD0000472行物料含单价/金额/合计行 V2 深度采集
screenshot/采购订单-查看页-上一条.png 上一条按钮:切换到相邻记录 V2 深度采集
screenshot/采购订单-查看页转编辑.png 查看→编辑:按钮变=保存/撤回/审核/反审核/操作/收起/引入/新增物料 V2 深度采集
screenshot/采购订单-编辑页.png 编辑页8个按钮含撤回 V1 采集

2. 页面结构

2.1 整体布局

┌─────────────────────────────────────────────────────────────────┐
│                     顶部导航栏 (64px)                            │
├────────┬────────────────────────────────────────────────────────┤
│ 左侧   │  面包屑: 首页 / 采购管理 / 采购订单                      │
│ 菜单   │  ┌────────────────────────────────────────────────┐    │
│ (200px)│  │ Tab标签: ● 采购订单                             │    │
│        │  ├────────────────────────────────────────────────┤    │
│ 采购管 │  │ 查询区域 (搜索条件)                              │    │
│ 理     │  ├────────────────────────────────────────────────┤    │
│ ├原料  │  │ 工具栏 (操作按钮) + 料品分类快捷标签              │    │
│  供应  │  ├────────────────────────────────────────────────┤    │
│  商    │  │ 数据表格                                        │    │
│ ├采购  │  ├────────────────────────────────────────────────┤    │
│  订单★│  │ 底部统计 (订单数量/到货数量汇总) + 分页组件       │    │
│ ├到货  │  └────────────────────────────────────────────────┘    │
│  单    │                                                       │
├────────┴────────────────────────────────────────────────────────┤

2.2 页面模式

模式 说明 入口
列表页 - 明细视图 默认视图,以物料维度展示,含跟单编号/供应商/物料/数量/单价/到货 菜单点击「采购订单」
列表页 - 单据视图 以单据维度展示,含批量操作 明细视图点击「单据」
新增页 新建采购订单 列表页点击「新增」
编辑页 修改采购订单(仅开立/退回状态) 单据视图「编辑」
查看页 只读查看详情 单据视图「查看」

2.3 列表页双视图对比Playwright 采集数据)

对比项 明细视图(默认) 单据视图
切换按钮 「单据」 「明细」
复选框列
序号列
搜索条件 跟单编号、单据编码、供应商、物料编码、物料名称、日期范围 单据编码、单据状态、业务状态、日期范围
工具栏按钮 搜索、单据、查询所有、新增、导出 搜索、明细、查询所有、新增、删除、审核、反审核
数据列 序号/跟单编号/计划编号/单据编码/单据状态/供应商/物料名称/物料编码/需求日期/采购数量/到货数量/单据日期 单据编码/单据日期/单据状态/业务类型/采购部门/采购人员/业务状态/审核日期/操作
操作列 查看、编辑、删除
数据行数 83行物料维度 44行单据维度
底部统计 订单数量4,543,466 到货数量:汇总 订单数量汇总

3. 列表页设计

3.1 明细视图(默认视图)

截图: screenshot/采购订单-明细视图-列表.png

3.1.1 搜索条件区域

序号 字段名 标签 组件类型 宽度 说明
1 trackCode 跟单编号 el-input 140px 模糊搜索
2 orderCode 单据编码 el-input 140px 模糊搜索
3 supplierName 供应商 el-input 140px 模糊搜索
4 itemCode 物料编码 el-input 140px 模糊搜索
5 itemName 物料名称 el-input 140px 模糊搜索
6 startDate 开始日期 el-date-picker 140px 日期范围起
7 endDate 结束日期 el-date-picker 140px 日期范围止

3.1.2 工具栏按钮( Playwright 采集确认)

序号 按钮名称 类型 权限标识 说明
1 搜索 primary po:order:list 按搜索条件查询
2 单据 primary po:order:list 切换到单据视图
3 查询所有 default po:order:list 重置搜索条件并查询所有
4 新增 success po:order:add 打开新增采购订单页面
5 导出 default po:order:export 导出到Excel

3.1.3 数据表格列定义( 采集确认 12 列)

序号 列标题 字段名 宽度 对齐 说明
1 序号 - 60px center 自动编号
2 跟单编号 trackCode 140px left 销售订单号,蓝色链接
3 计划编号 planCode 140px left 采购计划编码
4 单据编码 orderCode 140px left 采购订单编码,蓝色链接可点击
5 单据状态 status 80px center 状态标签(开立/审核/关闭)
6 供应商 supplierName 200px left 供应商名称
7 物料名称 itemName 200px left 物料名称
8 物料编码 itemCode 120px left 物料编码
9 需求日期 needDate 100px center 需求到货日期
10 采购数量 quantity 100px right 采购数量
11 到货数量 arrivedQuantity 100px right 已到货数量
12 单据日期 orderDate 100px center 订单创建日期

3.1.4 底部统计

组件 说明
订单数量 当前查询结果采购数量合计(如 4,543,466
到货数量 当前查询结果已到货数量合计

3.2 单据视图

截图: screenshot/采购订单-单据视图-列表.png

3.2.1 搜索条件区域

序号 字段名 标签 组件类型 说明
1 orderCode 单据编码 el-input 模糊搜索
2 status 单据状态 el-select 开立/审核/关闭
3 businessStatus 业务状态 el-select 正常/完成/暂停/取消
4 startDate 开始日期 el-date-picker 日期范围起
5 endDate 结束日期 el-date-picker 日期范围止

3.2.2 工具栏按钮( 采集确认 7 个)

序号 按钮名称 类型 权限标识 说明
1 搜索 primary po:order:list 按条件搜索
2 明细 primary po:order:list 切换到明细视图
3 查询所有 default po:order:list 重置并查询
4 新增 success po:order:add 新增采购订单
5 删除 danger po:order:remove 批量删除(需勾选)
6 审核 primary po:order:approve 批量审核(需勾选)
7 反审核 default po:order:unapprove 批量反审核(需勾选)

3.2.3 数据表格列定义( 采集确认 9 列)

序号 列标题 字段名 宽度 说明
0 (复选框) - 55px 批量操作
1 单据编码 orderCode 140px 可点击查看详情
2 单据日期 orderDate 120px 默认降序
3 单据状态 status 80px 颜色标签
4 业务类型 businessType 100px 原材料/零部件等
5 采购部门 deptName 100px
6 采购人员 userName 100px
7 业务状态 businessStatus 80px 正常/完成
8 审核日期 approveDate 120px
9 操作 - 160px 查看/编辑/删除

3.2.4 操作列按钮( 采集确认)

按钮 颜色 显示条件 说明
查看 success 所有状态 打开查看页(只读)
编辑 primary 开立/退回 打开编辑页
删除 danger 开立/退回 二次确认后删除

3.3 分页组件

属性
默认每页条数 100
可选 100, 200, 500, 1000
布局 total, sizes, prev, pager, next, jumper

4. 新增/编辑页设计

4.1 页面布局

截图: screenshot/采购订单-新增页-初始化.png

┌──────────────────────────────────────────────────────────────┐
│ 采购订单                  [保存][取消][审核][反审核][收起]       │
├──────────────────────────────────────────────────────────────┤
│ 表头表单区 (可折叠)                                           │
│ ┌──────────┬──────────┬──────────┬──────────┐               │
│ │ 单据编码  │ 业务类型  │ 操作员    │ 供方[选择]│               │
│ │ 单据日期  │ 单据类型  │ 采购部门  │ 到货日期  │               │
│ │ 单据状态  │ 采购人员  │ 审核员    │ 采购合同  │               │
│ │ 业务状态  │ 用料需求  │ 审核日期  │ 合同号    │               │
│ │          │          │          │ 备注信息  │               │
│ └──────────┴──────────┴──────────┴──────────┘               │
├──────────────────────────────────────────────────────────────┤
│ 物料信息                                [引入] [新增物料]      │
│ ┌──┬────┬────┬────┬────┬────┬──┬────┬──┬──┬──┬────┬────┬──┐ │
│ │序│跟单│计划│物料│物料│型号│主│需求│数│单│金│到货│采购│操│ │
│ │号│编号│单号│编码│名称│规格│计│日期│量│价│额│数量│说明│作│ │
│ ├──┼────┼────┼────┼────┼────┼──┼────┼──┼──┼──┼────┼────┼──┤ │
│ │  │    │    │    │    │    │量│    │  │  │  │    │    │删│ │
│ ├──┴────┴────┴────┴────┴────┴──┴────┴──┴──┴──┴────┴────┴──┤ │
│ │ 合计                                    0   0  0.00       │ │
│ └────────────────────────────────────────────────────────────┘ │
└──────────────────────────────────────────────────────────────┘

4.2 表头表单字段( V2 截图确认布局)

截图: screenshot/采购订单-新增页-表头详情.png(新增);screenshot/采购订单-查看页-表头详情.png(查看)

表头采用 5 列栅格布局第1~4列为字段组第5列含供方/到货/合同/备注),共 4 行。

序号 字段名 标签 组件类型 必填 默认值 新增可编辑 查看只读 说明
1 orderCode 单据编码 el-input 自动生成 否(只读) 格式: CGDD000XXX
2 businessType 业务类型 el-select 原材料 原材料/零部件/装配件/成品/五金件/包装物
3 operatorName 操作员 el-input - 当前用户 否(只读) 如 admin, njrsun
4 supplierName 供方 el-input + [选择] - 是(弹窗) 点击「选择」打开供应商弹窗
5 remark 备注信息 el-input(textarea) - 多行文本
6 orderDate 单据日期 el-date-picker 当天 如 2026-02-07
7 orderType 单据类型 el-select 采购订单 否(只读) 固定值
8 approverName 审核员 el-input - - 否(空) 审核时自动填充
9 deliveryDate 到货日期 el-date-picker - 预计到货日期
10 status 单据状态 el-tag - 开立 否(标签) 开立=橙色, 审核=绿色
11 deptName 采购部门 el-select 请选择 下拉选择部门
12 approveDate 审核日期 el-date-picker - - 否(空) 审核时自动填充
13 contractFile 采购合同 upload + [上传] - 是(修改) 上传/查看合同附件
14 businessStatus 业务状态 el-select 正常 正常/暂停/取消
15 userName 采购人员 el-select 请选择 需先选择部门
16 materialNeed 用料需求 el-select 订单用料 否(只读) 订单用料/备库用料
17 contractNo 合同号 el-input - 合同编号

表头布局示意(基于截图):

行1: 单据编码[只读]  | 业务类型[下拉]  | 操作员[只读]     | 供方[选择弹窗]   | 备注信息[文本域]
行2: 单据日期[日期]  | 单据类型[只读]  | 审核员[只读]     | 到货日期[日期]   |
行3: 单据状态[标签]  | 采购部门[下拉]  | 审核日期[只读]   | 采购合同[上传]   |
行4: 业务状态[下拉]  | 采购人员[下拉]  | 用料需求[只读]   | 合同号[输入]     |

查看页 vs 编辑页 vs 新增页差异:

差异项 新增页 编辑页 查看页
单据编码 空(保存后生成) 已生成(只读) 已生成(只读)
表头字段 部分可编辑 部分可编辑 全部只读
顶部按钮 保存/取消/审核/反审核/收起 保存/撤回/审核/反审核/操作/收起 新增/编辑/审核/反审核/打印/操作/收起
子表区域按钮 引入/新增物料 引入/新增物料
子表操作列 有(删除) 有(删除)
子表合计行
上一条/下一条

4.3 物料明细子表( 采集确认 14 列)

序号 列标题 字段名 宽度 组件类型 必填 说明
1 序号 lineNo 60px 自动编号 -
2 跟单编号 trackCode 120px el-input - 只读,引入带入
3 计划单号 planCode 120px el-input - 只读,引入带入
4 物料编码 itemCode 150px el-input + 选择 引入或手工选择
5 物料名称 itemName 200px el-input - 只读
6 型号规格 specification 150px el-input - 只读
7 主计量 unitName 80px el-input - 只读
8 需求日期 needDate 120px el-date-picker 可编辑
9 数量 quantity 100px el-input-number 采购数量
10 单价 unitPrice 100px el-input-number 采购单价
11 金额 amount 100px el-input - 自动=数量×单价
12 到货数量 arrivedQuantity 100px el-input - 只读,到货回写
13 采购说明 remark 120px el-input 行级备注
14 操作 - 80px el-button - 删除

注意: 子表底部有「合计」行,汇总数量、金额等。

4.3.1 手工新增物料( 截图确认)

本功能也称"手动新增物料",与"手工新增物料"同义。

手工新增物料用于在未从采购计划引入的情况下,直接为当前订单添加物料行。与「引入」互补:引入带出计划单号/跟单编号;手工新增行为空行,跟单编号/计划单号显示为「手工单据」或「添加物料」,需通过「选择物料」弹窗选择物料后填写数量、单价等。

操作流程:

步骤 操作 结果
1 在「物料信息」区域点击 「+ 新增物料」 子表末尾新增一条空行;该行跟单编号/计划单号显示「手工单据」或「添加物料」
2 在该行「物料编码」列点击 「选择」 打开「选择物料」弹窗
3 在弹窗内按分类/编码/名称筛选,点击某行 「选择」 弹窗关闭,当前行回填:物料编码、物料名称、型号规格、主计量
4 在同行填写需求日期、数量、单价等 金额自动计算(数量×单价);可填采购说明

截图: screenshot/采购订单-新增页-可新增物料.png(可新增物料时的子表与「+ 新增物料」);screenshot/采购订单-新增页-点击添加物料.png(选择物料弹窗)

选择物料弹窗(选择物料):

属性
弹窗标题 选择物料
用途 手工新增物料时,从物料主数据中单选一条物料回填到当前行

筛选与操作:

组件 说明
分类名称 请输入分类名称,配合左侧分类树筛选
分类树 可展开节点,如 04-原材料、05-五金件、06-包装物等,选择分类缩小列表范围
物料编码 文本输入,模糊搜索
物料名称 文本输入,模糊搜索
搜索 / 重置 执行搜索或清空条件
查询所有 忽略条件,加载全部物料
连选 连续选择多行(若支持)

列表列: 物料编码、物料名称、型号规格、主计量、操作(选择查看)。点击某行「选择」即回填当前订单行并关闭弹窗。

与引入的区分:

来源 跟单编号/计划单号 数量/需求日期
引入(采购计划单明细) 由计划带入 由计划带入,可改
手工新增物料 「手工单据」或「添加物料」 用户手工填写

4.4 选择供应商弹窗( V2 深度采集确认)

截图: screenshot/采购订单-选择供应商弹窗.png

属性
弹窗标题 选择供应商
弹窗宽度 ~900px
选择模式 单选(每行操作列「选择」按钮)
数据量 79 条供应商(实际采集)

搜索区域:

组件 说明
供应商名称 文本输入,模糊搜索
业务联系人 文本输入,模糊搜索
搜索按钮 primary执行搜索
快速添加 success直接新增供应商无需离开弹窗
查询所有 重置搜索并刷新

列表表头( 采集确认 7 列):

序号 列标题 字段名 说明
1 序号 - 自动编号
2 供应商名称 supplierName
3 电话 phone
4 业务联系人 contactPerson
5 手机号 mobile
6 状态 status 开关样式(启用/停用)
7 操作 - 「选择」蓝色链接

选择交互: 点击某行操作列「选择」→ 弹窗关闭 → 自动填充表头「供方」字段供应商ID + 供应商名称)

4.5 引入弹窗(采购计划单明细)( 采集确认)

截图: screenshot/采购订单-引入弹窗-采购计划单明细.png

属性
弹窗标题 采购计划单明细
弹窗宽度 1000px
选择模式 多选(勾选 + 全选按钮)

搜索字段( 采集确认):

组件 placeholder
跟单编号 跟单编号
料品大类 料品大类
物料编码 物料编码
物料名称 物料名称
搜索按钮 primary

列表表头( 采集确认 10 列):

序号 列标题 字段名 说明
1 计划单号 planCode 采购计划编码
2 销售员 salesUserName
3 跟单编号 trackCode 销售订单号
4 订单交期 deliveryDate
5 物料编码 itemCode
6 物料名称 itemName
7 需求日期 needDate
8 需求数量 demandQty
9 已采数量 purchasedQty
10 未采数量 unpurchasedQty 需求-已采

弹窗按钮( 采集确认):

按钮 说明
搜索 按条件筛选
采购退货单 切换到退货单引入模式(特殊功能)
全选 勾选当前页所有行
确定 引入勾选的行到物料子表
取消 关闭弹窗

4.6 查看页设计( V2 深度采集确认)

截图: screenshot/采购订单-查看页-表头详情.png

查看页展示了完整的采购订单:

  • 表头字段全部只读,值已填充(如 CGDD000047, 2026-02-07, 原材料, 采购订单, njrsun, 供方=汕头市三辰蓝猫产品发展有限公司)
  • 子表包含物料明细(含数量/单价/金额/到货数量列)
  • 子表底部「合计」行汇总数量、金额
  • 含「上一条」「下一条」导航链接

查看页按钮( 采集确认 7 个):

按钮 颜色 说明
新增 primary 直接新增新订单(不关闭当前页)
编辑 default 切换到编辑模式(按钮组变为编辑模式)
审核 success 审核当前订单
反审核 warning 反审核
打印 default 打印预览(含打印图标)
操作 default 下拉 更多操作(如关闭、复制等)
收起 default 折叠表头

查看→编辑切换( V2 截图确认):

截图: screenshot/采购订单-查看页转编辑.png

点击「编辑」后,按钮组变为编辑模式=[保存/撤回/审核/反审核/操作/收起/引入/新增物料],表头字段变为可编辑,子表操作列显示「删除」按钮。

上一条/下一条( V2 截图确认):

截图: screenshot/采购订单-查看页-上一条.png

子表底部右侧显示「上一条」「下一条」链接,点击可在相邻采购订单间切换查看。

4.7 编辑页设计( 采集确认)

截图: screenshot/采购订单-编辑页.pngscreenshot/采购订单-查看页转编辑.png

编辑页按钮( 采集确认 8 个):

按钮 颜色 说明
保存 primary 保存修改(表头+子表全量提交)
撤回 default 撤回未保存修改,恢复上次保存状态
审核 success 审核当前订单
反审核 warning 反审核(需无下游引用)
操作 default 下拉 更多操作
收起 default 折叠表头
引入 warning 打开「采购计划单明细」引入弹窗
新增物料 primary 子表末尾新增空行

子表行操作( 编辑截图确认):

按钮 说明
删除 红色文字,删除当前行

注意: 查看页子表无操作列,编辑页子表有操作列(含删除按钮)。


5. 数据字段定义

5.1 采购订单表头erp_po_order

API路径: /po/order

字段名 数据库字段 类型 必填 默认值 说明
订单ID order_id bigint AUTO 主键
租户ID tenant_id varchar(20) - 多租户
订单编码 order_code varchar(32) 自动 格式: CGDD + 6位
订单日期 order_date date 当天
单据状态 status varchar(20) DRAFT 开立/审核/关闭
业务状态 business_status varchar(20) NORMAL 正常/完成/暂停/取消
业务类型 business_type varchar(20) - 原材料/零部件等
单据类型 order_type varchar(20) - 采购订单
用料需求 material_need varchar(20) - 订单用料/备库用料
供应商ID supplier_id bigint - 外键
供应商编码 supplier_code varchar(32) -
供应商名称 supplier_name varchar(100) -
采购部门ID dept_id bigint -
采购部门 dept_name varchar(50) -
采购人员ID user_id bigint -
采购人员 user_name varchar(50) -
到货日期 delivery_date date -
合同号 contract_no varchar(50) -
合同附件 contract_file varchar(500) -
总数量 total_quantity decimal(18,4) 0
总金额 total_amount decimal(18,2) 0
已到货数量 arrived_quantity decimal(18,4) 0
备注 remark varchar(500) -

5.2 采购订单明细erp_po_order_line

字段名 数据库字段 类型 必填 说明
明细ID line_id bigint 主键
订单ID order_id bigint 外键
订单编码 order_code varchar(32) 冗余
行号 line_no int
跟单编号 track_code varchar(32) 销售订单号
计划单号 plan_code varchar(32) 采购计划编码
计划明细ID plan_line_id bigint 关联采购计划行
物料ID item_id bigint
物料编码 item_code varchar(32)
物料名称 item_name varchar(100)
型号规格 specification varchar(200)
计量单位 unit_name varchar(20)
需求日期 need_date date
采购数量 quantity decimal(18,4)
采购单价 unit_price decimal(18,4)
金额 amount decimal(18,2) 数量×单价
已到货数量 arrived_quantity decimal(18,4)
采购说明 remark varchar(200)

6. 按钮操作说明( Playwright 采集验证 13 个按钮)

6.1 明细视图工具栏

按钮 操作 结果 验证
搜索 pageNum=1 带条件查询 列表刷新+底部汇总更新
单据 切换到单据视图 9列+44行+操作列
查询所有 重置搜索+查询 83行结果
新增 跳转新增页 空白表单7个按钮
导出 弹出确认框 → 下载Excel 截图确认

6.2 单据视图工具栏

按钮 操作 前置 结果 验证
明细 切换回明细视图 - 12列明细列表
删除 批量删除 勾选+开立/退回 确认后逻辑删除 按钮存在
审核 批量审核 勾选+开立 状态→审核 按钮存在
反审核 批量反审核 勾选+审核+无下游 状态→开立 按钮存在

6.3 新增/编辑页按钮

按钮 页面 操作 结果 验证
保存 新增/编辑 提交表头+明细 持久化 按钮确认
取消 新增 返回列表 确认后回列表
撤回 编辑 撤销未保存修改 恢复上次保存状态 采集确认
审核 新增/编辑 审核当前单据 状态→审核
反审核 查看/编辑 反审核 状态→开立
收起 所有 折叠表头 仅显示子表
引入 新增/编辑 打开「采购计划单明细」弹窗 10列表格
新增物料 新增/编辑 子表新增空行 子表新增空行(行数+1选料与完整流程见 4.3.1
打印 查看 打印预览 打印对话框
操作 查看/编辑 更多操作下拉 扩展功能

6.4 操作列按钮

按钮 颜色 显示条件 操作 验证
查看 success 所有状态 打开查看页
编辑 primary 开立/退回 打开编辑页
删除 danger 开立/退回 确认后删除

7. 页面交互规则( Playwright 实际验证)

序号 交互场景 规则 验证
1 页面首次加载 明细视图83行按日期降序
2 明细→单据切换 表头/按钮/数据全切换44行单据
3 单据编码点击 跳转查看页
4 新增→引入 弹窗「采购计划单明细」10列支持全选
5 引入确定 物料行填充:跟单编号/计划单号/物料/需求日期/数量
6 新增物料 子表末尾追加空行
7 金额计算 数量×单价自动计算金额,合计行实时更新 截图确认
8 收起/展开 折叠/展开表头区域
9 查看→编辑 查看页点击「编辑」切换到编辑模式
10 编辑页撤回 撤回按钮撤销未保存修改 按钮确认

8. 接口调用说明

8.1 接口总览

序号 功能 方法 路径 说明
1 查询列表 GET /po/order/list 分页查询
2 获取详情 GET /po/order 获取表头+明细
3 新增 POST /po/order 创建
4 修改 PUT /po/order 更新
5 删除 POST /po/order/delete 批量删除
6 审核 POST /po/order/check 批量审核
7 反审核 POST /po/order/antiCheck 批量反审核
8 导出 GET /po/order/export 导出Excel
9 选择供应商 GET /po/supplier/list 供应商列表
10 引入采购计划 GET /po/order/lead 或 /po/order/leadInto 采购计划单明细
11 明细查询 GET /po/order/linkDetail 明细视图数据
12 获取编码 GET /po/order/genCode 生成编码(推测)

接口来源: ERP Swagger API (/prod-api/v2/api-docs?group=采购模块)


9. 状态流转

9.1 单据状态流转图

                    ┌──────────────┐
                    │              │
         ┌─────────►  开立(DRAFT)  ◄──────────┐
         │          │              │           │
         │          └──────┬───────┘           │
         │                 │                   │
         │            [审核操作]            [反审核]
         │                 │                   │
         │                 ▼                   │
         │          ┌──────────────┐           │
         │          │              │           │
         │          │ 审核(APPROVED)├───────────┘
         │          │              │
         │          └──────┬───────┘
         │                 │
         │            [业务完成/关闭]
         │                 │
         │                 ▼
         │          ┌──────────────┐
         └──────────┤              │
                    │  关闭(CLOSED) │
                    └──────────────┘

9.2 状态说明

状态 编码 可执行操作 说明
开立 DRAFT 编辑、保存、删除、审核 初始状态
审核 APPROVED 查看、反审核、生成到货单 生效状态
关闭 CLOSED 查看 业务完结

10. 业务规则

10.1 编码规则

项目 说明
前缀 CGDD
流水号 6位不足补零
示例 CGDD000041, CGDD000047

10.2 引入规则

规则 说明
数据来源 已审核的采购计划单中未采数量>0 的明细行
引入方式 支持勾选多行 + 全选
引入后 跟单编号、计划单号、物料信息、需求日期、数量自动填充
特殊 引入弹窗含「采购退货单」按钮,可切换到退货引入模式

10.2.1 手工(手动)新增物料规则

与「引入」互补,手工新增物料用于未从采购计划引入时直接添加物料行。

规则 说明
数据来源 无计划单/跟单来源;跟单编号/计划单号显示「手工单据」或「添加物料」
选择物料 须通过「选择物料」弹窗从物料主数据中选择,回填物料编码、物料名称、型号规格、主计量
用户填写 数量、单价、需求日期、采购说明由用户手工填写
金额计算 行金额 = 数量 × 单价,自动计算;合计行实时更新
操作入口 物料信息区域「+ 新增物料」按钮,新增/编辑状态下可用

操作流程与选择物料弹窗详见 4.3.1 手工新增物料

10.3 金额规则

规则 说明
行金额 数量 × 单价,自动计算
合计行 子表底部合计行汇总数量、金额
总金额 表头 total_amount = 所有行金额之和

10.4 到货跟踪

规则 说明
到货数量 从到货单审核后回写到订单明细
业务状态 全部到货后自动变为「完成」
删除限制 有到货记录的订单不可删除

10.5 下游引用限制

场景 影响
有到货记录 不可反审核、不可删除
有发票记录 不可反审核、不可删除
无引用 可反审核、可删除(仅开立/退回)

11. 前端组件设计

11.1 文件结构

src/
├── api/
│   └── po/
│       └── order.js                      # 采购订单API
├── views/
│   └── po/
│       └── order/
│           ├── index.vue                  # 列表页(明细+单据双视图)
│           ├── add.vue                    # 新增页
│           ├── edit.vue                   # 编辑页
│           ├── view.vue                   # 查看页
│           └── components/
│               ├── DetailViewTable.vue    # 明细视图表格
│               ├── DocumentViewTable.vue  # 单据视图表格
│               ├── OrderHeaderForm.vue    # 表头表单
│               ├── OrderLineTable.vue     # 物料明细子表(可编辑)
│               ├── SupplierSelectDialog.vue  # 选择供应商弹窗
│               └── PlanImportDialog.vue   # 引入采购计划单明细弹窗

11.2 路由配置

{
  path: '/po',
  component: Layout,
  children: [
    { path: 'purchase/order/plan', name: 'PoOrder', component: () => import('@/views/po/order/index'), meta: { title: '采购订单' } },
    { path: 'purchase/orderadd0', name: 'PoOrderAdd', component: () => import('@/views/po/order/add'), meta: { title: '新增采购订单' }, hidden: true },
    { path: 'purchase/orderedit0/:id', name: 'PoOrderEdit', component: () => import('@/views/po/order/edit'), meta: { title: '编辑采购订单' }, hidden: true },
    { path: 'purchase/orderview0/:id', name: 'PoOrderView', component: () => import('@/views/po/order/view'), meta: { title: '查看采购订单' }, hidden: true }
  ]
}

12. 数据模型

12.1 表关系图ERP 侧)

┌──────────────────────────┐       ┌──────────────────────────┐
│    erp_po_supplier       │       │    erp_mp_purchase       │
│  (供应商档案 / ERP)       │       │    (采购计划单)           │
│  supplier_id (PK)        │       └──────────┬───────────────┘
│  supplier_name           │                  │ plan_code, plan_line_id
│  supplier_code           │                  ▼
└──────────┬───────────────┘  ┌──────────────────────────────────────────────┐
           │ supplier_id      │              erp_po_order                     │
           ▼                  │            (采购订单表头)                      │
           ┌──────────────────┤  order_id (PK)  order_code (UK)              │
           │                  │  supplier_id (FK→erp_po_supplier)            │
           │                  │  total_quantity  total_amount                 │
           │                  └──────────────────────┬───────────────────────┘
           │                                         │ 1:N
           │                                         ▼
           │                  ┌──────────────────────────────────────────────┐
           │                  │            erp_po_order_line                  │
           │                  │          (采购订单明细)                        │
           │                  │  line_id (PK)  order_id (FK)                 │
           │                  │  item_id (FK→erp_md_item)                    │
           │                  │  plan_line_id (FK→erp_mp_purchase)           │
           │                  │  quantity  unit_price  amount                 │
           │                  └──────────────────────┬───────────────────────┘
           │                                         │ 被下游引用
           │                      ┌──────────────────┼──────────────────┐
           │                      ▼                  ▼                  ▼
           │           ┌────────────────┐  ┌────────────────┐  ┌────────────────┐
           │           │ erp_po_checkin │  │ erp_po_fapiao  │  │ erp_po_reject  │
           │           │ (采购到货单)    │  │ (采购发票)      │  │ (采购退货单)    │
           │           └────────────────┘  └────────────────┘  └────────────────┘

12.2 ERP→MOM 表映射关系

数据来源: erp与mom数据库表映射对照表 第 2.4、3.7、5.1~5.4 节

12.2.1 供应商表映射(⚠️ 字段名差异较大)

项目 ERP MOM 说明
表名 erp_po_supplier md_vendor 表名完全不同
主键 supplier_id vendor_id 名称不同
编码 supplier_code vendor_code 名称不同
名称 supplier_name vendor_name 名称不同
简称 supplier_nick vendor_nick 名称不同
类型 supplier_type vendor_type 名称不同
等级 supplier_level vendor_level 名称不同
英文名 - vendor_en MOM 专用
简介 - vendor_des MOM 专用
评分 - vendor_score MOM 专用
Logo - vendor_logo MOM 专用
开票地址 bank_address invoice_address 名称不同
省份 province province 一致
城市 city city 一致
地址 address address 一致
联系人1 contact1 contact1 一致
联系人1电话 contact1_tel contact1_tel 一致
联系人1邮箱 - contact1_email MOM 专用
银行 bank_name bank_name 一致
账号 bank_account bank_account 一致
税号 tax_no tax_no 一致
供应料品 supply_items supply_items 一致
启用 enable_flag enable_flag 一致

开发注意: 采购订单中 supplier_id/supplier_name/supplier_code 对应 ERP 的 erp_po_supplier 表。MOM 侧操作供应商时需使用 vendor_id/vendor_name/vendor_codemd_vendor 表),接口字段名需做转换

12.2.2 采购订单表映射

ERP表名 MOM表名 同步方式 说明
erp_po_order erp_po_orderMOM 镜像表) ERP→MOM 1:1 审核后同步,主键一致,含 erp_sync_time
erp_po_order_line erp_po_order_lineMOM 镜像表) ERP→MOM 1:1 明细行镜像
erp_po_order wm_arrival_notice (po_code) ERP→MOM 业务映射 到货通知order_code→po_code
erp_po_order_line wm_arrival_notice_line ERP→MOM 业务映射 到货明细

12.2.3 采购订单→到货通知 关键字段映射

ERP字段 (erp_po_order) MOM字段 (wm_arrival_notice) 映射方式
order_code po_code 直接映射
supplier_id vendor_id 字段名不同
supplier_code vendor_code 字段名不同
supplier_name vendor_name 字段名不同
delivery_date arrival_date 字段名不同
status status 值转换: DRAFT→PREPARE, APPROVED→CONFIRMED

12.2.4 采购订单明细→到货通知明细 关键字段映射

ERP字段 (erp_po_order_line) MOM字段 (wm_arrival_notice_line) 映射方式
item_id item_id 直接映射
item_code item_code 直接映射
item_name item_name 直接映射
specification specification 直接映射
unit_name unit_of_measure 字段名不同
quantity quantity_arrive 字段名不同,采购数量→到货数量
unit_price - MOM 不需要(不涉及价格)
amount - MOM 不需要
track_code - MOM 不需要(通过表头 po_code 关联)

12.3 数据同步方向

ERP (erp_po_order/line) ──审核后同步──► MOM (erp_po_order/line 镜像表)
                                        │
                                        ├──► MOM (wm_arrival_notice 到货通知)
                                        │         po_code = order_code
                                        │         vendor_id = supplier_id
                                        │
                                        └──► MOM (wm_item_recpt 入库单)
                                                  po_order_id → order_id
                                                  po_line_id → line_id
  • 同步方向: ERP → MOM订单数据单向同步
  • 同步触发: 采购订单审核后触发
  • 供应商同步: ERP erp_po_supplier → MOM md_vendor字段名转换
  • 价格/金额: MOM 不存储ERP 专有),到货/入库仅关注数量
  • MOM 回写 ERP: 到货数量、入库数量可反馈回 ERP 更新 arrived_quantity

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

const statusTagMap = {
  'DRAFT': 'info',       // 灰色 - 开立
  'APPROVED': 'success', // 绿色 - 审核
  'CLOSED': '',          // 默认 - 关闭
  'REJECTED': 'warning'  // 橙色 - 退回
}

附录B: 权限标识汇总

权限标识 说明 视图
po:order:list 列表查询 通用
po:order:query 详情查询 单据视图
po:order:add 新增 通用
po:order:edit 编辑 单据视图
po:order:remove 删除 单据视图
po:order:approve 审核 单据视图
po:order:unapprove 反审核 单据视图
po:order:export 导出 明细视图

附录C: Playwright 采集数据摘要

采集时间: 2026-02-07 16:27:52脚本: crawl_purchase_order.py

页面 行数 按钮 表头列
明细视图 83 搜索/单据/查询所有/新增/导出 序号/跟单编号/计划编号/单据编码/单据状态/供应商/物料名称/物料编码/需求日期/采购数量/到货数量/单据日期
单据视图 44 搜索/明细/查询所有/新增/删除/审核/反审核 单据编码/单据日期/单据状态/业务类型/采购部门/采购人员/业务状态/审核日期/操作
新增页 0+合计 保存/取消/审核/反审核/收起/引入/新增物料 序号/跟单编号/计划单号/物料编码/物料名称/型号规格/主计量/需求日期/数量/单价/金额/到货数量/采购说明/操作
引入弹窗 - 搜索/采购退货单/全选/确定/取消 计划单号/销售员/跟单编号/订单交期/物料编码/物料名称/需求日期/需求数量/已采数量/未采数量
查看页 3 新增/编辑/审核/反审核/打印/操作/收起 同新增页(无操作列)
编辑页 3 保存/撤回/审核/反审核/操作/收起/引入/新增物料 同新增页

修订历史

版本 日期 修订内容 修订人
1.0.0 2026-02-07 初始版本:基于 Playwright V1 自动采集13 个按钮/10 张截图)+ ERP 数据库设计 + 采购管理 PRD 编写完整页面开发说明 System
2.0.0 2026-02-07 V2 表单深度采集:新增 7 张截图(新增页表头/查看页表头/查看页上一条/查看转编辑/选择供应商/引入弹窗详情/新增物料行);更新 4.4 供应商弹窗7列/79行/快速添加);更新 4.6 查看页(按钮详情/上一条下一条/查看→编辑切换);更新 4.7 编辑页8按钮含撤回/子表行操作);截图总计 17 张 System
2.1.0 2026-02-07 重写第 12 章数据模型基于《erp与mom数据库表映射对照表》补充供应商表 ERP(erp_po_supplier) vs MOM(md_vendor) 完整字段对照(⚠️ 字段名差异较大);补充采购订单→到货通知/入库单的字段映射;补充数据同步方向与价格处理说明 System
2.2.0 2026-02-13 手工新增物料:新增 4.3.1 手工新增物料(操作流程、选择物料弹窗、与引入的区分);新增截图引用「采购订单-新增页-可新增物料.png」「采购订单-新增页-点击添加物料.png」补充选择物料弹窗的筛选与列表说明 System
2.3.0 2026-02-13 版本更新与手工新增物料补全:版本更新至 2.3.0;补全新功能说明,重点补全手动/手工新增物料在业务流程(0.3)、按钮说明(6.3)、业务规则(10.2.1)中的引用与规则;目录增加 4.3.1 手工手动新增物料4.3.1 增加「手动新增物料」同义说明;截图总数更新为 19 张 System