AiCustomQuery 自定义查询组件

自定义查询（高级筛选）组件，允许用户通过可视化方式构建复杂的查询条件组合，支持 AND/OR 逻辑、多条件分组、查询方案保存/切换等功能。

通常由 AiCrudPage 内部集成使用，当 enableCustomQuery: true 时自动激活。

基础用法

<template>
  <AiCustomQuery
    ref="queryRef"
    :config-key="'user_query'"
    @apply="handleQueryApply"
    @clear="handleQueryClear"
  />
</template>

<script setup>
import { ref } from 'vue'
import { AiCustomQuery } from '@/components/ai-form'

const queryRef = ref(null)

function handleQueryApply(conditions) {
  console.log('应用查询条件:', conditions)
  // conditions 为结构化的查询条件数组
  // 调用列表接口，将 conditions 作为请求参数
}

function handleQueryClear() {
  console.log('清除查询条件')
  // 恢复默认列表查询
}
</script>

Props

属性	类型	默认值	说明
configKey	String	''	自定义查询配置键，用于从后端加载查询模板
fields	Array<object>	[]	查询字段定义数组（不传 configKey 时使用）

事件

事件名	参数	说明
apply	(conditions: Array\<object\>)	点击「执行查询」，传入结构化的查询条件
clear	-	点击「清除」按钮，恢复到无自定义查询状态

功能说明

查询条件构建

在抽屉面板中，用户可以通过以下方式构建查询条件：

1. 添加条件行：选择字段 → 选择运算符（等于/不等于/包含/大于/小于/范围等）→ 输入值
2. 添加条件组：支持 AND / OR 逻辑组合，可嵌套分组
3. 条件操作：每条条件支持删除、复制操作

查询方案管理

• 保存方案：将当前构建的查询条件保存为方案，下次可直接加载
• 加载方案：从下拉列表中选择已保存的方案
• 删除方案：管理不再使用的查询方案

组件交互流程

1. 用户点击工具栏「自定义查询」按钮
2. 打开抽屉面板
3. 构建查询条件（可加载已保存方案）
4. 点击「执行查询」→ emit('apply', conditions)
5. 父组件接收 conditions 后调用列表接口
6. 点击「清除」→ emit('clear')，恢复默认查询

配合 AiCrudPage 使用

<template>
  <AiCrudPage
    :api="'/api/user'"
    :columns="columns"
    :edit-schema="editSchema"
    :enable-custom-query="true"
    :custom-query-config-key="'user_advanced_query'"
    @load-list-success="onLoadSuccess"
  />
</template>

当 enableCustomQuery 为 true 时，AiCrudPage 会自动在工具栏显示「自定义查询」按钮，并将查询条件整合到列表请求参数中。

Fields 字段定义

当不传 configKey 时，通过 fields prop 直接传入查询字段：

const fields = [
  { field: 'username', label: '用户名', type: 'input' },
  { field: 'status', label: '状态', type: 'select', options: [
    { label: '启用', value: 1 },
    { label: '禁用', value: 0 }
  ] },
  { field: 'createTime', label: '创建时间', type: 'datetime' },
  { field: 'age', label: '年龄', type: 'number' }
]

每个 field 项中：

• field — 字段名
• label — 显示标签
• type — 对应支持的运算符集合：
  • input 类型：等于、不等于、包含、不包含、为空、不为空
  • number / datetime 类型额外支持：大于、小于、大于等于、小于等于、区间
  • select 类型：等于、不等于、包含、不包含