场景:
在做业务流程,由于在不同任务节点,在页面展示的标签内容不一样(elementui 的label)、name信息和提交数据结构一样,就用一个公共VUE组件。因此需要根据不同的节点和等级,进行判断处理。但分支庞大,为了优化这种繁重的 if 判断和后续拓展,还是面向对象吧。画外音:不会js操作enum,才用对象进行优化。
思路:
在data定义数组对象-->给定所需要的设定值-->利用es 6找出需要的对象--> 取第一个
对比:
- 多if代码
// nodeSeq 节点// level 等级// labelUser 审核人名称// warnContent 不同的说明信息
// url 接口提交的地址// remark 备注
if(nodeSeq == '12'){
if(this.level == '1'){
this.labelUser = '中控室';
}else if(this.level == '2'){
this.labelUser = '分管安全负责人';
}
this.remark = '审批意见'
this.warnContent='提示信息1'
this.url= '提交地址1'
}else if(nodeSeq == '13'){
this.warnContent='提示信息2'
this.labelUser = '中控室';
this.remark = '中控室意见'
}else if(nodeSeq == '14'){
this.labelUser = '隔离员';
this.warnContent='本人确认...符合。。。'
this.remark = '建议'
}else if(nodeSeq == '15'){
// this.flagNextUser = false
this.labelUser = '实施作业负责人';
this.warnContent='本人确认。。'
this.remark = '意见'
}else if(nodeSeq == '16'){
this.labelUser = '作业负责人';
this.remark = '作业确认'
}else if(nodeSeq == '17'){
this.labelUser = '负责人';
this.remark = '负责人确认'
this.url = "提交地址2"
} */
// else if(nodeSeq == '18'){
// this.url =
// this.labelUser = '隔离作业负责人';
// this.remark = '审批意见'
// }- 面向对象代码
data定义数组
var taskEnum =[
{nodeSeq:"12",level:"1",labelUser:"中控室",warnContent:"提示信息1",url:"提交地址1",remark:"审批意见"},
{nodeSeq:"12",level:"2",labelUser:"分管安全负责人",warnContent:"提示信息1",url:"提交地址1",remark:"审批意见"},
{nodeSeq:"13",level:"1,2",labelUser:"中控室",warnContent:"提示信息2",url:"提交地址1",remark:"中控室意见"},
{nodeSeq:"14",level:"1,2",labelUser:"隔离员",warnContent:"本人确认...符合。。。",url:"提交地址1",remark:"建议"},
{nodeSeq:"15",level:"1,2",labelUser:"实施作业负责人",warnContent:"本人确认。。",url:"提交地址1",remark:"意见"},
{nodeSeq:"16",level:"1,2",labelUser:"作业负责人",warnContent:"",url:"提交地址1",remark:"作业确认"},
{nodeSeq:"17",level:"1,2",labelUser:"负责人",warnContent:"提示信息1",url:"提交地址2",remark:"负责人确认"},
];使用时遍历出需要在elementui label展示的对象
this.nodeSeq = data.nodeSeq; //data是接口回传数据对象
this.level = data.level;
var task = this.taskEnum.filter(item => item.nodeSeq===this.nodeSeq && item.isolationLevel.indexOf(this.level) != -1)[0];
console.log(task);