基于SpringBoot+Vue的BOM表智能生成系統(tǒng)設(shè)計(jì)與實(shí)現(xiàn)

李佳 吳菲 章毅恒

摘? 要：有些特殊單位在制作BOM表時(shí)出于保密要求不能連接外網(wǎng)，傳統(tǒng)的手動登記方式耗時(shí)費(fèi)力不利于高效研發(fā)和生產(chǎn)，因此，采用前后端分離開發(fā)模式，后端使用SpringBoot框架，Mybatis數(shù)據(jù)連接，前端使用Vue漸進(jìn)式框架，element-ui前端組件，設(shè)計(jì)并實(shí)現(xiàn)了BOM表智能生成系統(tǒng)，實(shí)現(xiàn)物料從設(shè)計(jì)部到采購部再到倉儲的離線管理，實(shí)現(xiàn)了對物料離線管理的目標(biāo)。該系統(tǒng)具備極高的可靠性和實(shí)用性，能簡化保密部門對BOM表的錄入過程，為企業(yè)提供離線整理平臺。

關(guān)鍵詞：BOM表智能生成；離線數(shù)據(jù)管理；SpringBoot框架；Vue框架

中圖分類號：TP311；TP309 文獻(xiàn)標(biāo)識碼：A? 文章編號：2096-4706（2023）09-0184-05

Abstract： Some special units cannot connect to the external network due to confidentiality requirements when making BOM tables. The traditional manual registration method is time-consuming and laborious， which is not conducive to efficient development and production. Therefore， adopts the development mode of front-end separation， the back-end uses SpringBoot framework， Mybatis data connection， and the front-end uses Vue progressive framework， element-ui front-end component， design and implement an BOM table intelligent generation system， realize the off-line management of materials from the design department to the purchasing department and then to the warehouse， achieve the goal of off-line management of materials. The system has high reliability and practicability， which can simplify the BOM table entry process of the secrecy department and provide an off-line sorting platform for enterprises.

Keywords： BOM table intelligent generation; offline data management; SpringBoot framework; Vue framework

0? 引? 言

企業(yè)研制新型產(chǎn)品的過程正處于產(chǎn)品不成熟的階段，需要一邊生產(chǎn)產(chǎn)品一邊對新產(chǎn)品進(jìn)行試驗(yàn)，新產(chǎn)品試驗(yàn)反饋的結(jié)果可用于隨時(shí)調(diào)整產(chǎn)品設(shè)計(jì)，由于產(chǎn)品設(shè)計(jì)的變更需要適時(shí)調(diào)整產(chǎn)品物料清單（Bill of Material， BOM）。BOM表是企業(yè)資源計(jì)劃系統(tǒng)（Enterprise Resource Planning， ERP）運(yùn)算的數(shù)據(jù)基礎(chǔ)，與企業(yè)各部門的業(yè)務(wù)活動相連甚密，一旦BOM發(fā)生改變，之前已經(jīng)生成的大量單據(jù)都會失去準(zhǔn)確性，只能根據(jù)新的BOM重新進(jìn)行生成物料需求計(jì)劃（Material Requirement Planning， MRP）運(yùn)算，必須手工實(shí)行善后處理工作，出于保密方面的考慮不能連接外網(wǎng)與ERP系統(tǒng)同步數(shù)據(jù)，給BOM表編輯人員帶來巨大的工作量。有時(shí)由于試驗(yàn)需要緊急采購物資，而這些物資并不具備企業(yè)的物資編碼，由于不能連接外網(wǎng)，ERP系統(tǒng)不具備對臨時(shí)物資進(jìn)行有效管理的能力。本系統(tǒng)可解決這兩種問題，為工作人員提供便捷化、信息化的BOM表智能生成平臺。

1? 系統(tǒng)需求分析

基于企業(yè)保密要求，為解決不能連接互聯(lián)網(wǎng)交換信息的問題，打造BOM表智能生成系統(tǒng)及時(shí)管理臨時(shí)物資以及減輕操作人員的工作量，就ERP系統(tǒng)與BOM表智能生成系統(tǒng)不能直接通過網(wǎng)絡(luò)互聯(lián)，也不能直接通過數(shù)據(jù)庫直接交換數(shù)據(jù)的問題，經(jīng)過反復(fù)思考，形成通過Excel模板在兩個系統(tǒng)之間交換數(shù)據(jù)的方案（如圖1所示）：

