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

复制代码
 
相关推荐
独立开阀者_FwtCoder1 小时前
AI 组件库 ChatUI 3.0 正式发布!阿里再一次领先!
前端·javascript·前端框架
Raken123 小时前
draggable 组件指定区域可进行拖拽
vue
JIngJaneIL4 小时前
健身管理小程序|基于java微信开发健身管理小程序的系统设计与实现(源码+数据库+文档)
java·数据库·小程序·vue·毕业设计·论文·健身管理小程序
智绘前端6 小时前
Vue3的Composition API与React Hooks有什么异同?
前端·vue.js·react.js·前端框架·vue
gqkmiss12 小时前
Git Cherry-pick:核心命令、实践详解
前端·git·前端框架·commit·cherry-pick
Code额13 小时前
Vue 框架组件间通信方式
前端·vue.js·前端框架
键指江湖16 小时前
React 条件渲染
前端·react.js·前端框架
冴羽yayujs17 小时前
SvelteKit 最新中文文档教程(19)—— 最佳实践之身份认证
前端·javascript·vue.js·react.js·前端框架·svelte·sveltekit
Samdy_Chan18 小时前
同时支持Vue2/Vue3的图片懒加载组件(支持懒加载 v-html 指令梆定的 html 内容)
前端·vue·vue3·vue2·懒加载·图片懒加载·图像懒加载
点点VS叉叉19 小时前
React使用科大讯飞AIUI通过websocket进行pcm语音转文字
前端·react.js·前端框架