<template>
|
<el-dialog
|
v-model="dialogFlag"
|
width="600"
|
title="选择地址"
|
align-center
|
:show-close="false"
|
:close-on-click-modal="false"
|
:close-on-press-escape="false"
|
>
|
<el-divider class="m-0"></el-divider>
|
<div class="py-2 mt-3">
|
<el-form-item label="搜索地址">
|
<el-select
|
v-model="selected"
|
:debounce="800"
|
filterable
|
value-key="uid"
|
remote
|
reserve-keyword
|
placeholder="请输入关键字"
|
:remote-method="getAddressOptions"
|
:loading="loading"
|
loading-text="数据加载中"
|
>
|
<template #label>
|
<el-row>
|
<el-text>{{ selected.address }}</el-text>
|
</el-row>
|
</template>
|
<el-option
|
v-for="item in addressOptions"
|
:key="item.uid"
|
:label="item.label"
|
:value="item"
|
>
|
<template #default>
|
<el-row>
|
<el-text :style="{ color: selected.uid == item.uid ? 'var(--el-color-primary)' : '' }">
|
{{ item.name }}
|
</el-text>
|
<el-text class="text-sm ml-2" style="color: #999999;">（{{ item.address }}）</el-text>
|
</el-row>
|
</template>
|
</el-option>
|
</el-select>
|
</el-form-item>
|
</div>
|
<el-divider class="m-0"></el-divider>
|
<template #footer>
|
<div>
|
<el-button plain @click="dialogFlag=false">取消</el-button>
|
<el-button type="primary" @click="confirm">
|
确定
|
</el-button>
|
</div>
|
</template>
|
</el-dialog>
|
</template>
|
<script>
|
export default {
|
components: {
|
},
|
data() {
|
return {
|
dialogFlag: false,
|
selected: {},
|
loading: false,
|
addressOptions: []
|
}
|
},
|
props: {
|
modelValue: {
|
type: Boolean,
|
default: false
|
},
|
selectedAddress: {
|
type: Object,
|
default: () => {
|
return {}
|
}
|
}
|
},
|
watch: {
|
modelValue(val) {
|
this.dialogFlag = val
|
if (this.dialogFlag) {
|
this.selected = this.selectedAddress
|
}
|
},
|
dialogFlag(val) {
|
this.$emit('update:modelValue', val)
|
}
|
},
|
created() {
|
|
},
|
methods: {
|
getAddressOptions(query) {
|
if (!query) { return [] }
|
const params = {
|
ak: '1gBZhNmy47PFUB3iS2XVJySCO7mXLf01', // 请替换为您的实际AK
|
query: query,
|
region: '广东',
|
type: '',
|
}
|
this.loading = true
|
this.$axios.get('/exam/baidu-map/region-search', { params }).then(res => {
|
if (res.data.status == 0) {
|
let list = res.data.results || []
|
list.forEach(ele => {
|
if (!ele.address) {
|
ele.address = ele.province + ele.city + ele.district + ele.town
|
}
|
})
|
this.addressOptions = list
|
} else {
|
this.$message.error(res.data.msg || '获取地址检索列表失败')
|
}
|
}).finally(() => {
|
this.loading = false
|
})
|
},
|
confirm() {
|
this.$emit('handlerSelectedAddress', this.selected)
|
this.dialogFlag = false
|
}
|
}
|
}
|
</script>
|
