查询筛选

介绍

搜索查询栏组件

API

Props

参数名	描述	类型	默认值
status	默认状态，组件的状态	'default'|'hide'|'destroy'	'default'
showTitle	显示名称	boolean	true
title	名称	string	'页面名称'
leftExtraSlot	左侧插槽	boolean	false
showTooltip	显示说明文字	boolean	false
tooltip	说明文字	string	''
filtersSetting	筛选设置	boolean	false
storagePolicy	存储策略	'local'|'api'	'local'
saveSettingsApi	保存设置的 api，未设置为系统默认接口	string	'/api/system/pageTable/saveTableInfo'
querySettingsApi	查询设置的 api，未设置为系统默认接口	string	'/api/system/pageTable/fieldListQuery'
showFilter	筛选面板-开启	boolean	true
filterColumns	查询字段	Array<{ name: string }>	[{'name': 'name'}]
layout	布局方式	'horizontal' | 'vertical'	'horizontal'
customLayout	自定义布局	CustomLayout	{xs:24,sm:12,md:8,lg:8,xl:6,xxl:4}
expand	默认展开	boolean	true
defaultValues	默认值	Record<string, any>	-
showSimpleSearch	是否开启搜索框	boolean	true
searchColumns	查询字段	Array<{ name: string }>	[{'name': 'name'}]
showAdvanceFilter	开启高级筛选	boolean	true
advanceColumns	高级筛选查询字段	Array<{ name: string }>	[]
queryApi	筛选条件查询 api	string	'/api/system/schemeItem/list'
saveApi	筛选条件保存 api	string	'/api/system/schemeItem/save'
updateApi	筛选条件编辑 api	string	'/api/system/schemeItem/update'
deleteApi	筛选条件删除 api	string	'/api/system/schemeItem/remove'
baseStyle	自定义样式 , 表格整体自定义样式	string	-
customClass	类名绑定	string	-
uniqueId	唯一标识 , 组件的唯一标识	string	-
loop	循环数据 , 循环渲染设置	Loop	{}

Events

事件名	描述	参数
onSearch	用户搜索事时件触发	ctx params: SearchParams loop: LoopParams
onReset	用户重置时事件触发	ctx params: { queryValues: {} } loop: LoopParams

Type

// 自定义布局配置
type CustomLayout = {
  xs: number, // < 576px 响应式栅格
  sm: number, // >= 576px 响应式栅格
  md: number, // >= 768px 响应式栅格
  lg: number, // >= 992px 响应式栅格
  xl: number, // >= 1200px 响应式栅格
  xxl: number, // >= 1600px 响应式栅格
};

// 查询参数
type SearchParams = {
  from: "search" | "advance", // 搜索类型 search:普通搜索，advance:高级搜索
  queryValues: Record<string, any>, // 查询参数
  searchType: "filterSearch" | "simpleSearch" | "advancedSearch", // 查询类型 filterSearch:筛选查询，simpleSearch:简单搜索，advancedSearch:高级搜索
};

// 循环变量数据参数
type LoopParams = {
  indexName: string,
  paramName: string,
  ref: ComputedRefImpl, // 全部的循环变量数据
  row: number,
  rowIndex: number,
}[];

// 循环
type Loop = {
  data: any[],
  paramName: string,
  indexName: string,
  key: string,
};