表单数据高级搜索功能设计

背景

“搜索”是我们在日常上网中使用率非常高的功能，搜索的目的是快速检索到目标数据，用户输入目标数据的一定特征作为搜索条件，进行搜索之后就能得到符合相应特征的数据。输入的特征越多越详细，得到的结果也就会越精确。

不过为了使用的便利性，一般默认的搜索都不会让用户配置太多的条件，所以我们日常接触的搜索都是简化版本的搜索。但是当数据量增大起来之后，为了准确得到目标数据，往往需要配置更多的条件并且调整各个条件之间的关系，这种情况下我们就会发现固定条件和关系的简单搜索已经无法满足需求了，这时候我们就需要更加完整的搜索功能——即“高级搜索”。

设计思路

首先讲一下设计思路，如上图我们可以发现搜索语句由多个条件组成，每个条件又由字段、比较符、值组成。那用户只需要根据需求配置每个条件就可以了。这其中有几个需要考虑到的细节：

1. 搜索的条件值类型其实并不统一：例如数字和字符串的比较符就应该不同；
2. 各个条件之间的关系，是需要全部满足还是满足任意一个；

根据这个思路实现的功能界面如下图：

 

实现技术详解

接下来我们讲讲如何实现，先来看看生成的筛选条件的类型定义：

```tsx
type Condition = {
key: string; // 限定字段的key
op: string; // 操作符
value: FormValue; // value的类型就是表单组件输出的值的类型
}

type FilterTag = 'should' | 'must';

type FilterConfig = {
  condition: Condition[];
  tag: FilterTag;
}
```

这里的含义是：
1. 每一个条件对应一个