101 lines
2.4 KiB
Vue
101 lines
2.4 KiB
Vue
<template>
|
|
<el-select
|
|
style="width: 100%"
|
|
v-model="state.selectId"
|
|
:placeholder="props.placeholder"
|
|
:disabled="props.disabled"
|
|
clearable
|
|
filterable
|
|
remote
|
|
reserve-keyword
|
|
default-first-option
|
|
remote-show-suffix
|
|
:remote-method="remoteSearch"
|
|
:loading="state.loading"
|
|
@visible-change="handleVisibleChange"
|
|
@change="change"
|
|
>
|
|
<el-option v-for="item in state.options" :key="item.supplierId" :label="item.supplierName" :value="item.supplierId" />
|
|
</el-select>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { reactive, watch } from "vue"
|
|
import { getSupplierSimpleAll } from "/@/api/supermarketerp/smErpSupplier"
|
|
|
|
const emit = defineEmits(["change"])
|
|
|
|
const selectId = defineModel<string | number>()
|
|
|
|
export type Props = {
|
|
placeholder?: string
|
|
disabled?: boolean
|
|
isDisplayName?: boolean
|
|
}
|
|
const props = withDefaults(defineProps<Props>(), {
|
|
placeholder: "输入供货商名称搜索",
|
|
disabled: false,
|
|
isDisplayName: false,
|
|
})
|
|
|
|
const state = reactive<any>({
|
|
loading: false,
|
|
selectId: selectId,
|
|
options: [],
|
|
keyword: "",
|
|
})
|
|
|
|
let searchTimer: ReturnType<typeof setTimeout> | null = null
|
|
|
|
watch(
|
|
selectId,
|
|
(newVal, oldValue) => {
|
|
if (newVal == oldValue) return
|
|
state.selectId = newVal
|
|
loadOptions(state.keyword)
|
|
},
|
|
{ immediate: true },
|
|
)
|
|
|
|
async function loadOptions(keyword = "") {
|
|
try {
|
|
state.loading = true
|
|
const params: Record<string, any> = {}
|
|
if (keyword) {
|
|
params.name = keyword
|
|
}
|
|
const { data } = await getSupplierSimpleAll(params)
|
|
let options = Array.isArray(data) ? data : []
|
|
if (selectId.value && !options.some((item: any) => item.supplierId == selectId.value)) {
|
|
const { data: selectedData } = await getSupplierSimpleAll({ supplierId: selectId.value })
|
|
const selected = Array.isArray(selectedData) ? selectedData : []
|
|
if (selected.length) {
|
|
options = [...selected, ...options.filter((item: any) => item.supplierId != selectId.value)]
|
|
}
|
|
}
|
|
state.options = options
|
|
} finally {
|
|
state.loading = false
|
|
}
|
|
}
|
|
|
|
function handleVisibleChange(visible: boolean) {
|
|
if (visible) {
|
|
loadOptions(state.keyword)
|
|
}
|
|
}
|
|
|
|
function remoteSearch(keyword: string) {
|
|
state.keyword = keyword
|
|
if (searchTimer) {
|
|
clearTimeout(searchTimer)
|
|
}
|
|
searchTimer = setTimeout(() => loadOptions(keyword), 300)
|
|
}
|
|
|
|
function change(v: any) {
|
|
const targetSupplier = state.options.find((i: any) => i.supplierId == v)
|
|
emit("change", targetSupplier)
|
|
}
|
|
</script>
|