用 React 实现一个简单的查询构建器（Query Builder）

发布在 技术

前言

最近和朋友讨论技术的时候，提到这个 Query Builder，于是写了个简单的 Demo。

什么是 Query Builder？

  • 用于构建复杂查询条件，如 SQL 查询、查询条件，API 过滤等
  • 主要用于管理搜索条件、数据筛选、报告生成等

目标功能

  • 用户可以添加/删除查询条件
  • 支持 AND / OR 逻辑组合
  • 支持分组
  • 支持各类操作符

技术选择

React + TypeScript + Ant Design

类型定义

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
export interface QueryBuilderGroup {
  id: string;
  type: "group";
  name?: string;
  childrens: QueryBuilderItem[];
}

export interface QueryBuilderRule {
  id: string;
  type: "rule";
  dataset: string;
  datafield: string;
  operator: QueryBuilderOperator;
  value: any;
}

export interface QueryBuilderConnector {
  id: string;
  type: "connector";
  value: QueryBuilderConnectorValue;
}

export type QueryBuilderConnectorValue = "OR" | "AND";

export type QueryBuilderItem =
  | QueryBuilderGroup
  | QueryBuilderRule
  | QueryBuilderConnector;

export type QueryBuilderOperator = "=" | "<>" | "<" | ">";

具体实现

因为是快速做的 Demo，所以一把梭，并没有分太多组件出来。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
import _ from "lodash";
import React, { FormEvent, useState } from "react";
import classNames from "classnames";
import { Select, Input, Button, Form } from "antd";
import { useForm } from "antd/lib/form/Form";
import {
  ArrowUpOutlined,
  ArrowDownOutlined,
  CloseOutlined,
  PlusSquareOutlined,
  PlusOutlined,
} from "@ant-design/icons";
import {
  QueryBuilderConnector,
  QueryBuilderConnectorValue,
  QueryBuilderGroup,
  QueryBuilderItem,
  QueryBuilderOperator,
  QueryBuilderRule,
} from ".";
import "./style.less";

const Option = Select.Option;

const RuleOperator: React.FC<{
  value: QueryBuilderOperator;
}> = (props) => {
  let options = [
    { title: "等于", value: "=" },
    { title: "不等于", value: "<>" },
    { title: "小于", value: "<" },
    { title: "大于", value: ">" },
  ];
  return (
    <Select size="small" value={props.value}>
      {options.map((n) => (
        <Option value={n.value}>{n.title}</Option>
      ))}
    </Select>
  );
};

