|
|
|
@ -0,0 +1,77 @@
|
|
|
|
|
<template>
|
|
|
|
|
<!-- 客户选择 -->
|
|
|
|
|
<el-select
|
|
|
|
|
v-model="valueName"
|
|
|
|
|
placeholder="请输入客户"
|
|
|
|
|
:remote-method="remoteMethod"
|
|
|
|
|
remote-show-suffix
|
|
|
|
|
remote
|
|
|
|
|
clearable
|
|
|
|
|
reserve-keyword
|
|
|
|
|
filterable
|
|
|
|
|
:loading="Loading"
|
|
|
|
|
@change="onSelectChange"
|
|
|
|
|
>
|
|
|
|
|
<el-option v-for="item in userSelectList" :key="item.id" :label="item.name" :value="item.id" />
|
|
|
|
|
</el-select>
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
<script lang="ts" setup>
|
|
|
|
|
import { ref, onMounted, toRefs } from 'vue'
|
|
|
|
|
import * as CustomerApi from '@/api/heli/customer'
|
|
|
|
|
interface UserVO {
|
|
|
|
|
id: number
|
|
|
|
|
username: string
|
|
|
|
|
nickname: string
|
|
|
|
|
}
|
|
|
|
|
const props = defineProps({
|
|
|
|
|
initialUserList: {
|
|
|
|
|
type: Array as PropType<UserVO[]>,
|
|
|
|
|
default: () => []
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
const valueName: any = ref() //选中的值
|
|
|
|
|
const userList = ref<UserApi.UserVO[]>([]) // 用户列表
|
|
|
|
|
const userSelectList = ref<UserApi.UserVO[]>([])
|
|
|
|
|
const Loading = ref(false)
|
|
|
|
|
|
|
|
|
|
// 初始化用户列表
|
|
|
|
|
onMounted(async () => {
|
|
|
|
|
const userParams = {
|
|
|
|
|
pageNo: 1,
|
|
|
|
|
pageSize: 10,
|
|
|
|
|
code: undefined,
|
|
|
|
|
brief: undefined,
|
|
|
|
|
status: undefined
|
|
|
|
|
}
|
|
|
|
|
try {
|
|
|
|
|
const data = await CustomerApi.getCustomerPage(userParams)
|
|
|
|
|
console.log(data.list)
|
|
|
|
|
userList.value = data.list
|
|
|
|
|
// 设置初始值,如果需要的话
|
|
|
|
|
remoteMethod('')
|
|
|
|
|
} catch (error) {
|
|
|
|
|
console.error(error)
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
const remoteMethod = (query: any) => {
|
|
|
|
|
if (query) {
|
|
|
|
|
Loading.value = true
|
|
|
|
|
setTimeout(() => {
|
|
|
|
|
Loading.value = false
|
|
|
|
|
userSelectList.value = userList.value
|
|
|
|
|
.filter((item) => item.name.toLowerCase().includes(query.toLowerCase()))
|
|
|
|
|
.slice(0, 10) //只显示前10个
|
|
|
|
|
}, 200)
|
|
|
|
|
} else {
|
|
|
|
|
userSelectList.value = userList.value.slice(0, 10)
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// const onSelectChange = (newValue: number | null) => {
|
|
|
|
|
// // console.log(newValue)
|
|
|
|
|
// emit('update:valueName', newValue)
|
|
|
|
|
// valueName.value = newValue
|
|
|
|
|
// }
|
|
|
|
|
</script>
|