1）ERP系統(tǒng)導(dǎo)出存貨檔案數(shù)據(jù)（模板文件），提取所需的基礎(chǔ)數(shù)據(jù)。

2）BOM表智能生成系統(tǒng)導(dǎo)入存貨檔案（模板文件），存入數(shù)據(jù)庫，實(shí)現(xiàn)基礎(chǔ)數(shù)據(jù)的同步。

3）BOM表智能生成系統(tǒng)根據(jù)設(shè)計(jì)人員明細(xì)表/輸入數(shù)據(jù)，自動生成BOM表。

4）BOM表智能生成系統(tǒng)導(dǎo)出BOM表。

5）將BOM表導(dǎo)入ERP系統(tǒng)中，實(shí)現(xiàn)兩個系統(tǒng)的數(shù)據(jù)同步。

為滿足系統(tǒng)需求，設(shè)計(jì)基礎(chǔ)數(shù)據(jù)管理模塊、明細(xì)表錄入模塊、BOM表智能生成模塊等：

1）基礎(chǔ)數(shù)據(jù)管理模塊。包括ERP系統(tǒng)現(xiàn)有基礎(chǔ)數(shù)據(jù)導(dǎo)入該系統(tǒng)數(shù)據(jù)庫，新增臨時(shí)無編碼物資數(shù)據(jù)以Excel表格形式導(dǎo)出無編碼物資存入ERP系統(tǒng)。

2）明細(xì)表錄入模塊。生產(chǎn)設(shè)計(jì)部門可高效便捷地錄入設(shè)計(jì)BOM表，并在統(tǒng)一平臺上供工藝設(shè)計(jì)部門繼續(xù)編輯。

3）BOM表智能生成模塊。以明細(xì)表導(dǎo)入新建生成BOM表、手動新建BOM表、復(fù)制已有BOM表等多種方式智能快捷生成BOM表。

1.1? 存貨檔案數(shù)據(jù)管理模塊需求分析

存貨檔案數(shù)據(jù)管理模塊提供存貨名稱、存貨編號、規(guī)格型號、產(chǎn)地廠牌、存貨代碼、存貨大類名稱編碼、存貨大類、建檔人、建檔日期等信息，可以在此模塊中導(dǎo)入、瀏覽存貨檔案信息。如圖2所示為存貨檔案數(shù)據(jù)管理流向圖。

1.2? 明細(xì)表錄入需求分析

明細(xì)表錄入模塊為設(shè)計(jì)人員提供在線快捷錄入明細(xì)表功能，輸入框可跨字段模糊搜索，提高錄入速度，錄入完成后直接保存到數(shù)據(jù)庫，工藝設(shè)計(jì)部門人員可在此基礎(chǔ)上進(jìn)行BOM表的編輯操作。如圖3所示為明細(xì)表錄入和管理數(shù)據(jù)流向圖，明細(xì)表由多人錄入，是否生成明細(xì)表需要管理員審批，若某明細(xì)表的審批結(jié)果為合格，則該張明細(xì)表流入BOM表生成模塊，若某明細(xì)表的審批結(jié)果為拒絕，則該明細(xì)表就會返回到錄入人員那里進(jìn)行整改處理。

1.3? BOM表智能生成模塊需求分析

BOM表智能生成模塊主要提供三大功能，分別是BOM表錄入、BOM表生成和BOM表審核，并提供三種BOM表錄入方式，一是基于導(dǎo)入明細(xì)表的方式生成BOM表，相比于傳統(tǒng)的手動錄入節(jié)省了大量的時(shí)間，無須再手動輸入已有明細(xì)表的內(nèi)容；二是以復(fù)制其他表的方式生成BOM表，如果BOM表有部分與其他BOM表重合的地方則可復(fù)制該表，并在此基礎(chǔ)上繼續(xù)進(jìn)行新BOM表的編輯工作；三是直接手動錄入BOM表，但此時(shí)直接手錄BOM表也與傳統(tǒng)錄入BOM表的方式有所不同，增加了快捷錄入方式。

如圖4所示為BOM表數(shù)據(jù)流向圖，可以在頁面中看到所有已經(jīng)審批的BOM表，也可以通過點(diǎn)擊的方式查看自己制作的BOM表。

