如何用开源OA办公开发平台，快速搭建一个企业门户

​

 OA系统门户介绍

一个门户OA办公系统的门面，把这个门面做的既实用又漂亮很重要。而今天要介绍的功能——门户管理，是OA办公系统管理是O2OA五大平台之一，主要用于设计各类页面，比如系统首页、列表页面、二级页面、部门门户、报表门户等等。可以理解成是传统的html+css+js的开发设计，我们在门户管理页面中可以很方便的拖曳组件，实现超快速设计搭建一个页面展示给用户。

OA门户页面设计

需求

举例下图就是用户这边需要最终的效果图

​

编辑

新建门户应用

现在我们在O2OA平台新建一个门户应用。点开主菜单，点击“门户管理”，点击右上角“新建门户”按钮，新建一个门户应用，取名为培训：

​

编辑

“门户名称”（必填）：填写“培训”；

“门户别名”：可随意填写；

“门户描述”：可随意填写；

“门户类型”：可随意填写；

填写完后点击“完成”即可。

点击打开培训应用，可以看到下面的界面：

​

编辑

 

左边是门户应用的几大设计元素：

页面配置：OA门户管理中最重要的一个元素，用来展示最终效果

部件配置：通用的一个小模块，可以多个页面直接引用（独立、公用）

脚本配置：通用的脚本文件

资源文件：放一些资源文件，比如图片、excel等等，可以通过url访问获取

门户属性：修改OA门户的基本信息、图标、权限等。

分析布局设计：最上方banner页，中间部分内容区域（分为上中下三部分），最下方公司版权信息。

上传资源文件

首先我们把美工设计好的logo图片上传到资源文件中

​

编辑

然后我们新建一个页面，取名为“培训首页”，把美工准备的css样式内容拷贝粘贴到页面的CSS样式中

根据需求页面，将页面背景色设备为灰色：background-color:#f0f0f0

​

编辑

logo图片区域设计

拖一个容器到页面中，用来展现banner页图片，然后再拖动一个图片组件到这个容器里，将标识改为logo，选择资源图片，可以保存预览一下效果。

内容区域布局设计

1）拖一个内容区域容器 ，命名为pageContent

2）拖三个内容容器分别用于三大块区域的显示，分别设置名称为contentTop，contentMiddle，contentBottom （这里可以介绍一下CSS样式）

​

编辑

3）布局5大块区域

然后我们在第一块内容区域拖入2个容器，分别设置为picNews，taskArea

在第二块区域拖入2个容器，分别设置为contentLeft，contentRight

在最后一块区域拖入1个容器，设置为statContent

​

编辑

4）保存一下，预览看看效果，接下来我们就来设置一下待办待阅这个区域

设计待办待阅区块

首先我们拖曳一个分页控件到taskArea区域 名称为 taskTab，删除多余的tab标签，修改tab页名称为“待办”和“待阅”：

​

编辑

待办区块设置

1）数据源配置

点击“待办”分页，从左侧拖动一个数据源。

（我们平台有很多的restfull服务，后端API，数据源就是为了请求这些restfull服务，最终返回我们需要的数据，比如说待办、待阅、信息发布数据等等。）

数据源最重要的配置是在“数据源”页签里，这块需要配置我们后台的服务请求方法、服务应用以及路径。

打开我们后端API服务地址：http://host:20030/x_program_center/jest/list.html

这里需要显示的是待办，所以我们在流程里找到待办操作（TaskAction）下的listMyPaging

​

编辑

​

编辑

数据源配置：

方法：get

服务应用：流程

路径：/jaxrs/task/list/my/paging/1/size/6

​

编辑

配置好后点一下测试，看一下返回的数据结构。可以看到我们真正需要的数据是在data里面，这个时候我们需要就用到子数据源。

2）子数据源配置

拖动一个子数据源到数据源里，数据路径配置为data，以此来获取data数据。

​

编辑

3）数据文本配置

需求中需要显示的是标题和创建时间

拖动数据文本到子数据源，JSON路径为：title 标题过长问题

if(this.target.text.length > 14){     return this.target.text.substr(0,14) + "..." }else{     return this.target.text }

再拖动数据文本到子数据源，JSON路径为：createTime

4）预览看效果，然后对比一下效果图，调整样式

​

编辑

​

编辑

标题前面的点：增加div在标题前，设置class：point

标题text设置class：titleText，时间text设置class：timeText

子数据源设置class：subsource

数据源设置样式margin:10px

增加更多lable，设置class：more

增加更多和标题的点击事件

更多点击事件：this.page.openApplication("process.TaskCenter"); 介绍前端API

标题点击事件：var id = this.target.source.data.work; this.form.openWork(id);

待阅区域设计

拷贝待办区域数据源（source）容器到待阅区域，修改数据源路径为/jaxrs/read/list/my/paging/1/size/6

报销流程增加待阅节点，设置几个待阅文件

设置部件

tab分页是没办法保存为部件的，所以我们要拉一个div框包含住tab分页和更多，然后保存为部件：数据列表

​

编辑

 

​

编辑

OA系统中通知公告区域

使用之前保存好的部件快速的设计通知公告区域

1）拖一个部件元素组件到区域中，选择“数据列表”部件

2）修改相应的内容

2.1） 删除一个分页，保留一个命名为“通知公告”

2.2）更多点击事件修改：this.form.openCMS("通知公告")

2.3）修改数据源配置

方法：PUT

应用：内容管理

路径：/jaxrs/document/filter/list/1/size/7

请求正文：return{"appNameList":["通知公告"]}

2.4）修改标题点击事件：varid =this.target.source.data.id; this.form.openDocument(id);

 

OA系统中规章制度区域

同“通知公告”

​

编辑

OA系统中图片新闻区域

我们直接使用样例服务器上的图片新闻设计快速的搭建

1）从sample服务器上拷贝一个“图片新闻”部件

2）复制黏贴到培训服务器的培训首页中

​

编辑

3）拖动一个“部件”到图片新闻区域，选择“图片新闻”部件名称

​

编辑

4）修改调整对应的样式

OA系统中统计区域

拖一个“嵌入统计”组件到统计区域，选择之前设计好的“报销统计”，隐藏表格

 

底部公司版权信息
拖一个容器到底部，容器增加样式

Plain Text复制代码

{"background-color":"#000000","height":"120px"}

然后再拖入一个文本到容器里，文本的值写“XXXX版权所有”，然后设置一下这个文本的样式：

Plain Text复制代码

1

 

{"text-align":"center","color":"#ffffff","line-height":"80px"}

 

​

编辑

保存预览一下效果即可。

（转自公众号：浙江兰德网络）

​