工作流及表单设计范例

cgft

OA工作流设计入门中带有普遍性的问题，能遇到不少，本文仅试图就以下3个课题抛砖引玉，探索一下简便可行的解决途径。


1. 如何设计简洁的工作流表单
怎样设计出风格统一，有自己特色的工作流表单，是每个OA系统管理员首先遇到的问题。工作流的表单设计，如果采用通达提供的设计工具，仅能满足最低需求，但在此基础上稍加努力，结果就大有改观。
什么样的表单算是好的设计，标准各有不同。但是毋庸置疑，一个简洁整齐、色调明快的表单会为用户提供一个良好的使用体验；一个条目清晰、输入简便、符合人机工程的表单会减轻劳动强度、提高工作效率，降低出错几率；一个代码精悍、层次分明的表单会对后期的维护及与他人的交流带来便利。
至于采用什么辅助设计工具，更是仁者见仁，各有所好。本人就习惯于直接使用HTML语言，采用DIV标签定义区块，采用TABLE标签定义表格，再辅之级联样式表CSS以统一表单风格。这样做出来的表单，代码简洁精炼，层次清晰。在设计中便于为个控件的附加功能添加语句，也便于日后的维护和修改。
初学者往往觉得通达OA提供的表单智能设计器画表格上手困难而舍弃不用，改用其他的网页编辑工具设计好表格后再复制或导入到表单智能设计器中完成表单设计。这样通常会带来的一些问题，一是修改不便；二是组成表单的代码臃肿杂乱，在代码中查找定位表单控件困难，不方便在表单控件中另加程序设计所需的语句元素；再则表单文件过大，不利于快速转载，尤其中小企业外网带宽有限，影响远程运行工作流的速度。其实，表单设计用到的HTML语句元就那么有限的几个，只要入了门，由必然王国走向自由王国的路，彼岸并不遥远。


2. 工作流如何智能转交传递

工作流是企业规章制度的流程化的再现过程。工作流各节点的主办人好人经办人，很多是固定的或有规律可循的。
例如，多数的审批流程都是固定的。工作流由企业的规章制度来固定，人员则是由企业的组织机构来固定。规章制度规范的工作流环节，肯定不会有短链断节，否则就执行不下去了，但组织结构中存在的短链断节（如缺岗缺员）现象却因人员流动等缘故而司空见惯。如果一个全企业通用的流程，规定需要依次经过基层领导审批、部领导审批、总经理审批3个环节，那么在实际操作中，有可能：
⑴ 基层领导（二级部门主管）缺如；
⑵ 基层领导缺如，但指定了代职；
⑶ 部领导（一级部门主管）缺如；
⑷ 部领导（一级部门主管）缺如，由公司某领导代管（指定了该部的上级主管领导）；
⑸ 中层管理人员发起该流程，则需要跳过中间的部分步骤；
⑹ 在中间节点，流程转交时视不同条件，转交不同数目的人员或不同部门的人员；
⑦ …………。总之，林林总总，可以说各种情况都可能发生。
这时候，流程是否能正常流转？流转过程是否符合企业的规章制度的规范？
简单的办法就是手工跳过某节点，手工选人。但这又可能造成流程混乱、制度执行不规范，甚至为不良企图提供可乘之隙。对人员众多的企业或人地两生的新员工，造成的困惑不言而喻。
利用系统提供的流程设计工具，上述困难大部分可以解决。实在不行，可在表单或流程中加入JS代码或PHP插件，应该都能搞掂。这里就有个效费比的问题，看值不值得，看自我技术能力怎样，从性价比上权衡一下。

3. 如何在工作流执行中实现在线联机帮助
众多的工作流难免使得用户眼花缭乱不知就里。每个操作者在各自的节点上如何操作，有的很简单，有的却对表单填制内容、时间要求、下一步转交给谁等都有特定要求，每个人不可能都做到了然在胸。因此，在工作流办理中，若能针对各个节点设置在线联机帮助，使操作者方便随时查看，对于提高效率、减少失误，降低培训成本等，极有必要。
实现在线联机帮助，不能修改工作流的现有程序，否则软件一次次地升级，一次次地被覆盖，恢复程序很麻烦，还容易造成不可预见的冲突。再者，不应该增加额外的数据库开销。这就需要找到一个简便实用的解决办法。

针对以上课题，结合一个工作流范例——个人考勤体系中的“外埠出差审批单”工作流，给出解题思路。（待续）

抢先阅读，可点击进入：

         《通达OA的工作流及表单设计范例》

cgft

二、先期准备

1. 组织结构及系统角色
    范例中的公司组织结构为三级架构。
    单位级，公司，下辖部，领导者角色为总经理。
    一级部门，部，下辖处室和班组，领导者角色为部长。
    二级部门，处室或班组，领导者角色为主任或班长。主任下辖角色为职员；班长下辖角色为工人。
    本范例中，需要用到的角色，可参见文后附表。
    题外之语：系统的角色设置和分配，关系到系统日后运行的实用、安全、便利，因此应仔细斟酌。本人认为，OA主角色应体现企业的管理层级上的权限，其名称、排序应与企业的实际组织架构一一对应；OA辅助角色体现的是企业员工在企业中所从事的具体工作岗位，映射到OA系统里的管理角色和权限。角色排序时，主角色按管理层级分配角色排序号（要留出空位以便扩展）；辅助角色的排序号，以小于任意的主角色序号为宜。这样有利于日志、日程等模块的权限管控。

