参数冗杂的优化解决办法看这里_前台参数多的优化

        Op: "eq"
      }
    ]
  });
  sessionStorage.setItem("CustName", this.CustName);//存取session值保证记忆性
} else {
  sessionStorage.removeItem("CustName");
}

↓  
 当然这只是一个判断区块，在一个当下的系统里，上联的搜索框将会包括很多这样的区块。所以会导致代码很长。然后我们来分析这个问题。


#### 首先分类


![在这里插入图片描述](https://img-blog.csdnimg.cn/20200630102312651.png)  
 但是大致可以分为两种，一框一搜和一框多搜。


##### 一框一搜


对于一框一搜的情况类似于之前的代码展示，当然彼此的代码可能不同，但是思路是相通的，代码是要看后台给出的接口以对应。


![在这里插入图片描述](https://img-blog.csdnimg.cn/20200630102851282.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMjc3NDA0,size_16,color_FFFFFF,t_70)  
 红色区域表示搜索的Op方式，搜索哪一列，用哪一个取到的数据（输入框绑定的数据），列与数据之间的匹配方式是（如模糊，全等，大于小于等）。


所以这四个数据是需要传入的，但模板是一定的。

singleQuery(Filed:any,Op1:any,Op2:any,Data:any){
this.params.queryGroup.Groups.push({
Op: Op1,
Rules: [
{
Field: Filed,
Data: Data,
Op: Op2
}
]
});
}

对于引入方法后的判断逻辑代码展示

if (!!this.CustName) {
this.singleQuery(“CustName”,“and”,“cn”,this.CustName);
sessionStorage.setItem(“CustName”, this.CustName);
} else {
sessionStorage.removeItem(“CustName”);
}

如果说一框一搜只是简单的把共性提取出来，那一框多搜是否可以借鉴这个模式呢？


##### 一框多搜


如图片之前的演示截图中的一个框既可以搜索姓名，也可以搜到别的数据。  
 在传入的参数也要因此多一条规则的限定，即不再用之前的and(&&)，改为使用or(||)，即每个规则的字符组都可以拿到相应的数据进行搜索。

if (!!this.ManyColumn) {
this.params.queryGroup.Groups.push({
Op: “or”,
Rules: [
{
Field: “PlateNumber”,
Data: this.ManyColumn,
Op: “cn”
},
{
Field: “VinNumber”,
Data: this.ManyColumn,
Op: “cn”
},
{
Field: “HolderName”,
Data: this.ManyColumn,
Op: “cn”
}
]
});
}

如果说一搜一是横向比较即在不同的一搜一输入框中进行提取共性（红色），那么一搜多将纵向比较，提取规则的共性。  
 ![在这里插入图片描述](https://img-blog.csdnimg.cn/20200630104152994.png)  
 ![在这里插入图片描述](https://img-blog.csdnimg.cn/20200630104419152.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMjc3NDA0,size_16,color_FFFFFF,t_70)

createrules(Filed:any,Date:any,Op:any){
var rules={
Field: Filed,
Data: Date,
Op: Op
}
return rules;
}

此处即可以简化为一个方法创建某些特定值，创建特定的几次。