antdesign vue 步骤条a-step按审核人员节点排序显示逻辑

一、需求内容

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

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

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

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

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

二、开发思路

  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

复制代码
 
相关推荐
怕浪猫9 小时前
哪些软件对 Chrome DevTools Protocol 频繁使用
人工智能·架构·前端框架
星栈1 天前
Dioxus 的响应式系统:`Signal`、`Memo`、`Effect` 和异步状态到底该怎么分工
前端·前端框架
禅思院3 天前
路由性能优化终极指南:从懒加载漏洞到边缘渲染的架构跃迁
前端·架构·前端框架
怕浪猫3 天前
Electron 系列文章封面图
算法·架构·前端框架
星栈3 天前
Dioxus 的 `rsx!` 语法:如果你会 React,上手确实特别快
前端·前端框架
星栈3 天前
10 分钟跑起第一个 Dioxus 应用:`dx` CLI、`rsx!` 和热更新好不好用
前端·rust·前端框架
禅思院4 天前
POST请求发两次?一次讲透CORS预检机制,面试不再翻车
前端·架构·前端框架
不讲道理的柯里昂4 天前
我做了一个更适合二开的 React Admin 开源模板:React Admin Plus
前端框架·开源
星栈5 天前
一套 Rust 代码跑三端:为什么我开始关注 Dioxus
前端·rust·前端框架
货拉拉技术5 天前
Huolala Figma MCP 原理与实践
人工智能·前端框架·html