Files

panchengyong c28ada5050 commit content

2026-03-06 02:02:59 +08:00

69 KiB

Raw Blame History

产品BOM（EBOM）- 页面设计开发说明文档

版本: 1.1.0
创建日期: 2026-02-06
更新日期: 2026-02-06
来源系统: 升阳云ERP 演示系统
来源页面: https://demo.rsun.vip/rd/develop/ebom?workType=0&fmConfig=010401,020401
所属模块: 研发管理 > 产品BOM
前端路由: /rd/develop/ebom

1. 页面概述

1.1 功能说明

产品BOM（Engineering Bill of Materials，EBOM）页面用于管理产品的研发物料清单。EBOM是产品研发阶段的核心数据，定义了产品由哪些子件物料组成及其用量比例关系，是后续生产计划、物料需求计算、采购管理的基础数据来源。

1.2 业务场景

新建BOM: 研发人员选择母件产品，录入子件物料清单，定义用量关系
BOM版本管理: 支持同一产品创建多个BOM版本，用于产品迭代升级
翻单功能: 基于已有BOM复制创建新版本，版本号自动递增
审核流程: BOM创建后需经审核生效，审核后不可编辑，支持反审核
多阶展开: 支持多层BOM的层次展开查看
BOM校验: 自动检测是否存在死循环嵌套
BOM导出: 支持导出完整物料清单到电子表格

1.3 URL路由参数

参数名	类型	说明
workType	integer	工作类型，0=研发BOM
fmConfig	string	表单配置编码，010401,020401

1.4 页面截图参考

截图文件	说明
`docs/ui-make/rsun-产品bom列表-明细视图.png`	列表页 - 明细视图（默认视图）
`docs/ui-make/rsun-产品bom列表-单据视图.png`	列表页 - 单据视图
`docs/ui-make/rsun-产品bom新增-1.png`	新增页 - 空白表单
`docs/ui-make/rsun-产品bom新增-2.png`	新增页 - 已填写数据
`docs/ui-make/rsun-产品bom新增-物料编码选择弹窗.png`	选择物料弹窗

2. 页面结构

2.1 整体布局

┌─────────────────────────────────────────────────────────────────┐
│                     顶部导航栏 (64px)                            │
├────────┬────────────────────────────────────────────────────────┤
│ 左侧   │  面包屑: 首页 / 研发管理 / 产品BOM                      │
│ 菜单   │  ┌────────────────────────────────────────────────┐    │
│ (200px │  │ Tab标签: ● 产品BOM                              │    │
│  /64px)│  ├────────────────────────────────────────────────┤    │
│        │  │ 查询区域 (搜索条件)                              │    │
│ 研发管 │  ├────────────────────────────────────────────────┤    │
│ 理     │  │ 工具栏 (操作按钮)                                │    │
│ ├产品  │  ├────────────────────────────────────────────────┤    │
│  设计  │  │ 数据表格                                        │    │
│ ├产品  │  │                                                │    │
│  BOM★ │  │                                                │    │
│ ├孪生  │  ├────────────────────────────────────────────────┤    │
│  物料  │  │ 分页组件                                        │    │
│ ├订单  │  └────────────────────────────────────────────────┘    │
│  参数  │                                                       │
│ ├生产  │                                                       │
│  放量  │                                                       │
├────────┴────────────────────────────────────────────────────────┤

2.2 页面模式

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

2.3 列表页双视图概述

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

┌──────────────────────────────────────────────────────────────┐
│  明细视图（默认）                      单据视图               │
│  ┌─────────────┐                    ┌─────────────┐         │
│  │ [单据] 按钮  │ ──切换到单据视图──► │ [明细] 按钮  │         │
│  │              │ ◄──切换到明细视图── │              │         │
│  └─────────────┘                    └─────────────┘         │
│                                                              │
│  ● 侧重物料信息展示                   ● 侧重单据流程管理       │
│  ● 无复选框，不支持批量操作            ● 有复选框，支持批量操作  │
│  ● 操作列: 多阶/翻单/导出             ● 操作列: 查看/编辑/删除  │
│  ● 搜索含物料分类                     ● 搜索含单据状态/业务状态  │
└──────────────────────────────────────────────────────────────┘

两种视图对比总览:

对比项	明细视图（默认）	单据视图
切换按钮	工具栏显示「单据」按钮	工具栏显示「明细」按钮
复选框列	无	有
序号列	有	无
搜索条件	单据编码、物料编码、物料名称、物料分类、日期范围	单据编码、物料编码、物料名称、单据状态、业务状态、日期范围
工具栏按钮	单据、查询所有、新增、清空、导入、导出	明细、查询所有、新增、删、审核、反审核
数据列	物料编码、物料名称、母件基数、版本号等	单据日期、单据状态、业务类型、业务部门等
操作列	多阶、翻单、导出	查看、编辑、删除（按状态显隐）
批量操作	不支持	支持（删除、审核、反审核）
适用场景	研发人员查看BOM物料组成	管理员进行单据审核管理

3. 列表页设计

3.1 明细视图（默认视图）

明细视图是进入产品BOM页面时的默认视图，侧重于展示BOM的物料组成信息。

截图参考: docs/ui-make/rsun-产品bom列表-明细视图.png

3.1.1 搜索条件区域

序号	字段名	标签	组件类型	宽度	说明
1	bomCode	单据编码	el-input	140px	模糊搜索
2	itemCode	物料编码	el-input	140px	模糊搜索
3	itemName	物料名称	el-input	140px	模糊搜索
4	itemTypeId	物料分类	el-select	120px	下拉选择物料分类，可清空
5	startDate	开始日期	el-date-picker	140px	日期范围起
6	endDate	结束日期	el-date-picker	140px	日期范围止

注意: 明细视图的搜索条件没有「单据状态」和「业务状态」，而是有「物料分类」下拉选择。

3.1.2 工具栏按钮

序号	按钮名称	图标	类型	权限标识	说明
1	单据	-	primary	rd:ebom:list	切换到单据视图
2	查询所有	el-icon-tickets	default	rd:ebom:list	重置搜索条件并查询所有
3	新增	el-icon-plus	success	rd:ebom:add	打开新增EBOM页面
4	清空	el-icon-circle-close	warning	rd:ebom:remove	清空列表数据（需确认）
5	导入	el-icon-upload2	default	rd:ebom:import	导入BOM数据
6	导出	el-icon-download	default	rd:ebom:export	导出BOM列表到Excel

3.1.3 数据表格列定义

序号	列标题	字段名	宽度	对齐	说明
1	序号	-	60px	center	自动编号（无复选框）
2	单据编码	bomCode	140px	left	蓝色链接，可点击打开详情
3	物料编码	itemCode	140px	left	母件物料编码
4	物料名称	itemName	200px	left	母件物料名称
5	母件基数	baseQty	80px	center	母件基本数量
6	版本号	version	80px	center	BOM版本号，如 1.00、7.00
7	版本说明	versionDesc	120px	left	版本变更说明
8	图纸号	drawingNo	100px	left	产品图纸编号
9	单据状态	status	80px	center	状态标签（开立/审核/退回）
10	单据日期	bomDate	100px	center	单据创建日期
11	操作	-	140px	center	操作按钮组

