个人微型工做流引擎-办公应用实战

时间 2019-12-08

原文原文链接

1、前言html

    前面已经给你们介绍了个人工做流引擎的整体设计及的API设计，这篇是实战篇说说怎么实际应用了，这就得涉及到UI界面了。首先咱们经常使用的工做流我的办公应用系统至少要包括发起流程、待办事项、已办事项等。咱们设计了一个尽可能简单的系统，可以知足我的办公的基本需求，只实现如下功能：
    一、发起流程
    二、待办事项
    三、已办事项
    四、个人流程
    五、个人消息
    六、个人委办ajax

这些功能基本就是流程能正常的运行流转基础，其实只应用了咱们引擎的一小部分功能，其它功能若是有须要能够在这基本上再添加。app

2、页面设计及实现工具

一、发起流程，很简单的一个页面，左边显示已发布流程列表，右边放置一个iframe用于显示对应的启动表单spa

左边流程列表数据：设计

select * 
  from bpm_definition_process
 where state = 'Deploy'

左边根据流程定义的分类显示为树形结构，点击选择左边流程时，右边iframe打开对应流程的启动表单页面便可。code

点击发起流程按钮时，调用ajax处理，把表单数据传到后台，后台处理逻辑以下：orm

//1 保存表单返回表单数据id
var id = ...;

//2 启动流程
 var process = bpm.NewProcessIntance(processId, id);
 var task = process.Start();

 //3 发送到下一步审批
 task.SetRecord(id);
 task.Signal();

二、待办事项，也就是个人任务工做的列表xml

列表的数据查询：htm

select * 
  from bpm_instance_task
 where state = 'Run'
   and actor_id = @user_id

双单或点击办理时，打开表单展现页面：
表单审批页签，在这里能够查看表单录入的数据，查看历史审批状况，或进行审批操做，可设置签章

固然每一个审批节点均可以有本身的表单也能够经过参数，来控制如下各元素的是否须要显示：审批选项、审批意见、添加附件、指定下一步审批人

按钮逻辑
保存即只保存表单数据怎么保存能够本身定义
转交下一步逻辑：

//加载任务实例
var task = bpm.LoadTaskInstance(taskInstanceId);

//若是有新表单，保存表单数据返回ID，
var id = ...;
task.SetRecord(id)

//若是有附件，保存附件，返回附件ID列表
var attachments = ...;
task.SetAttach(attachments); 

//若是须要设置下一步审批人
 task.SetReceiver(receiver); 

//若是须要设置自由跳转的目标工做项
task.SetFreeRedirect(redirect); 

//设置审批意见
task.SetOpinion(choice, comment);    

//设置审批签章
task.SetSignature(signature);        
 
//转交下一步
task.Signal();

基本信息页签：

流程图页签：

流程图是我经过raphaeljs实现的，接收工做项及路由（链接线）的数据展示图形，根据数据自动计算每一个工做任务的位置和连线，目前只实现了图形展现功能，尚未去实现拖拉设计的功能。

关于个人表单的设计和流程图的展现，后续有时间我会跟你们详细介绍。不过这和工做流引擎没什么关系了，这两块每一个人的设计可能都会不尽相同，但并不会影响工做流引擎的使用。
这个页面还有一个委办的功能

后台逻辑：

bpm.NewDeputeService(user.Id, tarActorId)    //委托人、受托人
   .ForTaskInstance(taskInstanceId)          //工做项ID
   .SetDateRange(effectDate,expireDate)      //生效时间、失效时间
   .SetMemo(memo)                            //委托备注
   .Depute();

三、已办事项，即个人已完成的工做列表

数据列表中的查询：

select * 
  from bpm_instance_task
 where state = 'Complete'
   and actor_id = @user_id

仅仅一个查询页面，很是简单，双击时也打开表单展现页面，可是当前节点不是运行状态时是只能查看不能编辑的。

四、个人流程，这些页面都是一个数据查询页，没有什么逻辑，因此都很简单

催办逻辑：

//工做催办
var taskInstanceId = '当前运行节点实例id';
var task = bpm.LoadTaskInstance(taskInstanceId);
task.Urge("很急，请经理尽快处理，在线等！");

五、个人消息

数据列表查询：

select * 
  from bpm_application_notify
 where reciever_id = @user_id
   and push_type = 'System'

六、个人委托

数据列表查询：

select * 
  from bpm_application_depute
 where src_actor_id = @user_id
   and effect_date <= @now
   and expire_date >= @now

3、流程定义及表单设计

