目 录

• 流程管理主页设计目标及展现内容
  • 设计目标
  • 展现内容
• 主页展现草图
  • 为员工服务界面
  • 为领导服务界面
  • 为中层领导服务界面
  • 我的办公桌面服务
• 主界面布局设计
• 开发目录结构
• 界面展现及开发技术
  • HTML CSS
  • 界面框架
  • JS包
  • 层次结构
• 菜单及权限管理
• 主要功能展示时序图描述
  • 流程目录
  • 关注流程

业务流程管理是从业务流程建立和规范、业务流程优化、业务流程再造三个层次发展起来的，目前，已经发展到业务流程再造阶段，也是本次办公业务流程系统升级改造的重点，在优化370个流程的基础上，再造流程。

本次升级改造核心是升级流程能力平台，为用户提供流程快速开发能力，从流程模型、执行流程实例、监控及分析流程等三个方面管理业务流程。

流程管理主页设计目标及展现内容

设计目标

• 为办公流程管理能力平台统一入口
• 为流程管理信息共享服务提供展现平台
• 为个人办公提供便捷桌面服务

展现内容

界面展现部分功能概况

主页展现草图

由于主页面向企业内容广大用户，管理层次不尽相同，需要区别对待。管理用户及其关注点如下表所示：

注：流程目录是指流程模型及相关职能，体现功能为业务信息，由表单和流程构成。

为员工服务界面

• 流程目录
• 关于流程：关注自身岗位主管流程及经手流程，需要了解和自身工作、生活、及其他感兴趣相关的管理流程
• 关注催办事项和流程评价

为领导服务界面

更多关注的是整体及执行力，也就体现在流程目录，流程处理量的统计分析上。

为中层领导服务界面

• 流程目录
• 关注流程
• 关注催办事项和流程评价

我的办公桌面服务

界面功能内容如下：

• 待办流程/待阅消息
• 我的应用：个人定制应用图标（一般为单点登录使用）
• 关注信息服务
• 关注流程服务

主界面布局设计

理论上图中的区域可以从1到N，但是实际办公桌面，不宜内容过多，容易失去焦点，所以按2至6个区域准备就足够了。

对于区域内容可以任意替换的需求，需要明确定义区域的名称、大小（响应式布局）、URL等内容，例如：

• 每行显示文字数量需要控制，比如超过20个字则隐去为省略号，当鼠标滑过浮动显示出来；
• 显示行数控制需要参数化，比如定义区域1的行数为region1_row，可为将来的变更及提升界面布局设计能力提供支持。

开发目录结构

界面展现及开发技术

HTML / CSS

基于Apache HTTP服务，界面直接使用HTML + CSS + JavaScript技术，通过AJAX技术与后台Webservice相连接。

界面框架

界面框架使用响应式布局插件Bootstrap 3.3版本，支持Chrome、Firefox，IE9及以上，不支持IE8以下浏览器。

JS包

JQuery 1.11.2

Bootstrap 3.3.X

cordys.ajax.js

cordys.html5sdk.js

注：js仍部分引用Cordys平台的js包，用以方便使用web service和HTML5。

层次结构

体系结构：采用MVC模型，通过Cordys平台提供SOA服务、Apache HTTP提供Web服务。

代码层次结构由界面展现层、Webservice服务层、数据层构成，主要开发工作体现在界面展现层。

菜单及权限管理

主页菜单及权限按租户进行管理，菜单在数据库层面存储定义。

主要功能展示时序图描述

流程目录

Created with Rapha?l 2.1.2用户用户流程目录流程目录业务信息业务信息表单表单流程流程版本版本展现流程目录列表选中流程，并鼠标左键点击展现业务信息查看表单展现表单缩略图及定义查看流程展现流程缩略图及定义查看业务版本变化展现业务版本变化历史列表

关注流程

Created with Rapha?l 2.1.2用户用户流程列表流程列表流程实例列表流程实例列表审批单审批单流转记录流转记录意见意见选择流程展现流程实例列表选中流程，并鼠标左键点击展现流程实例业务信息查看流转情况展现流转图及流转日志查看审批意见展现审批意见

注：审批单就是流程实例信息，也是业务实例信息

参考：

易扩展的办公流程化管理核心模型（第2版） 肖永威 2015.3

软件项目需求开发过程实践之软件需求说明书 肖永威 2015.3