关于json:表单数据高级搜索功能设计

背景

“搜寻”是咱们在日常上网中使用率十分高的性能，搜寻的目标是疾速检索到指标数据，用户输出指标数据的肯定特色作为搜寻条件，进行搜寻之后就能失去合乎相应特色的数据。输出的特色越多越具体，失去的后果也就会越准确。

不过为了应用的便利性，个别默认的搜寻都不会让用户配置太多的条件，所以咱们日常接触的搜寻都是简化版本的搜寻。然而当数据量增大起来之后，为了精确失去指标数据，往往须要配置更多的条件并且调整各个条件之间的关系，这种状况下咱们就会发现固定条件和关系的简略搜寻曾经无奈满足需要了，这时候咱们就须要更加残缺的搜寻性能——即“高级搜寻”。

设计思路

首先讲一下设计思路，如上图咱们能够发现搜寻语句由多个条件组成，每个条件又由字段、比拟符、值组成。那用户只须要依据需要配置每个条件就能够了。这其中有几个须要思考到的细节：

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

依据这个思路实现的性能界面如下图：

实现技术详解

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

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

type FilterTag = 'should' | 'must';

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

这里的含意是：

1. 每一个条件对应一个 Condition；
2. FilterTag 代表每个条件之间的关系，should 代表任意一个条件满足时就通过筛选，must 代表满足所有条件时能力通过筛选；
3. 最终的输入是 FilterConfig;

条件配置的实现

为了失去这个 FilterConfig，咱们须要做五步工作：

1. 新建一项空白的条件：

\7.png)

2. 抉择用作搜寻条件的表单字段

第一个下拉抉择框是抉择你想要用作搜寻条件的表单字段，关上下拉框如图所示；

• 下拉框抉择的选项 = 表单自有字段 + 零碎字段：

\3.png)

• 表单字段：

\4.png)

3. 抉择操作符

因为不同表单字段的值类型并不一定雷同，所有操作符要依据所选表单字段的类型展现相应的操作符汇合。

目前低代码平台的表单值类型有：String、Boolean、Number、LabelValue、Datetime、Array<String|Boolean|Number|LabelValue>。依据这几种类型须要提前定义好相应的操作符汇合。

const OPERATORS_STRING = [
  {
    label: '等于',
    value: 'eq',
  },
  {
    label: '含糊',
    value: 'like',
  },
];

const OPERATORS_NUMBER = [
  {
    label: '等于',
    value: 'eq',
  },
  {
    label: '大于',
    value: 'gt',
  },
  {
    label: '小于',
    value: 'lt',
  },
  {
    label: '大于等于',
    value: 'gte',
  },
  {
    label: '小于等于',
    value: 'lte',
  },
  {
    label: '不等于',
    value: 'ne',
  },
];

const OPERATORS_DATE = [
  {
    label: '范畴',
    value: 'range',
  },
];

const OPERATORS_BOOL = [
  {
    label: '等于',
    value: 'eq',
  },
  {
    label: '不等于',
    value: 'ne',
  },
];

const OPERATORS_ARRAY_MULTIPLE = [
  {
    label: '同时蕴含',
    value: 'fullSubset',
  },
  {
    label: '蕴含任一一个',
    value: 'intersection',
  },
];

const OPERATORS_LABEL_VALUE = [
  {
    label: '等于',
    value: 'eq',
  },
  {
    label: '不等于',
    value: 'ne',
  },
];

在 render 的时候用此工具函数就能够失去须要的汇合：

function getOperators(type: string) {switch (type) {
  case 'array':
    return OPERATORS_ARRAY_MULTIPLE;
  case 'number':
    return OPERATORS_NUMBER;
  case 'datetime':
    return OPERATORS_DATE;
  case 'boolean':
    return OPERATORS_BOOL;
  case 'label-value':
    return OPERATORS_LABEL_VALUE;
  default:
    return OPERATORS_STRING;
  }
}

4. 填写搜寻条件字段的值

搜寻条件字段的值是须要合乎该字段的类型要求以及条件限度的。如：抉择字段的组件类型为 NumberPicker，且该字段限度数字范畴为 0-100，那么就应该展现一个数字输入框且只能输出 0-100 范畴内的数字。

\8.png)

条件值输入框的实现代码如下：

function FieldSwitch(type) {switch (type) {
  case 'CheckboxGroup':
  case 'Select':
  case 'RadioGroup':
  case 'MultipleSelect':
    return (<SelectField />);
  case 'NumberPicker':
    return (<InputNumber />);
  case 'DatePicker':
    return (<DatePicker.RangePicker />);
  case 'CascadeSelector':
    return (<CascadeSelector />);
  case 'OrganizationPicker':
    return (<OrganizationPicker />);
  case 'UserPicker':
    return (<UserPicker />);
  default:
    return <Input />;
  }
}

5. 抉择各个条件之间的关系

最初一步就是抉择各个条件之间的关系了。

\9.png)

• 所有：各个条件之间的关系为和（&），同时满足时才会搜寻进去；
• 任一：条件之间的关系为或（|），只有满足其中一个条件就会被搜寻进去；

如此一来咱们点击搜寻的时候就能失去一个 FilterConfig，再将此构造进行肯定转换，传递给接口后就能够实现数据的搜寻。

PS：表单数据的搜寻是用 [Elasticsearch] 实现的，因而会有 FilterConfig 到 Elasticsearch 的 AST 的一个互相转换，这里的具体实现环节待下回分解。

\5.png)

总结

一般的搜寻不能配置条件之间的关系和条件的比拟符号，而咱们引入的高级搜寻就解决了这个问题，通过各种搜寻条件的组合咱们就能更加疾速的失去指标数据。大大晋升了咱们工作的效率。

\6.png)

援用

Elasticsearch：https://www.elastic.co/cn/

本文由博客一文多发平台 OpenWrite 公布！