Axure高保真教程：自定義審批流原型模板審批流即審批流程，是對(duì)某項(xiàng)工作的審批活動(dòng)的一系列有序組合。審批流在業(yè)務(wù)系統(tǒng)中擔(dān)當(dāng)者特別重要的角色，所以今日就教大家制作一個(gè)通用的自定也審批流的原型模板，便利大家日后的工作。

一、效果展現(xiàn)

可以依據(jù)業(yè)務(wù)需要添加多個(gè)審批節(jié)點(diǎn)；可以為每個(gè)審批節(jié)點(diǎn)配置審批方式，包括人工審批、系統(tǒng)審批、無(wú)需審批；可以在指定位置插入新的審批節(jié)點(diǎn)；可以修改或者刪除已有的審批節(jié)點(diǎn)。

原型地址：/#g=1

二、制作教程

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

1.審批流程

第一部分審批流程，我們用中繼器來(lái)制作，由于只有中繼器菜具備增刪改的效果。

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

背景框：默認(rèn)灰色，設(shè)置選中樣式為藍(lán)色，后續(xù)點(diǎn)擊顯示彈窗時(shí)變藍(lán)；文本標(biāo)簽（類型/標(biāo)題文字）：審批節(jié)點(diǎn)左上角的標(biāo)題文字；文本標(biāo)簽（具體文本）：中部文字，具體的審批方式；關(guān)閉按鈕、添加按鈕、右箭頭等，如下圖所示擺放。

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

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

no：按12345……，后續(xù)用來(lái)排序以及在對(duì)應(yīng)位置插入新的審批節(jié)點(diǎn)。type：類型，分為開(kāi)頭、審批和結(jié)束、一般一頭一尾是開(kāi)頭和結(jié)束，其他都是審批。typename：就是右上角的標(biāo)題文字。text：中間的審批方式文字。xuanzhong：默認(rèn)為空值即可，后續(xù)用于掌握哪一行被選中。

3）中繼器載入時(shí)的交互

中繼器載入時(shí)，我們用添加排序的交互，讓中繼器按no列升序排列，這個(gè)是后面在對(duì)應(yīng)位置插入新的審批流程節(jié)點(diǎn)的基礎(chǔ)。

4）中繼器每項(xiàng)加載時(shí)的交互

我們先用設(shè)置文本的交互將text列的文本設(shè)置到具體文本的文本標(biāo)簽，將typename列的文本設(shè)置到類型的文本標(biāo)簽里。

然后，假如是所在行type列的值等于開(kāi)頭或者結(jié)束，一般這兩個(gè)節(jié)點(diǎn)是固定的，所以我們就不行以修改或者刪除，這里我們用隱蔽按鈕，把刪除按鈕和右箭頭隱蔽起來(lái)，再用禁用按鈕，禁用掉這個(gè)組合，這樣就不行以點(diǎn)擊了。

另外，在最終一行的時(shí)候，我們還要把下方垂直線和添加按鈕隱蔽起來(lái)，由于已經(jīng)是最終一行了，就不需要垂直線和添加按鈕。

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

5）鼠標(biāo)單擊審批流程節(jié)點(diǎn)組合的交互

鼠標(biāo)單擊流程節(jié)點(diǎn)組合時(shí)，我們應(yīng)當(dāng)選中這個(gè)節(jié)點(diǎn)，并且彈出彈窗，是否選中是通過(guò)中繼器xuanzhong列的值來(lái)掌握的，而且上面我們就寫(xiě)了xunzhong列的值等于1時(shí)，就選中并且顯示彈窗。

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

6）鼠標(biāo)單擊添加按鈕的交互

鼠標(biāo)點(diǎn)擊添加按鈕，就是要在該節(jié)點(diǎn)下方添加一個(gè)節(jié)點(diǎn)，例如，我們?cè)诘谌齻€(gè)節(jié)點(diǎn)點(diǎn)擊添加按鈕，就是在3和4之間添加節(jié)點(diǎn)，那么4節(jié)點(diǎn)應(yīng)當(dāng)要變成5，5就變成6，依次類推，所以我們要先用更新行的交互，更新條件是，目標(biāo)行no列的值，大于當(dāng)前行no列的值，將他們的no值在原有基礎(chǔ)上+1。

更新完成之后，我們?cè)谔砑有校砑拥男蛱?hào)就是當(dāng)前行no的值+1，type和typename都是默認(rèn)值審批，text就是添加審批方式。

7）鼠標(biāo)單擊刪除按鈕的交互

鼠標(biāo)點(diǎn)擊刪除行按鈕時(shí)，我們用刪除行的交互，刪除當(dāng)前行的數(shù)據(jù)即可。不過(guò)為了嚴(yán)謹(jǐn)一點(diǎn)，我們還是可以推斷有多少個(gè)審批節(jié)點(diǎn)，審批節(jié)點(diǎn)的數(shù)量有許多種方式記錄，例如中繼器每項(xiàng)加載時(shí)，type等于1時(shí)，我們就可以在中繼器外的文本里設(shè)置記錄文本為原來(lái)的值加1，這樣加載到最終一行，文本里的值等于多少就有多少個(gè)審批節(jié)點(diǎn)?；蛘呶覀円部梢杂弥欣^器里的行數(shù)-開(kāi)頭和結(jié)束的兩行，得出中繼器的審批節(jié)點(diǎn)的個(gè)數(shù)。記錄審批節(jié)點(diǎn)的數(shù)量的用處就是用于保證至少有一個(gè)審批節(jié)點(diǎn)，假如數(shù)量少于等于1，就不行刪除，否則這個(gè)審批流程也沒(méi)有意義。

