SpringReport(vue3)与橙单集成

项目	版本	vue版本
橙单	任意	vue3
SpringReport	2.3.0 +	vue3

集成方式

通过iframe的方式将SpringReport集成到橙单项目中，橙单的服务和SpringReport需要单独启动，并不是代码整合集成

开始集成

集成过程中不管是橙单框架的代码还是SpringReport的代码都需要进行稍微的改动，按照以下步骤进行改动即可。 这个改动过程不会对橙单原有的功能产生影响

橙单前端改动

1.将【report文件夹】放到橙单项目src/pages目录下，【report文件夹】可以从git上获取到，所在的目录是【sql脚本和其他\橙单集成相关文件】 橙单项目中目录位置如下图所示： 2.找到橙单项目中的.env.development和.env.production配置文件，添加配置：VUE_APP_SPRINGREPORT_URL_PREFIX='http://localhost:8089/SpringReport-vue3'，这个配置是SpringReport的访问路径前缀，根据自己的实际部署进行调整，配置如下图所示： 3.添加路由，将以下报表的相关路由添加到橙单项目的路由中，橙单的路由配置在src/router/systemRouters.ts文件中，添加后的内容如下图所示：

{
    path: 'reportDatasource',
    component: () => import('@/pages/report/reportDatasource.vue'),
    name: 'reportDatasource',
    props: getProps,
    meta: { title: '数据源管理' },
},
{
    path: 'reportTpl',
    component: () => import('@/pages/report/reportTpl.vue'),
    name: 'reportTpl',
    props: getProps,
    meta: { title: 'Excel报表' },
},
{
    path: 'docTpl',
    component: () => import('@/pages/report/docTpl.vue'),
    name: 'docTpl',
    props: getProps,
    meta: { title: 'word报表' },
},
{
    path: 'onlineTpl',
    component: () => import('@/pages/report/onlineTpl.vue'),
    name: 'onlineTpl',
    props: getProps,
    meta: { title: 'Excel协同文档' },
},

橙单后端改动

1.将【SpringReportController.java】文件放到application-webadmin项目的【com.orangeforms.webadmin.upms.controller】包下， 【SpringReportController.java】可以从git上获取到，所在的目录是【sql脚本和其他\橙单集成相关文件】

SpringReportController的作用：当从橙单系统中打开SpringReport相关的页面时，会带着橙单项目的token到SpringReport，SpringReport项目会利用这个token访问SpringReportController暴露出来的getTokenData这个接口，去橙单系统重验证token的是否正确，如果不正确则无法访问。

如下图所示：

2.执行【report_menu.sql】脚本，添加报表对应的菜单数据

SpringReport前端改动

1. 找到【router/index.js】文件中的【createRouter】方法，将 routes: constantRoutes, 修改成 routes:constantThirdPartyRoutes, 如下图所示： 2.如果想改变一下SpringReport的主题颜色与若依保持一致，则找到【element/index.scss】文件中的base: #17b794;修改为$--color-primary: #ff7700; 全局搜索#17b794替换成#ff7700或者自己想要的主题色 如果不需要改变SpringReport的主题颜色则可以忽略 如下图所示：

SpringReport后端改动

1.找到application.properties文件，将merchantmode=1修改为merchantmode=2
merchantmode是控制是否启用多租户模式，merchantmode=1是启动多租户模式，嵌入橙单框架不使用多租户模式，所以要将merchantmode设置成2
2.找到application-dev.properties配置文件，根据自己的环境选择是dev，还是test，还是pub配置文件，配置以下内容：
thirdParty.type=orange
thirdParty.tokencheck.url=http://localhost:8082/admin/springReport/getTokenData
thirdParty.token.expire=86400
这三个属性的作用分别如下：
thirdParty.type：第三方框架类型，橙单框架固定值为orange，以后还可能会与其他框架集成
thirdParty.tokencheck.url：第三方token校验接口，也就是在橙单框架中添加的SpringReportController.java对应的getTokenData的访问接口
thirdParty.token.expire:第三方token有效时长，单位秒

iframe方式集成的优缺点

优点

iframe方式集成比较简单，快捷，不只是橙单框架可以通过该种方式集成，其他的第三方框架或者系统都可以通过该种方式集成

缺点

服务需要单独部署启动，并不是一个整体，部署上更复杂一些，系统样式不统一，并且也有一些功能暂时无法支持，需要额外的对接开发。 以下是通过iframe方式集成暂时不可用的一些功能以及解决方案

功能	所属模块	解决方案
新增excel报表模板，查看权限不支持指定角色	Excel报表	需要对接橙单的用户角色，橙单对外暴露接口或者同步数据到springreport库中
报表设计页面【添加保护】【查看保护范围】功能不支持	Excel报表设计	需要对接橙单的组织架或者橙单对外暴露接口或者同步数据到springreport中
Excel协同文档页面【添加保护】【查看保护范围】功能不支持	Excel协同文档编辑	需要对接橙单的组织架构或者橙单对外暴露接口或者同步数据到springreport中
Excel协同文档显示用户编辑信息和操作记录无法记录操作人	Excel协同文档编辑	需要对接橙单的用户数据或者橙单对外暴露接口或者同步数据到springreport库中