2? 系統(tǒng)設(shè)計(jì)

2.1? 系統(tǒng)總體框架

為提高開發(fā)效率和可擴(kuò)展性，采用前后端分離的開發(fā)模式，前端使用Vue漸進(jìn)式框架，界面展示采用elemnet-ui組件提高美觀度，后端采用SpringBoot框架和Mybatis驅(qū)動器，以此搭建一個B/S架構(gòu)的系統(tǒng)。如圖5所示為BOM表智能生成系統(tǒng)總體架構(gòu)圖。

架構(gòu)圖總共分為三個板塊，每個板塊中有對應(yīng)各個功能實(shí)現(xiàn)的具體小模塊。1過程表示不同用戶所能執(zhí)行操作的不同權(quán)限，前端在調(diào)用接口時(shí)攜帶用戶權(quán)限標(biāo)識，后臺識別用戶權(quán)限提供該權(quán)限對應(yīng)的功能操作；2過程為后臺代碼編寫時(shí)使用SpringBoot框架整合mybaits進(jìn)行持久層框架配置，用以后續(xù)進(jìn)行數(shù)據(jù)庫操作；3過程為后臺服務(wù)整合了mybaits框架后對數(shù)據(jù)庫進(jìn)行具體的操作，根據(jù)后臺從前端獲取到的具體服務(wù)需求，對數(shù)據(jù)庫進(jìn)行相應(yīng)的增加、刪除、修改和查詢操作；4過程為后臺為前端提供服務(wù)接口返回前端需要的數(shù)據(jù)內(nèi)容，以此實(shí)現(xiàn)前后端分離開發(fā)模式的數(shù)據(jù)交互，前端根據(jù)后臺呈遞的JSON字符串格式的數(shù)據(jù)進(jìn)行解析并實(shí)現(xiàn)數(shù)據(jù)的可視化展示；5過程為不同用戶角色所能看見的不同操作界面，避免不同用戶誤操作的可能，提高本系統(tǒng)的安全性和專業(yè)性。

2.2? 系統(tǒng)詳細(xì)設(shè)計(jì)

2.2.1? 存貨檔案數(shù)據(jù)管理設(shè)計(jì)與實(shí)現(xiàn)

如圖6（a）所示為存貨檔案數(shù)據(jù)管理流程圖。明細(xì)表設(shè)計(jì)人員在進(jìn)入該系統(tǒng)錄入界面時(shí)點(diǎn)擊編輯按鈕，解鎖表格操作，聚焦表格單元輸入框，通過focus事件從前端獲取界面數(shù)據(jù)操作信號發(fā)起請求，調(diào)用后端獲取存貨檔案信息接口，使用Mybatis的helperPage分頁方式，分頁獲取所有存貨檔案信息，其內(nèi)容有頁碼、每頁展示條數(shù)和內(nèi)容、總頁數(shù)、當(dāng)前是否為首頁或末頁，并以JSON字符串的形式將內(nèi)容傳遞給前端，前端將得到的字符串解析后，判斷首頁末頁信息，展示當(dāng)前頁碼，將所獲取的本頁數(shù)據(jù)內(nèi)容渲染到頁面展示給用戶，倘若數(shù)據(jù)庫中沒有相應(yīng)數(shù)據(jù)，則可以手動輸入物料名稱，并在生成BOM表后，以Excel的形式導(dǎo)出新增物料，傳入ERP系統(tǒng)實(shí)現(xiàn)數(shù)據(jù)同步。

2.2.2? 明細(xì)表錄入設(shè)計(jì)與實(shí)現(xiàn)

操作人員進(jìn)入系統(tǒng)明細(xì)表部分，前端請求后臺，查詢到所有明細(xì)表列表，使用Mybatis的helperPage方法從數(shù)據(jù)庫中獲取分頁數(shù)據(jù)（數(shù)據(jù)內(nèi)容為各個明細(xì)表的名稱），將獲取到的明細(xì)表名稱列表渲染到頁面表格中，查看所有明細(xì)表及自己編輯的明細(xì)表是否通過審核。在列表中篩選查看自己編輯的明細(xì)表，同時(shí)可以選擇增加、刪除、修改以及審核明細(xì)表。明細(xì)表錄入流程如圖6（b）所示。

2.2.3? BOM表智能生成系統(tǒng)設(shè)計(jì)與實(shí)現(xiàn)