3.1.4 明细视图操作列按钮

明细视图操作列对所有状态的BOM统一显示以下按钮：

按钮	颜色	权限	说明
多阶	primary (蓝色文字)	rd:ebom:expand	展开多层BOM结构树
翻单	success (绿色文字)	rd:ebom:copy	复制当前BOM生成新版本
导出	warning (橙色文字)	rd:ebom:export	导出当前BOM明细到Excel

注意: 明细视图的操作列不区分状态，所有BOM均显示「多阶」「翻单」「导出」三个按钮。

3.2 单据视图

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

截图参考: docs/ui-make/rsun-产品bom列表-单据视图.png

3.2.1 搜索条件区域

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

注意: 单据视图的搜索条件没有「物料分类」，而是有「单据状态」和「业务状态」两个下拉选择。

单据状态选项:

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

业务状态选项:

值	标签
NORMAL	正常
PAUSE	暂停
CANCEL	取消

3.2.2 工具栏按钮

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

3.2.3 数据表格列定义

序号	列标题	字段名	宽度	对齐	排序	说明
0	(复选框)	-	55px	center	-	多选列，用于批量操作
1	单据编码	bomCode	140px	left	否	可点击打开详情
2	单据日期	bomDate	120px	center	是 ▼	默认降序排列
3	单据状态	status	80px	center	否	状态标签（颜色区分）
4	业务类型	businessType	100px	center	否	如：机械BOM
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 (绿色文字)	rd:ebom:query	打开查看页（只读）
翻单	primary (蓝色文字)	rd:ebom:copy	复制BOM生成新版本

status = DRAFT（开立）:

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

status = REJECTED（退回）:

按钮	颜色	权限	说明
查看	success (绿色文字)	rd:ebom:query	打开查看页
编辑	primary (蓝色文字)	rd:ebom:edit	打开编辑页（重新修改）
删除	danger (红色文字)	rd:ebom:remove	二次确认后删除

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

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

4. 新增/编辑页设计

4.1 页面布局

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

┌──────────────────────────────────────────────────────────────┐
│ EBOM清单                              [保存][取消][审核][反审核][收起] │
├──────────────────────────────────────────────────────────────┤
│ 表头表单区 (4列布局，可折叠)                                     │
│ ┌──────────┬──────────┬──────────┬──────────┐               │
│ │ 单据编码  │ 业务类型  │ 物料编码  │ 图纸号    │               │
│ │ 单据日期  │ 操作员    │ 物料名称  │ 版本号    │               │
│ │ 单据状态  │ 审核员    │ 计量单位  │ 版本说明  │               │
│ │ 业务状态  │ 审核日期  │ 母件基数  │ 备注信息  │               │
│ └──────────┴──────────┴──────────┴──────────┘               │
├──────────────────────────────────────────────────────────────┤
│ 物料信息                                        [+ 新增物料]  │
│ ┌────┬────────┬──────┬──────┬────┬──────┬──────┬──┬────┬──┬──┬──┐ │
│ │序号│物料编码 │物料名│型号规│主计│计划线│领料方│分│用量│图│备│操│ │
│ │    │        │称    │格    │量  │路    │式    │子│方式│纸│注│作│ │
│ ├────┼────────┼──────┼──────┼────┼──────┼──────┼──┼────┼──┼──┼──┤ │
│ │ 1  │(选择)  │      │      │    │      │按单领│  │按比│  │  │删│ │
│ │ 2  │(选择)  │      │      │    │      │按单领│  │按比│  │  │删│ │
│ └────┴────────┴──────┴──────┴────┴──────┴──────┴──┴────┴──┴──┴──┘ │
└──────────────────────────────────────────────────────────────┘

4.2 表头表单字段

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

序号	字段名	标签	组件类型	必填	默认值	说明
1	bomCode	单据编码	el-input	是	自动生成	只读，格式: EBOM000XXX
2	businessType	业务类型	el-select	是	机械BOM	下拉选择
3	itemCode	物料编码	el-input + 选择按钮	是	-	点击「选择」弹窗选择物料
4	drawingNo	图纸号	el-input	否	-	产品图纸编号
5	bomDate	单据日期	el-date-picker	是	当天日期	日期选择器
6	operatorName	操作员	el-input	是	当前登录用户	只读
7	itemName	物料名称	el-input	是	-	只读，选择物料后自动带入
8	version	版本号	el-input-number	是	1.0	支持 -/+ 按钮调整，步长0.1
9	status	单据状态	el-tag	-	开立	只读标签显示
10	approverName	审核员	el-input	否	-	只读，审核时自动填充
11	unitName	计量单位	el-input	否	-	只读，选择物料后自动带入
12	versionDesc	版本说明	el-input	否	-	文本输入，最多200字
13	businessStatus	业务状态	el-select	是	正常	下拉选择
14	approveDate	审核日期	el-date-picker	否	-	只读，审核时自动填充
15	baseQty	母件基数	el-input-number	是	1.0	母件基本数量
16	remark	备注信息	el-input(textarea)	否	-	多行文本，最多500字

业务类型选项:

值	标签
MECHANICAL	机械BOM
ELECTRONIC	电子BOM
ASSEMBLY	装配BOM
GENERAL	通用BOM

4.3 物料明细表格（子表）

子表为可编辑表格，位于表头下方，标题为「物料信息」。

序号	列标题	字段名	宽度	组件类型	必填	说明
1	序号	lineNo	60px	自动编号	-	行序号，自动递增
2	物料编码	bomItemCode	150px	el-input + 选择按钮	是	点击「选择」弹窗选择子件物料
3	物料名称	bomItemName	180px	el-input	-	只读，选择物料后自动带入
4	型号规格	specification	150px	el-input	否	只读，选择物料后自动带入
5	主计量	unitName	80px	el-input	-	只读，选择物料后自动带入
6	计划线路	routeName	100px	el-select	否	下拉选择工艺路线
7	领料方式	pickType	120px	el-select	是	按单领用/按库领用
8	分子	numerator	80px	el-input-number	是	分子数量（用量比例的分子）
9	用量方式	usageType	120px	el-select	是	按比例/按固定
10	图纸号	lineDrawingNo	100px	el-input	否	子件图纸号
11	备注	lineRemark	100px	el-input	否	行备注
12	操作	-	80px	el-button	-	删除按钮

领料方式选项:

值	标签
ORDER_PICK	按单领用
STOCK_PICK	按库领用

用量方式选项:

值	标签
RATIO	按比例
FIXED	按固定

4.4 选择物料弹窗

点击物料编码的「选择」按钮，打开物料选择弹窗。

