個人微型工做流引擎-辦公應用實戰

時間 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>