103 lines
2.0 KiB
Vue
103 lines
2.0 KiB
Vue
<template>
|
|
<el-select
|
|
v-model="selectedId"
|
|
:placeholder="placeholder"
|
|
clearable
|
|
remote-show-suffix
|
|
filterable
|
|
remote
|
|
:remote-method="handleSearch"
|
|
:loading="state.loading"
|
|
@visible-change="handleVisibleChange"
|
|
@change="handleChange"
|
|
>
|
|
<el-option v-for="item in state.optionList" :key="item.userId" :label="`${item.name}-${item.phone}`" :value="item.userId">
|
|
<div class="flex items-center">
|
|
<div class="color-primary">{{ item.name }}</div>
|
|
<div class="pl5 color-success">{{ item.phone }}</div>
|
|
</div>
|
|
</el-option>
|
|
</el-select>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { reactive, watch } from "vue"
|
|
import * as userApi from "/@/api/admin/user"
|
|
|
|
interface User {
|
|
userId: string
|
|
name: string
|
|
phone: string
|
|
}
|
|
|
|
interface Props {
|
|
placeholder?: string
|
|
}
|
|
|
|
const props = withDefaults(defineProps<Props>(), {
|
|
placeholder: "请输入",
|
|
})
|
|
|
|
const emit = defineEmits<{
|
|
(e: "change", user: User | undefined): void
|
|
}>()
|
|
|
|
const selectedId = defineModel<string | number>()
|
|
|
|
const state = reactive({
|
|
loading: false,
|
|
optionList: [] as User[],
|
|
searchParams: {
|
|
nameOrPhone: "",
|
|
current: 1,
|
|
size: 10,
|
|
},
|
|
})
|
|
|
|
// 监听选中值变化
|
|
watch(
|
|
selectedId,
|
|
(newVal) => {
|
|
if (newVal !== undefined) {
|
|
fetchoptionList()
|
|
}
|
|
},
|
|
{ immediate: true },
|
|
)
|
|
|
|
async function fetchoptionList() {
|
|
try {
|
|
state.loading = true
|
|
const params = {
|
|
userId: selectedId.value,
|
|
...state.searchParams,
|
|
}
|
|
const { data } = await userApi.pageList(params)
|
|
state.optionList = data.records ?? []
|
|
} finally {
|
|
state.loading = false
|
|
}
|
|
}
|
|
|
|
// 搜索处理
|
|
function handleSearch(keyword: string) {
|
|
if (keyword !== state.searchParams.nameOrPhone) {
|
|
state.searchParams.nameOrPhone = keyword
|
|
fetchoptionList()
|
|
}
|
|
}
|
|
|
|
// 下拉框显示状态变化
|
|
function handleVisibleChange(visible: boolean) {
|
|
if (visible) {
|
|
fetchoptionList()
|
|
}
|
|
}
|
|
|
|
// 选择变化处理
|
|
function handleChange(userId: string) {
|
|
const selectedOption = state.optionList.find((option) => option.userId === userId)
|
|
emit("change", selectedOption)
|
|
}
|
|
</script>
|