门户开发-组件介绍-嵌入视图、嵌入统计、嵌入查询视图-门户管理-O2OA企业应用开发平台-人人都是协同系统开发专家

门户开发-组件介绍-嵌入视图、嵌入统计、嵌入查询视图

时间：2023-03-20

O2OA(翱途)开发平台[下称O2OA开发平台或者O2OA]拥有门户页面定制与集成的能力，平台通过门户定制，可以根据企业的文化，业务需要设计符合企业需要的统一信息门户，系统首页等UI界面。从本篇讲的是页面设计器元素组件中三个组件：嵌入试图、嵌入统计和嵌入查询。

一、先决条件

1、O2Server服务器正常运行，系统安装部署请参考文档《如何在服务器上安装部署O2OA》

2、以拥有管理员权限或拥有门户管理员（PortalManager角色）的用户账号登录O2OA(翱途)开发平台，如：xadmin

3、可以进入门户管理平台并且有开发权限，请参考《门户开发-门户设计开发入口和权限说明》

二、嵌入视图

image (8).png

视图是平台提供的一个设计元素，可以在数据中心创建，用于展现流程实例或内容管理实例的列表。可以在页面上直接嵌入展现。

具体视图的创建开发，请参考https://www.yuque.com/o2oa/cfst8l/bh42xi

1. 嵌入视图属性

嵌入视图基本属性如下：

image (9).png

其中“标题样式”用于通过css设置视图标题的展现样式；“数据样式”用于通过css设置视图条目的展现样式。

嵌入视图中的“视图”标签页属性如下：

image (10).png

属性	描述	备注
视图	选择要嵌入的视图
立即载入	是否在页面加载时同时加载视图	如果选择“否“，您可以在任何时候通过脚本：view.active(); 方法来加载视图
显示标题	是否显示视图的列标题
默认展开	当视图为分类视图时，是否展开每一项
选择文件	选择是否可以选择视图中条目。	不允许：不能选择；单选：可以选择单个条目多选：可以选择多个条目
操作条	视图的操作条是否显示
过滤	对视图内容进行过滤	下面详细说明

视图的过滤是视图的核心功能，需要填写“路径“、”数据类型“、”逻辑“、”比较“和”值之后，点击按钮，将一条过滤添加到默认过滤条件中。可以添加多条过滤条件，它们之间的关系由每条的“逻辑“属性决定。下面是每个过滤条件属性的含义：

属性	描述	备注
路径	要过滤的JSON数据路径	流程和内容管理的数据，都以JSON格式存储和展现，如果数据格式如以下形式： { “title“:”标题”, ”count”:5, ”keyword”:”测试”, ”item”:{ “name”: “123”, “value”: “456” } }，这时要用title进行过滤，数据路径就是”title“；如果要对item中的value进行过滤，路径就是item.value。
数据类型	要过滤的数据的类型
逻辑	多条过滤条件连接的逻辑运算符	and 或 or
比较	路径和值的比较符
值	和路径数据比较的值。	通过脚本返回值

2. 嵌入视图事件

嵌入视图事件如下：

事件名	描述
queryLoad	元素载入之前执行
load postLoad	元素被载入之后执行如果立即载入为“是“：此时计算到了要载入的视图，并执行开始执行视图载入动作之后执行，但由于视图载入是异步过程，所以此时并不能保证视图已经载入完成；如果立即载入为“否“：此时计算到了要载入的视图，然后执行此事件
beforeLoadView	视图开始载入之前执行。
loadView	当视图完全载入之后执行。
select	如果视图允许选择，在选择视图条目时触发
openDocument	如果视图允许打开文档（在视图中配置），在打开文档之前触发

3. 嵌入视图方法

对象可以通过以下脚本获取：

var el = this.page.get(name); //name为视图的标识

获取的视图对象有以下方法可以使用：

方法名（属性）	用法	描述
show	el.show()	显示元素
hide	el.hide()	隐藏元素
addEvent	el.addEvent(name, fun)	给元素绑定系统事件。 name：事件按名称 fun：执行的方法
node	var dom=el.node	获取html原生Dom对象
reload	el.reload()	重新载入视图
active	el.active ()	没有立即载入视图时，通过此方法加载视图。
getData	el.getData ()	如果视图允许选择，此方法获取视图中选中条目的json数据

三、嵌入统计

image (11).png

统计是平台提供的一个设计元素，可以在数据中心创建，用于统计视图数据，生成统计表和常用图表。可以在页面上直接嵌入展现。

1. 嵌入统计属性

嵌入统计基本属性如下：

image (12).png

属性	描述	备注
统计	选择要嵌入的统计
显示图表	是否显示图表
显示图例	是否显示图例
显示表格	是否显示统计表格

2. 嵌入统计事件

事件名	描述
queryLoad	元素载入之前执行
load postLoad	元素被载入之后执行此时计算到了要载入的统计，并执行开始执行统计载入动作之后执行，但由于统计载入是异步过程，所以此时并不能保证统计已经载入完成
loadStat	当统计完全载入之后执行。

3. 嵌入统计方法

对象可以通过以下脚本获取：

var el = this.page.get(name); //name为嵌入统计的标识

获取的嵌入对象有以下方法可以使用：

方法名（属性）	用法	描述
show	el.show()	显示元素
hide	el.hide()	隐藏元素
addEvent	el.addEvent(name, fun)	给元素绑定系统事件。 name：事件按名称 fun：执行的方法
node	var dom=el.node	获取html原生Dom对象
reload	el.reload()	重新载入统计内容
getData	el.getData ()	获取统计的json数据

四、嵌入查询视图

image (13).png

查询视图是平台提供的一个设计元素，可以在数据中心创建，用于展现自建表、流程实例或内容管理实例的列表。可以在页面上直接嵌入展现。

具体查询视图的创建开发，请参考https://www.yuque.com/o2oa/cfst8l/ag18xu

1. 嵌入查询视图属性

属性和嵌入视图属性一致。

嵌入查询视图中的“查询”标签页属性如下：

image (14).png

属性	描述	备注
查询	选择要嵌入的查询视图
立即载入	是否在页面加载时同时加载视图	如果选择“否“，您可以在任何时候通过脚本：view.active(); 方法来加载视图
显示标题	是否显示视图的列标题
选择文件	选择是否可以选择视图中条目。	不允许：不能选择；单选：可以选择单个条目多选：可以选择多个条目
操作条	视图的操作条是否显示
过滤	对视图内容进行过滤	下面详细说明

视图的过滤是视图的核心功能，需要填写“路径“、”数据类型“、”逻辑“、”比较“和”值之后，点击 image (15).png 按钮，将一条过滤添加到默认过滤条件中。可以添加多条过滤条件，它们之间的关系由每条的“逻辑“属性决定。下面是每个过滤条件属性的含义：

属性	描述	备注
路径	要过滤的JSON数据路径	流程和内容管理的数据，都以JSON格式存储和展现，如果数据格式如以下形式： { “title“:”标题”, ”count”:5, ”keyword”:”测试”, ”item”:{ “name”: “123”, “value”: “456” } }，这时要用title进行过滤，数据路径就是”title“；如果要对item中的value进行过滤，路径就是item.value。
选择	查询那边配置的字段选择
数据类型	要过滤的数据的类型
逻辑	多条过滤条件连接的逻辑运算符	and 或 or
比较	路径和值的比较符
值	和路径数据比较的值。	通过脚本返回值

2. 嵌入查询视图事件

与嵌入视图一致

3. 嵌入查询视图方法