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)拖三个内容容器分别用于三大块区域的显示,分别设置名称为contentTopcontentMiddlecontentBottom  (这里可以介绍一下CSS样式)

3)布局5大块区域

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

在第二块区域拖入2个容器,分别设置为contentLeftcontentRight

在最后一块区域拖入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)修改标题点击事件var id = this.target.source.data.id;   this.form.openDocument(id);

OA系统中规章制度区域

同“通知公告”

OA系统中图片新闻区域

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

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

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

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

4)修改调整对应的样式

OA系统中统计区域

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

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

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

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

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

保存预览一下效果即可。

开源OA:手把手教你搭建OA办公系统(9)快速搭建企业门户相关推荐

  1. 开源!手把手教你搭建Arduino+英伟达Jetson的ROS小车(上)

    1 引言 今年6月,我们应小伙伴儿的需求,写了两篇如何通过购买零件从零搭建一台ROS实体车的推文<开源!手把手教你搭建Arduino+树莓派的ROS小车(上)>.<开源!手把手教你搭 ...

  2. 【环境搭建】手把手教你安装Ubuntu16.04系统

    [环境搭建]手把手教你安装Ubuntu16.04系统 使用U盘制作Ubuntu系统盘 准备工作 操作过程 用制作好的系统盘安装Ubuntu16.04系统 结语 使用U盘制作Ubuntu系统盘 准备工作 ...

  3. 手把手教你python自动化办公(三)---PPT批量修改

    手把手教你python自动化办公(三)---PPT批量修改 PPT批量修改 场景模拟:当公司让你制作10000个不同数据但背景相同的PPT时,你是干上三天,还是小手一挥,十秒搞定? 1.设计你想要的P ...

  4. 平板电脑如何刷linux,手把手教你六步刷系统

    · 手把手教你六步刷系统 当一切准备就绪后,就可以开始刷机了,首先要用USB2.0接口数据线连接电脑与神舟LiPad T10,然后在关机状态下同时按下上文中介绍的A按键与B按键,这时Windows系统 ...

  5. 个人搭建云手机系统_信通中心搭建云办公系统助力疫情防控

    针对疫情防控期间办公需求实际,2月1日,中国石油西南油气田公司信通中心快速搭建云办公系统,全力保障公司生产经营工作有序开展. 建立云视频办公系统,组织技术队伍在公司机关安装视频会议终端设备,并逐步覆盖 ...

  6. 如何刻linux系统光盘,手把手教您把多个系统ISO刻录到一张光盘

    有时我们所以刻录的系统文件很小,如果只刻在一张光盘里面,就显的有一些浪费.下面我们就来手把手教您把多个系统ISO刻录到一张光盘,具体步骤如下: 制作多系统启动光盘 1.制作启动盘 在Windows 和 ...

  7. 直播视频搭建平台----如何短期实现快速搭建上线占据市场吸取流量

    直播视频搭建平台----如何短期实现快速搭建上线占据市场吸取流量 在过去的2017年与2018年到来之交,当下做火热的直播行业焕发了第二春,让越来越多团队投入直播行业,到底是采用开源的直播软件系统,还 ...

  8. 手把手教大家在自己的Windows电脑上搭建一个视频电话系统(基于开源项目FreeSwitch+Linphone)

    目前可以做视频电话的流媒体开源项目有很多,那么今天我就手把手教大家(基于FreeSwitch+Linphone)搭建一个免费的开源的能在局域网中使用的视频电话系统,部署与配置都非常的简单,而且点对点的 ...

  9. lemon oa mysql_maven环境的搭建,lemon-OA办公系统的搭建

    当时要搭建activiti工作流,但是这个工作流是基于maven启动的,于是,学习了一下,maven环境的搭建 准备的环境: Jdk  1.6 Eclipse IDE 一个或者 MyEclipse M ...

  10. oa提醒模块要素_OA协同办公系统的七大优势

    随着互联网信息科技的发展下,当企业需要快速发展时,引进OA协同办公系统就是锦上添花,oa系统的本质核心就是帮助用户提高日常办公效率.那么oa系统到底有哪些优势呢? 1.促进相关部门信息化办公 OA协同 ...

最新文章

  1. nib、xib、storyboard(故事板)
  2. 小米Android N新功能,快升级牛轧糖 小米Android N支持汇总
  3. 一文搞定Linux shell脚本编程( 史上最全汇总 )
  4. Kaggle 房价预测竞赛优胜方案:用 Python 进行全面数据探索
  5. 深入分析Ribbon源码分析
  6. JavaScript--函数
  7. python自动填日志_Selenium3+python自动化012+日志logging基本用法、高级用法
  8. 如何停止CSS3的动画?
  9. [Vue warn]: Cannot find element: #main
  10. vb在 ListBox 之中点击右键弹出菜单
  11. springboot异步任务
  12. 运行QTP测试脚本后,将编译结果写入指定文件(四)
  13. 学校图书馆借阅管理系统软件项目分析
  14. 不错的Unity教程
  15. 服务器虚拟机装nas,nas虚拟主机(nas为什么要装虚拟机)
  16. Blue Coat:打击移动领域的坏人
  17. Java时间 之 Instant
  18. Python 格式化输出详解
  19. 什么是云服务器?什么是阿里云服务器管理?
  20. Python——类和实例

热门文章

  1. iOS 铅笔绘图画刷
  2. c mysql prepared_MySQL Prepared语句
  3. Java Scanner类的常用方法及用法(很详细)
  4. MQTT协议超全面总结来啦
  5. spawn....expect简介及遇到的坑
  6. Ubuntu 设置开机直接进入桌面
  7. 压缩感知重构算法之广义正交匹配追踪(gOMP)
  8. kaggle 比赛分类_黑色素瘤分类在kaggle比赛中获得奖牌
  9. 基于CANoe的SecOC实现
  10. 科技制作发明A类和科技制作发明B类的区别