2. 程序文件
    作为本范例的前期准备，假设OA系统软件安装在服务器的D盘，则请在OA服务器上的D:\MYOA\webroot\general\workflow\plugin
    目录下（如果D:\MYOA\webroot\general\workflow下不存在\plugin，则手工建立之）建立一个\aerosun子目录，即：
           D:\MYOA\webroot\general\workflow\plugin\aerosun
用于存放本范例要用到的下述3个程序文件：
   ftflowsty.css
   DispHelpFrm.js
   ReadHelpFile.php

3个文件的代码和作用分述如下：

① ftflowsty.css  作用：级联样式表文件，规范工作流表单的外观风格。

② DispHelpFrm.js  作用：JavaScript编写的脚本文件，执行本文件，即在客户端实现在线联机帮助。

3. 图形文件

存放在D:\MYOA\webroot\images目录中的3个图形文件，文件名分别为htcglogo.jpg、help.png 和 ftoa_dwxx.gif

① 文件名：htcglogo.jpg    用途：企业Logo

② 文件名：help.png    用途：在线联机帮助的命令按钮

③ 文件名：ftoa_dwxx.gif    用途：单位简介用图

使用时，将这三个图片下载到本机，文件名要和上述相同，然后复制到D:\MYOA\webroot\images目录中即可。

4. 角色附表

角色排序号	角色名称	备注说明
5	总经理	一般为1人
10	分管副总	可选，可多人。
15	部长	一级部门主管。
20	主任	二级部门主管。
21	班长	二级部门主管。
30	……	员工级
32	……	员工级
34	实习生	员工级
……	……    ……	以上皆为主角色
80	人力资源	辅助角色
80	……    ……	辅助角色
85	……    ……	辅助角色

（三、表单模板，待续）

抢先阅读，可点击进入：

         《通达OA的工作流及表单设计范例》

wenfu76

不错，值得借鉴，谢谢！

liao99

不错                    谢谢

cgft

三、表单模板

表单模板由表头DIV区和一至数个表体DIV区组成，辅以CSS样式表，简单实用。采用通达OA提供的表单智能设计器设计表单，以“源代码”的编辑方式在模板中直接编辑HTML命令，代码简洁。

由于表单智能设计器提供的JS和CSS两个功能不甚完善，表单设计用到的CSS脚本和JS脚本代码，最好以“源代码”的编辑方式直接输入，而不使用表单智能设计器提供的JS和CSS两个功能按钮。

1、模板组成
⑴ CSS文件的链接命令
<link rel="stylesheet" type="text/css" href="/general/workflow/plugin/aerosun/ftflowsty.css" />
放在表单源代码的首行。
⑵ 表头区

代码：
<!--区块居中-->
<div align="center">
<!--TabTit样式隐藏了表格线，用于表头风格。表宽600-->
<table id="TabTit" style="width: 600px">
    <tbody>
        <tr>
            <!--此处放置企业LOGO图片-->
            <td width="128"><img alt="" width="94" height="85" src="/images/htcglogo.jpg" /></td>
            <td valign="bottom" width="293" style="text-align: center"><strong><span style="color: #36f; font-size: 22px">XX公司工作流类别</span></strong><br />
            <span style="font-family: 隶书; color: #c30; font-size: 32px">工作流表单名称</span></td>
            <!--此处放置联机帮助按钮和表单文号-->
            <td valign="bottom" width="170" style="text-align: center"><img alt="操作使用说明" width="52" height="52" src="/images/help.png" /><br />
            <span style="font-family: 宋体">#[MACRO_RUN_NAME] </span></td>
        </tr>
    </tbody>
</table>
</div>

⑶ 表体区
由一至数个表格组成。分区的目的有二：，一是便于在流程中以DIV为单位，隐藏部分表单内容；二是利于于各区列数的分列对齐。以如下代码为例：
<div align="center">
<table id="TabTbo" style="width: 600px">
    <tbody>
        <tr>
            <td>&#160;</td>
            <td>&#160;</td>
            <td>&#160;</td>
        </tr>
        <tr>
            <td>&#160;</td>
            <td>&#160;</td>
            <td>&#160;</td>
        </tr>
        <tr>
            <td colspan="3">&#160;</td>
        </tr>
        <tr class="alt">
            <td colspan="3">&#160;</td>
        </tr>
        <tr class="alt">
            <td colspan="3">&#160;</td>
        </tr>
    </tbody>
</table>
</div>
<div align="center">
<table id="TabTbo" style="width: 600px">
    <tbody>
        <tr>
            <td rowspan="2">&#160;</td>
            <td>&#160;</td>
            <td>&#160;</td>
        </tr>
        <tr>
            <td>&#160;</td>
            <td>&#160;</td>
        </tr>
    </tbody>
