【Axure教程】自定義審批流原型模板

時間：2023-06-09 11:51:01 | 來源：網(wǎng)站運營

時間：2023-06-09 11:51:01 來源：網(wǎng)站運營

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

一、效果展示

1、可以根據(jù)業(yè)務需要添加多個審批節(jié)點

2、可以為每個審批節(jié)點配置審批方式，包括人工審批、系統(tǒng)審批、無需審批。

3、可以在指定位置插入新的審批節(jié)點

4、可以修改或者刪除已有的審批節(jié)點




【原型預覽】

https://axhub.im/ax9/7768e975e73db73d/#g=1&p=3、審批流程

【原型下載】

方式1：加入原型分享群后，可免費分享該原型，請咨詢微信522073109

方式2：https://weidian.com/item.html?itemID=5563425109

二、制作教程

制作這個原型只要分為兩大部分，一個是可以添加或刪除節(jié)點的審批流程，另一個是可以配節(jié)審批節(jié)點的彈窗頁面。

1、審批流程

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

中繼器內(nèi)部元件

背景框：默認灰色，設置選中樣式為藍色，后續(xù)點擊顯示彈窗時變藍

文本標簽（類型/標題文字）：審批節(jié)點左上角的標題文字

文本標簽（詳細文本）：中部文字，詳細的審批方式

關閉按鈕、添加按鈕、右箭頭等，如下圖所示擺放







中繼器表格內(nèi)容

我們共需要5列內(nèi)容：

no：按12345……，后續(xù)用來排序以及在對應位置插入新的審批節(jié)點

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

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

text：中間的審批方式文字

xuanzhong：默認為空值即可，后續(xù)用于控制哪一行被選中







中繼器載入時的交互

中繼器載入時，我們用添加排序的交互，讓中繼器按no列升序排列，這個是后面在對應位置插入新的審批流程節(jié)點的基礎。







中繼器每項加載時的交互

我們先用設置文本的交互將text列的文本設置到詳細文本的文本標簽，將typename列的文本設置到類型的文本標簽里。







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







另外，在最后一行的時候，我們還要把下方垂直線和添加按鈕隱藏起來，因為已經(jīng)是最后一行了，就不需要垂直線和添加按鈕。







我們做一個定義，如果中繼器里某一行xuanzhong列的值等于1，就代表這個節(jié)點被選中了。我們要用選中的交互，設置背景矩形選中狀態(tài)為真，并且顯示彈窗，把typename的值傳遞過去。







鼠標單擊審批流程節(jié)點組合的交互

鼠標單擊流程節(jié)點組合時，我們應該選中這個節(jié)點，并且彈出彈窗，是否選中是通過中繼器xuanzhong列的值來控制的，而且上面我們就寫了xunzhong列的值等于1時，就選中并且顯示彈窗

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







鼠標單擊添加按鈕的交互

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

更新完成之后，我們在添加行，添加的序號就是當前行no的值+1，type和typename都是默認值審批，text就是添加審批方式







鼠標單擊刪除按鈕的交互

鼠標點擊刪除行按鈕時，我們用刪除行的交互，刪除當前行的數(shù)據(jù)即可。不過為了嚴謹一點，我們還是可以判斷有多少個審批節(jié)點，審批節(jié)點的數(shù)量有很多種方式記錄，例如中繼器每項加載時，type等于1時，我們就可以在中繼器外的文本里設置記錄文本為原來的值加1，這樣加載到最后一行，文本里的值等于多少就有多少個審批節(jié)點?；蛘呶覀円部梢杂弥欣^器里的行數(shù)-開始和結束的兩行，得出中繼器的審批節(jié)點的個數(shù)。記錄審批節(jié)點的數(shù)量的用處就是用于保證至少有一個審批節(jié)點，如果數(shù)量少于等于1，就不可刪除，否則這個審批流程也沒有意義。

2、配置審批流程節(jié)點

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







1、審批流程節(jié)點名稱

對應tpyename，我們可以在輸入框里改審批節(jié)點的名稱，后續(xù)可以通過交互更新到審批流程里。

2、審批類型

這里的審批類型分成3個大類，分別是人工審批系統(tǒng)審批和無需審批，我們需要用3個矩形制作就按鈕。三個矩形要添加選中樣式，默認選中第一個矩形按鈕。

鼠標單擊按鈕時，我們用設置選中的交互，將當前按鈕設置為真

按鈕元件選中時，我們用設置面板狀態(tài)的交互，將下面的審批內(nèi)容的動態(tài)面板設置到對應頁面就可以了，這里我們?yōu)榱朔奖?，統(tǒng)一設置到動態(tài)面板名稱為元件文字內(nèi)容的頁面，這樣就不需要分開三個來寫了。







3、審批內(nèi)容

具體的審批內(nèi)容我們放在動態(tài)面板里，因為上面是根據(jù)名字來調整到動態(tài)面板的狀態(tài)，所以動態(tài)面板對應的狀態(tài)名要和按鈕一致。

現(xiàn)在主流的審批方式一般分為三種，人工審批、系統(tǒng)審批、無需審批，那我們在動態(tài)面板里3個狀態(tài)里分別放置對應的內(nèi)容。

3.1人工審批

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







我們用單選按鈕選擇，然后根據(jù)不同的審批方式，設置動態(tài)面板跳轉至對應的動態(tài)面板界面。然后需要新建一個文本標簽，記錄我們選擇的審批方式，后續(xù)點擊確認時，需要把數(shù)據(jù)傳回到審批流程對應的節(jié)點。







根據(jù)不同的審批人，審批方式也會有所有不同

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

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







其他部門審批

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

選擇其他部門審批，前面我們通過設置單選按鈕選中時會進入對應的動態(tài)面板的頁面，如下圖所示







主要是有部門的單選組組成，我們用矩形制作就可以了，增加一個選中樣式和單選組，鼠標單擊時，設置當前點擊的矩形為真，并且用一個文本標簽，記錄當前元件的文字，后續(xù)會點擊確認按鈕后回傳值審批節(jié)點里的數(shù)據(jù)。







其他部門審批的審批人一般分兩種，一種是部門負責人審批，另一種是又他們部門指定部門內(nèi)的指定人員進行審批。這里我們用單選組讓用戶選擇即可。

指定成員和指定角色審批

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







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

發(fā)起者指定人員審批

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

3.2系統(tǒng)審批

系統(tǒng)審批就是通過條件代碼，讓系統(tǒng)來判斷是否通過，這里我們簡單的就寫個交互來判斷，當然如果復雜的也可以接入對應的模型。一般用于審批流程的第一步，判斷提交的內(nèi)容是否正確、完整







3.3無需審批

無需審批一般用于只需要記錄，不需要人員審批的簡單的業(yè)務。

4、確認和取消按鈕組

鼠標單擊取消按鈕時的交互

我們用隱藏的交互將彈窗隱藏起來即可。這里也需要恢復還原的問題，因為用戶會填寫過一些內(nèi)容，那我們用對應的交互將他們還原即可。例如用戶在填寫了腳本，我們就用設置文本的交互將他還原，例如在多選表格里選擇了用戶，我們就用更新行還原成未選擇的狀態(tài)。

鼠標單擊確認按鈕的交互

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

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

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

最后無論那種情況，我們都觸發(fā)取消按鈕，進行還原和回復界面。







彈窗隱藏的時的交互

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







這樣我們就完成了能審批流的原型模板了，后續(xù)使用也是很方便，只需要根據(jù)業(yè)務內(nèi)容修改對應的信息，即可自動生成交互效果。

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