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 示例：

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

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 自定义字段类型匹配

未完成