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 结果数组
antdesign vue 步骤条a-step按审核人员节点排序显示逻辑的更多相关文章
- C#开发step步骤条控件
现在很多的javascript控件,非常的不错,其中step就是一个,如下图所示: 那么如何用C#来实现一个step控件呢? 先定义一个StepEntity类来存储步骤条节点的信息: public c ...
- WPF教程002 - 实现Step步骤条控件
原文:WPF教程002 - 实现Step步骤条控件 在网上看到这么一个效果,刚好在用WPF做控件,就想着用WPF来实现一下 1.实现原理 1.1.该控件分为2个模块,类似ComboBox控件分为Ste ...
- Vue项目中实现tab栏和步骤条的数据联动
也就是tab栏切换步骤条随之变化 <template> <div> <!-- 面包屑导航 --> <el-breadcrumb sepa ...
- element-ui Steps步骤条组件源码分析整理笔记(九)
Steps步骤条组件源码: steps.vue <template> <!--设置 simple 可应用简洁风格,该条件下 align-center / description / ...
- uni-app插件ColorUI步骤条
1. uni-app插件ColorUI步骤条 1.1. 前言 uni-app就不介绍了,前面几篇已经有所介绍,不知道的可以翻看我前面几篇博客 ColorUI-uniApp是uni-app的一款ui组件 ...
- Steps 步骤条
引导用户按照流程完成任务的分步导航条,可根据实际应用场景设定步骤,步骤不得少于 2 步. 基础用法 简单的步骤条. 设置active属性,接受一个Number,表明步骤的 index,从 0 开始.需 ...
- AntDesign VUE:上传组件自定义限制的两种方式(Boolean、Promise)
AntD上传组件 AntDesign VUE文档 第一种方式 beforeUpload(file) { let isLt = true if (filesSize) { isLt = file.siz ...
- 微信小程序 - 步骤条组件
<!-- 未激活颜色: uncolor:'#ccc' 激活 active:0 数据源 data:[{},{}] 步骤条类型:type basic detail num more --> & ...
- WPF-自定义实现步骤条控件
步骤条实现的效果: 步骤条控件是在listbox的基础上实现的. 一. xaml代码: <Window.Resources> <convert1:StepListBarWidthCo ...
- AntDesign vue学习笔记(七)Form 读写与图片上传
AntDesign Form使用布局相比传统Jquery有点繁琐 (一)先读写一个简单的input为例 <a-form :form="form" layout="v ...
随机推荐
- Python 将Word转换为JPG、PNG、SVG图片
将Word文档以图片形式导出,既能方便信息的分享,也能保护数据安全,避免被二次编辑.文本将介绍如何使用Spire.Doc for Python 库在Python程序中实现Word到图片的批量转换. P ...
- Apache DolphinScheduler如何开启开机自启动功能?
转载自东华果汁哥 Apache DolphinScheduler 是一个分布式.去中心化的大数据工作流调度系统,支持大数据任务调度.若要设置 DolphinScheduler 开机自启动,通常需要将其 ...
- 恭喜社区迎来新PMC成员!
恭喜Apache SeaTunnel社区又迎来一位PMC Member@liugddx!在社区持续活跃的两年间,大家经常看到这位开源爱好者出现在社区的各种活动中,为项目和社区发展添砖加瓦.如今成为项目 ...
- DRF中serializer的中的模型字段解释
序列化器--Serializer 选项参数: max_length 最大长度 min_length 最小长度 allow_blank 是否允许为空 trim_whitespace 是否截断空白字符 m ...
- 万字长文带你了解Java日志框架使用Java日志框架
大家好,我是晓凡 一.日志概念 日志的重要性不用我多说了,日志,简单来说就是记录. 用来记录程序运行时发生的事情.比如,程序启动了.执行了某个操作.遇到了问题等等,这些都可以通过日志记录下来. 想象一 ...
- SCC缩点模板
struct SCC { int top = 0, cntscc = 0, dfncnt = 0, n; vector<int> dfn, low, stk, instk; vector& ...
- 解决 Docker CE 在无根模式(rootless)下无法通过 IPv6 拉取映像的问题
折腾一天快把我逼疯了 本来 Docker 对 IPv6 的支持就不好,再来个 rootless,雪上加霜 首先,我们要区分 Docker Engine 和 里面的 Image. 拉取映像是 Docke ...
- 如何在 Nuxt 中动态设置页面布局
title: 如何在 Nuxt 中动态设置页面布局 date: 2024/8/24 updated: 2024/8/24 author: cmdragon excerpt: 摘要:本文介绍如何在Nux ...
- uni-app 商场样式
基于ColorUI-UniApp css样式开发的商城基础模 模板基础功能实现 1.首页今日推荐 点击 会商品加一 2.分类 页面 左右列表联动 3.购物车 商品加减 4.我的 订单管理 账号密码登 ...
- RAG+Agent人工智能平台:RAGflow实现GraphRA知识库问答,打造极致多模态问答与AI编排流体验
RAG+Agent人工智能平台:RAGflow实现GraphRA知识库问答,打造极致多模态问答与AI编排流体验 1.RAGflow简介 最近更新: 2024-09-13 增加知识库问答搜索模式. 20 ...