截图参考: docs/ui-make/rsun-产品bom新增-物料编码选择弹窗.png

属性	值
弹窗标题	选择物料
弹窗宽度	1000px
弹窗高度	自适应，最大70vh
关闭方式	右上角 X 按钮
选择模式	单选（点击行操作列「选择」按钮）

弹窗布局:

┌──────────────────────────────────────────────────────────────┐
│ 选择物料                                               [X]   │
├──────────────────────────────────────────────────────────────┤
│ ┌─────────────┐  物料编码 [______] 物料名称 [______]         │
│ │Q 请输入分类名│  [搜索] [重置]                  [查询所有]   │
│ │             │  ┌──────┬──────┬────┬────┬────┬────┬──┐    │
│ │ ▸ 01-成品   │  │物料编│物料名│型号│主计│图纸│供应│操│    │
│ │ ▸ 04-原材料 │  │码    │称    │规格│量  │号  │方式│作│    │
│ │ ▸ 05-五金件 │  ├──────┼──────┼────┼────┼────┼────┼──┤    │
│ │ ▸ 06-包装物 │  │010200│简易机│    │台  │    │生产│选│    │
│ │   07-加工成品│  │010200│简易机│190 │台  │    │生产│选│    │
│ │ ▸ 08-代销类 │  │010300│组装电│    │台  │    │装配│选│    │
│ │ ▸ 09-直销类 │  │010300│组装电│    │台  │    │装配│选│    │
│ │ ▸ 10-电脑组 │  │010300│TESA4│1250│台  │    │委外│选│    │
│ │   装件      │  │...   │...   │... │... │... │... │..│    │
│ └─────────────┘  └──────┴──────┴────┴────┴────┴────┴──┘    │
│                                 共18条 | 100条/页 | < 1 >     │
└──────────────────────────────────────────────────────────────┘

左侧物料分类树:

分类编码	分类名称	说明
01	成品	可折叠展开子分类
04	原材料	可折叠展开子分类
05	五金件	可折叠展开子分类
06	包装物	可折叠展开子分类
07	加工成品	叶子节点
08	代销类	可折叠展开子分类
09	直销类	可折叠展开子分类
10	电脑组装件	可折叠展开子分类

分类树顶部有搜索框，placeholder: "请输入分类名称"
点击分类节点，右侧列表按该分类过滤
分类树通过 /md/itemtype/treeselect 接口获取

搜索区域:

组件	说明
物料编码输入框	模糊搜索
物料名称输入框	模糊搜索
搜索按钮	primary类型，执行搜索
重置按钮	default类型，清空搜索条件
查询所有按钮	位于右侧，重置分类选择+搜索条件，查询全部

物料列表表格列:

序号	列标题	字段名	宽度	说明
1	物料编码	itemCode	140px
2	物料名称	itemName	200px
3	型号规格	specification	150px
4	主计量	unitName	80px	计量单位
5	图纸号	drawingNo	100px
6	供应方式	supplyType	80px	生产/装配/委外/加工/采购
7	操作	-	60px	「选择」蓝色链接按钮

选择交互:

点击某行的「选择」按钮，选中该物料
表头选择: 选中后弹窗关闭，自动填充表头的物料编码、物料名称、计量单位
明细行选择: 选中后弹窗关闭，自动填充该行的物料编码、物料名称、型号规格、主计量

注意: 表头选择物料时，仅限「生产」「装配」「加工」「委外」供应方式的物料可以作为母件建BOM（供应方式为采购的物料不能建BOM）。明细行选择子件物料不限供应方式。

5. 数据字段定义

5.1 BOM表头字段（erp_md_bom / md_bom）

字段名	数据库字段	类型	长度	必填	默认值	说明
BOM ID	bom_id	bigint	-	是	AUTO	主键，自增
租户ID	tenant_id	varchar	20	是	-	多租户隔离
BOM编码	bom_code	varchar	32	是	自动生成	格式: EBOM + 6位流水号
BOM名称	bom_name	varchar	100	否	-	BOM名称
产品物料ID	item_id	bigint	-	是	-	外键 → md_item.item_id
产品物料编码	item_code	varchar	32	是	-	冗余字段
产品物料名称	item_name	varchar	100	是	-	冗余字段
产品规格	item_spec	varchar	200	否	-	冗余字段
计量单位	unit_name	varchar	20	否	-	产品计量单位
母件基数	base_qty	decimal	18,4	是	1.0	母件基本数量
版本号	version	varchar	20	否	1.0	BOM版本号
版本说明	version_desc	varchar	200	否	-	版本变更说明
单据日期	bom_date	date	-	是	当天	单据创建日期
业务类型	business_type	varchar	20	否	MECHANICAL	机械BOM/电子BOM等
图纸号	drawing_no	varchar	50	否	-	产品图纸编号
单据状态	status	varchar	20	是	DRAFT	开立/审核/退回
业务状态	business_status	varchar	20	否	NORMAL	正常/暂停/取消
启用标志	enable_flag	char	1	是	Y	Y/N
操作员ID	operator_id	bigint	-	否	-	当前用户ID
操作员	operator_name	varchar	50	否	-	当前用户名
部门ID	dept_id	bigint	-	否	-	部门ID
部门名称	dept_name	varchar	50	否	-	部门名称
审核员ID	approver_id	bigint	-	否	-
审核员	approver_name	varchar	50	否	-
审核日期	approve_date	datetime	-	否	-
备注	remark	varchar	500	否	-
删除标志	del_flag	char	1	是	0	0存在/1删除
创建者	create_by	varchar	64	否	-
创建时间	create_time	datetime	-	否	-
更新者	update_by	varchar	64	否	-
更新时间	update_time	datetime	-	否	-

5.2 BOM明细字段（erp_md_bom_line / md_product_bom）

字段名	数据库字段	类型	长度	必填	默认值	说明
明细ID	line_id / bom_line_id	bigint	-	是	AUTO	主键，自增
BOM表头ID	bom_id	bigint	-	是	-	外键 → md_bom.bom_id
BOM编码	bom_code	varchar	32	否	-	冗余字段
行号	line_no	int	-	是	自动	行序号
子件物料ID	bom_item_id / item_id	bigint	-	是	-	外键 → md_item.item_id
子件物料编码	bom_item_code / item_code	varchar	32	是	-	冗余字段
子件物料名称	bom_item_name / item_name	varchar	100	是	-	冗余字段
型号规格	specification	varchar	200	否	-	子件规格型号
计量单位	unit_name	varchar	20	否	-	子件计量单位
分子数量	numerator / base_qty	decimal	18,6	是	1.0	用量比例分子
分母数量	denominator	decimal	18,6	否	1.0	用量比例分母
损耗率	loss_rate	decimal	5,2	否	0	损耗百分比
供应方式	supply_type	varchar	20	否	PURCHASE	采购/自制/委外
领料方式	pick_type	varchar	20	否	ORDER_PICK	按单领用/按库领用
用量方式	usage_type	varchar	20	否	RATIO	按比例/按固定
计划线路	route_id	bigint	-	否	-	关联工艺路线
计划线路名称	route_name	varchar	50	否	-	冗余字段
图纸号	drawing_no	varchar	50	否	-	子件图纸号
备注	remark	varchar	200	否	-
删除标志	del_flag	char	1	是	0
租户ID	tenant_id	varchar	20	是	-

