zhouwx
2025-06-10 c8c99bf1f753e27c4d99a0ff6058ce16f973f9c4
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
<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>