这块的东西作到在页面上很方便的拖拉定义并且还要好用的话，是有必定难度的，其实咱们有作一些页面尝试设计定义，可是都很差用并且很费时间折腾。其实这一块是开发人员使用的比较多，并不会影响客户使用，因此优先级靠后点，之后有精力再来开发。
咱们如今的解决方案是，在项目目录下建了一个Definitions的目录：

每一个流程新建一个目录，好比合同审批目录下存放，“流程定义.xml”及“合同审批表.cshtml”

对这个流程定义的修改，直接修改这两个文件便可，两个文件内容以下：
一、流程定义.xml

<?xml version="1.0" encoding="UTF-8"?>

<process name="合同审批流程" category="项目流程">  
  
  <start name="合同审批开始" app-form="合同审批表.cshtml" app-enable-attach="true">
    <transition to="项目负责人或材料负责人"></transition>
  </start>
    
  <task name="项目负责人或材料负责人" >
    <transition to="分管副总"></transition>
    <action  script="log.Debug('项目负责人或材料负责人签字');"></action>
    <assignment owner="pan"></assignment>
  </task>
  
  <task name="分管副总" >
    <transition to="工程经营部"></transition>
    <action  script="log.Debug('分管副总签字');"></action>
    <assignment owner="lhs"></assignment>
  </task>
  
  <task name="工程经营部" >
    <transition to="财务部"></transition>
    <action  script="log.Debug('工程经营部签字');"></action>
    <assignment owner="pan"></assignment>
  </task>

  <task name="财务部" >
    <transition to="法务部"></transition>
    <action  script="log.Debug('财务部签字');"></action>
    <assignment owner="yrh"></assignment>
  </task>
  
  <task name="法务部" >
    <transition to="常务副总"></transition>
    <action  script="log.Debug('法务部签字');"></action>
    <assignment owner="czm"></assignment>
  </task>
  
  <task name="常务副总" >
    <transition to="总经理"></transition>
    <action  script="log.Debug('常务副总签字');"></action>
    <assignment owner="zfg"></assignment>
  </task>
  
  <task name="总经理" >
    <transition to="合同审批结束"></transition>
    <action  script="log.Debug('总经理签字');"></action>
    <assignment owner="lhs"></assignment>
  </task>


  <end name="合同审批结束">
    
  </end>
</process>

二、合同审批表.cshtml

<table class="form-body">
    <colgroup>
        <col style="width:15%"  />
        <col style="width:35%"  />
        <col style="width:15%"  />
        <col style="width:35%"  />
    </colgroup>
    <tr>
        <td class="title" >所属项目</td>
        <td class="input">@Controls.Render("input","project_name")</td>
        <td class="title" >合同编号</td>
        <td class="input">@Controls.Render("input","contract_id")</td>
    </tr>
    <tr>        
        <td class="title" >合同名称</td>
        <td class="input">@Controls.Render("input","contract_name")</td>
        <td class="title" >报批时间</td>
        <td class="input">@Controls.Render("datebox","audit_date")</td>
    </tr>     
    <tr>
        <td class="title" >合同己方</td>
        <td class="input">@Controls.Render("input","contract_own")</td>
        <td class="title" >合同对方</td>
        <td class="input">@Controls.Render("input","contract_other")</td>
    </tr>
    <tr>
        <td class="title" >合同金额</td>
        <td class="input">@Controls.Render("input","amount_contract")</td>
        <td class="title" >预算金额</td>
        <td class="input">@Controls.Render("input","amount_budget")</td>
    </tr>
     <tr>
        <td class="title" >合做方式</td>
        <td class="input">@Controls.Render("input","procurement_method")</td>
        <td class="title" >合同份数</td>
        <td class="input">@Controls.Render("input","copies_contract")</td>
    </tr>
</table>

修改完这两个文件后，运行“流程定义工具.bat”实现上是调用一个我写的控制台应用程序，输入“deploy 流程名称”便可完成发布

这样使用对于开发人员来讲仍是很方便的，可是对于不懂开发的人来讲就有必定难度了
一、把xml编辑变成图形拖拉
二、把cshtml文件编辑变成控件拖拉
这两点咱们之后再想办法实现，不管怎样，如今这样是可使用了，除了自定义流程，其它都没有任何问题。

4、总结说明

这个示例程序是拿咱们之前的项目UI来实现的，用什么界面都没问题，主要是给你们介绍下这款工做流引擎的实际应用。关于流程设计器及表单设计器这个我之后有时间间精力会慢慢开发。若是你们有什么意见或建议欢迎给我留言。