6. 按钮操作说明

6.1 明细视图工具栏按钮

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

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

6.1.2 查询所有按钮

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

6.1.3 新增按钮

项目	说明
触发条件	始终可用
操作	路由跳转到新增EBOM页面
权限	rd:ebom:add
路由	`/rd/develop/ebom/add`

6.1.4 清空按钮

项目	说明
触发条件	始终可用
操作	弹出确认框，确认后清空符合搜索条件的BOM数据（谨慎操作）
权限	rd:ebom:remove

6.1.5 导入按钮

项目	说明
触发条件	始终可用
操作	打开文件上传弹窗，选择Excel文件导入BOM数据
权限	rd:ebom:import
文件格式	.xlsx / .xls

6.1.6 导出按钮（工具栏）

项目	说明
触发条件	始终可用
操作	按当前搜索条件导出BOM列表到Excel
权限	rd:ebom:export

6.2 明细视图操作列按钮

6.2.1 多阶按钮

项目	说明
触发条件	始终可用，所有状态均显示
操作	打开多阶BOM展开弹窗，树形展示多层BOM结构
权限	rd:ebom:expand

6.2.2 翻单按钮

项目	说明
触发条件	始终可用，所有状态均显示
操作	弹出确认框，确认后复制当前BOM生成新版本，版本号自动+1
权限	rd:ebom:copy
结果	创建新BOM，状态为开立(DRAFT)，版本号递增

6.2.3 导出按钮（行操作）

项目	说明
触发条件	始终可用，所有状态均显示
操作	导出当前BOM的完整物料清单到Excel
权限	rd:ebom:export

6.3 单据视图工具栏按钮

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

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

6.3.2 删除按钮（批量）

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

6.3.3 审核按钮（批量）

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

6.3.4 反审核按钮（批量）

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

6.4 单据视图操作列按钮

6.4.1 查看按钮

项目	说明
显示条件	所有状态均显示
操作	路由跳转到EBOM查看页面（只读模式）
权限	rd:ebom:query

6.4.2 编辑按钮

项目	说明
显示条件	仅 status = DRAFT（开立）或 status = REJECTED（退回）
操作	路由跳转到EBOM编辑页面
权限	rd:ebom:edit

6.4.3 删除按钮（行操作）

项目	说明
显示条件	仅 status = DRAFT（开立）或 status = REJECTED（退回）
操作	弹出确认框，确认后删除当前BOM
权限	rd:ebom:remove

6.4.4 翻单按钮（行操作）

项目	说明
显示条件	仅 status = APPROVED（审核）时显示，替代编辑/删除按钮
操作	复制当前BOM生成新版本
权限	rd:ebom:copy

6.2 新增/编辑页按钮

6.2.1 保存按钮

项目	说明
位置	页面右上角
颜色	primary (蓝色)
触发条件	表单校验通过
操作	保存BOM表头和明细数据
成功提示	"保存成功"
失败提示	显示后端返回的错误信息

6.2.2 取消按钮

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

6.2.3 审核按钮

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

6.2.4 反审核按钮

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

6.2.5 收起/展开按钮

项目	说明
位置	页面右上角最右侧
操作	折叠/展开表头表单区域，仅显示物料明细

6.2.6 新增物料按钮（子表）

项目	说明
位置	物料信息区域右上角
颜色	primary (蓝色)
操作	在明细表格末尾新增一行空白记录
显示条件	仅编辑状态显示

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

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

7. 页面交互规则

7.1 列表页通用交互

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

7.2 明细视图特有交互

序号	交互场景	交互规则
1	物料分类筛选	选择物料分类下拉后，列表自动按该分类过滤
2	无批量操作	明细视图无复选框，不支持批量选择和批量操作
3	多阶操作	点击某行「多阶」→ 弹出多阶BOM展开弹窗，树形展示层次结构
4	翻单操作	点击某行「翻单」→ 确认弹窗 → 后端复制BOM → 成功后刷新列表，提示新BOM编码和版本号
5	行级导出	点击某行「导出」→ 直接下载该BOM的物料明细Excel文件
6	导入操作	点击工具栏「导入」→ 打开文件选择弹窗 → 选择Excel → 上传解析 → 成功后刷新列表

7.3 单据视图特有交互

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

7.2 新增/编辑页交互

序号	交互场景	交互规则
1	页面加载(新增)	自动填充：单据编码(调接口获取)、单据日期(当天)、操作员(当前用户)、版本号(1.0)、母件基数(1.0)、单据状态(开立)、业务状态(正常)
2	页面加载(编辑)	调用详情接口加载BOM表头和明细数据
3	选择母件物料	点击物料编码旁「选择」按钮 → 打开物料选择弹窗 → 选中后自动填充：物料编码、物料名称、计量单位
4	版本号调整	通过 -/+ 按钮调整，步长0.1，最小值1.0
5	新增物料行	点击「+ 新增物料」→ 子表末尾新增空行 → 行内点击物料编码「选择」→ 弹窗选择子件物料
6	选择子件物料	弹窗选择后自动填充：物料编码、物料名称、型号规格、主计量、供应方式
7	删除物料行	点击行操作列「删除」→ 确认弹窗 → 确认后删除该行，重新编号
8	保存操作	前端表单校验 → 校验通过调用保存接口 → 成功提示 → 页面变为编辑模式
9	审核操作	需先保存 → 确认弹窗 → 调用审核接口 → 成功后页面变只读
10	反审核操作	确认弹窗 → 调用反审核接口 → 成功后页面变可编辑
11	表头折叠	点击「收起」→ 表头表单区域收起，仅显示物料明细；点击「展开」→ 恢复
12	离开页面	有未保存修改时，触发 `beforeRouteLeave` 提示确认

7.3 表单校验规则

表头校验

字段	规则	提示信息
bomCode	必填	单据编码不能为空
bomDate	必填	单据日期不能为空
businessType	必填	业务类型不能为空
itemCode	必填	请选择产品物料
version	必填，min=1.0	版本号不能为空
baseQty	必填，min=0.0001	母件基数必须大于0

明细校验

字段	规则	提示信息
bomItemCode	必填	请选择子件物料
numerator	必填，min=0.000001	分子数量必须大于0
pickType	必填	请选择领料方式
usageType	必填	请选择用量方式

业务校验

规则	说明
子件不能等于母件	不允许添加与母件相同的物料作为子件
子件不能重复	同一BOM中不允许出现重复的子件物料
至少一行明细	保存时至少要有一条物料明细
循环检测	保存/审核时后端校验不能存在BOM循环引用

