<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.value" :value="d.value">{{ d.text }}</a-select-option>
|
</a-select>
|
|
</template>
|
|
<script>
|
import debounce from 'lodash/debounce'
|
import { getAction } from '@/api/manage'
|
|
export default {
|
name: 'LxSearchEquipmentSelect',
|
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
|
},
|
factoryOrgCode:{
|
type:String,
|
default:'',
|
required:false
|
}
|
},
|
data() {
|
this.loadData = debounce(this.loadData, 800)//消抖
|
this.lastLoad = 0
|
return {
|
loading: false,
|
selectedValue: undefined,
|
selectedAsyncValue: undefined,
|
options: []
|
}
|
},
|
created() {
|
// this.initDictData()
|
},
|
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){
|
console.log("这才请求后台")
|
getAction(`/eam/equipment/asyncLoadEquipment`, { id: this.value,factoryOrgCode:this.factoryOrgCode }).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.options = res.result;
|
}
|
})
|
}
|
},
|
loadData(value) {
|
console.log('数据加载', value)
|
this.lastLoad += 1
|
const currentLoad = this.lastLoad
|
this.options = []
|
this.loading = true
|
// 字典code格式：table,text,code
|
getAction(`/eam/equipment/asyncLoadEquipment`, { keyword: value, pageSize: this.pageSize,factoryOrgCode:this.factoryOrgCode }).then(res => {
|
this.loading = false
|
if (res.success) {
|
if (currentLoad != this.lastLoad) {
|
return
|
}
|
this.options = res.result
|
console.log('我是第一个', res)
|
} else {
|
this.$message.warning(res.message)
|
}
|
|
})
|
|
},
|
initDictData() {
|
//异步一开始也加载一点数据
|
this.loading = true
|
getAction(`/eam/equipment/asyncLoadEquipment`, { pageSize: this.pageSize, keyword: '' ,factoryOrgCode:this.factoryOrgCode}).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) {
|
//update-begin-author:scott date:20201222 for:【搜索】搜索查询组件，删除条件，默认下拉还是上次的缓存数据，不好 JT-191
|
if (selectedObj) {
|
this.selectedAsyncValue = selectedObj
|
//update-begin---author:wangshuai ---date:20221115 for：[issues/4213]JSearchSelectTag改造支持多选------------
|
this.selectedValue = selectedObj.key
|
this.$emit('autocompleteForm', this.options.find(item => item.equipmentId === selectedObj.value))
|
//update-end---author:wangshuai ---date:20221115 for：[issues/4213]JSearchSelectTag改造支持多选------------
|
} else {
|
this.selectedAsyncValue = undefined
|
this.selectedValue = undefined
|
this.options = []
|
this.loadData('')
|
this.$emit('autocompleteForm', {})
|
}
|
this.callback()
|
//update-end-author:scott date:20201222 for:【搜索】搜索查询组件，删除条件，默认下拉还是上次的缓存数据，不好 JT-191
|
},
|
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>
|
|
<style scoped>
|
|
</style>
|
