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