npm package: @careteam/care-ui-querybuilder
Description: The React <QueryBuilder /> component for constructing queries
Latest version: 0.0.21

# querybuilder


:::demo demo/sql.jsx sql
:::

:::demo demo/sql-named.jsx sql-named
:::

:::demo demo/custom.jsx 自定义
:::

:::demo demo/disabled.jsx 不可选
:::

## 如何使用

```
  import Querybuilder from '@tencent/care-ui-querybuilder';
  
  // 假设要样式的话
  import '@tencent/care-ui-querybuilder/lib/index.less';

```

demo 

```
import React from 'react';
import { registerFormField, connect } from '@formily/react-schema-renderer';
import Querybuilder from '@tencent/care-ui-querybuilder';
import '@tencent/care-ui-querybuilder/dist/index.less';

export default function QueryFomily(props) {
  const { value, onChange, ...options } = props;

  return (
    <div className="querybuilder-formily">
      <Querybuilder value={value} onChange={onChange} {...options} />
    </div>
  );
}

registerFormField(
  'querybuilder',
  connect()(QueryFomily),
);

```

or

```
import React, { useState } from 'react';
import QueryBuilder from '../src';
const fields = [
  { name: 'name', type: 'VARCHAR' },
  { name: 'code', type: 'TINYINT' },
  { name: 'isOk', type: 'BOOLEAN' },
];

const defaultValue = {
  id: 'g-Z5hBie93WIlPmk1MWwOsJ',
  rules: [
    {
      id: 'r-4EmPOzphlXOFbN8xe7RHO',
      field: 'name',
      value: 1,
      operator: '=',
    },
    {
      id: 'r-o5qpJfAZgTn9u1U9lW8D8',
      field: 'name',
      value: '33',
      operator: '=',
    },
  ],
  combinator: 'and',
  not: false,
};

export default function SQL() {
  const [value, setValue] = useState(defaultValue);

  function onChange(newValue) {
    console.log('onchange', newValue);
    setValue(newValue);
  }

  return (
    <div>
      <div className="demo-title">json</div>
      <QueryBuilder fields={fields} format="json" onChange={onChange} value={value}/>
    </div>
  );
}

```

## props 

### fields

```
[
  {
    name: '字段name',
    label: '展示文案(可选)',
    type: 'VARCHAR(sql type)'
  }
]
```

### format 

|  值        | 说明        |  示例  |
|  ----      | ----       | -----  |
| sql        | 数据库query | (a = 1 and b = 2) |
| sql-named  |            |  见下面 |
| json     |            |  见下面 |

sql-named 示例：

```json
{
  sql: '(name = :name_1 and name like :name_2)',
  params: {
    name_1: '\'1\'',
    name_2: '\'%2%\''
  }
}
```

json 示例：

```json
{
  id: 'g-Z5hBie93WIlPmk1MWwOsJ',
  rules: [
    {
      id: 'r-4EmPOzphlXOFbN8xe7RHO',
      field: 'name',
      value: 1,
      operator: '=',
    },
    {
      id: 'r-o5qpJfAZgTn9u1U9lW8D8',
      field: 'name',
      value: '33',
      operator: '=',
    },
  ],
  combinator: 'and',
  not: false,
}
```

### controlElements 自定义ui (Object) 

不修改则使用默认展示

|  值                  | 说明        |
|  ----                | ----       |
| addGroupAction       | 添加组      |
| removeGroupAction    | 删除组      |
| addRuleAction    | 添加规则    |
| removeRuleAction    | 删除规则    |
| combinatorSelector    | 连接类型    |
| fieldSelector    | 字段选择    |
| operatorSelector    | 操作符    |
| valueEditor    | 值编辑    |

具体可看 `src/control` 中的实现

如:
```
<QueryBuilder controlElements={{operatorSelector: xxx}}/>
```

### fieldType 字段类型 

未完成，暂时只支持 sql类型

normal

sql

### fieldTypeMap 自定义字段类型匹配
未完成