8. 接口调用说明

8.1 接口总览

序号	功能	方法	路径	说明
1	查询BOM列表	GET	/rd/ebom/list	分页查询EBOM列表
2	获取BOM详情	GET	/rd/ebom/{bomId}	获取单条BOM表头+明细
3	新增BOM	POST	/rd/ebom	创建新BOM
4	修改BOM	PUT	/rd/ebom	更新BOM表头+明细
5	删除BOM	DELETE	/rd/ebom/{bomIds}	批量删除BOM
6	审核BOM	PUT	/rd/ebom/approve/{bomId}	审核单据
7	反审核BOM	PUT	/rd/ebom/unapprove/{bomId}	反审核单据
8	获取BOM编码	GET	/rd/ebom/genCode	生成新的BOM编码
9	BOM校验	POST	/rd/ebom/check/{bomId}	循环引用校验
10	BOM多阶展开	GET	/rd/ebom/expand/{bomId}	多层BOM展开
11	BOM翻单	POST	/rd/ebom/copy/{bomId}	复制BOM生成新版本
12	BOM导出	GET	/rd/ebom/export	导出BOM清单
13	选择物料	GET	/md/item/list	物料选择弹窗数据
14	物料分类树	GET	/md/itemtype/treeselect	物料分类树形数据

8.2 接口详细说明

8.2.1 查询BOM列表

GET /rd/ebom/list

请求参数:

参数名	类型	必填	说明
pageNum	integer	否	页码，默认1
pageSize	integer	否	每页数，默认100
bomCode	string	否	单据编码（模糊）
itemCode	string	否	物料编码（模糊）
itemName	string	否	物料名称（模糊）
status	string	否	单据状态
businessStatus	string	否	业务状态
beginDate	string	否	开始日期 (yyyy-MM-dd)
endDate	string	否	结束日期 (yyyy-MM-dd)
workType	integer	否	工作类型，0=研发BOM

响应示例:

{
  "total": 126,
  "rows": [
    {
      "bomId": 777,
      "bomCode": "EBOM000777",
      "bomDate": "2026-01-29",
      "status": "APPROVED",
      "businessType": "机械BOM",
      "itemId": 100,
      "itemCode": "CP001",
      "itemName": "减速器总成",
      "unitName": "台",
      "version": "1.0",
      "baseQty": 1.0,
      "deptName": "",
      "operatorName": "admin",
      "businessStatus": "正常",
      "approveDate": "2026-01-29",
      "approverName": "admin"
    }
  ],
  "code": 200,
  "msg": "查询成功"
}

8.2.2 获取BOM详情

GET /rd/ebom/{bomId}

路径参数:

参数名	类型	必填	说明
bomId	integer	是	BOM ID

响应示例:

{
  "code": 200,
  "msg": "操作成功",
  "data": {
    "bomId": 777,
    "bomCode": "EBOM000777",
    "bomDate": "2026-01-29",
    "status": "APPROVED",
    "businessType": "MECHANICAL",
    "itemId": 100,
    "itemCode": "CP001",
    "itemName": "减速器总成",
    "specification": "RV-110",
    "unitName": "台",
    "version": "1.0",
    "versionDesc": "",
    "baseQty": 1.0,
    "drawingNo": "DWG-CP001",
    "operatorId": 1,
    "operatorName": "admin",
    "businessStatus": "NORMAL",
    "approveDate": "2026-01-29",
    "approverName": "admin",
    "remark": "",
    "lines": [
      {
        "lineId": 1001,
        "bomId": 777,
        "lineNo": 1,
        "bomItemId": 201,
        "bomItemCode": "LJ001",
        "bomItemName": "主轴",
        "specification": "φ25×200",
        "unitName": "根",
        "numerator": 1.0,
        "denominator": 1.0,
        "supplyType": "SELF_MADE",
        "pickType": "ORDER_PICK",
        "usageType": "RATIO",
        "lossRate": 0,
        "routeName": "",
        "drawingNo": "",
        "remark": ""
      },
      {
        "lineId": 1002,
        "bomId": 777,
        "lineNo": 2,
        "bomItemId": 202,
        "bomItemCode": "WL001",
        "bomItemName": "轴承6205",
        "specification": "25×52×15",
        "unitName": "个",
        "numerator": 2.0,
        "denominator": 1.0,
        "supplyType": "PURCHASE",
        "pickType": "ORDER_PICK",
        "usageType": "RATIO",
        "lossRate": 2.00,
        "routeName": "",
        "drawingNo": "",
        "remark": ""
      }
    ]
  }
}

8.2.3 新增BOM

POST /rd/ebom

请求体:

{
  "bomCode": "EBOM000778",
  "bomDate": "2026-02-06",
  "businessType": "MECHANICAL",
  "itemId": 100,
  "itemCode": "CP001",
  "itemName": "减速器总成",
  "unitName": "台",
  "version": "1.0",
  "versionDesc": "初始版本",
  "baseQty": 1.0,
  "drawingNo": "DWG-CP001",
  "businessStatus": "NORMAL",
  "remark": "",
  "lines": [
    {
      "lineNo": 1,
      "bomItemId": 201,
      "bomItemCode": "LJ001",
      "bomItemName": "主轴",
      "specification": "φ25×200",
      "unitName": "根",
      "numerator": 1.0,
      "supplyType": "SELF_MADE",
      "pickType": "ORDER_PICK",
      "usageType": "RATIO"
    }
  ]
}

响应:

{
  "code": 200,
  "msg": "新增成功",
  "data": {
    "bomId": 778
  }
}

8.2.4 修改BOM

PUT /rd/ebom

请求体: 同新增，但包含 bomId 和各明细行的 lineId。

注意: 修改时采用全量提交策略，后端根据lineId判断新增/修改/删除：

无lineId的行 → 新增
有lineId的行 → 修改
请求中不存在的lineId → 删除

8.2.5 删除BOM

DELETE /rd/ebom/{bomIds}

路径参数:

参数名	类型	必填	说明
bomIds	string	是	BOM ID，多个用逗号分隔

业务规则:

仅允许删除开立(DRAFT)状态的BOM
删除时同时删除明细行记录
逻辑删除（del_flag = 1）

8.2.6 审核BOM

PUT /rd/ebom/approve/{bomId}

业务规则:

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

8.2.7 反审核BOM

PUT /rd/ebom/unapprove/{bomId}

业务规则:

仅审核(APPROVED)状态允许反审核
需校验该BOM未被生产计划等下游业务引用
反审核后清空审核员和审核日期
status → DRAFT

8.2.8 BOM翻单（复制新版本）

POST /rd/ebom/copy/{bomId}

业务规则:

基于原BOM复制生成新单据
新BOM编码自动生成
版本号自动+1（如1.0 → 2.0）
新BOM状态为开立(DRAFT)
物料明细完全复制

