審批流即審批流程饲化，是對(duì)某項(xiàng)工作的審批活動(dòng)的一系列有序組合第岖。審批流在業(yè)務(wù)系統(tǒng)中擔(dān)當(dāng)者非常重要的角色块差，所以今天作者就教大家制作一個(gè)通用的自定也審批流的原型模板毙死，方便大家日后的工作燎潮。
一、效果展示
可以根據(jù)業(yè)務(wù)需要添加多個(gè)審批節(jié)點(diǎn)扼倘；
可以為每個(gè)審批節(jié)點(diǎn)配置審批方式确封，包括人工審批、系統(tǒng)審批唉锌、無需審批隅肥；
可以在指定位置插入新的審批節(jié)點(diǎn)；
可以修改或者刪除已有的審批節(jié)點(diǎn)袄简。
二、制作教程
制作這個(gè)原型只要分為兩大部分泛啸，一個(gè)是可以添加或刪除節(jié)點(diǎn)的審批流程绿语，另一個(gè)是可以配節(jié)審批節(jié)點(diǎn)的彈窗頁面。
1. 審批流程
第一部分審批流程候址，我們用中繼器來制作吕粹，因?yàn)橹挥兄欣^器菜具備增刪改的效果。
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)簽：中部文字稳其，詳細(xì)的審批方式驶赏；
關(guān)閉按鈕、添加按鈕既鞠、右箭頭等煤傍，如下圖所示擺放。
2）中繼器表格內(nèi)容
我們共需要5列內(nèi)容：
no：按12345……嘱蛋，后續(xù)用來排序以及在對(duì)應(yīng)位置插入新的審批節(jié)點(diǎn)蚯姆。
type：類型，分為開始洒敏、審批和結(jié)束龄恋、一般一頭一尾是開始和結(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è)置到詳細(xì)文本的文本標(biāo)簽踊谋，將typename列的文本設(shè)置到類型的文本標(biāo)簽里蝉仇。
然后，如果是所在行type列的值等于開始或者結(jié)束殖蚕，一般這兩個(gè)節(jié)點(diǎn)是固定的轿衔，所以我們就不可以修改或者刪除，這里我們用隱藏按鈕睦疫，把刪除按鈕和右箭頭隱藏起來害驹，再用禁用按鈕，禁用掉這個(gè)組合蛤育，這樣就不可以點(diǎn)擊了宛官。
另外，在最后一行的時(shí)候瓦糕，我們還要把下方垂直線和添加按鈕隱藏起來底洗，因?yàn)橐呀?jīng)是最后一行了，就不需要垂直線和添加按鈕咕娄。
我們做一個(gè)定義亥揖，如果中繼器里某一行xuanzhong列的值等于1，就代表這個(gè)節(jié)點(diǎn)被選中了圣勒。我們要用選中的交互费变，設(shè)置背景矩形選中狀態(tài)為真摧扇，并且顯示彈窗，把typename的值傳遞過去胡控。
5）鼠標(biāo)單擊審批流程節(jié)點(diǎn)組合的交互
鼠標(biāo)單擊流程節(jié)點(diǎn)組合時(shí)扳剿，我們應(yīng)該選中這個(gè)節(jié)點(diǎn)，并且彈出彈窗昼激，是否選中是通過中繼器xuanzhong列的值來控制的庇绽，而且上面我們就寫了xunzhong列的值等于1時(shí)，就選中并且顯示彈窗橙困。
所以這里我們只需要用更新行的交互瞧掺，將當(dāng)前行xuanzhong列的值更新為1即可，但是我們也需要考慮到另外一個(gè)問題凡傅，就是之前是否有節(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)該要變成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ù)即可摸航。不過為了嚴(yán)謹(jǐn)一點(diǎn)制跟，我們還是可以判斷有多少個(gè)審批節(jié)點(diǎn)，審批節(jié)點(diǎn)的數(shù)量有很多種方式記錄酱虎，例如中繼器每項(xiàng)加載時(shí)雨膨，type等于1時(shí)，我們就可以在中繼器外的文本里設(shè)置記錄文本為原來的值加1读串，這樣加載到最后一行聊记，文本里的值等于多少就有多少個(gè)審批節(jié)點(diǎn)』峙或者我們也可以用中繼器里的行數(shù)-開始和結(jié)束的兩行排监，得出中繼器的審批節(jié)點(diǎn)的個(gè)數(shù)。記錄審批節(jié)點(diǎn)的數(shù)量的用處就是用于保證至少有一個(gè)審批節(jié)點(diǎn)杰捂，如果數(shù)量少于等于1舆床，就不可刪除，否則這個(gè)審批流程也沒有意義嫁佳。
2. 配置審批流程節(jié)點(diǎn)
審批流程節(jié)點(diǎn)我們以右側(cè)彈窗的方式顯示挨队，前面說到，點(diǎn)擊流程節(jié)點(diǎn)就是彈出這個(gè)彈窗蒿往，并且把typename的值傳遞過來盛垦。那這個(gè)彈窗我們分成4部分內(nèi)容：
1）審批流程節(jié)點(diǎn)名稱
對(duì)應(yīng)tpyename，我們可以在輸入框里改審批節(jié)點(diǎn)的名稱熄浓，后續(xù)可以通過交互更新到審批流程里情臭。
2）審批類型
這里的審批類型分成3個(gè)大類，分別是人工審批系統(tǒng)審批和無需審批赌蔑，我們需要用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ōu)榱朔奖闱城龋y(tǒng)一設(shè)置到動(dòng)態(tài)面板名稱為元件文字內(nèi)容的頁面，這樣就不需要分開三個(gè)來寫了证膨。
3）審批內(nèi)容
具體的審批內(nèi)容我們放在動(dòng)態(tài)面板里如输，因?yàn)樯厦媸歉鶕?jù)名字來調(diào)整到動(dòng)態(tài)面板的狀態(tài)，所以動(dòng)態(tài)面板對(duì)應(yīng)的狀態(tài)名要和按鈕一致。
現(xiàn)在主流的審批方式一般分為三種不见，人工審批澳化、系統(tǒng)審批、無需審批稳吮，那我們?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é)人只有一名沒有替代的話也可以不需要審批方式锥累。
b. 其他部門審批
這里考慮到有些業(yè)務(wù)需要其他部門審批，例如業(yè)務(wù)人員報(bào)銷集歇，除了直系上級(jí)桶略、部門負(fù)責(zé)人審批外，還需要財(cái)務(wù)部審批诲宇，這種情況我們就需要選擇际歼，其他部門審批。
選擇其他部門審批姑蓝，前面我們通過設(shè)置單選按鈕選中時(shí)會(huì)進(jìn)入對(duì)應(yīng)的動(dòng)態(tài)面板的頁面
主要是有部門的單選組組成鹅心，我們用矩形制作就可以了，增加一個(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è)的人員或者角色去審批。我們用多選表格桩引，列出員工的基本信息缎讼，讓用戶來選擇即可。
這里選擇成員或角色是多選的坑匠，所以審批方式同樣是會(huì)簽和或簽血崭。
d. 發(fā)起者指定人員審批
這個(gè)一般常用于需要交接工作的業(yè)務(wù)，比如說一個(gè)銀行柜員需要休假厘灼，那他手上保管的錢和憑證就要交給頂替的位置的其他柜員夹纫。這時(shí)就由申請(qǐng)人自己選擇交接給誰。這里可能會(huì)交接給一個(gè)人或多個(gè)人设凹，所以審批方式同樣是會(huì)簽和或簽舰讹。
② 系統(tǒng)審批
系統(tǒng)審批就是通過條件代碼，讓系統(tǒng)來判斷是否通過闪朱，這里我們簡(jiǎn)單的就寫個(gè)交互來判斷月匣，當(dāng)然如果復(fù)雜的也可以接入對(duì)應(yīng)的模型。一般用于審批流程的第一步奋姿，判斷提交的內(nèi)容是否正確锄开、完整
③ 無需審批
無需審批一般用于只需要記錄，不需要人員審批的簡(jiǎn)單的業(yè)務(wù)胀蛮。
4）確認(rèn)和取消按鈕組
a. 鼠標(biāo)單擊取消按鈕時(shí)的交互
我們用隱藏的交互將彈窗隱藏起來即可院刁。這里也需要恢復(fù)還原的問題，因?yàn)橛脩魰?huì)填寫過一些內(nèi)容粪狼，那我們用對(duì)應(yīng)的交互將他們還原即可旨怠。例如用戶在填寫了腳本，我們就用設(shè)置文本的交互將他還原纤虽，例如在多選表格里選擇了用戶襟诸，我們就用更新行還原成未選擇的狀態(tài)。
b. 鼠標(biāo)單擊確認(rèn)按鈕的交互
如果人工審批的矩形被選中困鸥，就說明了選中了人工審批方式嗅蔬，這時(shí)用更新行的交互剑按，更新條件是中繼器被選中的行，就是xuanzhong值等于1的行澜术，將具體的審批方式艺蝴，就是之前單選按鈕選中時(shí)，會(huì)記錄到文本標(biāo)簽里的值鸟废，更新到text列的值中猜敢。
如果系統(tǒng)的矩形被選中，就說明了選中了系統(tǒng)審批的方式盒延，這時(shí)用更新行的交互缩擂，更新條件是中繼器被選中的行，就是xuanzhong值等于1的行添寺，將系統(tǒng)審批更新到text列的值中胯盯。
如果無需審批的矩形被選中，就說明了選中了無需審批的審批方式计露，這時(shí)用更新行的交互博脑，更新條件是中繼器被選中的行，就是xuanzhong值等于1的行薄坏，將無需審批更新到text列的值中趋厉。
最后無論那種情況，我們都觸發(fā)取消按鈕胶坠，進(jìn)行還原和回復(fù)界面君账。
c. 彈窗隱藏的時(shí)的交互
彈窗隱藏時(shí)，我們要取消對(duì)審批流程節(jié)點(diǎn)的選中沈善，所以我們用更新行的交互乡数，將xuanzhong列的值更新為0就可以了，簡(jiǎn)單的操作就是直接標(biāo)記所有行闻牡，然后把所有行的xuanzhong列的值更新為0净赴，最后我們?cè)谟|發(fā)取消按鈕鼠標(biāo)單擊時(shí)進(jìn)行還原。
這樣我們就完成了能審批流的原型模板了罩润，后續(xù)使用也是很方便玖翅，只需要根據(jù)業(yè)務(wù)內(nèi)容修改對(duì)應(yīng)的信息，即可自動(dòng)生成交互效果割以。
