在日常的業務系統中，審批流程是一個相對重要的存在，清晰可用的審批流可以在一定程度上提升業務處理效率。那麼，你知道如何利用製作審批流的原型模板嗎？本文作者便做了解讀，一起來看。

審批流即審批流程，是對某項工作的審批活動的一系列有序組合。審批流在業務系統中擔當者非常重要的角色，所以今天作者就教大家制作一個通用的自定也審批流的原型模板，方便大家日後的工作。

一、效果展示

可以根據業務需要新增多個審批節點；

可以為每個審批節點配置審批方式，包括人工審批、系統審批、無需審批；

可以在指定位置插入新的審批節點；

可以修改或者刪除已有的審批節點。

原型地址：https：//gdyy4h。axshare。com/#g=1

二、製作教程

製作這個原型只要分為兩大部分，一個是可以新增或刪除節點的審批流程，另一個是可以配節審批節點的彈窗頁面。

1. 審批流程

第一部分審批流程，我們用中繼器來製作，因為只有中繼器菜具備增刪改的效果。

1）中繼器內部元件

背景框：預設灰色，設定選中樣式為藍色，後續點選顯示彈窗時變藍；

文字標籤（型別/標題文字）：審批節點左上角的標題文字；

文字標籤：中部文字，詳細的審批方式；

關閉按鈕、新增按鈕、右箭頭等，如下圖所示擺放。

2）中繼器表格內容

我們共需要5列內容：

no：按12345……，後續用來排序以及在對應位置插入新的審批節點。

type：型別，分為開始、審批和結束、一般一頭一尾是開始和結束，其他都是審批。

typename：就是右上角的標題文字。

text：中間的審批方式文字。

xuanzhong：預設為空值即可，後續用於控制哪一行被選中。

3）中繼器載入時的互動

中繼器載入時，我們用新增排序的互動，讓中繼器按no列升序排列，這個是後面在對應位置插入新的審批流程節點的基礎。

4）中繼器每項載入時的互動

我們先用設定文字的互動將text列的文字設定到詳細文字的文字標籤，將typename列的文字設定到型別的文字標籤裡。

然後，如果是所在行type列的值等於開始或者結束，一般這兩個節點是固定的，所以我們就不可以修改或者刪除，這裡我們用隱藏按鈕，把刪除按鈕和右箭頭隱藏起來，再用禁用按鈕，禁用掉這個組合，這樣就不可以點選了。

另外，在最後一行的時候，我們還要把下方垂直線和新增按鈕隱藏起來，因為已經是最後一行了，就不需要垂直線和新增按鈕。

我們做一個定義，如果中繼器裡某一行xuanzhong列的值等於1，就代表這個節點被選中了。我們要用選中的互動，設定背景矩形選中狀態為真，並且顯示彈窗，把typename的值傳遞過去。

5）滑鼠單擊審批流程節點組合的互動

滑鼠單擊流程節點組合時，我們應該選中這個節點，並且彈出彈窗，是否選中是透過中繼器xuanzhong列的值來控制的，而且上面我們就寫了xunzhong列的值等於1時，就選中並且顯示彈窗。

所以這裡我們只需要用更新行的互動，將當前行xuanzhong列的值更新為1即可，但是我們也需要考慮到另外一個問題，就是之前是否有節點已被選中，所以我們要先做一個還原的操作，我們要先標記所有行，把所有行xuanzhong列的值更新為0，然後在更新當前行選中列的值等於1，這樣就可以確保只有一個被選中。

6）滑鼠單擊新增按鈕的互動

滑鼠點選新增按鈕，就是要在該節點下方新增一個節點，例如，我們在第三個節點點選新增按鈕，就是在3和4之間新增節點，那麼4節點應該要變成5，5就變成6，依次類推，所以我們要先用更新行的互動，更新條件是，目標行no列的值，大於當前行no列的值，將他們的no值在原有基礎上+1。

更新完成之後，我們在新增行，新增的序號就是當前行no的值+1，type和typename都是預設值審批，text就是新增審批方式。

7）滑鼠單擊刪除按鈕的互動

滑鼠點選刪除行按鈕時，我們用刪除行的互動，刪除當前行的資料即可。不過為了嚴謹一點，我們還是可以判斷有多少個審批節點，審批節點的數量有很多種方式記錄，例如中繼器每項載入時，type等於1時，我們就可以在中繼器外的文本里設定記錄文字為原來的值加1，這樣載入到最後一行，文本里的值等於多少就有多少個審批節點。或者我們也可以用中繼器裡的行數-開始和結束的兩行，得出中繼器的審批節點的個數。記錄審批節點的數量的用處就是用於保證至少有一個審批節點，如果數量少於等於1，就不可刪除，否則這個審批流程也沒有意義。

2. 配置審批流程節點

審批流程節點我們以右側彈窗的方式顯示，前面說到，點選流程節點就是彈出這個彈窗，並且把typename的值傳遞過來。那這個彈窗我們分成4部分內容：

1）審批流程節點名稱

對應tpyename，我們可以在輸入框裡改審批節點的名稱，後續可以透過互動更新到審批流程裡。

2）審批型別

這裡的審批型別分成3個大類，分別是人工審批系統審批和無需審批，我們需要用3個矩形制作就按鈕。三個矩形要新增選中樣式，預設選中第一個矩形按鈕。

滑鼠單擊按鈕時，我們用設定選中的互動，將當前按鈕設定為真。