响应:

{
  "code": 200,
  "msg": "翻单成功",
  "data": {
    "bomId": 779,
    "bomCode": "EBOM000779",
    "version": "2.0"
  }
}

8.2.9 BOM多阶展开

GET /rd/ebom/expand/{bomId}

响应: 返回树形结构，展示多层BOM层次关系。

{
  "code": 200,
  "data": {
    "bomId": 777,
    "itemCode": "CP001",
    "itemName": "减速器总成",
    "children": [
      {
        "itemCode": "LJ001",
        "itemName": "主轴",
        "quantity": 1.0,
        "level": 1,
        "children": []
      },
      {
        "itemCode": "ZJ001",
        "itemName": "齿轮组件",
        "quantity": 1.0,
        "level": 1,
        "children": [
          {
            "itemCode": "WL002",
            "itemName": "大齿轮",
            "quantity": 1.0,
            "level": 2,
            "children": []
          }
        ]
      }
    ]
  }
}

8.2.10 BOM校验

POST /rd/ebom/check/{bomId}

功能: 校验BOM是否存在循环引用（死循环嵌套）。

响应:

{
  "code": 200,
  "msg": "校验通过，BOM结构正常"
}

或错误情况:

{
  "code": 500,
  "msg": "检测到BOM循环引用: CP001 → ZJ001 → CP001"
}

8.2.11 BOM导出

GET /rd/ebom/export

请求参数: 同查询列表参数。

响应: 返回Excel文件流 (application/vnd.openxmlformats-officedocument.spreadsheetml.sheet)

8.2.12 物料选择接口

GET /md/item/list

请求参数:

参数名	类型	必填	说明
pageNum	integer	否	页码
pageSize	integer	否	每页数
itemCode	string	否	物料编码（模糊）
itemName	string	否	物料名称（模糊）
itemTypeId	integer	否	物料分类ID
supplyType	string	否	供应方式筛选

8.2.13 物料分类树

GET /md/itemtype/treeselect

响应: 返回物料分类的树形结构，用于物料选择弹窗的左侧分类树。

9. 状态流转

9.1 单据状态流转图

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

9.2 状态说明

状态	编码	可执行操作	说明
开立	DRAFT	编辑、保存、删除、审核	初始状态，可自由编辑
审核	APPROVED	查看、反审核、翻单、多阶展开、校验、导出	生效状态，不可编辑
退回	REJECTED	编辑、保存、审核	退回后可重新编辑提交

10. 业务规则

10.1 编码规则

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

10.2 版本管理规则

规则	说明
默认版本	新建BOM默认版本号为 1.0
翻单版本	翻单时自动在原版本基础上 +1（1.0 → 2.0）
版本范围	最小1.0，步长0.1
同产品多版本	允许同一产品存在多个版本的BOM
默认BOM	最新审核版本为该产品的默认BOM

10.3 BOM建立规则

规则	说明
母件条件	只有供应方式为「生产」「加工」「委外」的物料才能作为母件建BOM
子件条件	所有物料均可作为子件
循环校验	A的BOM中不能直接或间接包含A本身
重复校验	同一BOM中不允许出现相同的子件
最小行数	BOM至少包含1条明细行
删除关联	删除BOM时同步删除所有明细行

10.4 下游引用规则

引用场景	影响
被生产计划引用	不允许反审核、不允许删除
被生产订单引用	不允许反审核、不允许删除
未被任何引用	可以反审核、可以删除（仅DRAFT状态）

11. 前端组件设计

11.1 文件结构

src/
├── api/
│   └── rd/
│       └── ebom.js                      # EBOM相关API接口定义
├── views/
│   └── rd/
│       └── ebom/
│           ├── index.vue                # EBOM列表页（含明细视图+单据视图切换）
│           ├── add.vue                  # EBOM新增页
│           ├── edit.vue                 # EBOM编辑页
│           └── components/
│               ├── DetailViewTable.vue      # 明细视图表格组件
│               ├── DocumentViewTable.vue    # 单据视图表格组件
│               ├── BomHeaderForm.vue        # 表头表单组件
│               ├── BomLineTable.vue         # 物料明细表格组件（可编辑子表）
│               ├── ItemSelectDialog.vue     # 物料选择弹窗组件（含分类树）
│               ├── BomTreeDialog.vue        # BOM多阶展开弹窗组件
│               └── ImportDialog.vue         # BOM导入弹窗组件

11.2 API接口文件

// src/api/rd/ebom.js
import request from '@/utils/request'

// 查询EBOM列表
export function listEbom(query) {
  return request({
    url: '/rd/ebom/list',
    method: 'get',
    params: query
  })
}

// 获取EBOM详情
export function getEbom(bomId) {
  return request({
    url: '/rd/ebom/' + bomId,
    method: 'get'
  })
}

// 新增EBOM
export function addEbom(data) {
  return request({
    url: '/rd/ebom',
    method: 'post',
    data: data
  })
}

// 修改EBOM
export function updateEbom(data) {
  return request({
    url: '/rd/ebom',
    method: 'put',
    data: data
  })
}

// 删除EBOM
export function delEbom(bomIds) {
  return request({
    url: '/rd/ebom/' + bomIds,
    method: 'delete'
  })
}

// 审核EBOM
export function approveEbom(bomId) {
  return request({
    url: '/rd/ebom/approve/' + bomId,
    method: 'put'
  })
}

// 反审核EBOM
export function unapproveEbom(bomId) {
  return request({
    url: '/rd/ebom/unapprove/' + bomId,
    method: 'put'
  })
}

// 获取BOM编码
export function genBomCode() {
  return request({
    url: '/rd/ebom/genCode',
    method: 'get'
  })
}

// BOM校验
export function checkEbom(bomId) {
  return request({
    url: '/rd/ebom/check/' + bomId,
    method: 'post'
  })
}

// BOM多阶展开
export function expandEbom(bomId) {
  return request({
    url: '/rd/ebom/expand/' + bomId,
    method: 'get'
  })
}

// BOM翻单
export function copyEbom(bomId) {
  return request({
    url: '/rd/ebom/copy/' + bomId,
    method: 'post'
  })
}

// 导出EBOM
export function exportEbom(query) {
  return request({
    url: '/rd/ebom/export',
    method: 'get',
    params: query,
    responseType: 'blob'
  })
}

11.3 路由配置

// src/router/modules/rd.js
{
  path: '/rd',
  component: Layout,
  redirect: '/rd/develop/ebom',
  name: 'Rd',
  meta: { title: '研发管理', icon: 'el-icon-document' },
  children: [
    {
      path: 'develop/ebom',
      name: 'Ebom',
      component: () => import('@/views/rd/ebom/index'),
      meta: { title: '产品BOM', icon: 'el-icon-tickets' }
    },
    {
      path: 'develop/ebom/add',
      name: 'EbomAdd',
      component: () => import('@/views/rd/ebom/add'),
      meta: { title: '新增EBOM', activeMenu: '/rd/develop/ebom' },
      hidden: true
    },
    {
      path: 'develop/ebom/edit/:bomId',
      name: 'EbomEdit',
      component: () => import('@/views/rd/ebom/edit'),
      meta: { title: '编辑EBOM', activeMenu: '/rd/develop/ebom' },
      hidden: true
    }
  ]
}

