QilinSearch组件

QilinSearch组件是一个搜索框组件，用于在页面中搜索内容。

基本使用

<template>
    <QilinSearch v-model:searchConfig="searchConfig" ref="searchConfigRef"></QilinSearch>\
</template>

<script setup>
import {reactive,ref} from "vue";

// 获取搜索表单配置项ref
const searchConfigRef=ref(null);

const searchConfig=reactive({
    elFormConfig:{
        labelPosition:"right",
        labelSuffix:"：",
        size:"default"
    },
    itemConfig:[
        {
            labelName:"姓名",
            dataName:"name",
            type:"input",
            inputType:"text"
        },
        {
            labelName:"身份",
            dataName:"identity",
            type:"select",
            dataListName:"identityList",
            multiple:true,
            filterable:false,
            collapseTags:true,
            clear:(item)=>{
                // console.log(item);
            }
        }
    ],
    moreConfig:{
        isShowMore:true
    },
    moreItemConfig:[
        {
            labelName:"出生日期",
            dataName:"birthday",
            type:"date",
            dateType:"date",
            format:"YYYY-MM-DD",
            valueFormat:"YYYY-MM-DD",
            width:160
        },
        {
            labelName:"工作区间",
            dataName:"workInterval",
            type:"date",
            dateType:"daterange",
            format:"YYYY-MM-DD",
            valueFormat:"YYYY-MM-DD"
        },
        {
            labelName:"参与项目",
            dataName:"projectName",
            type:"select",
            dataListName:"projectNameList"
        },
        {
            labelName:"项目所属",
            dataName:"projectOwn",
            type:"cascader",
            dataListName:"projectOwnList",
            cascaderProps:{
                label:"name",
                value:"id",
                children:"children"
            }
        }
    ],
    selectLists:{
        identityList:[
            {
                label:"学生",
                value:0,
                isHide:true
            },
            {
                label:"程序员",
                value:1
            },
            {
                label:"作者",
                value:2
            },
            {
                label:"打工人",
                value:3
            }
        ],
        projectNameList:[
            {
                label:"看守所、戒毒所、拘留所等项目",
                value:0
            },
            {
                label:"SDP零信任项目",
                value:1
            },
            {
                label:"动态应用安全防护系统BSG",
                value:2
            },
            {
                label:"云上贵州项目",
                value:3
            },
            {
                label:"红花街道h5项目",
                value:4
            },
            {
                label:"温州市党政机关信息化项目",
                value:5
            },
            {
                label:"U创办公管理系统",
                value:6
            },
            {
                label:"U创办公小程序项目",
                value:7
            }
        ],
        projectOwnList:[
            {
                name:"南京冠霆智能科技有限公司",
                id:1,
                children:[
                    {
                        name:"看守所项目",
                        id:11
                    },
                    {
                        name:"拘留所项目",
                        id:12
                    },
                    {
                        name:"戒毒所项目",
                        id:13
                    },
                    {
                        name:"安康医院项目",
                        id:14
                    }
                ]
            },
            {
                name:"亚信安全有限公司",
                id:2,
                children:[
                    {
                        name:"亚信智网有限公司",
                        id:21,
                        children:[
                            {
                                name:"SDP零信任项目",
                                id:211
                            },
                            {
                                name:"动态应用安全防护系统BSG",
                                id:212
                            }
                        ]
                    }
                ]
            },
            {
                name:"苏软科技（南京）有限公司",
                id:3,
                children:[
                    {
                        name:"云上贵州项目",
                        id:31
                    },
                    {
                        name:"红花街道h5项目",
                        id:32
                    },
                    {
                        name:"温州市党政机关信息化项目",
                        id:33
                    }
                ]
            },
            {
                name:"南京联创智慧城市科技有限公司",
                id:4,
                children:[
                    {
                        name:"U创办公管理系统",
                        id:41
                    },
                    {
                        name:"U创办公小程序",
                        id:42
                    }
                ]
            }
        ],
        residentialComplexNameList:[
            {
                label:"第一中学",
                value:1
            },
            {
                label:"第2中学",
                value:2
            },
            {
                label:"第3中学",
                value:3
            },
            {
                label:"第4中学",
                value:4
            }
        ]
    },
    buttonConfig:[
        {
            btnName:"查询",
            btnType:"primary",
            btnSize:"default",
            formRefName:searchConfigRef,
            btnClick:(formRef)=>{
                // console.log(formRef);
                console.log(searchConfig.submitData);
            }
        },
        {
            btnName:"重置",
            btnType:"default",
            btnSize:"default",
            formRefName:searchConfigRef,
            btnClick:(formRef)=>{
                console.log(formRef);
                formRef.resetSearchData();
            }
        }
    ],
    submitData:{
        name:"",
        identity:"",
        birthday:"",
        workInterval:"",
        projectName:"",
        projectOwn:""
    }
});
</script>

示例：

Props参数

searchConfig object

核心配置项，支持以下参数。

属性名	类型	说明	可选值	默认值
elFormConfig	object	el-form标签元素上的相关配置，详见elFormConfig	-	-
itemConfig	array	表单内每个组件的配置项，详见itemConfig	-	-
moreConfig	object	表单的更多配置项，详见moreConfig	-	-
selectLists	object	下拉数据集，详见selectLists	-	-
buttonConfig	array	表单内的按钮配置项，详见buttonConfig	-	-
submitData	object	提交到后台的数据集，详见submitData	-	-