操作人員進(jìn)入該系統(tǒng)BOM表部分，前端會調(diào)用接口展示當(dāng)前所有的BOM表，管理員用戶可以點(diǎn)擊未審核篩選出當(dāng)前沒有審核的明細(xì)表，并在列表中展示當(dāng)前所有未審核的明細(xì)表。

BOM表生成有三種實(shí)現(xiàn)方式，第一種方式是選擇明細(xì)表生成BOM表，第二種方式是直接手動輸入BOM表，第三種方式是復(fù)制現(xiàn)有BOM表，在此基礎(chǔ)上修改而成。BOM表生成流程如圖6（c）所示。

2.3? 數(shù)據(jù)庫設(shè)計(jì)

根據(jù)BOM表智能生成系統(tǒng)業(yè)務(wù)，主要設(shè)計(jì)了如圖7所示的業(yè)務(wù)表。

1）用戶表用于記錄用戶信息、用戶角色信息及審核信息。

2）權(quán)限明細(xì)表用于記錄用戶權(quán)限以及各權(quán)限對應(yīng)的操作詳細(xì)內(nèi)容。

3）記錄物料信息，各數(shù)據(jù)表之間的關(guān)系如圖7所示。

4）明細(xì)表用于記錄明細(xì)表信息。

5）BOM表用于記錄BOM表信息。

6）新增存貨表用于記錄臨時(shí)新增存貨，便于新增存貨的導(dǎo)出。

7）物料管理表用于記錄所有物料信息。

8）存貨分類表用于記錄所有物料分類信息。系統(tǒng)所用的各個數(shù)據(jù)表之間的關(guān)系如圖7所示。

3? 系統(tǒng)實(shí)現(xiàn)與測試

3.1? 系統(tǒng)實(shí)現(xiàn)

本系統(tǒng)采用前后端分離的開發(fā)方式，前端采用Vue漸進(jìn)式框架開發(fā)，網(wǎng)頁界面繪制使用elemnt-ui組件優(yōu)化界面美觀度的同時(shí)加快系統(tǒng)開發(fā)進(jìn)程；后臺使用SpringBoot+MyBatis+

MySQL數(shù)據(jù)庫開發(fā)平臺，開發(fā)環(huán)境為java jdk1.8，開發(fā)時(shí)數(shù)據(jù)庫采用Navicat可視化工具輔助觀察后臺服務(wù)情況，實(shí)現(xiàn)BOM表智能生成系統(tǒng)存貨檔案數(shù)據(jù)管理、明細(xì)表錄入管理、BOM表生成管理、用戶權(quán)限管理和分配等功能。

如圖8所示為基礎(chǔ)數(shù)據(jù)上傳與瀏覽界面，可將從ERP系統(tǒng)導(dǎo)出的基礎(chǔ)數(shù)據(jù)上傳到本系統(tǒng)的數(shù)據(jù)庫中；如圖9所示為明細(xì)表編輯、審核與瀏覽界面，明細(xì)表編輯界面具有數(shù)據(jù)審查功能，當(dāng)為紅色時(shí)表示數(shù)量欄未填寫；如圖10所示為BOM表編輯與瀏覽界面，可在此界面中查看所有明細(xì)表和我所編輯的明細(xì)表，點(diǎn)擊導(dǎo)出新增，則新增物料欄變紅。

3.2? 系統(tǒng)測試

為測試BOM表智能生成在線系統(tǒng)功能是否能正常使用，根據(jù)系統(tǒng)需求模塊設(shè)計(jì)了如表1所示的功能測試用例，從不同用戶角色功能和不同模塊等方面對系統(tǒng)進(jìn)行了測試驗(yàn)證。測試結(jié)果表明，BOM表智能生成在線系統(tǒng)的存貨檔案數(shù)據(jù)管理、明細(xì)表錄入、BOM表智能生成模塊所有功能均測試通過，使用Navicat數(shù)據(jù)可視化工具輔助查看數(shù)據(jù)內(nèi)容，可觀察到功能測試結(jié)果與預(yù)期效果一致，界面操作流暢無異常且排版美觀舒適，網(wǎng)頁在線表格錄入數(shù)據(jù)穩(wěn)定無卡頓，模糊搜索響應(yīng)及時(shí)無明顯延遲，數(shù)據(jù)傳輸穩(wěn)定，根據(jù)開發(fā)需求實(shí)現(xiàn)的BOM表智能導(dǎo)出系統(tǒng)可提供良好的用戶交互體驗(yàn)，在系統(tǒng)后續(xù)擴(kuò)展測試時(shí)，會加強(qiáng)系統(tǒng)性能測試，進(jìn)一步縮短操作響應(yīng)時(shí)間。