11.4 关键组件规范

列表页核心结构（含双视图切换）

<!-- src/views/rd/ebom/index.vue -->
<template>
  <div class="app-container">
    <!-- 搜索区域 - 根据视图模式动态渲染 -->
    <el-form :model="queryParams" ref="queryForm" :inline="true">
      <el-form-item label="单据编码" prop="bomCode">
        <el-input v-model="queryParams.bomCode" placeholder="请输入" clearable />
      </el-form-item>
      <el-form-item label="物料编码" prop="itemCode">
        <el-input v-model="queryParams.itemCode" placeholder="请输入" clearable />
      </el-form-item>
      <el-form-item label="物料名称" prop="itemName">
        <el-input v-model="queryParams.itemName" placeholder="请输入" clearable />
      </el-form-item>
      <!-- 明细视图特有: 物料分类 -->
      <el-form-item v-if="viewMode === 'detail'" label="物料分类" prop="itemTypeId">
        <el-select v-model="queryParams.itemTypeId" placeholder="请选择" clearable />
      </el-form-item>
      <!-- 单据视图特有: 单据状态、业务状态 -->
      <el-form-item v-if="viewMode === 'document'" label="单据状态" prop="status">
        <el-select v-model="queryParams.status" placeholder="请选择" clearable />
      </el-form-item>
      <el-form-item v-if="viewMode === 'document'" label="业务状态" prop="businessStatus">
        <el-select v-model="queryParams.businessStatus" placeholder="请选择" clearable />
      </el-form-item>
      <!-- 公共: 日期范围 + 搜索 -->
      <el-form-item label="开始日期" prop="startDate">
        <el-date-picker v-model="queryParams.startDate" type="date" placeholder="选择日期" />
      </el-form-item>
      <el-form-item label="结束日期" prop="endDate">
        <el-date-picker v-model="queryParams.endDate" type="date" placeholder="选择日期" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
      </el-form-item>
    </el-form>

    <!-- 工具栏 - 根据视图模式动态渲染 -->
    <el-row :gutter="10" class="mb8">
      <!-- 明细视图工具栏 -->
      <template v-if="viewMode === 'detail'">
        <el-col :span="1.5">
          <el-button type="primary" @click="switchView('document')">单据</el-button>
        </el-col>
        <el-col :span="1.5"><el-button @click="handleQueryAll">查询所有</el-button></el-col>
        <el-col :span="1.5"><el-button type="success" icon="el-icon-plus" @click="handleAdd">新增</el-button></el-col>
        <el-col :span="1.5"><el-button type="warning" @click="handleClear">清空</el-button></el-col>
        <el-col :span="1.5"><el-button icon="el-icon-upload2" @click="handleImport">导入</el-button></el-col>
        <el-col :span="1.5"><el-button icon="el-icon-download" @click="handleExport">导出</el-button></el-col>
      </template>
      <!-- 单据视图工具栏 -->
      <template v-else>
        <el-col :span="1.5">
          <el-button type="primary" @click="switchView('detail')">明细</el-button>
        </el-col>
        <el-col :span="1.5"><el-button @click="handleQueryAll">查询所有</el-button></el-col>
        <el-col :span="1.5"><el-button type="success" icon="el-icon-plus" @click="handleAdd">新增</el-button></el-col>
        <el-col :span="1.5"><el-button type="danger" :disabled="multiple" @click="handleDelete">删</el-button></el-col>
        <el-col :span="1.5"><el-button type="primary" :disabled="multiple" @click="handleApprove">审核</el-button></el-col>
        <el-col :span="1.5"><el-button :disabled="multiple" @click="handleUnapprove">反审核</el-button></el-col>
      </template>
    </el-row>

    <!-- 明细视图表格 -->
    <el-table v-if="viewMode === 'detail'" v-loading="loading" :data="bomList">
      <el-table-column type="index" label="序号" width="60" align="center" />
      <el-table-column label="单据编码" prop="bomCode" width="140">
        <template slot-scope="scope">
          <el-link type="primary" @click="handleView(scope.row)">{{ scope.row.bomCode }}</el-link>
        </template>
      </el-table-column>
      <el-table-column label="物料编码" prop="itemCode" width="140" />
      <el-table-column label="物料名称" prop="itemName" min-width="200" />
      <el-table-column label="母件基数" prop="baseQty" width="80" align="center" />
      <el-table-column label="版本号" prop="version" width="80" align="center" />
      <el-table-column label="版本说明" prop="versionDesc" width="120" />
      <el-table-column label="图纸号" prop="drawingNo" width="100" />
      <el-table-column label="单据状态" prop="status" width="80" align="center">
        <template slot-scope="scope">
          <el-tag :type="statusTagType(scope.row.status)" size="small">{{ statusLabel(scope.row.status) }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="单据日期" prop="bomDate" width="100" align="center" />
      <el-table-column label="操作" width="140" align="center">
        <template slot-scope="scope">
          <el-button size="mini" type="text" @click="handleExpand(scope.row)">多阶</el-button>
          <el-button size="mini" type="text" style="color:#67C23A" @click="handleCopy(scope.row)">翻单</el-button>
          <el-button size="mini" type="text" style="color:#E6A23C" @click="handleExportRow(scope.row)">导出</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 单据视图表格 -->
    <el-table v-else v-loading="loading" :data="bomList" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column label="单据编码" prop="bomCode" width="140">
        <template slot-scope="scope">
          <el-link type="primary" @click="handleView(scope.row)">{{ scope.row.bomCode }}</el-link>
        </template>
      </el-table-column>
      <el-table-column label="单据日期" prop="bomDate" width="120" align="center" sortable />
      <el-table-column label="单据状态" prop="status" width="80" align="center">
        <template slot-scope="scope">
          <el-tag :type="statusTagType(scope.row.status)" size="small">{{ statusLabel(scope.row.status) }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="业务类型" prop="businessType" width="100" align="center" />
      <el-table-column label="业务部门" prop="deptName" width="100" align="center" />
      <el-table-column label="业务人员" prop="operatorName" width="100" align="center" />
      <el-table-column label="业务状态" prop="businessStatus" width="80" align="center" />
      <el-table-column label="审核日期" prop="approveDate" width="120" align="center" />
      <el-table-column label="操作" width="160" align="center">
        <template slot-scope="scope">
          <el-button size="mini" type="text" style="color:#67C23A" @click="handleView(scope.row)">查看</el-button>
          <template v-if="scope.row.status === 'APPROVED'">
            <el-button size="mini" type="text" @click="handleCopy(scope.row)">翻单</el-button>
          </template>
          <template v-else>
            <el-button size="mini" type="text" @click="handleEdit(scope.row)">编辑</el-button>
            <el-button size="mini" type="text" style="color:#F56C6C" @click="handleDelete(scope.row)">删除</el-button>
          </template>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      viewMode: 'detail', // 'detail' | 'document'
      // ...其他数据
    }
  },
  methods: {
    switchView(mode) {
      this.viewMode = mode
      this.resetQuery()
      this.getList()
    },
    // ...其他方法
  }
}
</script>