按鈕元件選中時，我們用設定面板狀態的互動，將下面的審批內容的動態面板設定到對應頁面就可以了，這裡我們為了方便，統一設定到動態面板名稱為元件文字內容的頁面，這樣就不需要分開三個來寫了。

3）審批內容

具體的審批內容我們放在動態面板裡，因為上面是根據名字來調整到動態面板的狀態，所以動態面板對應的狀態名要和按鈕一致。

現在主流的審批方式一般分為三種，人工審批、系統審批、無需審批，那我們在動態面板裡3個狀態裡分別放置對應的內容。

① 人工審批

常用的一般是這六種人工審批方式：直屬上級審批、部門負責人審批，其他部門審批、指定成員審批、指定角色審批、發起者指定人員審批。

我們用單選按鈕選擇，然後根據不同的審批方式，設定動態面板跳轉至對應的動態面板介面。然後需要新建一個文字標籤，記錄我們選擇的審批方式，後續點選確認時，需要把資料傳回到審批流程對應的節點。

根據不同的審批人，審批方式也會有所有不同。

a. 直系上級審批或者部分負責人審批

這裡審批物件很明確，所以我們只需要選擇會籤還是或籤，會籤是指需要所有審批人同意，或籤是指一名審批人同意或拒絕即可，這裡主要考慮一般大企業統一崗位都有AB角色，如果是小企業負責人只有一名沒有替代的話也可以不需要審批方式。

b. 其他部門審批

這裡考慮到有些業務需要其他部門審批，例如業務人員報銷，除了直系上級、部門負責人審批外，還需要財務部審批，這種情況我們就需要選擇，其他部門審批。

選擇其他部門審批，前面我們透過設定單選按鈕選中時會進入對應的動態面板的頁面，如下圖所示：

主要是有部門的單選組組成，我們用矩形制作就可以了，增加一個選中樣式和單選組，滑鼠單擊時，設定當前點選的矩形為真，並且用一個文字標籤，記錄當前元件的文字，後續會點選確認按鈕後回傳值審批節點裡的資料。

其他部門審批的審批人一般分兩種，一種是部門負責人審批，另一種是又他們部門指定部門內的指定人員進行審批。這裡我們用單選組讓使用者選擇即可。

c. 指定成員和指定角色審批

指定成員和指定角色審批，一般是一些需要比較專業的人員或者角色去審批。我們用多選表格，列出員工的基本資訊，讓使用者來選擇即可。

這裡選擇成員或角色是多選的，所以審批方式同樣是會籤和或籤。

d. 發起者指定人員審批

這個一般常用於需要交接工作的業務，比如說一個銀行櫃員需要休假，那他手上保管的錢和憑證就要交給頂替的位置的其他櫃員。這時就由申請人自己選擇交接給誰。這裡可能會交接給一個人或多個人，所以審批方式同樣是會籤和或籤。

② 系統審批

系統審批就是透過條件程式碼，讓系統來判斷是否透過，這裡我們簡單的就寫個互動來判斷，當然如果複雜的也可以接入對應的模型。一般用於審批流程的第一步，判斷提交的內容是否正確、完整

③ 無需審批

無需審批一般用於只需要記錄，不需要人員審批的簡單的業務。

4）確認和取消按鈕組

a. 滑鼠單擊取消按鈕時的互動

我們用隱藏的互動將彈窗隱藏起來即可。這裡也需要恢復還原的問題，因為使用者會填寫過一些內容，那我們用對應的互動將他們還原即可。例如使用者在填寫了指令碼，我們就用設定文字的互動將他還原，例如在多選表格裡選擇了使用者，我們就用更新行還原成未選擇的狀態。

b. 滑鼠單擊確認按鈕的互動

如果人工審批的矩形被選中，就說明了選中了人工審批方式，這時用更新行的互動，更新條件是中繼器被選中的行，就是xuanzhong值等於1的行，將具體的審批方式，就是之前單選按鈕選中時，會記錄到文字標籤裡的值，更新到text列的值中。

如果系統的矩形被選中，就說明了選中了系統審批的方式，這時用更新行的互動，更新條件是中繼器被選中的行，就是xuanzhong值等於1的行，將系統審批更新到text列的值中。

如果無需審批的矩形被選中，就說明了選中了無需審批的審批方式，這時用更新行的互動，更新條件是中繼器被選中的行，就是xuanzhong值等於1的行，將無需審批更新到text列的值中。

最後無論那種情況，我們都觸發取消按鈕，進行還原和回覆介面。

c. 彈窗隱藏的時的互動

彈窗隱藏時，我們要取消對審批流程節點的選中，所以我們用更新行的互動，將xuanzhong列的值更新為0就可以了，簡單的操作就是直接標記所有行，然後把所有行的xuanzhong列的值更新為0，最後我們在觸發取消按鈕滑鼠單擊時進行還原。

這樣我們就完成了能審批流的原型模板了，後續使用也是很方便，只需要根據業務內容修改對應的資訊，即可自動生成互動效果。

以上就是本期教程的全部內容，感興趣的同學們可以動手試試哦，感謝您的閱讀，我們下期見。

本文由 @AI產品人 原創釋出於人人都是產品經理，未經許可，禁止轉載

題圖來自 Unsplash，基於 CC0 協議

該文觀點僅代表作者本人，人人都是產品經理平臺僅提供資訊儲存空間服務。