4? 結(jié)? 論

本文立足于保密單位對數(shù)據(jù)需要保密同時(shí)也需要單位內(nèi)部共享數(shù)據(jù)在線智能生成BOM表的需求，設(shè)計(jì)并實(shí)現(xiàn)了BOM表智能導(dǎo)出系統(tǒng)，本系統(tǒng)采用B/S架構(gòu)和前后端分離的開發(fā)模式，在提高代碼可擴(kuò)展性的同時(shí)縮短開發(fā)周期，前端采用Vue框架，后臺采用SpringBoot框架整合MyBaits進(jìn)行功能服務(wù)接口開發(fā)，完成了本系統(tǒng)存貨檔案數(shù)據(jù)模塊、明細(xì)表模塊、BOM表模塊等功能的開發(fā)，從而實(shí)現(xiàn)了將數(shù)據(jù)錄入基礎(chǔ)數(shù)據(jù)庫到明細(xì)表錄入再到BOM表生成，為工藝制作部門制作BOM表提供了便捷的服務(wù)。

該系統(tǒng)具備極強(qiáng)的可行性與實(shí)用性，為BOM表制作部門提供便捷的同時(shí)將數(shù)據(jù)庫同步到BOM制作和生成平臺，節(jié)省了設(shè)計(jì)部門和工藝制作部門來回溝通的時(shí)間，并能夠及時(shí)同步ERP系統(tǒng)中的數(shù)據(jù)。后續(xù)如果時(shí)間充足會繼續(xù)從兩個方面優(yōu)化本系統(tǒng)，一方面是優(yōu)化現(xiàn)有代碼，進(jìn)一步提高代碼性能和可復(fù)用性，刪除冗余代碼，在已有基礎(chǔ)上繼續(xù)優(yōu)化與用戶的交互性；另一方面會考慮增加功能模塊接入倉儲物流信息，幫助企業(yè)進(jìn)一步管理產(chǎn)品，使本系統(tǒng)具有更大的現(xiàn)實(shí)意義和使用價(jià)值。

參考文獻(xiàn)：

[1] 楊鑫.XX軍工企業(yè)ERP實(shí)施困境及其對策 [D].湘潭：湘潭大學(xué)，2009.

[2] 徐小輝，劉江濤，高涵，等.基于SpringBoot+Vue框架的采氣方案系統(tǒng)開發(fā) [J].計(jì)算機(jī)仿真，2021，38（6）：248-250+382.

[3] 韓佳彤，杜芳，甄必鑫，等.基于SpringBoot的分布式市政運(yùn)維分析平臺 [J].內(nèi)蒙古大學(xué)學(xué)報(bào)：自然科學(xué)版，2022，53（3）：309-316.

[4] 郭建衛(wèi).基于SpringBoot+Mybatis+Vue的學(xué)生德育量化考核系統(tǒng)設(shè)計(jì)與實(shí)現(xiàn) [J].現(xiàn)代信息科技，2023，7（1）：18-22.

[5] 銀莉，杜嘯楠.基于SpringBoot和Vue的社區(qū)服務(wù)平臺設(shè)計(jì)與實(shí)現(xiàn) [J].電子技術(shù)，2022，51（12）：182-183.

[6] 王丹，孫曉宇，楊路斌，等.基于SpringBoot的軟件統(tǒng)計(jì)分析系統(tǒng)設(shè)計(jì)與實(shí)現(xiàn) [J].軟件工程，2019，22（3）：40-42.

作者簡介：李佳（1997—），女，漢族，重慶人，碩士研究生在讀，研究方向：計(jì)算機(jī)軟件；吳菲（1997—），男，漢族，重慶人，碩士研究生在讀，研究方向：計(jì)算機(jī)技術(shù)；章毅恒（1997—），男，漢族，安徽懷寧人，碩士研究生在讀，研究方向：計(jì)算機(jī)軟件。