</table>
</div>

两个表区的各列列宽可分别调整。以上3部分代码放在一起，显示效果如下图（图3.1）。


从模板代码中可见，一对“td”括号，就添加表的一个格；，一对“tr”括号，就添加表的一行；而“colspan”和“rowspan”则是合并同行和同列的单元格。设计好的表格，代码很直观、简练。
以一个表头区和多个表体区组合，就可以设计出满足一般地使用要求的各类工作流表单。

cgft

按上述模板做出的实用表单，请参见：

               四、表单范例

cgft

五、流程范例

1. 范例流程图

根据企业规章制度的内部规定（见第四章的表单范例说明），画出该工作流的流程图：

可见其流程并不复杂。

2. 隐藏控件的作用

简介一下表单上的6个隐藏控件。

控件之一的有效标识DATA_1，在流程办理期间，作为转交到不同节点的标识（DATA_1=0，转交至主管；DATA_1=1，转交至部长；DATA_1=2，转交至总经理）；流程结束后，作为流程是否有效的标识（DATA_1="作废"，表示流程在其中某一级领导审批时，已被否决），在导出Excel表后，方便了有效流程的手工筛选。

由于流程分支时，下一节点的接收人不尽相同，要想流程转交下一步时免除人工查找的麻烦，就有必要设置一个下步接收人DATA_100控件。

其他各控件的作用，在上一章的表单代码的注释部分已有简单说明。其中的3个SQL控件的SQL查询语句也可在表单代码中看到，就不在此赘述了。

3. 流程设计

流程开始后，在申报节点的表单装载时，便给控件DATA_96～DATA_99自动赋值并一直保持不变。控件DATA_1和控件DATA_100的值则可能随不同操作环境和对象而时有变化。

为流程流转需要而设置添加的隐藏控件、表单JS代码，流程设计器提供的功能，三者有机结合，可以很方便地解决第一章第2节“工作流如何智能转交传递” 中提出的各类问题。读者可结合表单JS代码和本流程范例的导出文件压缩包中的“外埠出差.xml”，自行分析。

本范例所用到的所有文件，分别打包在“设计范例.rar”和“ftoa_example.rar”中（请参见附件），使用方法也在压缩包“设计范例.rar”里的“ReadMe.txt”和“ftoa_example_rar说明.txt”中有详细介绍。

cgft

六、联机帮助的实现

1. 实现联机帮助的现实意义

设想，如果能在各类工作流的办理过程中，不管是办到哪一步，都可以在不离开当前操作界面的前提下随时随地的得到该步的操作指导，无疑极大地方便了工作流的办理。

要编制这样的一个程序，就必须要有数据库的后台支持，才能根据当前的工作流名称及当前的工作流节点序号，定位到相应的工作流帮助文档，并通过弹出窗体加以显示。
如果为此而另外新建数据库表，或修改系统中工作流模块的原程序，都会得不偿失。前者，增加了系统的复杂性，降低了系统运行性能；后者，为今后的系统升级带来无穷尽的麻烦。：

2. 实现联机帮助的思路

经过对通达OA数据库 TD_OA 的分析，我们完全可以把这个流程说明改写成符合联机帮助要求的帮助文档。
利用了HTML的段落定义<p>元素来进行文本的逻辑分段。一对“<p></p>”括号，标识了联机帮助文档的一个逻辑段。

3. 实现联机帮助的实例

下面就本范例中的联机帮助实例，结合程序代码，简叙联机帮助的实现过程。
⑴ 客户端人机互动过程
添加鼠标单击的事件响应代码 到工作流表单。
系统一旦侦知用户鼠标单击了联机帮助按钮，即执行 DispHelpFrm() 过程函数，向OA服务器发出数据库查询请求。
⑵ OA后台服务过程
后台服务程序 收到服务请求后，进行数据库查询，将查询到的整个帮助文档和截取到的对应当前工作流节点的文档文本，分别存入到变量中，然后完成联机帮助网页的搭建，提供给客户端。

4. 联机帮助文档的编辑方法

在通达OA的现版本（Office Anywhere 2013 完美服务版 V6.16.130718）上编辑帮助文档的最简单的方法，就是在文本编辑器（如windows的记事本等）上编辑帮助文档。

5. 联机帮助实例的实际运行效果图

   

         欲详细了解，请移步： 《通达OA的工作流及表单设计范例》

cgft

升级到2013增强版后，工作流在线帮助出现错误，见图：



原因系增强版的内建函数有所变化。
将ReadHelpFile.php中的
$cursor= exequery($connection,$query);
改为
$cursor= exequery(TD::conn(),$query);
后，错误排除。

kirsten805

⑸ 中层管理人员发起该流程，则需要跳过中间的部分步骤；
这个是用条件来实现的么？？几乎所有的流程都需要这样，用条件设置起来太麻烦了。如果某步骤和接下来的步骤执行人是一致的话，可不可以自动跳过呢。