<template>
|
<flexbox align="stretch">
|
<el-row>
|
<el-col
|
:span="span">
|
<!--@focus="getProvinces" @focus="getCities"@focus="getAreas"-->
|
<el-select
|
ref="proSel"
|
class='selecInput'
|
size="small"
|
v-model="provinceCode"
|
@change="changeProvince"
|
placeholder="请选择省份"
|
:disabled='disabled'
|
filterable>
|
<el-option
|
v-for="item in provinceList"
|
:key="item.ProvinceID"
|
:label="item.ProvinceName"
|
:value="item.ProvinceID">
|
</el-option>
|
</el-select>
|
</el-col>
|
<el-col
|
:span="span"
|
v-if="!hideCity">
|
<el-select
|
ref="citySel"
|
class='selecInput'
|
size="small"
|
v-model="cityCode"
|
@change="changeCity"
|
placeholder="请选择市"
|
:disabled='disabled'
|
filterable>
|
<el-option
|
v-for="item in cityList"
|
:key="item.CityID"
|
:label="item.CityName"
|
:value="item.CityID">
|
</el-option>
|
</el-select>
|
</el-col>
|
<el-col
|
:span="span"
|
v-if="!hideCity && !hideArea">
|
<el-select
|
class='selecInput'
|
size="small"
|
v-model="areaCode"
|
@change="changeArea"
|
placeholder="请选择区/县"
|
:disabled='disabled'
|
filterable>
|
<el-option
|
v-for="item in areaList"
|
:key="item.AreaId"
|
:label="item.AreaName"
|
:value="item.AreaId">
|
</el-option>
|
</el-select>
|
</el-col>
|
</el-row>
|
</flexbox>
|
</template>
|
<script type="text/javascript">
|
import {GetProvincesList, GetCityList, GetAreaList} from '@/api/common'
|
export default {
|
name: 'XhCustomerAddress', // 新建 客户位置
|
components: {
|
},
|
props: {
|
disabled: { // 禁
|
type: Boolean,
|
default: false
|
},
|
hideCity: { // 隐藏市
|
type: Boolean,
|
default: false
|
},
|
hideArea: { // 隐藏区/县
|
type: Boolean,
|
default: false
|
},
|
province: {
|
type: String,
|
default: ''
|
},
|
city: {
|
type: String,
|
default: ''
|
},
|
area: {
|
type: String,
|
default: ''
|
},
|
addressCode: null // 地址编码
|
},
|
data () {
|
return {
|
provinceList: [], // 省份列表
|
cityList: [], // 城市列表
|
areaList: [], // 区/县列表
|
provinceCode: '', // 省份编码
|
cityCode: '', // 城市编码
|
areaCode: '', // 区/县编码
|
cityFlag: false, // 避免重复请求的标志
|
provinceFlag: false,
|
areaFlag: false
|
}
|
},
|
computed: {
|
span () {
|
if (this.hideCity) {
|
return 24
|
}
|
if (this.hideArea) {
|
return 12
|
}
|
return 8
|
}
|
},
|
watch: {
|
addressCode: {
|
deep: true,
|
immediate: true,
|
handler (newVal) {
|
if (newVal) {
|
this.addressCodeToList(newVal)
|
} else {
|
this.$nextTick(() => {
|
this.reset()
|
})
|
}
|
}
|
},
|
province: {
|
deep: true,
|
immediate: true,
|
handler (newVal) {
|
if (newVal) {
|
console.log(newVal)
|
this.editCodeToList(newVal, 'province')
|
} else {
|
this.$nextTick(() => {
|
this.reset()
|
})
|
}
|
}
|
},
|
city: {
|
deep: true,
|
immediate: true,
|
handler (newVal) {
|
if (newVal) {
|
this.editCityToList(newVal, 'city')
|
} else {
|
this.$nextTick(() => {
|
this.reset()
|
})
|
}
|
}
|
},
|
area: {
|
deep: true,
|
immediate: true,
|
handler (newVal) {
|
if (newVal) {
|
this.editAreaToList(newVal, 'area')
|
} else {
|
this.$nextTick(() => {
|
this.reset()
|
})
|
}
|
}
|
}
|
},
|
created () {
|
this.getProList()
|
},
|
mounted () {
|
},
|
methods: {
|
/**
|
* 获取数据
|
*/
|
getProList () {
|
GetProvincesList().then(res => {
|
this.provinceList = res.data.Result || []
|
console.log(this.province)
|
if (!this.province) {
|
this.provinceCode = res.data.Result && res.data.Result.length > 0 ? res.data.Result[0].ProvinceID : ''
|
let selected = this.idFilter(this.provinceCode, this.provinceList, 'province')
|
this.$emit('province', selected.ProvinceName)
|
}
|
this.getCityList(this.provinceCode)
|
})
|
},
|
getCityList (val) {
|
let params = {
|
provinceId: val
|
}
|
GetCityList(params).then(res => {
|
this.cityList = res.data.Result || []
|
// this.cityCode = res.data.Result && res.data.Result.length > 0 ? res.data.Result[0].CityID : ''
|
if (this.city) {
|
console.log('11111111', this.city)
|
let selectedCity = this.nameFilter(this.city, this.cityList, 'city')
|
this.cityCode = selectedCity ? selectedCity.CityID : ''
|
} else {
|
this.cityCode = res.data.Result && res.data.Result.length > 0 ? res.data.Result[0].CityID : ''
|
let selected = this.idFilter(this.cityCode, this.cityList, 'city')
|
this.$emit('city', selected.CityName)
|
}
|
})
|
},
|
getAreaList (val) {
|
let params = {
|
cityId: val
|
}
|
GetAreaList(params).then(res => {
|
this.areaList = res.data.Result || []
|
this.areaCode = res.data.Result && res.data.Result.length > 0 ? res.data.Result[0].AreaID : ''
|
})
|
},
|
idFilter (e, list, name) {
|
if (name === 'province') {
|
return list.find((item) => {
|
return item.ProvinceID === e
|
})
|
}
|
if (name === 'city') {
|
return list.find((item) => {
|
return item.CityID === e
|
})
|
}
|
if (name === 'area') {
|
return list.find((item) => {
|
return item.AreaID === e
|
})
|
}
|
},
|
nameFilter (e, list, name) {
|
if (name === 'province') {
|
return list.find((item) => {
|
return item.ProvinceName === e
|
})
|
}
|
if (name === 'city') {
|
return list.find((item) => {
|
return item.CityName === e
|
})
|
}
|
if (name === 'area') {
|
return list.find((item) => {
|
return item.AreaName === e
|
})
|
}
|
},
|
// 根据国家编码获取省份列表
|
getProvinces () {
|
if (this.provinceFlag) {
|
return
|
}
|
this.getProList()
|
this.provinceFlag = true
|
},
|
// 省份修改，拉取对应城市列表
|
changeProvince (val) {
|
this.getCityList(this.provinceCode)
|
this.cityFlag = true
|
this.cityCode = ''
|
this.areaCode = ''
|
let selected = this.idFilter(val, this.provinceList, 'province')
|
this.$emit('province', selected.ProvinceName)
|
},
|
// 根据省份编码获取城市列表
|
getCities () {
|
if (this.cityFlag) {
|
return
|
}
|
if (this.provinceCode) {
|
this.getCityList(this.provinceCode)
|
this.cityFlag = true
|
}
|
},
|
// 城市修改，拉取对应区域列表
|
changeCity (val) {
|
this.getAreaList(this.cityCode)
|
this.areaFlag = true
|
this.areaCode = ''
|
let selected = this.idFilter(val, this.cityList, 'city')
|
this.$emit('city', selected.CityName)
|
// let selected = this.idFilter(this.cityCode, this.cityList, 'city')
|
// this.$emit('city', selected ? selected.CityName : '')
|
},
|
// 根据城市编码获取区域列表
|
getAreas () {
|
if (this.areaFlag) {
|
return
|
}
|
if (this.cityCode) {
|
this.getAreaList(this.cityCode)
|
}
|
},
|
// 区域修改
|
changeArea (val) {
|
let selected = this.idFilter(val, this.areaList, 'area')
|
this.$emit('area', selected.AreaName)
|
},
|
// 重置省市区/县编码
|
reset () {
|
this.provinceCode = ''
|
this.cityCode = ''
|
this.areaCode = ''
|
},
|
editCodeToList (code, name) {
|
if (!code) return false
|
if (name === 'province') {
|
let selectedPro = this.nameFilter(code, this.provinceList, name)
|
this.provinceCode = selectedPro ? selectedPro.ProvinceID : ''
|
this.getCityList(this.provinceCode)
|
}
|
},
|
editCityToList (code, name) {
|
if (!code) return false
|
if (name === 'city') {
|
if (this.cityList && this.cityList.length > 0) {
|
let selectedCity = this.nameFilter(code, this.cityList, name)
|
this.cityCode = selectedCity ? selectedCity.CityID : ''
|
if (!this.hideArea) {
|
this.getAreaList(this.cityCode)
|
}
|
}
|
}
|
},
|
editAreaToList (code, name) {
|
if (!code) return false
|
if (name === 'area') {
|
if (this.areaList && this.areaList.length > 0) {
|
let selectedArea = this.nameFilter(code, this.areaList, name)
|
this.areaCode = selectedArea ? selectedArea.AreaID : ''
|
}
|
}
|
},
|
// 地址编码转换成省市区列表
|
addressCodeToList (addressCode) {
|
if (!addressCode) return false
|
this.$http({
|
method: 'get',
|
url: this.API.addressCode + '/' + addressCode
|
})
|
.then(res => {
|
let data = res.data.body
|
if (!data) return
|
if (data.provinceCode) {
|
this.provinceCode = data.provinceCode
|
this.fetchData(this.cityList, this.API.city, this.provinceCode)
|
} else if (data.cityCode) {
|
this.cityCode = data.cityCode
|
this.fetchData(this.areaList, this.API.area, this.cityCode)
|
} else if (data.areaCode) {
|
this.areaCode = data.areaCode
|
}
|
})
|
.finally(res => {
|
})
|
}
|
|
}
|
}
|
</script>
|
<style rel="stylesheet/scss" lang="scss" scoped>
|
.map {
|
height: 150px;
|
width: 100%;
|
overflow: hidden;
|
margin-top: 5px;
|
}
|
|
.area-title {
|
font-size: 12px;
|
color: #aaa;
|
padding-left: 10px;
|
}
|
|
.distpicker-address-wrapper /deep/ select {
|
height: 34px;
|
font-size: 12px;
|
border-radius: 0.1rem;
|
padding: .5rem .2rem;
|
}
|
.selecInput{
|
min-width: 120px;
|
margin-left: 10px;
|
}
|
</style>
|