2.配置審批流程節(jié)點(diǎn)

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

1）審批流程節(jié)點(diǎn)名稱

對(duì)應(yīng)tpyename，我們可以在輸入框里改審批節(jié)點(diǎn)的名稱，后續(xù)可以通過(guò)交互更新到審批流程里。

2）審批類型

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

鼠標(biāo)單擊按鈕時(shí)，我們用設(shè)置選中的交互，將當(dāng)前按鈕設(shè)置為真。

按鈕元件選中時(shí)，我們用設(shè)置面板狀態(tài)的交互，將下面的審批內(nèi)容的動(dòng)態(tài)面板設(shè)置到對(duì)應(yīng)頁(yè)面就可以了，這里我們?yōu)榱吮憷?，統(tǒng)一設(shè)置到動(dòng)態(tài)面板名稱為元件文字內(nèi)容的頁(yè)面，這樣就不需要分開(kāi)三個(gè)來(lái)寫(xiě)了。

3）審批內(nèi)容

詳細(xì)的審批內(nèi)容我們放在動(dòng)態(tài)面板里，由于上面是依據(jù)名字來(lái)調(diào)整到動(dòng)態(tài)面板的狀態(tài)，所以動(dòng)態(tài)面板對(duì)應(yīng)的狀態(tài)名要和按鈕全都。

現(xiàn)在主流的審批方式一般分為三種，人工審批、系統(tǒng)審批、無(wú)需審批，那我們?cè)趧?dòng)態(tài)面板里3個(gè)狀態(tài)里分別放置對(duì)應(yīng)的內(nèi)容。

①人工審批

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

我們用單選按鈕選擇，然后依據(jù)不同的審批方式，設(shè)置動(dòng)態(tài)面板跳轉(zhuǎn)至對(duì)應(yīng)的動(dòng)態(tài)面板界面。然后需要新建一個(gè)文本標(biāo)簽，記錄我們選擇的審批方式，后續(xù)點(diǎn)擊確認(rèn)時(shí)，需要把數(shù)據(jù)傳回到審批流程對(duì)應(yīng)的節(jié)點(diǎn)。

依據(jù)不同的審批人，審批方式也會(huì)有全部不同。

a.直系上級(jí)審批或者部分負(fù)責(zé)人審批

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

b.其他部門審批

這里考慮到有些業(yè)務(wù)需要其他部門審批，例如業(yè)務(wù)人員報(bào)銷，除了直系上級(jí)、部門負(fù)責(zé)人審批外，還需要財(cái)務(wù)部審批，這種狀況我們就需要選擇，其他部門審批。

選擇其他部門審批，前面我們通過(guò)設(shè)置單選按鈕選中時(shí)會(huì)進(jìn)入對(duì)應(yīng)的動(dòng)態(tài)面板的頁(yè)面，如下圖所示：

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

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

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

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

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

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

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

②系統(tǒng)審批

系統(tǒng)審批就是通過(guò)條件代碼，讓系統(tǒng)來(lái)推斷是否通過(guò)，這里我們簡(jiǎn)潔的就寫(xiě)個(gè)交互來(lái)推斷，當(dāng)然假如簡(jiǎn)單的也可以接入對(duì)應(yīng)的模型。一般用于審批流程的第一步，推斷提交的內(nèi)容是否正確、完整

③無(wú)需審批

無(wú)需審批一般用于只需要記錄，不需要人員審批的簡(jiǎn)潔的業(yè)務(wù)。

4）確認(rèn)和取消按鈕組

a.鼠標(biāo)單擊取消按鈕時(shí)的交互

我們用隱蔽的交互將彈窗隱蔽起來(lái)即可。這里也需要恢復(fù)還原的問(wèn)題，由于用戶會(huì)填寫(xiě)過(guò)一些內(nèi)容，那我們用對(duì)應(yīng)的交互將他們還原即可。例如用戶在填寫(xiě)了腳本，我們就用設(shè)置文本的交互將他還原，例如在多選表格里選擇了用戶，我們就用更新行還原成未選擇的狀態(tài)。

b.鼠標(biāo)單擊確認(rèn)按鈕的交互

假如人工審批的矩形被選中，就說(shuō)明白選中了人工審批方式，這時(shí)用更新行的交互，更新條件是中繼器被選中的行，就是xuanzhong值等于1的行，將詳細(xì)的審批方式，就是之前單選按鈕選中時(shí)，會(huì)記錄到文本標(biāo)簽里的值，更新到text列的值中。

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

假如無(wú)需審批的矩形被選中，就說(shuō)明白選中了無(wú)需審批的審批方式，這時(shí)用更新行的交互，更新條件是中繼器被選中的行，就是xuanzhong值等于1的行，將無(wú)需審批更新到text列的值中。

最終無(wú)論那種狀況，我們都觸發(fā)取消按鈕，進(jìn)行還原和回復(fù)界面。

c.彈窗隱蔽的時(shí)的交互

彈窗隱蔽時(shí)，我們要取消對(duì)審批流程節(jié)點(diǎn)的選中，所