VUE 太多的if 忒嫌弃,enum操作?

771 阅读2分钟

场景:

  在做业务流程,由于在不同任务节点,在页面展示的标签内容不一样(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);