<script>
/**
* 连词搜索功能
*
* 使用方法：
*
* 1.
* <ConjunctionSearch :option="enterpriseList" label="companyName" value="companyInfoId" @itemClick="selectItem" @search="searchChange" @scrollEnd="scrollEnd" :loading="searchLoading" placeholder="企业名称/统一社会信用代码" />
*
2.
<ConjunctionSearch :option="enterpriseList" label="companyName" value="companyInfoId" @itemClick="selectItem" @search="searchChange" @scrollEnd="scrollEnd" :loading="searchLoading" ref="conjunctionSearchRef" placeholder="企业名称/统一社会信用代码" >
<div>自定义结果内容</div>
<ConjunctionSearch/>
// 搜索
searchChange(val) {
this.reqParams.keywords = val
this.reqParams.startIndex = 1
this.getPageList()
}
//滚动到底部
scrollEnd() {
this.reqParams.startIndex += 1
if (this.enterpriseList.length >= this.total) {
this.searchLoading = 'end'
return
}
this.getPageList()
}
// 请求接口
getPageList() {
this.searchLoading = 'fetch'
advanceSearchApi(this.reqParams).then(res => {
if (res.code == 0) {
if (this.reqParams.startIndex == 1) {
this.enterpriseList = res.data.dataList
} else {
this.enterpriseList = this.enterpriseList.concat(res.data.dataList)
}
this.total = res.data.total
}
this.searchLoading = this.enterpriseList.length >= this.total ? 'end' : 'success'
})
}
属性
@loading 加载中效果 state-开始 fetch-加载中 success-加载完成 end-结束
@placeholder 输入框占位符
@option 下拉选择项
@label 下拉选项的label
@value 下拉选项的value
@noData 是否暂无数据
事件
@itemClick 选中项
@search 搜索
@scrollEnd 滚动到底部
*
*
*/
export default {
props: {
// 加载中效果 state-开始 fetch-加载中 success-加载完成 end-结束
loading: {
type: String,
default: 'state'
},
// 输入框占位符
placeholder: {
type: String,
default: '请输入'
},
// 下拉选择项
option: {
type: Array,
default: () => []
},
// 下拉选项的label
label: {
type: String,
default: 'label'
},
// 下拉选项的value
value: {
type: String,
default: 'value'
},
// 是否暂无数据
noData: {
type: Boolean,
default: false
}
},
data() {
return {
// 搜索关键词
keywords: '',
// 防抖定时器
timer: null,
// 搜索时的加载状态
searchLoading: false,
// 滚动加载中效果 state-开始 fetch-加载中 success-加载完成 end-结束
scrollLoading: 'state',
// 控制下拉框显示/隐藏
isCloseConjunction: false,
// 是否暂无数据
isNoDataShow: false,
// 选中项后赋值给keywords不请求接口
isClick: false,
// 选中的数据
selectData: {},
// 是否滚动到底部
isScrollEnd: false
}
},
watch: {
// 搜索关键词
keywords() {
// 选中项后赋值给keywords不请求接口
if (this.isClick) return
this.isCloseConjunction = true
// 防抖
if (this.timer) clearTimeout(this.timer)
this.timer = setTimeout(() => {
this.$emit('search', this.keywords)
}, 500)
},
// 搜索时的加载状态
loading: {
handler(val) {
this.scrollLoading = val
if (val == 'fetch') {
this.searchLoading = true
} else if (['success', 'end'].includes(val)) {
this.searchLoading = false
this.isScrollEnd = false
}
}
},
// 默认数据
option: {
handler(val) {
this.isNoDataShow = val.length == 0
}
}
},
mounted() {
document.addEventListener('click', this.handleClickOutside)
},
beforeDestroy() {
document.removeEventListener('click', this.handleClickOutside);
},
methods: {
// 点击外部关闭下拉框
handleClickOutside(e) {
if (!this.$el.contains(e.target)) {
this.isCloseConjunction = false
}
},
// 滚动到底部加载
scrollEvent(e) {
if (['fetch', 'end'].includes(this.scrollLoading)) return
let scrollTop = e.target.scrollTop
let scrollHeight = e.target.scrollHeight
let clientHeight = e.target.clientHeight
if (scrollTop + clientHeight >= scrollHeight) {
this.scrollLoading = 'fetch'
this.isScrollEnd = true
this.$emit('scrollEnd')
}
},
// 选中结果
selectItem(row) {
this.selectData = row
this.keywords = row[this.label]
this.isClick = true
this.$emit('itemClick', row)
this.close()
},
// 关闭下拉框
close() {
this.isCloseConjunction = false
},
// 输入框聚焦
inputFocus() {
this.isCloseConjunction = true
this.isClick = false
},
// 按钮点击
btnClick() {
if (!this.keywords) {
return
}
this.$emit('search', this.keywords)
},
}
}
</script>
400 186 1886
