背景“搜索”是我们日常上网中使用频率非常高的一个功能。搜索的目的是快速检索目标数据。用户输入目标数据的某些特征作为搜索条件。经过搜索可以得到对应特征对应的数据。输入的特征越详细,结果就越准确。但是,为了使用方便,默认的搜索一般不允许用户配置过多的条件,所以我们每天接触的搜索都是简化版的搜索。但是当数据量增大时,为了准确获取目标数据,往往需要配置更多的条件,调整各个条件之间的关系。在这种情况下,我们会发现单纯的固定条件和关系的搜索已经不能满足需求了。现在,这个时候我们需要一个更完善的搜索功能——也就是“高级搜索”。设计思路首先,让我们谈谈设计思路。如上图所示,我们可以发现搜索语句由多个条件组成,每个条件由字段、比较器和值组成。然后用户只需要根据自己的需要配置每个条件。有几个细节需要考虑:搜索条件值类型其实是不统一的:比如数字和字符串的比较器应该不同;每个条件之间的关系需要全部或任何一个满足;按照这个思路实现的功能接口如下图所示:实现技术详解接下来说说如何实现。首先我们看一下生成的过滤条件的类型定义:typeCondition={key:string;//限定字段的keyop:string;//运算符值:FormValue;//value的类型就是表单组件输出的value的类型}typeFilterTag='should'|'必须';键入FilterConfig={条件:条件[];tag:FilterTag;}这里的意思是的:每个条件对应一个Condition;FilterTag表示各个条件之间的关系,should表示满足任何一个条件,就会通过过滤器,而must表示只有所有条件都满足才能通过过滤器;最终输出为FilterConfig;条件配置的实现为了得到这个FilterConfig,我们需要做五个步骤:1.新建一个空白条件:2.选择作为搜索条件的表单域第一个下拉选择框是选择表单要作为搜索条件的字段,如图所示打开下拉框;下拉框中选择的选项=表单自身字段+系统字段:表单字段:3.选择运算符由于不同表单字段的取值类型不一定相同,所以所有运算符都必须以选择的表单类型为准字段的显示相应的运算符集。目前低代码平台的表单值类型有:String、Boolean、Number、LabelValue、Datetime、Array。根据这些类型,需要预先定义相应的算子集。constOPERATORS_STRING=[{label:'equal',value:'eq',},{label:'fuzzy',value:'like',},];constOPERATORS_NUMBER=[{label:'equal',value:'eq',},{label:'greaterthan',value:'gt',},{label:'lessthan',value:'lt',},{label:'大于等于',value:'gte',},{label:'小于等于',value:'lte',},{label:'不等于',value:'不',},];constOPERATORS_DATE=[{label:'range',value:'range',},];constOPERATORS_BOOL=[{label:'equalto',value:'eq',},{label:'notequalto',value:'ne',},];constOPERATORS_ARRAY_MULTIPLE=[{label:'containsboth',value:'fullSubset',},{label:'containseither',value:'intersection',},];constOPERATORS_LABEL_VALUE=[{label:'equalto',value:'eq',},{label:'notequalto',value:'ne',},];在渲染时使用这个实用函数来获取所需的集合:案例“编号”:返回操作员_NUMBER;case'datetime':returnOPERATORS_DATE;case'boolean':returnOPERATORS_BOOL;case'label-value':returnOPERATORS_LABEL_VALUE;默认值:返回OPERATORS_STRING;如果满足字段的类型要求和条件,例如:选择字段的组件类型为NumberPicker,字段限制数字范围为0-100,则应显示一个数字输入框,并且只有数字在可以输入0-100的范围。条件值输入框的实现代码如下:);case'NumberPicker':return();case'DatePicker':return();case'CascadeSelector':return();case'OrganizationPicker':return();case'UserPicker':返回();默认值:返回<输入/>;}}5。选择每个条件之间的关系最后一步是选择每个条件之间的关系。all:条件之间是and(&)关系,同时满足才查找;any:条件之间的关系是或(|),只要满足其中一个条件,就会查找;所以当我们点击Search的时候,我们可以得到一个FilterConfig,然后将这个结构体进行一定的转换,然后传给接口,实现数据的搜索。PS:表单数据的搜索是用【Elasticsearch】实现的,所以会存在FilterConfig到Elasticsearch的AST的相互转换。这里的具体实现环节下次再分解。综上所述,普通搜索无法配置条件之间的关系和条件的比较符号,但是我们介绍的高级搜索解决了这个问题。通过各种搜索条件的组合,可以更快的得到目标数据。大大提高了我们的工作效率。引用Elasticsearch:https://www.elastic.co/cn/公众号:全向云低代码GitHub:https://github.com/quanxiang-...