首页 > 极客资料 博客日记
antdesign vue 步骤条a-step按审核人员节点排序显示逻辑
2024-10-28 09:30:02极客资料围观13次
这篇文章介绍了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
版权声明:本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若内容造成侵权/违法违规/事实不符,请联系邮箱:jacktools123@163.com进行投诉反馈,一经查实,立即删除!
标签:
上一篇:芯片上音频相关的验证
下一篇:老司机带你聊聊向量数据库
相关文章
最新发布
- Nuxt.js 应用中的 prerender:routes 事件钩子详解
- 【问题解决】Tomcat由低于8版本升级到高版本使用Tomcat自带连接池报错无法找到表空间的问题
- 【FAQ】HarmonyOS SDK 闭源开放能力 —Vision Kit
- 六、Spring Boot集成Spring Security之前后分离认证流程最佳方案
- 《JVM第7课》堆区
- .NET 8 高性能跨平台图像处理库 ImageSharp
- 还在为慢速数据传输苦恼?Linux 零拷贝技术来帮你!
- 刚毕业,去做边缘业务,还有救吗?
- 如何避免 HttpClient 丢失请求头:通过 HttpRequestMessage 解决并优化
- 让性能提升56%的Vue3.5响应式重构之“版本计数”