一款基于vue3+ts+vite的平铺式搜索组件,解决多搜索条件占位过宽的问题,目前支持文本框、下拉选择、日期范围选择、文本域, 支持默认显示搜索条件和更多条件。
1.新增rightSlot右侧插槽
...还没想好🤣
npm install searchv3view
import searchView from "searchv3view"
import "searchv3view/style.css"
const app = createApp(App)
app.use(searchView)
<search-view
ref="searchViewRef"
:conditionArray="conditionArray"
@ready="onReady"
:fetchFunction="fetchFunction"
@response="onResponse"
>
<template #rightSlot>
<el-button>导出</el-button>
</template>
</search-view>
平铺式搜索组件,支持默认查询条件和更多查询条件,支持input文本框、select下拉框、daterange/datetimerange时间范围、inputs文本域。后续会加上date/datetime类型。
{
autoFetch: true //默认true 是否搜索条件变化后自动执行搜索
conditionArray: [
{
conditionItem
}
] // 搜索条件List conditionItem格式参考下方
seatrchConfig: { //是否显示左侧关键字搜索框
show: false, //是否展示
key: "xxx", //是否需要传给后台额外的key
placeholder: "xxx" //placeholder
},
fetchFunction: Fcuntion //查询方法,
vagueKey: "", //模糊搜索条件list key 默认vagueFields
}
{
label: "", //搜索条件名称
key: "", //搜索条件传给后台的key
parentKey: "", //级联选择时父节点的key
default: true, //是否默认展示
searchItem: {
isRequire: false, //是否必填
isMultiple: false, //是否支持多选
type: "", //类型 类型参考下方2.1(*必填)
defaultOptions: [], //type 为select时默认选项
fetchFunction: function //type为select时异步请求的方法 返回数据格式如2.2.2
remoteDefaultValue: function // type为select时异步请求的方法 参考2.2.3
value: "" ,//默认值
timeType: '' //type为时间格式时有效,默认时间格式为时间戳,如果需要yyyy-MM-dd格式 传string
keyMap: [start, end] // type为时间范围时有效 不传默认用key:[] 传的时候 会把key[]分别解析给start和end
valueType: "string | array" //type为inputs文本域时有效,默认为array 传给后台的格式数组或string
separator: "" // type为inputs文本域时有效, 当valueType为string时,字符串的分割符
},
},
[
{
value: "文本框",
key: "inputBox",
default: true,
searchItem: {
type: "input",
value: "",
vagueConfig: {
show: false, //是否显示模糊搜索配置
default: true, //默认值
disabled: true //是否禁用切换模糊配置
}
}
},
{
value: "选择框",
key: "sex",
default: true,
searchItem: {
type: "select",
isMultiple: false, //是否多选
defaultOptions: [
{
id: "",
text: "全部"
},
{
id: "1",
text: "男"
},
{
id: "2",
text: "女"
}
],
value: ""
}
},
{
value: "工厂",
key: "divisonNo",
default: true,
searchItem: {
type: "select",
isMultiple: false,
remote: false,
autoLoad: false,
fetchFunction: (query, keyword) => {
console.log("参数====", query, keyword)
return new Promise((resolve,reject) => {
setTimeout(() => {
resolve({
data: {
body: [
{
text: "临港",
id: 1
},
{
text: "南京",
id: 2
},
{
text: "郑州",
id: 3
},
{
text: "河南",
id: 5
}
]
}
})
}, 1000)
})
},
value: 2,
remoteDefaultValue: (res) => {
return {
defaultOptions: res.data.body
}
}
}
},
{
value: "车间",
key: "workshopNo",
parentKey: "divisonNo",
default: false,
searchItem: {
type: "select",
independent: true,
isRequire: false,
isMultiple: false,
isFilterable: false,
fetchFunction: (data, query) => {
console.log("data====", data)
let list = [
{
text: "上海车间",
id: 1
},
{
text: "南京车间",
id: 2
},
{
text: "广州车间",
id: 3
},
{
text: "厦门车间",
id: 4
},
{
text: "香港车间",
id: 5
}
]
return new Promise((resolve,reject) => {
setTimeout(() => {
let arr = list.filter(u => u.id == data.divisonNo)
resolve({
data: {
body: arr
}
})
}, 1000)
})
}
}
},
{
value: "新增时间",
key: "addTime",
default: true,
timeType: 'string',
searchItem: {
isRequire: false,
type: "date",
valueFormat: {
dateFormat: 'yyyy-MM-dd'
},
format: {
dateFormat: 'yyyy-MM-dd'
}
}
},
{
value: "具体时间",
key: "createTime",
default: true,
searchItem: {
isRequire: false,
type: "datetime"
}
},
{
value: "创建时间",
key: "createTime",
default: true,
timeType: 'string',
dateRange: 180,
searchItem: {
isRequire: false,
type: "datetimerange",
keyMap: ['startTime', 'endTime']
}
},
{
value: "更新时间",
key: "updateTime",
default: true,
searchItem: {
isRequire: false,
type: "datetimerange",
keyMap: ['startUpdateTime', 'endUpdateTime']
}
},
{
value: "文本域",
key: "remark",
default: true,
searchItem: {
type: "inputs",
valueType: 'string',
separator: "----",
placeholder: "哈哈哈"
}
},
{
value: "自定义",
key: "diyKey",
default: true,
searchItem: {
type: "slot",
slotName: "customSlot",
value: ""
}
}
]
MIT
Smile1k809995843@qq.com
wx: 15996330955