保护页面源码二开文档 ​

项目已正常开发和运行，源码二开的页面分为权限页面和非权限页面，项目统一在项目的 secondDev 目录下进行源码二开

一、非权限页面源码二开 ​

1. 确认需求需要开发的页面，在 secondDev 目录下进行开发，建议目录路径与产品的目录一致，如注册页面，产品的页面路径是在当前项目的 views/user/register.vue 下，项目上也可以在 secondDev 目录下，创建 views/user/register.vue,并将对应的开放的代码拷贝进入

   

2. 重置路由，由于路由已经生成，产品现在已提供的方案是让项目二开时可以优先使用项目的路由，具体操作如下：

   • 在 secondDev 目录下，找到 router/index.ts 文件下，在 secondDevRoutes 数组下添加路由，如注册页面路由，通过覆盖产品原有的路由方式，达到激活项目二开的路由方式

     注意：路由的 path、name、component 三个参数必不可少，path 路径和 name 建议与产品一致

     tsx

     {
         path: '/user/register',
         name: 'register',
         component: () => import('@views/secondDev/views/user/register.vue'),
       },

     1
     2
     3
     4
     5
     

     

3. 执行了 1、2 步骤后，实际上项目已经可以自主开发自定义页面

4. 为了避免项目重度开发，产品也会提供受保护的源码给项目（前提发邮件先申请），项目获取受保护的源码后，可按照引入组件的方式进行使用，以注册页面为例，q-register 组件是受保护的，可优先获取，在创建的 secondDev/views/user 目录下,创建一个 components 的目录，将 q-register 组件放入其中

   

   

5. 重新运行项目，访问二开的页面，页面就会优先使用项目二开的页面，至此完成项目路由优先产品路由的改造功能

二、权限页面源码二开 ​

​ 权限页面：是指在平台菜单管理页中配置，在租户管理（或角色管理）授权后，通过 els/account/permission/getUserPermission 接口返回的权限路由菜单页面，比如：采购协同 > 供应商管理 > 供应商主数据 **

1. 在 V6 项目中，各个模块一般被拆分为列表、编辑、详情等独立的页面，且每个页面都要配置路由信息

如：采购协同 > 供应商管理 > 供应商主数据

• 供应商主数据 列表 src/views/srm/supplier/purchase/supplierMaster/list.vue
• 供应商主数据 编辑 src/views/srm/supplier/purchase/supplierMaster/edit.vue
• 供应商主数据 详情 src/views/srm/supplier/purchase/supplierMaster/detail.vue

2. 复制整个模块代码至 secondDev 下

找到原产品模块代码 src/views/srm/supplier/purchase/supplierMaster

在 secondDev 目录下建相同文件路径，并复制整个文件夹， src/views/secondDev/supplier/purchase/supplierMaster

3. 修改各个页面的权限路由配置

• 修改列表页路由配置

只需要修改 前端组件路径 由原来的 srm/supplier/purchase/supplierMaster/list，改为 secondDev/supplier/purchase/supplierMaster/list

• 修改编辑页路由配置

只需要修改 前端组件路径 由原来的 srm/supplier/purchase/supplierMaster/edit，改为 secondDev/supplier/purchase/supplierMaster/edit

• 修改详情页路由配置

只需要修改 前端组件路径 由原来的 srm/supplier/purchase/supplierMaster/detail，改为 secondDev/supplier/purchase/supplierMaster/detail

4. 退出并重新登录，检查接口返回的权限路由配置

检查接口返回的权限菜单配置 els/account/permission/getUserPermission

查看 供应商主数据 路由配置是否正确

完成后，就可以在 secondDev/supplier/purchase/supplierMaster/list， secondDev/supplier/purchase/supplierMaster/edit，secondDev/supplier/purchase/supplierMaster/detail 处理项目二开功能的业务逻辑了。

有什么作用: 与 V6 产品原有功能代码区分开，各司其职，互不影响，以及实现后期项目版本升级的需求。