本篇實(shí)戰(zhàn)文章實(shí)戰(zhàn)演練一下陀螺匠OA系統(tǒng)商業(yè)版前端的二次開發(fā)整個(gè)過程。
【實(shí)戰(zhàn)目標(biāo)】：修改合同列表導(dǎo)出數(shù)量的限制。
【實(shí)戰(zhàn)內(nèi)容】：
1. 確定問題。默認(rèn)的情況下，合同列表導(dǎo)出的數(shù)量是只能1000條，這個(gè)限制是前端的，后端沒有數(shù)量限制，所以只要改前端就好了。我們這次借助這個(gè)修改，來實(shí)戰(zhàn)演練一遍商業(yè)版的前端修改流程。
假設(shè)已經(jīng)部署好了系統(tǒng)，而且是按照我前面寫的環(huán)境搭建篇文章搭建好了開發(fā)環(huán)境。還沒看過？戳這里>> 開發(fā)實(shí)戰(zhàn)環(huán)境搭建
如果是開源版前端修改，請看這里>>>開源版前端修改，路徑會(huì)有些不一樣，其他大同小異。
2. 準(zhǔn)備Node環(huán)境。按照官方文檔的推薦，我們來準(zhǔn)備對應(yīng)的Node環(huán)境。安裝Node環(huán)境有兩種方式，一種是直接找Nodejs 14.21.3的安裝包安裝，另外一種推薦用nvm方式來安裝，好處是可以有多個(gè)node的版本共存，隨時(shí)可以切換。我這里用nvm的方式來安裝。
# 推薦環(huán)境：
node版本：14.21.3
npm版本：6.14.18首先，下載nvm的安裝包，我放附件了。解壓后，按照提示安裝好。打開一個(gè)命令行窗口(Win+R)cmd，輸入nvm version，能正常輸出版本說明安裝成功。
查看可安裝的Node版本：
nvm list available
因?yàn)槲覀冞@里要的是14.21.3的版本，直接執(zhí)行：
nvm install 14.21.3等待安裝完成。檢測是否安裝成功：
node -v
npm -v
注：我這里因?yàn)槭前惭b好的環(huán)境再還原過程，所以有些細(xì)節(jié)可能沒考慮到，有問題請留言。
查看已安裝的Node版本：
nvm list再切換到我們需要的Node版本：
num use 14.21.3
好了，NodeJs就安裝好了。
3. 安裝依賴組件。在這之前先說下目錄路徑。商業(yè)版的前端源代碼默認(rèn)是在views/view-pc.zip壓縮包里面，需要解壓一次，我們這里解壓到當(dāng)前目錄view-pc。代碼發(fā)布目錄在public\admin。發(fā)布目錄是源代碼編譯后，把編譯后的網(wǎng)頁文件放到發(fā)布目錄，前端才能訪問得到修改效果。
我們切換到views/view-pc目錄，然后在地址欄輸入cmd，打開命令行窗口。（這是個(gè)小技巧，cmd打開后自動(dòng)切換到當(dāng)前目錄）
然后在命令行輸入：
npm install
等待執(zhí)行完成。
然后開啟本地調(diào)試服務(wù)。調(diào)試服務(wù)是實(shí)時(shí)同步修改的，就是本地修改了文件，服務(wù)會(huì)自動(dòng)重新加載，不需要重啟服務(wù)讓修改生效。
npm run dev正常開啟本地調(diào)試服務(wù)是這樣：
然后我們通過瀏覽器訪問本地地址：
http://localhost:9527/admin/
打開看到登錄頁說明正常。先關(guān)掉服務(wù)。
4. 修改代碼。先用VSCODE打開view-pc目錄。
然后根據(jù)合同列表的前端地址，定位到對應(yīng)的源代碼。前端路由是/admin/customer/contract/iChecked，根據(jù)對應(yīng)規(guī)則，前端路由的admin對應(yīng)view-pc/src/views/的根目錄，然后順著customer/contract/iChecked找到合同列表源文件。
我們看到iChecked.vue實(shí)際引入的是index.vue，那么實(shí)際要修改的是index.vue。
在index.vue當(dāng)中找到exportContract函數(shù)，修改函數(shù)內(nèi)的判斷條件，把1000改成你需要的數(shù)字，建議改成10000足夠。
導(dǎo)出數(shù)據(jù)限制條數(shù)是因?yàn)檫^多的數(shù)據(jù)行導(dǎo)出需要查詢很久很耗性能，合理修改以免產(chǎn)生其他問題。
5. 修改后端接口。找到view-pc目錄下的.env.develop文件，修改里面的VUE_APP_BASE_API和VUE_APP_WS_URL地址為你自己OA部署的后端地址。
6.打包發(fā)布。然后在view-pc目錄打開命令行，運(yùn)行npm run dev，切換到合同列表目錄進(jìn)行導(dǎo)出測試。由于這里數(shù)據(jù)不夠，這步省略。
測試完成后，停掉dev服務(wù)，執(zhí)行：
npm run build:prod進(jìn)行打包，等待打包完成。
然后切換到view-pc/dist目錄下，把這個(gè)目錄下的文件創(chuàng)建一個(gè)壓縮文件，我這里是dist.zip。
然后打開寶塔面板，切換到OA網(wǎng)站的發(fā)布目錄下：
然后把dist.zip上傳到這個(gè)目錄，把文件解壓出來覆蓋掉舊文件。然后再訪問一下OA系統(tǒng)，檢查導(dǎo)出限制是否生效。
好了，這就是商業(yè)版的前端修改流程實(shí)戰(zhàn)。希望有幫到你。
個(gè)人水平有限，如果錯(cuò)誤或者更好的實(shí)現(xiàn)方式，歡迎指出和交流。有疑問歡迎留言。
最后，介紹一下自己：我是陀螺匠官方服務(wù)商，承接陀螺匠的二次開發(fā)業(yè)務(wù)，有需要深度定制OA系統(tǒng)的公司歡迎聯(lián)系（18826500406）。目前已收陀螺匠定制開發(fā)費(fèi)用2萬+。
c