elFormConfig object

el-form标签元素上的相关配置

属性名	类型	说明	可选值	默认值
labelPosition	string	label标签的位置	left/right/top	left
labelSuffix	string	label标签的后缀	-	：
size	string	表单内组件的尺寸	large/small/default	default
className	string	el-form的自定义类名	-	-

itemConfig object

表单内每个组件的配置项。

属性名	类型	说明	可取值	默认值
labelName	string	label标签的文字	-	默认名称
dataName	string	对应后台的数据字段名	-	-
isHide	boolean	是否隐藏该表单项	-	false
hideLabel	boolean	是否隐藏该表单项的label标签	-	false
labelNameText	string	label标签的额外字段	-	-
type	string	表单组件的类型	input/select/date/cascader/slot	input
inputType	string	input的类型，当且仅当type=input时生效	text/number	text
clearable	boolean	是否显示可以一键清空按钮	-	true
prefixIcon	string	输入框前置内置图标，当且仅当type=input时生效	-	-
prefixSlotName	string	输入框前置内置图标插槽名称，当且仅当type=input时生效	-	-
suffixIcon	string	输入框后置内置图标，当且仅当type=input时生效	-	-
suffixSlotName	string	输入框后置内置图标插槽名称，当且仅当type=input时生效	-	-
dataListName	string	下拉数据名称对应selectLists中属性名，当type=select时生效	-	-
multiple	boolean	是否可以多选，当type=select、checkbox时生效	-	false
collapseTags	boolean	多选时是否将选中值按文字的形式展示，当type=select时生效	-	false
filterable	boolean	是否可搜索，当type为select生效	-	true
cascaderProps	object	配置级联选择器的选项，具体的配置参数详见element官网el-cascader文档，当type=cascader时生效	-	-
remote	boolean	其中的选项是否从服务器远程加载，当type=select时生效	-	false
remoteMethod	function	定义远程搜索方法，启用远程搜索需要开filterable和remote设置为true，当type=select时生效	-	-
remoteShowSuffix	boolean	远程搜索模式下是否显示后缀图标，当type=select时生效	-	true
loading	boolean	是否正在从远程获取数据，加载完毕后需要将其重置为false，当type=select时生效	-	false
loadingText	string	远程加载数据时显示的文本，当loading为true时生效	-	加载中
customLabelName	string	下拉选项中自定义label对应字段值，当type=select时生效	-	label
customValueName	string	下拉选项中自定义value对应字段值，当type=select时生效	-	value
dateType	string	日期选择器的类型，当type=date时生效	year/years/month/date/dates/datetime/week/datetimerange/daterange/monthrange	date
defaultTime	Date/[Date,Date]	选择日期后的默认时间值，默认8点半，当type=date且为范围选择时生效	-	new Date(2000,1,1,8,30,0)
disabledDate	function	设置禁用日期的方法，一般要配合日期组件的calendar-change事件，当且仅当type=date时生效	(item,date)=>{}	-
format	string	显示在输入框中的格式化时间设置，当type=date时生效	-	YYYY-MM-DD HH:mm:ss
valueFormat	string	传给后台的格式化时间设置，当type=date时生效	-	YYYY-MM-DD HH:mm:ss
startPlaceholder	string	日期开始提示语，当type=date且dateType=***range时生效	-	-
endPlaceholder	string	日期结束提示语，当type=date且dateType=***range时生效	-	-
rangeSeparator	string	时间选择器的范围分隔符，当type=date且dateType=***range时生效	-	至
width	number	表单每项组件的宽度，单位为px	-	150
className	string	表单每项组件即el-form-item的自定义类名	-	-
itemStyle	string	表单每项组件即el-form-item的自定义样式	-	-
disabled	boolean	是否禁用该项	-	false
slotName	string	slot具名插槽名称，当type=slot时生效	-	-
placeholder	string	表单占位符提示语	-	-

moreConfig object

更多配置项扩展。

属性名	类型	说明	可取值	默认值
isShowMore	boolean	是否显示展开收缩功能	-	false
moreItemConfig	array	展开时搜索表单配置项，同itemConfig属性一致	-	-

selectLists object

下拉数据集，当type=select、cascader时其内属性名须对应dataListName的值。

buttonConfig array

表单底部操作提交按钮相关配置项。

属性名	类型	说明	可取值	默认值
btnName	string	按钮名称	-	按钮
btnType	string	按钮类型	primary/success/warning/danger/info/text	default
btnSize	string	按钮尺寸	large/small/default	default
className	string	按钮自定义类名	-	-
formRefName	DOM	表单元素的DOM	-	-
btnClick	function	按钮点击事件	(formRef)=>{}	-

submitData object

提交到后台的数据集，即每个itemConfig的dataName值组成的对象。

Events

组件的暴露事件。

事件名	类型	参数	说明
-	function	item,value\event\undefined,undefined\ref	每个itemConfig表单元素的change、blur、clear等事件，配置在itemConfig中，事件名就是他们的属性名，如change

Exposes

组件的暴露方法。

方法名	类型	参数	说明
resetSearchData	function	-	对整个表单的内容进行重置

Slots

组件的插槽。

插槽名	数据值	说明
{item.slotName}	data:{scope,item}	设置itemConfig配置项中的type为slot或者itemSlot时即可使用，用于需要对元素某项进行特殊处理的需求，其中设置的slotName属性值就是该插槽名