前言:目前有一个流程节点的数据,多层级树形结构。其中某个节点有一个参数isCurrent,当isCurrent为1的时候,说明是当前流程,isCurrent为0的时候,是已提交或者未提交。isCurrent:1之前的流程是已经提交过的,isCurrent:1之后的流程是未提交的。当前,已提交,未提交,需要展示三种颜色。现在要根据isCurrent:1为当前流程、已提交、未提交的对象添加三种不同的状态。
代码如下
//数据结构
const obj = {
name: '流程1',
isCurrent: 0,
childNode: {
name: '流程2',
isCurrent: 1,
childNode: {
name: '流程3',
isCurrent: 0,
childNode: {
name: '流程4',
isCurrent: 0
}
}
}
}
//数据处理
const handleData = (node, type) => {
for (const key in node) {
//首先找到isCurrent 1 当前环节,当前环节后面的childNode就是未流转的
if (node.isCurrent == 1) {
node.colorType = 2 //当前环节颜色
if (node.childNode) {
// 添加参数true代表这是未流转的childNode
handleData(node.childNode, true)
}
}
if (node.isCurrent == 0 && !type) {
node.colorType = 1//已流转颜色
if (node.childNode) {
handleData(node.childNode, false)
}
}
if (node.isCurrent == 0 && type) {
node.colorType = 0 //未流转环节颜色
if (node.childNode) {
handleData(node.childNode, true)
}
}
}
return node
}
//调用打印,首次调用,type为false
console.log(handleData(obj))
//数据如下
{
'name': '流程1',
'isCurrent': 0,
'colorType': 1,
'childNode': {
'name': '流程2',
'isCurrent': 1,
'colorType': 2,
'childNode': {
'name': '流程3',
'isCurrent': 0,
'colorType': 0,
'childNode': {
'name': '流程4',
'isCurrent': 0,
'colorType': 0
}
}
}
}