我的微型工作流引擎-辦公應用實戰

一、前言

    前面已經給大家介紹了我的工作流引擎的總體設計及的API設計，這篇是實戰篇說說怎么實際應用了，這就得涉及到UI界面了。首先我們常用的工作流個人辦公應用系統至少要包括發起流程、待辦事項、已辦事項等。我們設計了一個盡量簡單的系統，能夠滿足個人辦公的基本需求，只實現以下功能：
    1、發起流程
    2、待辦事項
    3、已辦事項
    4、我的流程
    5、我的消息
    6、我的委辦

這些功能基本就是流程能正常的運行流轉基礎，其實只應用了我們引擎的一小部分功能，其它功能如果有需要可以在這基本上再添加。

二、頁面設計及實現

    1、發起流程，很簡單的一個頁面，左邊顯示已發布流程列表，右邊放置一個iframe用於顯示對應的啟動表單

左邊流程列表數據：

select * 
  from bpm_definition_process
 where state = 'Deploy'

左邊根據流程定義的分類顯示為樹形結構，點擊選擇左邊流程時，右邊iframe打開對應流程的啟動表單頁面即可。

點擊發起流程按鈕時，調用ajax處理，把表單數據傳到后台，后台處理邏輯如下：

//1 保存表單返回表單數據id
var id = ...;

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

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

 

2、待辦事項，也就是我的任務工作的列表

列表的數據查詢：

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();

 

3、已辦事項，即我的已完成的工作列表

數據列表中的查詢：

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

僅僅一個查詢頁面，非常簡單，雙擊時也打開表單展示頁面，但是當前節點不是運行狀態時是只能查看不能編輯的。

4、我的流程，這些頁面都是一個數據查詢頁，沒有什么邏輯，所以都很簡單

催辦邏輯：

//工作催辦
var taskInstanceId = '當前運行節點實例id';
var task = bpm.LoadTaskInstance(taskInstanceId);
task.Urge("很急，請經理盡快處理，在線等！");

5、我的消息

數據列表查詢：

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

6、我的委托

數據列表查詢：

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

 

三、流程定義及表單設計

    這塊的東西做到在頁面上很方便的拖拉定義而且還要好用的話，是有一定難度的，其實我們有做一些頁面嘗試設計定義，但是都不好用而且很費時間折騰。其實這一塊是開發人員使用的比較多，並不會影響客戶使用，所以優先級靠后點，以后有精力再來開發。
    我們現在的解決方案是，在項目目錄下建了一個Definitions的目錄：

每個流程新建一個目錄，比如合同審批目錄下存放，“流程定義.xml”及“合同審批表.cshtml”

對這個流程定義的修改，直接修改這兩個文件即可，兩個文件內容如下：
1、流程定義.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>

2、合同審批表.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 流程名稱”即可完成發布

這樣使用對於開發人員來說還是很方便的，但是對於不懂開發的人來說就有一定難度了
1、把xml編輯變成圖形拖拉
2、把cshtml文件編輯變成控件拖拉
這兩點我們以后再想辦法實現，無論怎樣，現在這樣是可以使用了，除了自定義流程，其它都沒有任何問題。

四、總結說明

    這個示例程序是拿我們以前的項目UI來實現的，用什么界面都沒問題，主要是給大家介紹下這款工作流引擎的實際應用。關於流程設計器及表單設計器這個我以后有時間間精力會慢慢開發。如果大家有什么意見或建議歡迎給我留言。