128 lines
2.3 KiB
Vue
128 lines
2.3 KiB
Vue
<template>
|
||
<el-select
|
||
v-model="selected"
|
||
@focus="fetchItems"
|
||
:placeholder="placeholder"
|
||
:filterable="filterable"
|
||
:value-key="valueKey"
|
||
:style="selectStyle"
|
||
@change="onChange"
|
||
>
|
||
<el-option
|
||
v-for="item in items"
|
||
:key="item.id"
|
||
:label="item.code"
|
||
:value="item.code"
|
||
>
|
||
<span>{{ item.code }}</span>
|
||
<span>{{ item.name }}</span>
|
||
</el-option>
|
||
|
||
</el-select>
|
||
</template>
|
||
|
||
<script>
|
||
import curdArea, {queryAreaList} from '@/api/area'
|
||
|
||
export default {
|
||
name: 'AreaCodeSelect',
|
||
props: {
|
||
value: null, // v-model
|
||
placeholder: {
|
||
type: String,
|
||
default: '请选择库区'
|
||
},
|
||
filterable: {
|
||
type: Boolean,
|
||
default: true
|
||
},
|
||
valueKey: {
|
||
type: String,
|
||
default: 'id'
|
||
},
|
||
// 是否禁用
|
||
disabled: {
|
||
type: Boolean,
|
||
default: false
|
||
},
|
||
isEnabled:{
|
||
type: Boolean,
|
||
default: true
|
||
},
|
||
bexb:{
|
||
type: Boolean,
|
||
default: true
|
||
},
|
||
selectStyle: {
|
||
type: String,
|
||
default: 'width: 200px;'
|
||
},
|
||
immediate: {
|
||
type: Boolean,
|
||
default: false
|
||
},
|
||
// 是否可清空
|
||
clearable: {
|
||
type: Boolean,
|
||
default: false
|
||
},
|
||
// 是否支持多选
|
||
multiple: {
|
||
type: Boolean,
|
||
default: false
|
||
},
|
||
|
||
},
|
||
data() {
|
||
return {
|
||
items: [],
|
||
selected: this.value,
|
||
loading: false
|
||
}
|
||
},
|
||
computed: {
|
||
// 处理 v-model 双向绑定
|
||
selectedValue: {
|
||
get() {
|
||
return this.value
|
||
},
|
||
set(val) {
|
||
this.$emit('input', val)
|
||
}
|
||
}
|
||
},
|
||
watch: {
|
||
value(val) {
|
||
this.selected = val
|
||
},
|
||
selected(val) {
|
||
this.$emit('input', val)
|
||
this.$emit('change', val)
|
||
}
|
||
},
|
||
created() {
|
||
// 如果设置了immediate属性或已有值，则立即加载数据
|
||
//if (this.immediate || (this.value && this.value[this.valueKey])) {
|
||
this.fetchItems();
|
||
// }
|
||
},
|
||
// 清空选中值时触发
|
||
handleClear() {
|
||
this.$emit('clear')
|
||
},
|
||
methods: {
|
||
fetchItems() {
|
||
this.loading = true
|
||
if (this.items.length === 0) {
|
||
curdArea.queryAreaList({ bexb: this.bexb }).then(res => {
|
||
this.items = res
|
||
})
|
||
}
|
||
},
|
||
onChange(val) {
|
||
this.$emit('change', val)
|
||
}
|
||
}
|
||
}
|
||
</script>
|