基于SpringBoot+Vue的校園報(bào)修管理系統(tǒng)設(shè)計(jì)與實(shí)現(xiàn)摘要隨著信息技術(shù)在教育領(lǐng)域的深入應(yīng)用，校園管理的數(shù)字化轉(zhuǎn)型已成為必然趨勢(shì)。校園報(bào)修管理作為后勤服務(wù)的重要組成部分，傳統(tǒng)人工報(bào)修模式存在效率低下、流程不透明、信息孤島等問(wèn)題。本文基于SpringBoot+Vue技術(shù)棧，設(shè)計(jì)并實(shí)現(xiàn)了一套校園報(bào)修管理系統(tǒng)，旨在提升報(bào)修處理效率與服務(wù)質(zhì)量。系統(tǒng)采用前后端分離架構(gòu)，后端以SpringBoot為核心框架，提供RESTfulAPI接口；前端基于Vue.js構(gòu)建用戶(hù)界面，結(jié)合ElementUI組件庫(kù)實(shí)現(xiàn)響應(yīng)式設(shè)計(jì)；數(shù)據(jù)庫(kù)選用MySQL存儲(chǔ)系統(tǒng)數(shù)據(jù)。系統(tǒng)功能涵蓋用戶(hù)管理、報(bào)修提交、工單分配、維修跟蹤、評(píng)價(jià)反饋等模塊，實(shí)現(xiàn)了報(bào)修全流程的數(shù)字化管理。測(cè)試結(jié)果表明，該系統(tǒng)運(yùn)行穩(wěn)定，操作便捷，能夠有效縮短報(bào)修響應(yīng)時(shí)間，提高維修效率，增強(qiáng)師生與后勤部門(mén)的溝通互動(dòng)，為校園后勤管理提供了有力的技術(shù)支持。本文最后對(duì)系統(tǒng)的不足進(jìn)行了分析，并對(duì)未來(lái)優(yōu)化方向進(jìn)行了展望。關(guān)鍵詞：校園報(bào)修；SpringBoot；Vue；前后端分離；管理系統(tǒng)目錄引言1.1研究背景與意義1.2國(guó)內(nèi)外研究現(xiàn)狀1.3研究?jī)?nèi)容與目標(biāo)1.4論文組織結(jié)構(gòu)相關(guān)技術(shù)概述2.1SpringBoot框架2.2Vue.js前端框架2.3數(shù)據(jù)庫(kù)技術(shù)2.4開(kāi)發(fā)與運(yùn)行環(huán)境系統(tǒng)需求分析3.1功能性需求3.2非功能性需求3.3可行性分析系統(tǒng)設(shè)計(jì)4.1總體架構(gòu)設(shè)計(jì)4.2功能模塊設(shè)計(jì)4.3數(shù)據(jù)庫(kù)設(shè)計(jì)4.4接口設(shè)計(jì)系統(tǒng)實(shí)現(xiàn)5.1開(kāi)發(fā)環(huán)境搭建5.2后端核心模塊實(shí)現(xiàn)5.3前端核心模塊實(shí)現(xiàn)5.4系統(tǒng)集成測(cè)試系統(tǒng)測(cè)試6.1測(cè)試環(huán)境6.2功能測(cè)試6.3性能測(cè)試6.4測(cè)試結(jié)果分析結(jié)論與展望7.1研究結(jié)論7.2系統(tǒng)不足7.3未來(lái)展望參考文獻(xiàn)致謝1.引言1.1研究背景與意義近年來(lái)，我國(guó)高等教育事業(yè)蓬勃發(fā)展，校園規(guī)模不斷擴(kuò)大，師生數(shù)量持續(xù)增長(zhǎng)，對(duì)校園后勤服務(wù)的需求日益多樣化、精細(xì)化。校園設(shè)施作為教學(xué)、科研和生活的重要保障，其維護(hù)管理工作直接影響著校園正常運(yùn)轉(zhuǎn)和師生滿(mǎn)意度。傳統(tǒng)校園報(bào)修模式主要依賴(lài)電話(huà)申報(bào)、現(xiàn)場(chǎng)登記等方式，存在諸多弊端：一是信息傳遞不及時(shí)，報(bào)修需求難以及時(shí)到達(dá)維修部門(mén)；二是流程不透明，師生無(wú)法跟蹤報(bào)修進(jìn)度；三是數(shù)據(jù)管理混亂，難以進(jìn)行統(tǒng)計(jì)分析和工作優(yōu)化；四是資源調(diào)配不合理，維修人員工作效率低下。這些問(wèn)題導(dǎo)致報(bào)修響應(yīng)慢、處理周期長(zhǎng)、師生滿(mǎn)意度低等后果，制約了校園后勤管理水平的提升。隨著“智慧校園”建設(shè)的推進(jìn)，利用信息技術(shù)重構(gòu)校園報(bào)修流程成為必然選擇?；赟pringBoot+Vue的校園報(bào)修管理系統(tǒng)，通過(guò)數(shù)字化手段整合報(bào)修需求、資源調(diào)度和服務(wù)評(píng)價(jià)等環(huán)節(jié)，實(shí)現(xiàn)報(bào)修全流程的在線(xiàn)化管理，對(duì)于提高后勤服務(wù)效率、降低管理成本、提升師生滿(mǎn)意度具有重要意義。1.2國(guó)內(nèi)外研究現(xiàn)狀國(guó)外在校園報(bào)修管理系統(tǒng)建設(shè)方面起步較早，許多高校已實(shí)現(xiàn)了完善的數(shù)字化后勤管理體系。例如，美國(guó)加州大學(xué)開(kāi)發(fā)的CampusFacilitiesManagement系統(tǒng)，集成了報(bào)修管理、資產(chǎn)管理、空間管理等功能，通過(guò)移動(dòng)終端實(shí)現(xiàn)了報(bào)修的實(shí)時(shí)提交與處理。英國(guó)劍橋大學(xué)則采用物聯(lián)網(wǎng)技術(shù)，對(duì)校園關(guān)鍵設(shè)施進(jìn)行實(shí)時(shí)監(jiān)測(cè)，實(shí)現(xiàn)了故障的主動(dòng)預(yù)警與報(bào)修。國(guó)內(nèi)高校在數(shù)字化報(bào)修系統(tǒng)建設(shè)方面也進(jìn)行了積極探索。清華大學(xué)開(kāi)發(fā)的校園后勤服務(wù)平臺(tái)，將報(bào)修服務(wù)與校園卡系統(tǒng)相結(jié)合，實(shí)現(xiàn)了身份認(rèn)證、服務(wù)申請(qǐng)、費(fèi)用結(jié)算的一體化管理。浙江大學(xué)則基于微信小程序開(kāi)發(fā)了報(bào)修系統(tǒng)，簡(jiǎn)化了報(bào)修流程，提高了服務(wù)便捷性。目前，現(xiàn)有系統(tǒng)存在以下不足：一是部分系統(tǒng)采用傳統(tǒng)JSP技術(shù)開(kāi)發(fā)，前后端耦合度高，維護(hù)成本高；二是用戶(hù)體驗(yàn)有待提升，界面設(shè)計(jì)不夠友好；三是數(shù)據(jù)分析功能薄弱，難以支撐管理決策?；赟pringBoot+Vue的前后端分離架構(gòu)，能夠有效解決上述問(wèn)題，為校園報(bào)修管理提供更優(yōu)的技術(shù)方案。1.3研究?jī)?nèi)容與目標(biāo)本文的研究?jī)?nèi)容主要包括：（1）分析校園報(bào)修管理的業(yè)務(wù)流程，明確系統(tǒng)需求；（2）基于SpringBoot+Vue技術(shù)棧，設(shè)計(jì)系統(tǒng)的總體架構(gòu)和功能模塊；（3）設(shè)計(jì)數(shù)據(jù)庫(kù)結(jié)構(gòu)，實(shí)現(xiàn)數(shù)據(jù)的高效存儲(chǔ)與訪(fǎng)問(wèn)；（4）開(kāi)發(fā)系統(tǒng)的前后端功能，實(shí)現(xiàn)報(bào)修全流程的數(shù)字化管理；（5）對(duì)系統(tǒng)進(jìn)行測(cè)試與優(yōu)化，確保系統(tǒng)的穩(wěn)定性和可用性。本系統(tǒng)的開(kāi)發(fā)目標(biāo)是：（1）實(shí)現(xiàn)報(bào)修流程的在線(xiàn)化：支持師生在線(xiàn)提交報(bào)修申請(qǐng)，維修人員在線(xiàn)處理，全程可跟蹤；（2）提高管理效率：通過(guò)自動(dòng)化派單、消息提醒等功能，縮短響應(yīng)時(shí)間，提高處理效率；（3）增強(qiáng)用戶(hù)體驗(yàn)：設(shè)計(jì)簡(jiǎn)潔易用的界面，支持多終端訪(fǎng)問(wèn)；（4）實(shí)現(xiàn)數(shù)據(jù)可視化：通過(guò)統(tǒng)計(jì)分析功能，為管理決策提供數(shù)據(jù)支持；（5）保障系統(tǒng)安全：實(shí)現(xiàn)用戶(hù)身份認(rèn)證、權(quán)限管理等安全功能。1.4論文組織結(jié)構(gòu)本文共分為7章，各章內(nèi)容安排如下：第1章：引言。介紹研究背景與意義、國(guó)內(nèi)外研究現(xiàn)狀、研究?jī)?nèi)容與目標(biāo)以及論文組織結(jié)構(gòu)。第2章：相關(guān)技術(shù)概述。闡述系統(tǒng)開(kāi)發(fā)所用的關(guān)鍵技術(shù)，包括SpringBoot框架、Vue.js前端框架、數(shù)據(jù)庫(kù)技術(shù)等。第3章：系統(tǒng)需求分析。對(duì)系統(tǒng)的功能性需求和非功能性需求進(jìn)行詳細(xì)分析，并進(jìn)行可行性分析。第4章：系統(tǒng)設(shè)計(jì)。包括總體架構(gòu)設(shè)計(jì)、功能模塊設(shè)計(jì)、數(shù)據(jù)庫(kù)設(shè)計(jì)和接口設(shè)計(jì)。第5章：系統(tǒng)實(shí)現(xiàn)。介紹開(kāi)發(fā)環(huán)境搭建，詳細(xì)說(shuō)明前后端核心模塊的實(shí)現(xiàn)過(guò)程。第6章：系統(tǒng)測(cè)試。描述測(cè)試環(huán)境、測(cè)試用例設(shè)計(jì)，對(duì)測(cè)試結(jié)果進(jìn)行分析。第7章：結(jié)論與展望?？偨Y(jié)研究成果，分析系統(tǒng)不足，展望未來(lái)優(yōu)化方向。2.相關(guān)技術(shù)概述2.1SpringBoot框架SpringBoot是由Pivotal團(tuán)隊(duì)開(kāi)發(fā)的基于Spring的開(kāi)源框架，旨在簡(jiǎn)化Spring應(yīng)用的初始搭建和開(kāi)發(fā)過(guò)程。它通過(guò)“約定優(yōu)于配置”的理念，消除了大量的XML配置，使開(kāi)發(fā)者能夠快速構(gòu)建獨(dú)立運(yùn)行的Spring應(yīng)用。SpringBoot的主要特點(diǎn)包括：（1）自動(dòng)配置：根據(jù)項(xiàng)目依賴(lài)自動(dòng)配置Spring應(yīng)用，減少手動(dòng)配置工作；（2）起步依賴(lài)：將常用庫(kù)封裝為starter依賴(lài)，簡(jiǎn)化依賴(lài)管理；（3）嵌入式服務(wù)器：內(nèi)置Tomcat、Jetty等服務(wù)器，無(wú)需部署WAR文件；（4）Actuator：提供應(yīng)用監(jiān)控和管理功能；（5）無(wú)代碼生成和XML配置：簡(jiǎn)化開(kāi)發(fā)流程，提高開(kāi)發(fā)效率。在本系統(tǒng)中，SpringBoot作為后端開(kāi)發(fā)框架，負(fù)責(zé)業(yè)務(wù)邏輯處理、數(shù)據(jù)訪(fǎng)問(wèn)、接口提供等功能，通過(guò)SpringMVC實(shí)現(xiàn)RESTfulAPI，通過(guò)SpringDataJPA簡(jiǎn)化數(shù)據(jù)庫(kù)操作。2.2Vue.js前端框架Vue.js是一套用于構(gòu)建用戶(hù)界面的漸進(jìn)式JavaScript框架，由尤雨溪于2014年發(fā)布。它的核心庫(kù)只關(guān)注視圖層，易于上手，且能與其他庫(kù)或現(xiàn)有項(xiàng)目整合。Vue.js的主要特點(diǎn)包括：（1）響應(yīng)式數(shù)據(jù)綁定：通過(guò)雙向數(shù)據(jù)綁定實(shí)現(xiàn)視圖與數(shù)據(jù)的同步；（2）組件化開(kāi)發(fā)：將界面拆分為獨(dú)立可復(fù)用的組件，提高代碼復(fù)用率；（3）虛擬DOM：通過(guò)虛擬DOM提高頁(yè)面渲染性能；（4）指令系統(tǒng)：提供v-if、v-for等指令，簡(jiǎn)化DOM操作；（5）路由管理：通過(guò)VueRouter實(shí)現(xiàn)單頁(yè)應(yīng)用的路由控制；（6）狀態(tài)管理：通過(guò)Vuex實(shí)現(xiàn)組件間的狀態(tài)共享。本系統(tǒng)前端采用Vue.js結(jié)合ElementUI組件庫(kù)開(kāi)發(fā)，ElementUI提供了豐富的UI組件，能夠快速構(gòu)建美觀(guān)、一致的用戶(hù)界面，提高前端開(kāi)發(fā)效率。2.3數(shù)據(jù)庫(kù)技術(shù)MySQL是一種開(kāi)源的關(guān)系型數(shù)據(jù)庫(kù)管理系統(tǒng)，由Oracle公司開(kāi)發(fā)維護(hù)。它具有體積小、速度快、成本低、開(kāi)源免費(fèi)等特點(diǎn)，廣泛應(yīng)用于Web應(yīng)用開(kāi)發(fā)。MySQL的主要優(yōu)勢(shì)包括：（1）高性能：優(yōu)化的查詢(xún)算法，支持大量數(shù)據(jù)的高效訪(fǎng)問(wèn)；（2）可靠性：支持事務(wù)、ACID特性，確保數(shù)據(jù)一致性；（3）可擴(kuò)展性：支持主從復(fù)制、分區(qū)表等功能，滿(mǎn)足業(yè)務(wù)增長(zhǎng)需求；（4）易用性：提供豐富的SQL語(yǔ)句支持，易于學(xué)習(xí)和使用；（5）開(kāi)源免費(fèi)：降低項(xiàng)目開(kāi)發(fā)成本。本系統(tǒng)選用MySQL作為數(shù)據(jù)庫(kù)，存儲(chǔ)用戶(hù)信息、報(bào)修工單、維修記錄等數(shù)據(jù)，通過(guò)SpringDataJPA實(shí)現(xiàn)數(shù)據(jù)訪(fǎng)問(wèn)層，簡(jiǎn)化數(shù)據(jù)庫(kù)操作。2.4開(kāi)發(fā)與運(yùn)行環(huán)境2.4.1開(kāi)發(fā)環(huán)境操作系統(tǒng)：Windows10開(kāi)發(fā)工具：IntelliJIDEA2022.1（后端）、VisualStudioCode1.68.0（前端）JDK版本：JDK1.8Maven版本：ApacheMaven3.6.3Node.js版本：v14.17.0數(shù)據(jù)庫(kù)：MySQL8.0.262.4.2運(yùn)行環(huán)境服務(wù)器操作系統(tǒng)：WindowsServer2016Web服務(wù)器：Nginx1.21.1數(shù)據(jù)庫(kù)服務(wù)器：MySQL8.0.26運(yùn)行時(shí)環(huán)境：JRE1.83.系統(tǒng)需求分析3.1功能性需求根據(jù)校園報(bào)修管理的業(yè)務(wù)流程，系統(tǒng)需滿(mǎn)足不同用戶(hù)角色的需求，主要包括學(xué)生、教師、維修人員和管理員四類(lèi)用戶(hù)。系統(tǒng)功能模塊劃分如下：3.1.1用戶(hù)管理模塊用戶(hù)注冊(cè)：學(xué)生和教師通過(guò)學(xué)號(hào)/工號(hào)注冊(cè)賬號(hào)；用戶(hù)登錄：支持不同角色用戶(hù)登錄系統(tǒng)；個(gè)人信息管理：用戶(hù)可查看和修改個(gè)人信息；密碼修改：用戶(hù)可修改登錄密碼；權(quán)限管理：管理員對(duì)用戶(hù)角色和權(quán)限進(jìn)行管理。3.1.2報(bào)修管理模塊報(bào)修申請(qǐng)：師生填寫(xiě)報(bào)修信息，包括故障類(lèi)型、地點(diǎn)、描述、圖片等；報(bào)修查詢(xún)：師生查看自己提交的報(bào)修單狀態(tài)；報(bào)修撤銷(xiāo)：在報(bào)修單未處理前，師生可撤銷(xiāo)報(bào)修；工單分配：管理員或維修負(fù)責(zé)人將報(bào)修單分配給具體維修人員；工單處理：維修人員查看分配給自己的工單，更新處理狀態(tài)；維修確認(rèn)：維修完成后，師生確認(rèn)維修結(jié)果。3.1.3評(píng)價(jià)反饋模塊服務(wù)評(píng)價(jià)：師生對(duì)維修服務(wù)進(jìn)行評(píng)分和評(píng)價(jià)；意見(jiàn)反饋：用戶(hù)可提交對(duì)系統(tǒng)或服務(wù)的建議和意見(jiàn)；評(píng)價(jià)管理：管理員查看和統(tǒng)計(jì)用戶(hù)評(píng)價(jià)。3.1.4統(tǒng)計(jì)分析模塊報(bào)修統(tǒng)計(jì)：按時(shí)間、類(lèi)型、地點(diǎn)等維度統(tǒng)計(jì)報(bào)修數(shù)據(jù)；維修效率統(tǒng)計(jì)：統(tǒng)計(jì)維修人員的處理數(shù)量、平均耗時(shí)等；滿(mǎn)意度統(tǒng)計(jì)：統(tǒng)計(jì)用戶(hù)評(píng)價(jià)的平均分、好評(píng)率等；數(shù)據(jù)可視化：通過(guò)圖表展示統(tǒng)計(jì)結(jié)果。3.1.5通知消息模塊系統(tǒng)通知：向用戶(hù)推送系統(tǒng)公告、維修提醒等消息；消息查看：用戶(hù)查看收到的通知消息；消息設(shè)置：用戶(hù)可設(shè)置消息接收方式。3.2非功能性需求3.2.1性能需求響應(yīng)時(shí)間：頁(yè)面加載時(shí)間不超過(guò)3秒，接口響應(yīng)時(shí)間不超過(guò)1秒；并發(fā)處理：支持至少100名用戶(hù)同時(shí)在線(xiàn)操作；數(shù)據(jù)存儲(chǔ)：支持至少5年的歷史數(shù)據(jù)存儲(chǔ)。3.2.2安全性需求用戶(hù)認(rèn)證：采用用戶(hù)名密碼認(rèn)證，支持密碼加密存儲(chǔ)；權(quán)限控制：不同角色用戶(hù)擁有不同操作權(quán)限；數(shù)據(jù)安全：敏感數(shù)據(jù)加密傳輸，防止數(shù)據(jù)泄露；防SQL注入：對(duì)用戶(hù)輸入進(jìn)行驗(yàn)證和過(guò)濾，防止SQL注入攻擊。3.2.3易用性需求界面簡(jiǎn)潔：界面設(shè)計(jì)簡(jiǎn)潔明了，操作流程直觀(guān)；操作便捷：常用功能一鍵可達(dá)，減少操作步驟；幫助提示：提供操作指引和錯(cuò)誤提示；響應(yīng)式設(shè)計(jì)：支持PC端和移動(dòng)端訪(fǎng)問(wèn)，適配不同屏幕尺寸。3.2.4可靠性需求系統(tǒng)穩(wěn)定：平均無(wú)故障運(yùn)行時(shí)間（MTBF）不低于1000小時(shí)；數(shù)據(jù)備份：定期自動(dòng)備份數(shù)據(jù)庫(kù)，防止數(shù)據(jù)丟失；錯(cuò)誤處理：系統(tǒng)出錯(cuò)時(shí)提供友好提示，并記錄錯(cuò)誤日志。3.3可行性分析3.3.1技術(shù)可行性本系統(tǒng)采用的SpringBoot和Vue.js均為當(dāng)前主流技術(shù)，具有成熟的開(kāi)發(fā)文檔和社區(qū)支持。開(kāi)發(fā)團(tuán)隊(duì)具備Java、JavaScript等編程語(yǔ)言的開(kāi)發(fā)經(jīng)驗(yàn)，熟悉相關(guān)框架的使用。MySQL數(shù)據(jù)庫(kù)廣泛應(yīng)用于Web開(kāi)發(fā)，技術(shù)成熟穩(wěn)定。因此，從技術(shù)角度看，系統(tǒng)開(kāi)發(fā)具有可行性。3.3.2經(jīng)濟(jì)可行性系統(tǒng)開(kāi)發(fā)基于開(kāi)源技術(shù)，無(wú)需支付軟件版權(quán)費(fèi)用。開(kāi)發(fā)過(guò)程中所需的硬件設(shè)備（計(jì)算機(jī)、服務(wù)器等）已有配備，無(wú)需額外大量投入。系統(tǒng)上線(xiàn)后，可減少人工管理成本，提高工作效率，帶來(lái)間接經(jīng)濟(jì)效益。因此，從經(jīng)濟(jì)角度看，系統(tǒng)開(kāi)發(fā)具有可行性。3.3.3操作可行性系統(tǒng)設(shè)計(jì)注重易用性，界面簡(jiǎn)潔直觀(guān)，操作流程符合用戶(hù)習(xí)慣。師生、維修人員等用戶(hù)只需具備基本的計(jì)算機(jī)操作能力，即可快速掌握系統(tǒng)使用方法。系統(tǒng)提供操作指南和幫助信息，降低用戶(hù)學(xué)習(xí)成本。因此，從操作角度看，系統(tǒng)具有可行性。3.3.4法律可行性系統(tǒng)開(kāi)發(fā)過(guò)程中使用的技術(shù)和工具均為開(kāi)源軟件，符合開(kāi)源協(xié)議。系統(tǒng)涉及的用戶(hù)數(shù)據(jù)將嚴(yán)格遵守《個(gè)人信息保護(hù)法》等相關(guān)法律法規(guī)，采取加密存儲(chǔ)和訪(fǎng)問(wèn)控制措施，保護(hù)用戶(hù)隱私。因此，從法律角度看，系統(tǒng)開(kāi)發(fā)具有可行性。4.系統(tǒng)設(shè)計(jì)4.1總體架構(gòu)設(shè)計(jì)本系統(tǒng)采用前后端分離的架構(gòu)設(shè)計(jì)，將系統(tǒng)分為前端應(yīng)用和后端服務(wù)兩部分，通過(guò)RESTfulAPI進(jìn)行數(shù)據(jù)交互。這種架構(gòu)的優(yōu)勢(shì)在于前后端解耦，便于團(tuán)隊(duì)協(xié)作開(kāi)發(fā)和系統(tǒng)維護(hù)，同時(shí)提高了系統(tǒng)的可擴(kuò)展性。系統(tǒng)總體架構(gòu)如圖4-1所示，分為以下幾層：前端層：基于Vue.js構(gòu)建的單頁(yè)應(yīng)用，負(fù)責(zé)用戶(hù)界面展示和交互；接口層：后端提供的RESTfulAPI接口，負(fù)責(zé)前后端數(shù)據(jù)傳輸；業(yè)務(wù)邏輯層：處理核心業(yè)務(wù)邏輯，實(shí)現(xiàn)系統(tǒng)功能；數(shù)據(jù)訪(fǎng)問(wèn)層：與數(shù)據(jù)庫(kù)交互，負(fù)責(zé)數(shù)據(jù)的CRUD操作；數(shù)據(jù)庫(kù)層：存儲(chǔ)系統(tǒng)所有數(shù)據(jù)。前端通過(guò)Axios發(fā)送HTTP請(qǐng)求調(diào)用后端接口，后端接口接收請(qǐng)求后，由業(yè)務(wù)邏輯層處理，通過(guò)數(shù)據(jù)訪(fǎng)問(wèn)層與數(shù)據(jù)庫(kù)交互，最后將處理結(jié)果返回給前端，前端根據(jù)返回結(jié)果更新頁(yè)面展示。4.2功能模塊設(shè)計(jì)根據(jù)需求分析，系統(tǒng)劃分為以下功能模塊，各模塊之間既相互獨(dú)立又協(xié)同工作，共同完成校園報(bào)修管理的各項(xiàng)功能。4.2.1用戶(hù)管理模塊該模塊負(fù)責(zé)用戶(hù)的注冊(cè)、登錄、信息管理和權(quán)限控制，具體功能如下：注冊(cè)功能：驗(yàn)證用戶(hù)身份信息，創(chuàng)建用戶(hù)賬號(hào)；登錄功能：驗(yàn)證用戶(hù)credentials，生成登錄令牌；信息管理：用戶(hù)查看和修改個(gè)人基本信息；權(quán)限控制：基于角色的訪(fǎng)問(wèn)控制（RBAC），限制用戶(hù)操作范圍。4.2.2報(bào)修管理模塊該模塊是系統(tǒng)的核心模塊，實(shí)現(xiàn)報(bào)修全流程的管理，具體功能如下：報(bào)修提交：用戶(hù)填寫(xiě)報(bào)修表單，上傳故障圖片；工單生成：系統(tǒng)自動(dòng)生成報(bào)修工單，包含唯一編號(hào)；工單分配：管理員將工單分配給維修人員；狀態(tài)更新：維修人員更新工單處理狀態(tài)（待處理、處理中、已完成等）；維修確認(rèn)：用戶(hù)確認(rèn)維修結(jié)果，完成報(bào)修流程。4.2.3評(píng)價(jià)反饋模塊該模塊用于收集用戶(hù)對(duì)維修服務(wù)的評(píng)價(jià)和建議，具體功能如下：評(píng)價(jià)提交：用戶(hù)對(duì)維修質(zhì)量、服務(wù)態(tài)度等進(jìn)行評(píng)分和文字評(píng)價(jià)；反饋管理：管理員查看用戶(hù)反饋，處理投訴和建議；評(píng)價(jià)統(tǒng)計(jì)：系統(tǒng)自動(dòng)統(tǒng)計(jì)評(píng)價(jià)數(shù)據(jù)，生成評(píng)價(jià)報(bào)表。4.2.4統(tǒng)計(jì)分析模塊該模塊對(duì)系統(tǒng)數(shù)據(jù)進(jìn)行統(tǒng)計(jì)分析，為管理決策提供支持，具體功能如下：數(shù)據(jù)統(tǒng)計(jì)：按時(shí)間、類(lèi)型等維度統(tǒng)計(jì)報(bào)修量、維修率等指標(biāo)；圖表展示：通過(guò)柱狀圖、折線(xiàn)圖等可視化方式展示統(tǒng)計(jì)結(jié)果；報(bào)表生成：生成周期性統(tǒng)計(jì)報(bào)表，支持導(dǎo)出功能。4.2.5通知消息模塊該模塊實(shí)現(xiàn)系統(tǒng)消息的推送和管理，具體功能如下：消息觸發(fā)：當(dāng)工單狀態(tài)變化時(shí)，自動(dòng)觸發(fā)通知消息；消息推送：通過(guò)系統(tǒng)內(nèi)消息、短信等方式推送通知；消息管理：用戶(hù)查看、刪除消息，設(shè)置消息接收偏好。4.3數(shù)據(jù)庫(kù)設(shè)計(jì)數(shù)據(jù)庫(kù)設(shè)計(jì)是系統(tǒng)開(kāi)發(fā)的重要環(huán)節(jié)，合理的數(shù)據(jù)庫(kù)結(jié)構(gòu)能夠提高數(shù)據(jù)存儲(chǔ)效率和訪(fǎng)問(wèn)性能。根據(jù)系統(tǒng)需求，設(shè)計(jì)以下數(shù)據(jù)庫(kù)表：4.3.1用戶(hù)表（user）存儲(chǔ)用戶(hù)基本信息，結(jié)構(gòu)如下：字段名數(shù)據(jù)類(lèi)型長(zhǎng)度主鍵描述idbigint-是用戶(hù)IDusernamevarchar50否用戶(hù)名（學(xué)號(hào)/工號(hào)）passwordvarchar100否加密后的密碼namevarchar50否真實(shí)姓名roleint-否角色（1-學(xué)生，2-教師，3-維修人員，4-管理員）phonevarchar20否聯(lián)系電話(huà)emailvarchar100否郵箱create_timedatetime-否創(chuàng)建時(shí)間update_timedatetime-否更新時(shí)間4.3.2報(bào)修單表（repair_order）存儲(chǔ)報(bào)修單信息，結(jié)構(gòu)如下：字段名數(shù)據(jù)類(lèi)型長(zhǎng)度主鍵描述idbigint-是工單IDorder_novarchar30否工單編號(hào)user_idbigint-否報(bào)修人IDtype_idint-否故障類(lèi)型IDlocationvarchar200否故障地點(diǎn)descriptiontext-否故障描述statusint-否狀態(tài)（0-待分配，1-處理中，2-已完成，3-已撤銷(xiāo)）assign_tobigint-否分配給的維修人員IDcreate_timedatetime-否創(chuàng)建時(shí)間update_timedatetime-否更新時(shí)間4.3.3故障類(lèi)型表（fault_type）存儲(chǔ)故障類(lèi)型信息，結(jié)構(gòu)如下：字段名數(shù)據(jù)類(lèi)型長(zhǎng)度主鍵描述idint-是類(lèi)型IDnamevarchar50否類(lèi)型名稱(chēng)（如水電、家具、網(wǎng)絡(luò)等）descriptionvarchar200否類(lèi)型描述4.3.4維修記錄表（repair_record）存儲(chǔ)維修過(guò)程記錄，結(jié)構(gòu)如下：字段名數(shù)據(jù)類(lèi)型長(zhǎng)度主鍵描述idbigint-是記錄IDorder_idbigint-否關(guān)聯(lián)工單IDrepairman_idbigint-否維修人員IDcontenttext-否維修內(nèi)容costdecimal10,2否維修費(fèi)用complete_timedatetime-否完成時(shí)間4.3.5評(píng)價(jià)表（evaluation）存儲(chǔ)用戶(hù)評(píng)價(jià)信息，結(jié)構(gòu)如下：字段名數(shù)據(jù)類(lèi)型長(zhǎng)度主鍵描述idbigint-是評(píng)價(jià)IDorder_idbigint-否關(guān)聯(lián)工單IDuser_idbigint-否評(píng)價(jià)人IDscoreint-否評(píng)分（1-5分）commenttext-否評(píng)價(jià)內(nèi)容create_timedatetime-否創(chuàng)建時(shí)間4.3.6消息表（message）存儲(chǔ)系統(tǒng)消息，結(jié)構(gòu)如下：字段名數(shù)據(jù)類(lèi)型長(zhǎng)度主鍵描述idbigint-是消息IDuser_idbigint-否接收用戶(hù)IDcontenttext-否消息內(nèi)容is_readint-否是否已讀（0-未讀，1-已讀）create_timedatetime-否創(chuàng)建時(shí)間數(shù)據(jù)庫(kù)ER圖如圖4-2所示，展示了各表之間的關(guān)系：用戶(hù)表與報(bào)修單表是一對(duì)多關(guān)系，一個(gè)用戶(hù)可提交多個(gè)報(bào)修單；報(bào)修單表與維修記錄表是一對(duì)一關(guān)系，一個(gè)報(bào)修單對(duì)應(yīng)一條維修記錄；報(bào)修單表與評(píng)價(jià)表是一對(duì)一關(guān)系，一個(gè)報(bào)修單可被評(píng)價(jià)一次；用戶(hù)表與消息表是一對(duì)多關(guān)系，一個(gè)用戶(hù)可接收多條消息。4.4接口設(shè)計(jì)系統(tǒng)采用RESTfulAPI設(shè)計(jì)風(fēng)格，接口命名規(guī)范如下：使用名詞表示資源，如/users、/repairOrders；使用HTTP方法表示操作，GET（查詢(xún)）、POST（創(chuàng)建）、PUT（更新）、DELETE（刪除）；使用路徑參數(shù)表示資源ID，如/users/{id}；使用查詢(xún)參數(shù)表示過(guò)濾條件，如/repairOrders?status=1；響應(yīng)數(shù)據(jù)格式為JSON，包含狀態(tài)碼、消息和數(shù)據(jù)。主要接口設(shè)計(jì)如下：4.4.1用戶(hù)管理接口POST/api/auth/register：用戶(hù)注冊(cè)POST/api/auth/login：用戶(hù)登錄GET/api/users/current：獲取當(dāng)前登錄用戶(hù)信息PUT/api/users/current：更新當(dāng)前用戶(hù)信息PUT/api/users/password：修改密碼GET/api/users：管理員查詢(xún)用戶(hù)列表（分頁(yè)）PUT/api/users/{id}/role：管理員修改用戶(hù)角色4.4.2報(bào)修管理接口POST/api/repairOrders：提交報(bào)修單GET/api/repairOrders：查詢(xún)報(bào)修單列表（分頁(yè)，支持條件過(guò)濾）GET/api/repairOrders/{id}：查詢(xún)報(bào)修單詳情DELETE/api/repairOrders/{id}：撤銷(xiāo)報(bào)修單（僅限未處理狀態(tài)）PUT/api/repairOrders/{id}/assign：分配報(bào)修單PUT/api/repairOrders/{id}/status：更新報(bào)修單狀態(tài)POST/api/repairOrders/{id}/complete：完成維修并提交記錄4.4.3評(píng)價(jià)反饋接口POST/api/evaluations：提交評(píng)價(jià)GET/api/evaluations：查詢(xún)?cè)u(píng)價(jià)列表（分頁(yè)）GET/api/evaluations/statistics：獲取評(píng)價(jià)統(tǒng)計(jì)數(shù)據(jù)4.4.4統(tǒng)計(jì)分析接口GET/api/statistics/repair：獲取報(bào)修統(tǒng)計(jì)數(shù)據(jù)GET/api/statistics/efficiency：獲取維修效率統(tǒng)計(jì)數(shù)據(jù)GET/api/statistics/satisfaction：獲取滿(mǎn)意度統(tǒng)計(jì)數(shù)據(jù)4.4.5通知消息接口GET/api/messages：查詢(xún)消息列表（分頁(yè)）PUT/api/messages/{id}/read：標(biāo)記消息為已讀DELETE/api/messages/{id}：刪除消息GET/api/messages/unread/count：獲取未讀消息數(shù)量5.系統(tǒng)實(shí)現(xiàn)5.1開(kāi)發(fā)環(huán)境搭建5.1.1后端環(huán)境搭建創(chuàng)建SpringBoot項(xiàng)目：使用SpringInitializr創(chuàng)建項(xiàng)目，選擇以下依賴(lài)：SpringWeb：用于構(gòu)建Web應(yīng)用和RESTfulAPISpringDataJPA：簡(jiǎn)化數(shù)據(jù)庫(kù)操作MySQLDriver：MySQL數(shù)據(jù)庫(kù)驅(qū)動(dòng)SpringSecurity：用于身份認(rèn)證和授權(quán)Lombok：簡(jiǎn)化Java代碼，減少模板代碼配置perties文件：#服務(wù)器端口server.port=8080#數(shù)據(jù)庫(kù)配置spring.datasource.url=jdbc:mysql://localhost:3306/campus_repair?useUnicode=true&characterEncoding=utf-8&serverTimezone=Asia/Shanghaispring.datasource.username=rootspring.datasource.password=rootspring.datasource.driver-class-name=com.mysql.cj.jdbc.Driver#JPA配置spring.jpa.hibernate.ddl-auto=updatespring.jpa.show-sql=perties.hibernate.dialect=org.hibernate.dialect.MySQL8Dperties.hibernate.format_sql=true#日志配置.springframework.web=INFO.campusrepair=DEBUG#文件上傳配置spring.servlet.multipart.max-file-size=10MBspring.servlet.multipart.max-request-size=10MB5.1.2前端環(huán)境搭建安裝VueCLI：使用npm安裝Vue腳手架工具npminstall-g@vue/cli創(chuàng)建Vue項(xiàng)目：vuecreatecampus-repair-frontend安裝依賴(lài)：cdcampus-repair-frontendnpminstallelement-uiaxiosvue-routervuexecharts配置vue.config.js：module.exports={devServer:{port:8081,proxy:{'/api':{target:'http://localhost:8080',changeOrigin:true,pathRewrite:{'^/api':'/api'}}}}}5.2后端核心模塊實(shí)現(xiàn)5.2.1實(shí)體類(lèi)實(shí)現(xiàn)以報(bào)修單實(shí)體類(lèi)（RepairOrder）為例：packagecom.campusrepair.entity;importlombok.Data;importorg.hibernate.annotations.DynamicInsert;importorg.hibernate.annotations.DynamicUpdate;importjavax.persistence.*;importjava.time.LocalDateTime;@Data@Entity@Table(name="repair_order")@DynamicInsert@DynamicUpdatepublicclassRepairOrder{@Id@GeneratedValue(strategy=GenerationType.IDENTITY)privateLongid;@Column(name="order_no",unique=true,nullable=false)privateStringorderNo;@Column(name="user_id",nullable=false)privateLonguserId;@Column(name="type_id",nullable=false)privateIntegertypeId;@Column(name="location",nullable=false)privateStringlocation;@Column(name="description",columnDefinition="TEXT")privateStringdescription;@Column(name="status",nullable=false)privateIntegerstatus;//0-待分配，1-處理中，2-已完成，3-已撤銷(xiāo)@Column(name="assign_to")privateLongassignTo;@Column(name="create_time")privateLocalDateTimecreateTime;@Column(name="update_time")privateLocalDateTimeupdateTime;@PrePersistpublicvoidprePersist(){this.createTime=LocalDateTime.now();this.updateTime=LocalDateTime.now();//生成工單編號(hào)：RO+年月日時(shí)分秒+隨機(jī)數(shù)this.orderNo="RO"+LocalDateTime.now().format(DateTimeFormatter.ofPattern("yyyyMMddHHmmss"))+RandomUtils.nextInt(1000,9999);}@PreUpdatepublicvoidpreUpdate(){this.updateTime=LocalDateTime.now();}}5.2.2數(shù)據(jù)訪(fǎng)問(wèn)層實(shí)現(xiàn)以報(bào)修單Repository為例：packagecom.campusrepair.repository;importcom.campusrepair.entity.RepairOrder;importorg.springframework.data.domain.Page;importorg.springframework.data.domain.Pageable;importorg.springframework.data.jpa.repository.JpaRepository;importorg.springframework.stereotype.Repository;@RepositorypublicinterfaceRepairOrderRepositoryextendsJpaRepository<RepairOrder,Long>{//按用戶(hù)ID查詢(xún)報(bào)修單Page<RepairOrder>findByUserId(LonguserId,Pageablepageable);//按狀態(tài)查詢(xún)報(bào)修單Page<RepairOrder>findByStatus(Integerstatus,Pageablepageable);//按分配對(duì)象查詢(xún)報(bào)修單Page<RepairOrder>findByAssignTo(LongassignTo,Pageablepageable);//按類(lèi)型ID查詢(xún)報(bào)修單Page<RepairOrder>findByTypeId(IntegertypeId,Pageablepageable);}5.2.3服務(wù)層實(shí)現(xiàn)以報(bào)修單服務(wù)為例：packagecom.campusrepair.service;importcom.campusrepair.dto.RepairOrderDTO;importcom.campusrepair.entity.RepairOrder;importcom.campusrepair.repository.RepairOrderRepository;importorg.springframework.beans.BeanUtils;importorg.springframework.beans.factory.annotation.Autowired;importorg.springframework.data.domain.Page;importorg.springframework.data.domain.Pageable;importorg.springframework.stereotype.Service;importorg.springframework.transaction.annotation.Transactional;@ServicepublicclassRepairOrderService{@AutowiredprivateRepairOrderRepositoryrepairOrderRepository;@AutowiredprivateMessageServicemessageService;//創(chuàng)建報(bào)修單@TransactionalpublicRepairOrdercreateRepairOrder(RepairOrderDTOdto){RepairOrderorder=newRepairOrder();BeanUtils.copyProperties(dto,order);order.setStatus(0);//初始狀態(tài)：待分配returnrepairOrderRepository.save(order);}//分頁(yè)查詢(xún)報(bào)修單publicPage<RepairOrder>findRepairOrders(Integerstatus,LonguserId,LongassignTo,IntegertypeId,Pageablepageable){if(status!=null){returnrepairOrderRepository.findByStatus(status,pageable);}elseif(userId!=null){returnrepairOrderRepository.findByUserId(userId,pageable);}elseif(assignTo!=null){returnrepairOrderRepository.findByAssignTo(assignTo,pageable);}elseif(typeId!=null){returnrepairOrderRepository.findByTypeId(typeId,pageable);}else{returnrepairOrderRepository.findAll(pageable);}}//分配報(bào)修單@TransactionalpublicRepairOrderassignRepairOrder(LongorderId,LongrepairmanId){RepairOrderorder=repairOrderRepository.findById(orderId).orElseThrow(()->newRuntimeException("報(bào)修單不存在"));if(order.getStatus()!=0){thrownewRuntimeException("該報(bào)修單已分配或處理");}order.setAssignTo(repairmanId);order.setStatus(1);//狀態(tài)改為處理中RepairOrderupdated=repairOrderRepository.save(order);//發(fā)送通知給維修人員messageService.sendSystemMessage(repairmanId,"您有新的維修任務(wù)：工單編號(hào)"+updated.getOrderNo());returnupdated;}//完成維修@TransactionalpublicRepairOrdercompleteRepairOrder(LongorderId,Stringcontent,BigDecimalcost){RepairOrderorder=repairOrderRepository.findById(orderId).orElseThrow(()->newRuntimeException("報(bào)修單不存在"));if(order.getStatus()!=1){thrownewRuntimeException("該報(bào)修單未處于處理中狀態(tài)");}order.setStatus(2);//狀態(tài)改為已完成RepairOrderupdated=repairOrderRepository.save(order);//創(chuàng)建維修記錄RepairRecordrecord=newRepairRecord();record.setOrderId(orderId);record.setRepairmanId(order.getAssignTo());record.setContent(content);record.setCost(cost);record.setCompleteTime(LocalDateTime.now());repairRecordRepository.save(record);//發(fā)送通知給報(bào)修人messageService.sendSystemMessage(order.getUserId(),"您的報(bào)修單（編號(hào)"+updated.getOrderNo()+"）已完成維修，請(qǐng)確認(rèn)");returnupdated;}}5.2.4控制器實(shí)現(xiàn)以報(bào)修單控制器為例：packagecom.campusrepair.controller;importcom.campusrepair.dto.ApiResponse;importcom.campusrepair.dto.RepairOrderDTO;importcom.campusrepair.entity.RepairOrder;importcom.campusrepair.service.RepairOrderService;importorg.springframework.beans.factory.annotation.Autowired;importorg.springframework.data.domain.Page;importorg.springframework.data.domain.PageRequest;importorg.springframework.data.domain.Pageable;importorg.springframework.data.domain.Sort;importorg.springframework.security.access.prepost.PreAuthorize;importorg.springframework.web.bind.annotation.*;@RestController@RequestMapping("/api/repairOrders")publicclassRepairOrderController{@AutowiredprivateRepairOrderServicerepairOrderService;//創(chuàng)建報(bào)修單@PostMappingpublicApiResponse<RepairOrder>createRepairOrder(@RequestBodyRepairOrderDTOdto){RepairOrderorder=repairOrderService.createRepairOrder(dto);returnApiResponse.success(order);}//分頁(yè)查詢(xún)報(bào)修單@GetMappingpublicApiResponse<Page<RepairOrder>>getRepairOrders(@RequestParam(required=false)Integerstatus,@RequestParam(required=false)LonguserId,@RequestParam(required=false)LongassignTo,@RequestParam(required=false)IntegertypeId,@RequestParam(defaultValue="0")intpage,@RequestParam(defaultValue="10")intsize){Pageablepageable=PageRequest.of(page,size,Sort.by("createTime").descending());Page<RepairOrder>orders=repairOrderService.findRepairOrders(status,userId,assignTo,typeId,pageable);returnApiResponse.success(orders);}//分配報(bào)修單（僅管理員或維修負(fù)責(zé)人）@PutMapping("/{id}/assign")@PreAuthorize("hasAnyRole('ADMIN','MANAGER')")publicApiResponse<RepairOrder>assignRepairOrder(@PathVariableLongid,@RequestParamLongrepairmanId){RepairOrderorder=repairOrderService.assignRepairOrder(id,repairmanId);returnApiResponse.success(order);}//完成維修（僅維修人員）@PostMapping("/{id}/complete")@PreAuthorize("hasRole('REPAIRMAN')")publicApiResponse<RepairOrder>completeRepairOrder(@PathVariableLongid,@RequestParamStringcontent,@RequestParam(required=false)BigDecimalcost){RepairOrderorder=repairOrderSpleteRepairOrder(id,content,cost);returnApiResponse.success(order);}}5.3前端核心模塊實(shí)現(xiàn)5.3.1路由配置//router/index.jsimportVuefrom'vue'importRouterfrom'vue-router'importHomefrom'@/views/Home'importLoginfrom'@/views/Login'importRegisterfrom'@/views/Register'importRepairSubmitfrom'@/views/repair/Submit'importRepairListfrom'@/views/repair/List'importRepairDetailfrom'@/views/repair/Detail'importAdminDashboardfrom'@/views/admin/Dashboard'importAdminUserManagefrom'@/views/admin/UserManage'importAdminOrderManagefrom'@/views/admin/OrderManage'importRepairmanOrderListfrom'@/views/repairman/OrderList'importEvaluationListfrom'@/views/evaluation/List'importStatisticsfrom'@/views/statistics/Index'importMessageCenterfrom'@/views/message/Center'importAuthGuardfrom'./auth-guard'Vue.use(Router)exportdefaultnewRouter({mode:'history',routes:[{path:'/',name:'Home',component:Home},{path:'/login',name:'Login',component:Login},{path:'/register',name:'Register',component:Register},{path:'/repair/submit',name:'RepairSubmit',component:RepairSubmit,beforeEnter:AuthGuard.requireAuth},{path:'/repair/list',name:'RepairList',component:RepairList,beforeEnter:AuthGuard.requireAuth},{path:'/repair/detail/:id',name:'RepairDetail',component:RepairDetail,beforeEnter:AuthGuard.requireAuth},{path:'/admin/dashboard',name:'AdminDashboard',component:AdminDashboard,beforeEnter:AuthGuard.requireAdmin},{path:'/admin/users',name:'AdminUserManage',component:AdminUserManage,beforeEnter:AuthGuard.requireAdmin},{path:'/admin/orders',name:'AdminOrderManage',component:AdminOrderManage,beforeEnter:AuthGuard.requireAdmin},{path:'/repairman/orders',name:'RepairmanOrderList',component:RepairmanOrderList,beforeEnter:AuthGuard.requireRepairman},{path:'/evaluations',name:'EvaluationList',component:EvaluationList,beforeEnter:AuthGuard.requireAuth},{path:'/statistics',name:'Statistics',component:Statistics,beforeEnter:AuthGuard.requireAdmin},{path:'/messages',name:'MessageCenter',component:MessageCenter,beforeEnter:AuthGuard.requireAuth}]})5.3.2報(bào)修提交組件實(shí)現(xiàn)<template><divclass="repair-submit-container"><el-cardtitle="提交報(bào)修申請(qǐng)"><el-formref="repairForm":model="repairForm":rules="rules"label-width="100px"><el-form-itemlabel="故障類(lèi)型"prop="typeId"><el-selectv-model="repairForm.typeId"placeholder="請(qǐng)選擇故障類(lèi)型"><el-optionv-for="typeinfaultTypes":key="type.id":label="":value="type.id"></el-option></el-select></el-form-item><el-form-itemlabel="故障地點(diǎn)"prop="location"><el-inputv-model="repairForm.location"placeholder="請(qǐng)輸入詳細(xì)地點(diǎn)（如XX宿舍樓X單元XXX室）"></el-input></el-form-item><el-form-itemlabel="故障描述"prop="description"><el-inputtype="textarea"v-model="repairForm.description"placeholder="請(qǐng)?jiān)敿?xì)描述故障情況"rows="4"></el-input></el-form-item><el-form-itemlabel="上傳圖片"><el-uploadaction="/api/upload"list-type="picture-card":on-success="handleUploadSuccess":on-remove="handleUploadRemove"><iclass="el-icon-plus"></i></el-upload><divslot="tip"class="el-upload__tip">支持JPG、PNG格式，單張不超過(guò)10MB，最多上傳3張</div></el-form-item><el-form-item><el-buttontype="primary"@click="submitForm">提交報(bào)修</el-button><el-button@click="resetForm">重置</el-button></el-form-item></el-form></el-card></div></template><script>import{getFaultTypes,createRepairOrder}from'@/api/repair'exportdefault{name:'RepairSubmit',data(){return{repairForm:{typeId:null,location:'',description:'',imageUrls:[]},faultTypes:[],rules:{typeId:[{required:true,message:'請(qǐng)選擇故障類(lèi)型',trigger:'change'}],location:[{required:true,message:'請(qǐng)輸入故障地點(diǎn)',trigger:'blur'},{min:5,message:'地點(diǎn)描述至少5個(gè)字符',trigger:'blur'}],description:[{required:true,message:'請(qǐng)描述故障情況',trigger:'blur'},{min:10,message:'故障描述至少10個(gè)字符',trigger:'blur'}]}}},created(){this.loadFaultTypes()},methods:{loadFaultTypes(){getFaultTypes().then(response=>{this.faultTypes=response.data}).catch(error=>{this.$message.error('加載故障類(lèi)型失敗：'+error.message)})},handleUploadSuccess(response,file,fileList){if(response.success){this.repairForm.imageUrls.push(response.data.url)this.$message.success('上傳成功')}else{this.$message.error('上傳失?。?+response.message)}},handleUploadRemove(file,fileList){constindex=this.repairForm.imageUrls.indexOf(file.response.data.url)if(index!==-1){this.repairForm.imageUrls.splice(index,1)}},submitForm(){this.$refs.repairForm.validate((valid)=>{if(valid){createRepairOrder(this.repairForm).then(response=>{this.$message.success('報(bào)修提交成功，工單編號(hào)：'+response.data.orderNo)this.$router.push('/repair/list')}).catch(error=>{this.$message.error('提交失敗：'+error.message)})}else{returnfalse}})},resetForm(){this.$refs.repairForm.resetFields()this.repairForm.imageUrls=[]}}}</script><stylescoped>.repair-submit-container{max-width:800px;margin:20pxauto;padding:020px;}</style>5.3.3報(bào)修單列表組件實(shí)現(xiàn)<template><divclass="repair-list-container"><el-cardtitle="我的報(bào)修單"><el-row:gutter="20"class="filter-row"><el-col:span="6"><el-selectv-model="status"placeholder="狀態(tài)篩選"clearable@change="handleFilterChange"><el-optionlabel="全部"value=""></el-option><el-optionlabel="待分配"value="0"></el-option><el-optionlabel="處理中"value="1"></el-option><el-optionlabel="已完成"value="2"></el-option><el-optionlabel="已撤銷(xiāo)"value="3"></el-option></el-select></el-col><el-col:span="6"><el-selectv-model="typeId"placeholder="類(lèi)型篩選"clearable@change="handleFilterChange"><el-optionlabel="全部"value=""></el-option><el-optionv-for="typeinfaultTypes":key="type.id":label="":value="type.id"></el-option></el-select></el-col><el-col:span="8"><el-date-pickerv-model="dateRange"type="daterange"range-separator="至"start-placeholder="開(kāi)始日期"end-placeholder="結(jié)束日期"@change="handleFilterChange"></el-date-picker></el-col><el-col:span="4"class="text-right"><el-buttontype="primary"@click="$router.push('/repair/submit')"><iclass="el-icon-plus"></i>新增報(bào)修</el-button></el-col></el-row><el-table:data="tableData"borderstyle="width:100%;margin-top:20px"v-loading="loading"><el-table-columnprop="orderNo"label="工單編號(hào)"width="180"></el-table-column><el-table-columnprop="typeId"label="故障類(lèi)型"width="120"><templateslot-scope="scope">{{getFaultTypeName(scope.row.typeId)}}</template></el-table-column><el-table-columnprop="location"label="地點(diǎn)"width="200"></el-table-column><el-table-columnprop="status"label="狀態(tài)"width="100"><templateslot-scope="scope"><el-tag:type="statusMap[scope.row.status].type">{{statusMap[scope.row.status].label}}</el-tag></template></el-table-column><el-table-columnprop="createTime"label="創(chuàng)建時(shí)間"width="180"><templateslot-scope="scope">{{formatDate(scope.row.createTime)}}</template></el-table-column><el-table-columnprop="updateTime"label="更新時(shí)間"width="180"><templateslot-scope="scope">{{formatDate(scope.row.updateTime)}}</template></el-table-column><el-table-columnlabel="操作"wid