中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

在日常的業(yè)務(wù)系統(tǒng)中，審批流程是一個(gè)相對(duì)重要的存在，清晰可用的審批流可以在一定程度上提升業(yè)務(wù)處理效率。那么，你知道如何利用制作審批流的原型模板嗎？本文作者便做了解讀，一起來看。

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

一、效果展示

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

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

二、制作教程

制作這個(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ì)文本）：中部文字，詳細(xì)的審批方式；
• 關(guān)閉按鈕、添加按鈕、右箭頭等，如下圖所示擺放。

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

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

1. no：按12345……，后續(xù)用來排序以及在對(duì)應(yīng)位置插入新的審批節(jié)點(diǎn)。
2. type：類型，分為開始、審批和結(jié)束、一般一頭一尾是開始和結(jié)束，其他都是審批。
3. typename：就是右上角的標(biāo)題文字。
4. text：中間的審批方式文字。
5. 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)生成交互效果。

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