<template>
|
<el-select v-if="isMounted" v-bind="$attrs" :remote-method="remoteMethod" @change="selectValueUser">
|
<div v-infinite-scroll="loadMore" style="overflow: hidden">
|
<el-option v-for="dict in list" :key="dict.id" :label="dict.username" :value="dict.username" />
|
</div>
|
</el-select>
|
</template>
|
|
<script lang="ts" setup>
|
import {defineEmits, onMounted, ref} from 'vue'
|
import {debounce} from "@/utils";
|
|
|
const props = defineProps({
|
// 传入对应的列表加载api
|
methods: {
|
type: Function,
|
default: ''
|
},
|
// 传入查询关键字
|
searchKey: {
|
type: String,
|
default: ''
|
},
|
})
|
|
const list = ref([
|
{
|
id: '',
|
username: '无上级账号'
|
}
|
])
|
const queryFrom = ref({
|
pageNum: 1,
|
totlePage: 1,
|
pageSize: 10,
|
userType: null,
|
companyId: null
|
})
|
|
const isMounted = ref(false)
|
onMounted(() => {
|
isMounted.value = true
|
})
|
|
const emit = defineEmits(["getval"]);
|
const selectValueUser = (val) => {
|
list.value.forEach(item => {
|
if(item.username === val){
|
emit('getval',item.id)
|
}
|
})
|
}
|
// 自定义远程搜索方法
|
const remoteMethod = (query: string) => {
|
queryFrom.value.pageNum = 1
|
list.value = []
|
queryFrom.value[props.searchKey] = query
|
getList(param.value,'')
|
}
|
|
// 调用props.methods获取下拉数据
|
const param = ref();
|
const getList = (val,type) => {
|
if(val){
|
param.value = val;
|
queryFrom.value.userType = val.userType;
|
queryFrom.value.companyId = val.companyId;
|
props.methods(queryFrom.value).then(res => {
|
const obj = {
|
id: '',
|
username: '无上级账号'
|
}
|
if(type === 'change'){
|
list.value = res.data.list.map(item => {
|
return {
|
...item,
|
username: item.username +'(' + item.name +')'
|
}
|
})
|
list.value.unshift(obj)
|
}else {
|
const data = res.data.list.map(item => {
|
return {
|
...item,
|
username: item.username +'(' + item.name +')'
|
}
|
})
|
list.value = [...list.value, ...data]
|
if(queryFrom.value.pageNum === 1){
|
list.value.unshift(obj)
|
}
|
|
}
|
queryFrom.value.totlePage = res.data.totalPage
|
})
|
}
|
}
|
|
// 获取初始数据
|
// getList(param.value,'')
|
|
// 无限滚动触底加载
|
const loadMore = debounce(() => {
|
if (queryFrom.value.pageNum >= queryFrom.value.totlePage) return
|
queryFrom.value.pageNum++
|
getList(param.value,'')
|
}, 200)
|
|
defineExpose({
|
getList
|
});
|
</script>
|
