跳到主要内容

查询构建器 Vue

@aiao/rxdb-model-vue 提供 Vue 版本的查询构建器组件与 composable，底层模型与类型来自 @aiao/rxdb-model。

安装​

npm install @aiao/rxdb-model @aiao/rxdb-model-vue

基础用法​

使用组件​

<script setup lang="ts">
import { QueryBuilder } from '@aiao/rxdb-model-vue';
import type { FieldMetadata } from '@aiao/rxdb-model';

const fields: FieldMetadata[] = [
  { name: 'name', displayName: '姓名', type: 'string' },
  { name: 'age', displayName: '年龄', type: 'number' },
  { name: 'active', displayName: '激活', type: 'boolean' }
];

function onQueryChange(query: unknown) {
  console.log('查询:', query);
}
</script>

<template>
  <QueryBuilder
    :fields="fields"
    :max-depth="3"
    @query-change="onQueryChange"
    @validation-change="v => console.log('校验:', v)"
  />
</template>

使用 Composable​

<script setup lang="ts">
import { useQueryBuilder } from '@aiao/rxdb-model-vue';

const {
  rootGroup,
  validation,
  fields,
  hasRules,
  addRule,
  addGroup,
  remove,
  updateRule,
  updateCombinator,
  clear,
  loadQuery,
  moveItem,
  toRxDBQuery
} = useQueryBuilder<User>({
  fields: [
    { name: 'name', displayName: '姓名', type: 'string' },
    { name: 'age', displayName: '年龄', type: 'number' }
  ],
  maxDepth: 3,
  onQueryChange: query => fetchData(query)
});

function handleAddRule() {
  addRule(rootGroup.value?.id, {
    field: 'name',
    operator: '=',
    value: ''
  });
}
</script>

<template>
  <button @click="handleAddRule">添加条件</button>
  <button @click="loadQuery(null)">重置</button>
  <button @click="clear">清空</button>
  <pre>{{ JSON.stringify(toRxDBQuery(), null, 2) }}</pre>
</template>

Composable API​

useQueryBuilder​

function useQueryBuilder<T extends object>(options?: UseQueryBuilderOptions<T>): UseQueryBuilderReturn<T>;

Options​

  • schema: SchemaInfo：Schema 信息
  • fields: FieldMetadata[]：字段列表，默认空数组
  • initialQuery: RuleGroup<T> | QueryBuilderRuleGroup<T>：初始查询
  • maxDepth: number：最大嵌套层级，默认 5
  • onQueryChange(query)：查询变更回调
  • onValidationChange(result)：校验变更回调

返回值​

  • rootGroup: ShallowRef<QueryBuilderRuleGroup<T> | undefined>：根规则组
  • validation: ShallowRef<ValidationResult | undefined>：校验结果
  • fields: Ref<FieldMetadata[]>：字段列表
  • hasRules: ComputedRef<boolean>：当前是否已有规则
  • addRule(parentId, rule)：添加规则
  • addGroup(parentId)：添加分组
  • remove(id)：删除规则或分组
  • updateRule(id, updates)：更新规则
  • updateCombinator(groupId, combinator)：切换 AND/OR
  • clear()：清空所有规则
  • loadQuery(query | null)：加载查询
  • toRxDBQuery()：导出 RuleGroup<T>
  • moveItem(itemId, targetGroupId, targetIndex)：拖拽排序

useSchemaFromEntity​

从 RxDB EntityMetadata 自动解析字段列表：

<script setup lang="ts">
import { useSchemaFromEntity } from '@aiao/rxdb-model-vue';
import { getEntityMetadata } from '@aiao/rxdb';

const metadata = getEntityMetadata(Todo);
const { fields, hasFields } = useSchemaFromEntity(metadata, {
  includeForeignKeys: false,
  includeRelations: true
});
</script>

<template>
  <QueryBuilder v-if="hasFields" :fields="fields" />
  <p v-else>加载中...</p>
</template>
选项类型默认值说明
enabledbooleantrue是否启用解析
includeForeignKeysbooleanfalse包含外键字段
includeRelationsbooleanfalse包含关系字段

QueryBuilder 组件额外 Props​

组件在 composable 参数之外，还支持：

  • class?: string
  • height?: string，默认 80vh
  • enableDrag?: boolean，默认 true
  • enableCollapse?: boolean，默认 true
  • theme?: QueryBuilderTheme