12. 数据模型

12.1 表关系图

                    ┌──────────────────────────┐
                    │     erp_md_item_type     │
                    │      (物料分类)           │
                    └──────────┬───────────────┘
                               │ 1:N
                               ▼
┌──────────────────────────┐  ┌──────────────────────────┐
│     erp_md_bom           │  │      erp_md_item         │
│   (BOM表头/EBOM)          │◄─┤     (物料档案)           │
│                          │  │                          │
│ bom_id (PK)              │  │ item_id (PK)             │
│ bom_code (UK)            │  │ item_code                │
│ item_id (FK) ────────────┼──┤ item_name                │
│ item_code                │  │ default_bom_id (FK) ─────┼──► bom_id
│ item_name                │  │ supply_type              │
│ version                  │  └──────────────────────────┘
│ status                   │
│ base_qty                 │
└──────────┬───────────────┘
           │ 1:N
           ▼
┌──────────────────────────┐
│   erp_md_bom_line        │
│  (BOM明细/子件清单)        │
│                          │
│ line_id (PK)             │
│ bom_id (FK) ─────────────┼──► erp_md_bom.bom_id
│ item_id (FK) ────────────┼──► erp_md_item.item_id (子件物料)
│ line_no                  │
│ base_qty (用量)           │
│ supply_type              │
│ loss_rate                │
└──────────────────────────┘

12.2 MOM系统表映射

ERP表名	MOM表名	说明
erp_md_bom	md_bom	BOM表头
erp_md_bom_line	md_product_bom	BOM明细
erp_md_item	md_item	物料档案
erp_md_item_type	md_item_type	物料分类

12.3 数据同步方向

ERP (erp_md_bom) ──同步──► MOM (md_bom)
ERP (erp_md_bom_line) ──同步──► MOM (md_product_bom)

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

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

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

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

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

附录B: 权限标识汇总

权限标识	说明	对应操作	所属视图
rd:ebom:list	列表查询	查看BOM列表、视图切换	通用
rd:ebom:query	详情查询	查看BOM详情	单据视图
rd:ebom:add	新增	新增BOM	通用
rd:ebom:edit	编辑	修改BOM	单据视图
rd:ebom:remove	删除	删除BOM、清空	单据视图/明细视图
rd:ebom:approve	审核	审核BOM	单据视图
rd:ebom:unapprove	反审核	反审核BOM	单据视图
rd:ebom:export	导出	导出BOM列表/单条BOM	明细视图
rd:ebom:import	导入	导入BOM数据	明细视图
rd:ebom:expand	多阶展开	多层BOM结构展开	明细视图
rd:ebom:copy	翻单	复制BOM生成新版本	明细视图/单据视图

附录C: 参考截图说明

截图文件	说明
`docs/ui-make/rsun-产品bom列表-明细视图.png`	列表页明细视图：序号列、物料编码/名称/版本号等字段、操作列(多阶/翻单/导出)
`docs/ui-make/rsun-产品bom列表-单据视图.png`	列表页单据视图：复选框列、单据日期/状态/业务类型等字段、操作列(查看/编辑/删除)
`docs/ui-make/rsun-产品bom新增-1.png`	新增页空白表单状态，展示表头字段布局和物料明细空行
`docs/ui-make/rsun-产品bom新增-2.png`	新增页已填写数据，展示物料编码选择后的自动填充效果
`docs/ui-make/rsun-产品bom新增-物料编码选择弹窗.png`	选择物料弹窗：左侧分类树、搜索区、物料列表(含供应方式列)

修订历史

版本	日期	修订内容	修订人
1.0.0	2026-02-06	初始版本，完整页面设计开发说明	System
1.1.0	2026-02-06	补充列表页双视图（明细视图/单据视图）设计说明，更新物料选择弹窗详细设计	System

69 KiB Raw Blame History Unescape Escape

产品BOM（EBOM）- 页面设计开发说明文档

目录

1. 页面概述

1.1 功能说明

1.2 业务场景

1.3 URL路由参数

1.4 页面截图参考

2. 页面结构

2.1 整体布局

2.2 页面模式

2.3 列表页双视图概述

3. 列表页设计

3.1 明细视图（默认视图）

3.1.1 搜索条件区域

3.1.2 工具栏按钮

3.1.3 数据表格列定义

3.1.4 明细视图操作列按钮

3.2 单据视图

3.2.1 搜索条件区域

3.2.2 工具栏按钮

3.2.3 数据表格列定义

3.2.4 单据视图操作列按钮

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

4. 新增/编辑页设计

4.1 页面布局

4.2 表头表单字段

4.3 物料明细表格（子表）

4.4 选择物料弹窗

5. 数据字段定义

5.1 BOM表头字段（erp_md_bom / md_bom）

5.2 BOM明细字段（erp_md_bom_line / md_product_bom）

6. 按钮操作说明

6.1 明细视图工具栏按钮

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

6.1.2 查询所有按钮

6.1.3 新增按钮

6.1.4 清空按钮

6.1.5 导入按钮

6.1.6 导出按钮（工具栏）

6.2 明细视图操作列按钮

6.2.1 多阶按钮

6.2.2 翻单按钮

6.2.3 导出按钮（行操作）

6.3 单据视图工具栏按钮

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

6.3.2 删除按钮（批量）

6.3.3 审核按钮（批量）

6.3.4 反审核按钮（批量）

6.4 单据视图操作列按钮

6.4.1 查看按钮

6.4.2 编辑按钮

6.4.3 删除按钮（行操作）

6.4.4 翻单按钮（行操作）

6.2 新增/编辑页按钮

6.2.1 保存按钮

6.2.2 取消按钮

6.2.3 审核按钮

6.2.4 反审核按钮

6.2.5 收起/展开按钮

6.2.6 新增物料按钮（子表）

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

7. 页面交互规则

7.1 列表页通用交互

7.2 明细视图特有交互

7.3 单据视图特有交互

7.2 新增/编辑页交互

7.3 表单校验规则

表头校验

明细校验

业务校验

8. 接口调用说明

8.1 接口总览

8.2 接口详细说明

8.2.1 查询BOM列表

8.2.2 获取BOM详情

8.2.3 新增BOM

8.2.4 修改BOM

8.2.5 删除BOM

8.2.6 审核BOM

69 KiB

Raw Blame History