AiSearch 搜索表单组件

基于 AiForm 封装的专用搜索表单组件，集成搜索/重置按钮、折叠展开功能。通常在 AiCrudPage 内部使用，也可独立嵌入任意页面。

基础用法

<template>
  <div>
    <AiSearch
      ref="searchRef"
      :schema="searchSchema"
      @search="handleSearch"
      @reset="handleReset"
    >
      <template #extra-actions="{ formData }">
        <n-button size="small" @click="advancedSearch">高级筛选</n-button>
      </template>
    </AiSearch>
  </div>
</template>

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

const searchRef = ref(null)

const searchSchema = [
  { field: 'keyword', label: '关键词', type: 'input', placeholder: '请输入' },
  { field: 'status', label: '状态', type: 'select', options: [
    { label: '全部', value: '' },
    { label: '启用', value: 1 },
    { label: '禁用', value: 0 }
  ] },
  { field: 'dateRange', label: '日期范围', type: 'datetime', span: 2 }
]

function handleSearch(formData) {
  console.log('搜索参数:', formData)
  // 调用列表查询
}

function handleReset() {
  console.log('重置搜索')
}
</script>

Props

属性	类型	默认值	说明
schema	Array<object>	[]	搜索字段配置，格式同 AiForm schema
gridCols	Number	4	搜索表单栅格列数
labelPlacement	String	'left'	标签位置：'left' | 'top'
labelWidth	String | Number	'auto'	标签宽度
size	String	'medium'	表单项尺寸：'small' | 'medium' | 'large'
enableCollapse	Boolean	true	是否启用折叠（字段数超过 maxVisibleFields 时生效）
maxVisibleFields	Number	3	折叠前最大可见字段数
searchText	String	'搜索'	搜索按钮文本
resetText	String	'重置'	重置按钮文本
searchLoading	Boolean	false	搜索按钮加载状态
resetLoading	Boolean	false	重置按钮加载状态
yGap	Number	10	表单项行间距（px）
context	Object	{}	表单上下文数据
value	Object	{}	表单数据（支持 v-model:value 双向绑定）

事件

事件名	参数	说明
search	(formData)	点击搜索按钮，传入当前表单数据
reset	-	点击重置按钮（表单已重置为初始值）
field-change	(field, value, formData)	任意字段值变化

插槽

<AiSearch :schema="searchSchema">
  <!-- 搜索/重置按钮右侧额外操作 -->
  <template #extra-actions="{ formData }">
    <n-button size="small" secondary @click="exportCurrent">
      导出当前结果
    </n-button>
  </template>

  <!-- 覆盖搜索表单中某个字段的渲染 -->
  <template #customField="{ field, value }">
    <n-tree-select
      v-model:value="searchData.deptId"
      :options="deptTree"
      placeholder="选择部门"
    />
  </template>
</AiSearch>

方法

通过 ref 获取组件实例：

const searchRef = ref(null)

// 触发搜索（使用当前表单数据）
searchRef.value.search()

// 触发重置
searchRef.value.reset()

// 获取当前搜索表单数据
const formData = searchRef.value.getFormData()

折叠机制

当 enableCollapse 为 true 且 schema 数组长度超过 maxVisibleFields 时，搜索表单会自动折叠：默认只显示前 maxVisibleFields 个字段，其余字段隐藏在展开区域中，点击「展开」按钮后显示完整表单。

<!-- 6 个搜索字段，仅显示前 3 个 -->
<AiSearch
  :schema="searchSchema"
  :enable-collapse="true"
  :max-visible-fields="3"
/>