Axure高保真教程：自定义审批流原型模板

保罗

在日常的业务零碎中，审批流程是一个相对于首要的存在，明晰可用的审批流能够在一定水平上晋升业务处置效力。那末，你知道如何利用制造审批流的原型模板吗？本文作者便做理解读，一同来看。

审批流即审批流程，是对某项任务的审批流动的一系列有序组合。审批流在业务零碎中担当者十分首要的角色，所以明天作者就教大家制造一个通用的自定也审批流的原型模板，便利大家往后的任务。
一、成果展现
能够按照业务需求添加多个审批节点；能够为每个审批节点配置审批形式，包罗人工审批、零碎审批、无需审批；能够在指定地位拔出曾经新的审批节点；能够修正或者删除已有的审批节点。

原型地址：http://gdyy4h.axshare.com/#g=1
二、制造教程
制造这个原型只有分为两大部份，一个是能够添加或删除节点的审批流程，另外一个是能够配节审批节点的弹窗页面。
1. 审批流程
第一部份审批流程，咱们用中继器来制造，由于只要中继器菜具备增删改的成果。
1）中继器外部元件
配景框：默许灰色，设置选中款式为蓝色，后续点击显示弹窗时变蓝；文本标签（类型/标题文字）：审批节点左上角的标题文字；文本标签：中部文字，具体的审批形式；封闭按钮、添加按钮、右箭头号，如下图所示摆放。

2）中继器表格内容
咱们共需求5列内容：
no：按十二345……，后续用来排序以及在对应地位拔出曾经新的审批节点。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 协定
该文观念仅代表作者自己，人人都是产品经理平台仅提供信息存储空间办事。