一、需求内容

  目前审核人员角色有:学术、法务、售后,串行执行审核流程。

  审核流程:发起/修改审核-》审核节点

  审核节点规则:学术-》法务-》售后,每个节点均可以审核或修改。

  审核状态:发起、修改、待审核、已审核。

  因此前端根据节点规则来展示审核步骤给用户。

二、开发思路

  1.根据节点规则,自定义一个字段存储审核节点类型:nodeType:1-8

  2.区分审核节点是一组还是多组,

  例如:一组审核时['发起审核','学术待审核','法务待审核','售后待审核'] ;

  而多组审核则是8个状态都会出现,例如:['发起审核','学术已审核','法务已审核','售后已审核','修改审核','学术已审核','法务待审核','售后待审核',...]等此循环出现;

  3.多组审核数据需要按照'审核节点规则'重新排序,用sort()重新生产结果数组。

  4. 根据生成结果数组result,设置当前步骤值current。

三、项目运用代码(不分)

function auditCheckClick(result){
if(result && result.length){
let len = result.length
result.map((item,index)=>{
if(item.auditType==1){ item.nodeType=6}
else if(item.auditType==2){ item.nodeType=7}
else if(item.auditType==3){ item.nodeType=8}
else if(item.auditType==4){ item.nodeType=2}
else if(item.auditType==5){ item.nodeType=3}
else if(item.auditType==6){ item.nodeType=4}
else if(item.auditType==7||item.auditType==8){ item.nodeType=1}
if(item.auditType==8){item.nodeIndex=index}
return item
})
console.log(1,result)
if(len<=4){ // 一组审核
result.sort((r1,r2)=>{
return r1.nodeType - r2.nodeType
})
}else{ // 多组审核
let lastArr = result.filter(el=>el.nodeIndex)
let lastIndex= lastArr&&lastArr.length?lastArr[lastArr.length-1].nodeIndex:0
let hisSort = result.slice(0,lastIndex)
let sortArr = result.slice(lastIndex)
sortArr.sort((r1,r2)=>{return r1.nodeType - r2.nodeType})
result = hisSort.concat(sortArr)
console.log(2, lastArr,lastIndex)
console.log(3, hisSort,sortArr)
console.log(4, result)
}
}
 // result 结果数组
  let step = result.findIndex(item=>item.auditType==1||item.auditType==2||item.auditType==3) // 学术、法务、售后的待审核状态
  let current = step&&step!=-1?step:result.length-1
 

antdesign vue 步骤条a-step按审核人员节点排序显示逻辑的更多相关文章

  1. C#开发step步骤条控件

    现在很多的javascript控件,非常的不错,其中step就是一个,如下图所示: 那么如何用C#来实现一个step控件呢? 先定义一个StepEntity类来存储步骤条节点的信息: public c ...

  2. WPF教程002 - 实现Step步骤条控件

    原文:WPF教程002 - 实现Step步骤条控件 在网上看到这么一个效果,刚好在用WPF做控件,就想着用WPF来实现一下 1.实现原理 1.1.该控件分为2个模块,类似ComboBox控件分为Ste ...

  3. Vue项目中实现tab栏和步骤条的数据联动

    也就是tab栏切换步骤条随之变化 <template>   <div>     <!-- 面包屑导航  -->     <el-breadcrumb sepa ...

  4. element-ui Steps步骤条组件源码分析整理笔记(九)

    Steps步骤条组件源码: steps.vue <template> <!--设置 simple 可应用简洁风格,该条件下 align-center / description / ...

  5. uni-app插件ColorUI步骤条

    1. uni-app插件ColorUI步骤条 1.1. 前言 uni-app就不介绍了,前面几篇已经有所介绍,不知道的可以翻看我前面几篇博客 ColorUI-uniApp是uni-app的一款ui组件 ...

  6. Steps 步骤条

    引导用户按照流程完成任务的分步导航条,可根据实际应用场景设定步骤,步骤不得少于 2 步. 基础用法 简单的步骤条. 设置active属性,接受一个Number,表明步骤的 index,从 0 开始.需 ...

  7. AntDesign VUE:上传组件自定义限制的两种方式(Boolean、Promise)

    AntD上传组件 AntDesign VUE文档 第一种方式 beforeUpload(file) { let isLt = true if (filesSize) { isLt = file.siz ...

  8. 微信小程序 - 步骤条组件

    <!-- 未激活颜色: uncolor:'#ccc' 激活 active:0 数据源 data:[{},{}] 步骤条类型:type basic detail num more --> & ...

  9. WPF-自定义实现步骤条控件

    步骤条实现的效果: 步骤条控件是在listbox的基础上实现的. 一. xaml代码: <Window.Resources> <convert1:StepListBarWidthCo ...

  10. AntDesign vue学习笔记(七)Form 读写与图片上传

    AntDesign Form使用布局相比传统Jquery有点繁琐 (一)先读写一个简单的input为例 <a-form :form="form" layout="v ...

随机推荐

  1. Java栈溢出|内存泄漏|内存溢出

    Java虚拟机栈是线程私有的,它的生命周期和线程同步 一个线程每执行到一个方法,JVM就会创建一个栈帧(用于存储基本数据类型.对象指针和返回值等),并将栈帧压入栈中. 代码示例: public cla ...

  2. SSM_Spring+SpringMVC+MyBatis学习

    没听过的重点部分 springSecurity 4.0开始默认打开_csrf防护,但是会导致403 forbidden问题,所以可以关闭,但是关了就没有csrf防护了 其中还有传递的token和加密的 ...

  3. java_可变参数&增强for循环

    代码比较无厘头,记录看懂的意思 在可变参数的构造方法中,需要使用增强for循环遍历 public class name { String sex; public static void main(St ...

  4. 微信小程序 BLE 基础业务接口封装

    写在前面:本文所述未必符合当前最新情形(包括蓝牙技术发展.微信小程序接口迭代等). 微信小程序为蓝牙操作提供了很多接口,但在实际开发过程中,会发现隐藏了不少坑.目前主流蓝牙应用都是基于低功耗蓝牙(BL ...

  5. 全网最适合入门的面向对象编程教程:41 Python 常用复合数据类型-队列(FIFO、LIFO、优先级队列、双端队列和环形队列)

    全网最适合入门的面向对象编程教程:41 Python 常用复合数据类型-队列(FIFO.LIFO.优先级队列.双端队列和环形队列) 摘要: 在 Python 中,队列(Queue)是一种常用的数据结构 ...

  6. ​Spring:IOC(2)

    接前文:Spring:IOC 目录 依赖注入之setter注入 依赖注入之构造器注入 特殊值处理 字面量赋值 null值 xml实体 CDATA节 为类类型属性赋值 为数组类型属性赋值 修改Stude ...

  7. 如何排查线上w3wp.exe CPU高的问题,使用到了WinDbg、Visual studio来分析IIS进程池的.dmp文件

    最近发现服务器上某个web站点老是CPU很高,该站点部署在IIS上,我IIS上有多个站点,每个站点一个进程池,每个进程池取名都是根据站点来取的,所以很容易看出哪个站点吃掉的CPU,该站点已运行十几年, ...

  8. linux 上抓包

    #tcpdump -i mgmt0 -nn -s0 -v port 8001 capture IPv6 ping packets #tcpdump ip6 -i nic0 -nn -s0 and ic ...

  9. DVI与VGA有什么区别?

    DVI接口:DVI(Digital Visual Interface),即数字视频接口.DVI接口速度快.画面清晰.支持HDCP协议. VGA接口:VGA(Video Graphics Array)即 ...

  10. CSIG青年科学家会议圆满举行,合合信息打造智能文档处理融合研究新范式

          近期,第十九届中国图象图形学学会青年科学家会议(简称"会议")在广州召开.会议由中国图象图形学学会(CSIG)主办,琶洲实验室.华南理工大学.中山大学.中国图象图形学学 ...