历史版本4 :组件复用 返回文档
编辑时间: 内容长度:图片数:目录数: 修改原因:

目录:

1. 概述编辑

1.1 版本说明

报表服务器版本功能变动
10.0.17版本更新后,组件复用功能已合并至设计器,以后无需安装组件复用插件且相关功能随设计器更新

1.2 应用场景

决策报表中的图表块、报表块等组件,由于样式调整耗时长,风格统一困难,因而报表整体制作效率被大幅度拉低。

为了解决上述问题,FineReport 提供了组件复用功能,用户可以直接从在线商城下载官方提供的组件,直接将组件拖拽到自己的报表中,改下数据、大小、背景色就能直接用了。

如果您想将自己制作的组件保存起来,方便下次直接拿来用,也可以通过该功能实现,只需要将组件生成后保存到本地库即可。

下载并复用在线商城组件的步骤如下图所示:

1625196300108875.gif

预览效果如下图:

1625196344422818.png

1.3 环境要求

  • 10.0.17 之前版本的设计器,需要安装 组件复用插件 才能使用组件复用功能。

  • 10.0.17 及之后版本的设计器,无需安装插件即可使用该功能。

2. 功能入口编辑

现在打开组件库的入口有 2 个,分别是:

2.1 组件库

新建或打开决策报表,右侧工具栏有一个组件库按钮,这个是所有版本都有的入口。

1625204266165508.png

点击按钮后,会打开组件库页面,如下图所示:

1625204278726883.gif

2.2 套用组件

决策报表上方工具栏最右侧新增套用组件按钮,这个是 10.0.17 及之后版本才有的入口。

1624870314369051.png

点击按钮后,会跳转到组件库页面,如下图所示:

1624870985814022.gif

3. 组件库使用指南编辑

3.1 复用在线组件

3.1.1 下载组件

首先要把组件下载到本地,下载组件的渠道有 2 种。

1)渠道一:直接在设计器在线组件页面下载。

进入组件库在线组件页面后,组件组件包Tab 下,会有很多组件。

浏览并选择自己想要的,然后鼠标悬浮在这个组件上方,会出现白色下载按钮,同时左边也会弹出组件效果预览图,点击下载按钮后,组件即下载到本地。

1625204980657942.png

切回到本地组件页面,下载好的组件会保存在这个页面,如下图所示:

1625205753110859.png

所有下载的组件都以 .reu 文件的形式保存在%FR_HOME%\webapps\webroot\WEB-INF\assets\component路径下

1625205930660319.png

2)渠道二:商城下载并安装到本地

打开 组件在线商城 后,挑选自己想要的组件,然后点击这个组件的展示区域,即可进入下载页面。

1625206151229053.png

点击下方的下载组件按钮,即可将 .reu 文件下载到本地文件夹,此时还未结束,还需要将文件安装到设计器本地目录下。

1625206269278795.png

组件库打开本地组件页面,点击添加组件>安装组件,将 .reu 文件安装到设计器本地目录下即可,如下图所示:

1625206570954794.gif

3.1.2 使用组件

使用方法很简单,只需要将组件拖到决策报表的 body 中即可,如果是绝对布局还能自由调整组件位置和大小。

鼠标悬浮在组件上方时,其右上角就会出现帮助设置按钮,点击按钮会进入帮助设置页面。

帮助设置页面可以看到组件使用说明和组件中所有条件属性、JS、超链接这些特殊设置项。(如果组件没有特殊设置项,则不显示)

1625207173287442.gif

在帮助设置的组件介绍处,会有推荐的组件 body 背景色,使用时建议您设置成该颜色,以保证最佳展示效果

1625208078499718.gif

3.2 创建可复用组件

如果您想将自己制作的报表块、图表块保存起来,方便下次直接使用,就可以将它们生成为组件,保存到本地目录下,下次可以直接拖进来用。

首先要先用鼠标选中这个报表块或图表块,然后进入组件库的本地组件页面。然后点击添加组件>创建组件」。

打开生成组件的配置页面,设置后相关信息后,点击确定即可生成组件,生成的组件保存在本地组件页面。下次可以直接拿来用。

步骤演示可以看下面这张图:

1625209002811069.gif

3.3 管理本地组件

3.3.1 分组管理

有时候本地组件太多了,整个页面非常乱,找的时候也难找,可以将组件整理到不同分组下,这样以后可以直接打开对应分组来找,节省时间。

  • 点击本地组件页面下的添加分组按钮,可以新建分组。

  • 右键组件后点击移动分组,可以将组件移到某个分组下面去。

完整操作见下图:

1625209596658968.gif

3.3.2 批量操作

组件很多时,支持批量删除和移动分组,点击本地组件页面下的管理组件按钮即可进行相关操作。如下图所示:

1625209892236798.gif

4. 用户须知编辑

4.1 老用户须知

如果您已经安装了 组件复用插件 ,由于插件功能已经合到设计器,版本更新后插件会被自动禁用,且不可启用,删除插件不会有任何影响。

1624871725194982.png

已安装的本地组件和本地分组仍然会保留,更新对组件没什么影响,如下图所示:

Snag_113b5014.png

4.2 新用户须知

如果您是未使用过组件复用功能的新用户,那么第一次打开组件库页面时,会弹出新手提示框,且关闭后不再出现,如下图所示:

1624931417552676.png

4.3 其他须知

在设计决策报表时,可能会同时包含组件面板的组件和组件库中的组件,那么怎么区分它们呢?

其实很简单,看组件图标有无 logo 或者组件末尾的数字编号位数就行:

  • 组件面板中的组件:组件图标没有 logo、1 位数字编号

  • 组件库中的组件:组件图标右上角有蓝色 logo、2 位数字编号

Snag_14d8c224.png