本篇实战文章实战演练一下陀螺匠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万+。