const QueryBuilder: React.FC = (props) => {
  const [form] = useForm();
  const [root, setRoot] = useState<QueryBuilderGroup>({
    id: "root",
    type: "group",
    childrens: [],
  });

  const isConnector = (
    node: QueryBuilderItem
  ): node is QueryBuilderConnector => {
    return (node as any).type == "connector";
  };

  const isGroup = (node: QueryBuilderItem): node is QueryBuilderGroup => {
    return (node as any).type == "group";
  };

  const isRule = (node: QueryBuilderItem): node is QueryBuilderRule => {
    return (node as any).type == "rule";
  };

  const build = (
    node: QueryBuilderItem,
    parent: QueryBuilderGroup | null = null,
    level: number = 0
  ) => {
    if (isConnector(node)) {
      return buildConnector(node, parent!);
    }
    if (isRule(node)) {
      return buildRule(node, parent!);
    }
    if (isGroup(node)) {
      return buildGroup(node, parent, level);
    }
  };

  const buildRoot = (node: QueryBuilderGroup, level: number) => {};

  const buildConnector = (
    node: QueryBuilderConnector,
    parent: QueryBuilderGroup
  ) => {
    const change = (value: QueryBuilderConnectorValue) => {
      node.value = value;
      setRoot({ ...root });
    };

    return (
      <div className="connector">
        <Select size="small" value={node.value} onChange={change}>
          <Option value="OR">OR</Option>
          <Option value="AND">AND</Option>
        </Select>
      </div>
    );
  };

  const buildRule = (node: QueryBuilderRule, parent: QueryBuilderGroup) => {
    let first = parent.childrens.findIndex((n) => n == node) == 0;
    let last =
      parent.childrens.findIndex((n) => n == node) ==
      parent.childrens.length - 1;

    return (
      <div className={classNames("rule", { first: first, last: last })}>
        <div className="rule-controls">
          <div className="rule-id">{node.id}</div>
          <div className="rule-dataset">
            <Input size="small" value={node.dataset} />
          </div>
          <div className="rule-datafield">
            <Input size="small" value={node.datafield} />
          </div>
          <div className="rule-operator">
            <RuleOperator value={node.operator} />
          </div>
          <div className="rule-value">{node.value}</div>
        </div>
        {buildActions(node, parent)}
      </div>
    );
  };

  const buildActions = (
    node: QueryBuilderRule | QueryBuilderGroup,
    parent: QueryBuilderGroup
  ) => {
    let len = parent.childrens.length;
    let index = parent.childrens.findIndex((n) => n == node);

    const moveUp = () => {
      let prev = parent.childrens[index - 2];
      parent.childrens[index - 2] = parent.childrens[index];
      parent.childrens[index] = prev;
      setRoot({ ...root });
    };

    const moveDown = () => {
      let next = parent.childrens[index + 2];
      parent.childrens[index + 2] = parent.childrens[index];
      parent.childrens[index] = next;
      setRoot({ ...root });
    };

    const remove = () => {
      if (len > 1) {
        if (index == len - 1) {
          parent.childrens.length = len - 2;
        } else {
          parent.childrens.splice(index, 2);
        }
      } else {
        parent.childrens = [];
      }
      setRoot({ ...root });
    };

    return (
      <div className="action">
        <div className="action-items">
          <span
            className={classNames("action-item", {
              disable: len == 1 || index == 0,
            })}
            onClick={moveUp}
          >
            <ArrowUpOutlined />
            <span>上移</span>
          </span>
          <span
            className={classNames("action-item", {
              disable: len == 1 || index == len - 1,
            })}
            onClick={moveDown}
          >
            <ArrowDownOutlined />
            <span>下移</span>
          </span>
          <span className="action-item" onClick={remove}>
            <CloseOutlined />
            <span>删除</span>
          </span>
        </div>
      </div>
    );
  };

  const buildGroup = (
    node: QueryBuilderGroup,
    parent: QueryBuilderGroup | null,
    level: number
  ) => {
    let classes = classNames("group", `group-level-${level}`);
    if (parent) {
      let first = parent.childrens.findIndex((n) => n == node) == 0;
      let last =
        parent.childrens.findIndex((n) => n == node) ==
        parent.childrens.length - 1;
      classes = classNames(classes, { first: first, last: last });
    }

    return (
      <div className={classes}>
        <div className="group-header">
          <div className="group-title">
            <Form.Item
              name={`group-${node.id}-name`}
              noStyle
              initialValue={node.id}
            >
              <Input size="small" />
            </Form.Item>
          </div>
          {parent && buildActions(node, parent)}
        </div>
        <div className="group-body">
          {node.childrens.map((n) => build(n, node, level++))}
        </div>
        <div className="group-footer">{buildAdder(node)}</div>
      </div>
    );
  };

  const buildAdder = (node: QueryBuilderGroup) => {
    const addGroup = () => {
      if (node.childrens.length > 0) {
        node.childrens.push({
          id: _.uniqueId("connector_"),
          type: "connector",
          value: "OR",
        });
      }
      let id = _.uniqueId("group_");
      node.childrens.push({
        id: id,
        type: "group",
        name: id,
        childrens: [],
      });
      setRoot({ ...root });
    };
    const addRule = () => {
      if (node.childrens.length > 0) {
        node.childrens.push({
          id: _.uniqueId("connector_"),
          type: "connector",
          value: "OR",
        });
      }
      node.childrens.push({
        id: _.uniqueId("rule_"),
        type: "rule",
        dataset: "用户表",
        datafield: "编号",
        operator: "=",
        value: "10334",
      });
      setRoot({ ...root });
    };

    return (
      <div className="adder">
        <Button.Group size="small">
          <Button onClick={addGroup}>
            <PlusSquareOutlined />
            添加分组
          </Button>
          <Button onClick={addRule}>
            <PlusOutlined />
            添加规则
          </Button>
        </Button.Group>
      </div>
    );
  };

  const onValuesChange = (changedValues: any, values: any) => {
    const find = (item: QueryBuilderItem, id: string): any => {
      if (id == item.id) {
        return item;
      }
      if (isGroup(item) && item.childrens && item.childrens.length > 0) {
        for (const n of item.childrens) {
          let result = find(n, id);
          if (result) {
            return result;
          }
        }
      }
    };
    for (const key in changedValues) {
      let [type, id, field] = key.split("-");
      let node = find(root, id);
      if (node) {
        node[field] = changedValues[key];
      }
    }
    console.log(root);
  };

  console.log(JSON.stringify(root));

  return (
    <div className="query-builder">
      <Form form={form} onValuesChange={onValuesChange}>
        {build(root)}
      </Form>
    </div>
  );
};

export { QueryBuilder };

Demo 效果

因为是 Demo 的原因，数据集、字段名、字段值等并没有怎么做，只有一个实例。

  • 第 1 页 共 1 页
作者的图片

YaoWorld

热爱编程，热爱生活。

前端工程师

中国-成都