<template>
|
<a-select showSearch labelInValue :disabled="disabled" :getPopupContainer="getParentContainer" @search="loadData"
|
:placeholder="placeholder" v-model="selectedAsyncValue" style="width: 100%" :filterOption="false"
|
@change="handleAsyncChange" :allowClear="allowClear" :notFoundContent="loading ? undefined : null"
|
mode="default">
|
<template #suffixIcon>
|
<a-icon type="search"/>
|
</template>
|
<a-spin v-if="loading" slot="notFoundContent" size="small"/>
|
<a-select-option v-for="d in options" :key="d.equipmentId" :value="d.equipmentId">{{
|
d.equipmentCode+`[${d.equipmentName}]` }}
|
</a-select-option>
|
</a-select>
|
</template>
|
|
<script>
|
import debounce from 'lodash/debounce'
|
import { getAction } from '@/api/manage'
|
|
export default {
|
name: 'TechnicalStatusEquipmentSelect',
|
props: {
|
disabled: Boolean,
|
value: [String, Number],
|
placeholder: {
|
type: String,
|
default: '请选择',
|
required: false
|
},
|
pageSize: {
|
type: Number,
|
default: 20,
|
required: false
|
},
|
allowClear: {
|
type: Boolean,
|
default: () => true,
|
required: false
|
}
|
},
|
data() {
|
this.loadData = debounce(this.loadData, 800)//消抖
|
this.lastLoad = 0
|
return {
|
loading: false,
|
selectedValue: undefined,
|
selectedAsyncValue: undefined,
|
options: [],
|
url: {
|
list: '/eam/eamTechnicalStatusEvaluationStandard/selectEnableEquipment'
|
}
|
}
|
},
|
watch: {
|
'value': {
|
immediate: true,
|
handler(val) {
|
if (!val) {
|
this.selectedValue = undefined
|
this.selectedAsyncValue = undefined
|
this.initDictData()
|
} else {
|
this.initSelectValue()
|
}
|
}
|
}
|
},
|
methods: {
|
initSelectValue() {
|
if (!this.selectedAsyncValue || !this.selectedAsyncValue.key || this.selectedAsyncValue.key != this.value) {
|
getAction(this.url.list, { equipmentId: this.value })
|
.then(res => {
|
if (res.success) {
|
if (res.result && res.result.length > 0) {
|
let obj = {
|
key: this.value,
|
label: res.result[0].text
|
}
|
this.selectedAsyncValue = { ...obj }
|
this.$emit('autocompleteForm', res.result[0])
|
}
|
this.options = res.result
|
}
|
})
|
}
|
},
|
loadData(value) {
|
this.lastLoad += 1
|
const currentLoad = this.lastLoad
|
this.options = []
|
this.loading = true
|
// 字典code格式：table,text,code
|
getAction(this.url.list, { keyword: value, pageSize: this.pageSize })
|
.then(res => {
|
this.loading = false
|
if (res.success) {
|
if (currentLoad != this.lastLoad) {
|
return
|
}
|
this.options = res.result
|
} else {
|
this.$message.warning(res.message)
|
}
|
})
|
},
|
initDictData() {
|
//异步一开始也加载一点数据
|
this.loading = true
|
getAction(this.url.list, { pageSize: this.pageSize, keyword: '' })
|
.then(res => {
|
this.loading = false
|
if (res.success) {
|
this.options = [...res.result]
|
} else {
|
this.$message.warning(res.message)
|
}
|
})
|
},
|
filterOption(input, option) {
|
return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
|
},
|
handleAsyncChange(selectedObj) {
|
if (selectedObj) {
|
this.selectedAsyncValue = selectedObj
|
this.selectedValue = selectedObj.key
|
this.$emit('autocompleteForm', this.options.find(item => item.equipmentId === selectedObj.key))
|
} else {
|
this.selectedAsyncValue = undefined
|
this.selectedValue = null
|
this.options = []
|
this.loadData('')
|
this.$emit('autocompleteForm', {})
|
}
|
this.callback()
|
},
|
callback() {
|
this.$emit('change', this.selectedValue)
|
},
|
getParentContainer(node) {
|
if (typeof this.getPopupContainer === 'function') {
|
return this.getPopupContainer(node)
|
} else if (!this.popContainer) {
|
return node.parentNode
|
} else {
|
return document.querySelector(this.popContainer)
|
}
|
}
|
|
},
|
model: {
|
prop: 'value',
|
event: 'change'
|
}
|
}
|
</script>
|
