# 基于B/S结构下的OA流程可视化的研究与实现
# 摘 要
工作流是指整个或部分业务流程在计算机支持下的全自动或半自动化。在计算机网络环境下,工作任务在多个人或单位之间的流转实际上将表现为信息或数据在多个人之间的传送。使用可视化的OA工作流设计工具,用户不需要编程就可以定义设计出满足要求的收发文流程,实际使用效果良好。论文以可视化的OA工作流设计工具的开发为基础,主要阐述五个方面的内容。第一部分介绍了工作流和工作流设计工具的相关概念与开发背景;第二部分对工作相关基础理论技术、系统环境与平台基础、以及开发技术进行了描述;第三部分对系统功能进行了分析;第四部分详细介绍了系统流程、流程可视化设计的实际开发过程中使用到的关键技术;最后一部分在总结了系统开发心得的同时,提出了目前系统存在的不足和有待改进的地方。
**关键词:**工作流;流程定义;可视化;Java Applet
# **1 **系统需求分析与总体设计
## **1.1** 系统需求分析
在最近几年的各级单位的信息化改造建设中,随着信息化基础设施建设的逐渐完备,各类应用系统开始受到各级单位的重视,开发重点主要侧重于人事信息数字化、文书信息化、公文流转、交互式审批等信息化可行性高的工作领域。 因此,改革传统办公模式,开展电子办公,使业务办公、公文流转和管理过程电子化、信息化,并通过统一办公规范,提高工作效率降低办公成本,实现办公自动化已势在必行。
而上述所介绍的公文流转的一个重要特征就是流程复杂,难以用标准的程序化语言解释,因而公文流转系统必须有与之相适应的工作流程定义系统,使操作人员能够自主地设定公文流转流程。为此我们设计了一个可视化流程设计工具,该工具可以作为工作流管理系统里的一个模块。它具有图形用户界面,用户定义与任务执行完全分离,其体系结构基本上符合WFMC 标准结构。用户不需要程序员的支持就可以定义和设计出工作流程模型,根据该模型生成的文件可以非常方便地被解释为上层接口所需的工作流。
## **1.2 ** 系统功能介绍
可视化OA工作流程设计工具针对用户的要求对工作流程进行定制和维护,主要包括:对接点、接点连接线可自由拖放。具备删除节点、节点之间连接线功能。接点之间采用箭头连接。接点采用矩形表示。图形内容利用XML形式保存于的Access数据库中,可查询,编辑,保存,更多自定义属性。
通过对用户需求的分析,要求本流程设计工具具有以下功能:
- 可视化的操作界面
- 可以对流程节点和弧线进行填加、修改、删除操作
- 工作流程支持串签、会签和分支流程
- 可以将图形内容保存于access数据库或(xml)中,可查询,编辑,保存
- 可以通过流程模型解释接口和引擎主程序提供给上层程序使用
## **1.3 ** **系统模块功能和设计思想**
工作流管理系统的参考模型定义了一个基本的工作流管理系统所需要的6个基本模块:过程定义工具,工作流执行服务,其他工作流执行服务,客户应用程序,被调应用程序,管理及监控工具;并制定了个模块之间的接口标准。
流程设计工具与其系统交互的简单模块关系图如下:
![](http://www.writebug.com/myres/static/uploads/2021/10/19/ff8ff199d8ad593028977580d193b676.writebug)
可视化流程设计工具各模块的功能描述和设计思想介绍:
- **绘图模块**:可将需要设计的流程用此模块画出,利用java.awt来绘制节点和弧线
- **图象关系序列化模块**:可将已画出流程中的节点和弧线序列化,利用接口java.io.Serializable就能实现
- **图象关系保存模块**:可将序列化后的节点和弧线关系保存起来供上层流程定义解释器使用
可视化流程设计工具的系统关系图如下:
![](http://www.writebug.com/myres/static/uploads/2021/10/19/ce5caacdc20d16a4f899482021a56ca9.writebug)
## **1.4**数据库设计
### 1.4.1 E-R图设计
实体关系图(E-R图)将系统中的数据模型以一种更加清楚、具体的方式展现出来。图中方框代表实体,椭圆代表实体的属性,实体和实体之间的关系用菱形来表示。
在工作流管理系统中,上层程序需要通过读取保存在数据库里流程的XML文件来实现流程的解释和实例化。在对工作流进行定义的工作中用到的E-R如下图所示:
![](http://www.writebug.com/myres/static/uploads/2021/10/19/d9cbfaf222e6152288043d9ba16264c0.writebug)
### 1.4.2 表的构建
**流程节点表(flow_Node)**
| 对象名称 | 数据类型 | 功能描述 |
| ----------- | ---- | -------- |
| Node_ID | 数字 | 节点编号 |
| Node_Nane | 文本 | 节点名称 |
| Node_prev | 文本 | 节点前驱名称 |
| Node_prevID | 数字 | 前驱节点号 |
| Node_next | 文本 | 节点后继 |
| Node_nextID | 数字 | 后继节点号 |
| Flow_ID | 数字 | 节点所属的流程号 |
**流程表(flowdata)**
| 对象名称 | 数据类型 | 功能描述 |
| -------- | ---- | ----------------- |
| fileName | 文本 | 保存流程的文件名 |
| id | 数字 | 流程号 |
| type | 文本 | Node 类型还是 line 类型 |
# **2** 系统功能模块实现
## **2.1** 系统流程及图示
一个流程的设计是先通过绘图来对实际业务过程进行分析、建模,然后通过一定的技术生成所建立流程模型的可被上层接口处理的形式化描述。其流程如下图:
![](http://www.writebug.com/myres/static/uploads/2021/10/19/03d919cea46dfaaa18c273aa0958538f.writebug)
## 2.2 流程可视化设计实现
### 2.2.1 界面可视化
这是工具开始运行出现的第一个界面,由Internet Explorer浏览器打开,可以适应B/S结构的OA系统。
![](http://www.writebug.com/myres/static/uploads/2021/10/19/d3aa1166f76f4abde2b60e2db02ebdac.writebug)
界面的布局由BorderLayout来实现,分北部、西部、中部三部分。
包括:
- **北部** 控制板(ArcControls)
- **西部** 绘图工具板(ToolBlank)
- **中部** 绘图画板 (ArcCanvas)
具体代码实现如下:
```java
this.setLayout(borderLayout1);
this.add(ArcControls,BorderLayout.NORTH);
this.add(ArcCanvas,BorderLayout.CENTER);
this.add(ToolBlank, BorderLayout.WEST);
```
### 2.2.2 绘图功能设计
当设计一个流程时,用户点击绘图工作板中的绘制节点和绘制弧线两个按钮结合着选择环节名,将指定的可视化部件拖拉绘制在工作平台上,每一个可视化部件代表一个角色,用流向箭头将各个部件关联起来。还可以对节点和弧线进行修改和删除。
一个矩形节点的绘制,需要对它的各项属性进行定义,包括对它的起点坐标、矩形的宽和高、矩形的边框坐标。以下是节点定义的简单描述:
```java
public class Node extends BaseObject{
int LeftUpNodeX;//定义顶点坐标
int LeftUpNodeY;
private int starx; //定义起始点,高,宽
private int stary;
private int Heigh;
private int Width;
private int MinX; //定义边框
private int MinY;
private int MaxX;
private int MaxY;
Color color; //定义外框颜色
String NodeName="";//节点名称
}
```
**绘制节点**
```java
g.drawRect(this.starx,this.stary,this.Width,this.Height);//画矩形
g.drawString(this.NodeName,this.starx+this.Width/3,this.stary+Height/2);//画节点名
```
**拖动节点**
```ja