256 行
9.1 KiB
JavaScript
可执行文件
256 行
9.1 KiB
JavaScript
可执行文件
/**
|
|
* 获取省市区区号
|
|
*/
|
|
Vue.component('select-pro-and-city', {
|
|
template: `<div style="display: inline-block;vertical-align: top" >
|
|
<el-select :size="size" clearable
|
|
:disabled="isDisabled"
|
|
filterable
|
|
@change="chooseProvince"
|
|
value-key="cityid"
|
|
v-model="province"
|
|
placeholder="请选择省">
|
|
<el-option v-for="item in provinceList"
|
|
:key="item.cityid"
|
|
:label="item.city_name"
|
|
:value="item">
|
|
</el-option>
|
|
</el-select>
|
|
<el-select :size="size" clearable
|
|
:disabled="isDisabled"
|
|
filterable
|
|
@change="chooseCity"
|
|
value-key="cityid"
|
|
v-model="city"
|
|
placeholder="请选择市">
|
|
<el-option v-for="item in cityList"
|
|
:key="item.cityid"
|
|
:label="item.city_name"
|
|
:value="item">
|
|
</el-option>
|
|
</el-select>
|
|
<el-select :size="size" clearable
|
|
:disabled="isDisabled"
|
|
filterable
|
|
@change="chooseArea"
|
|
value-key="cityid"
|
|
v-model="area"
|
|
placeholder="请选择区">
|
|
<el-option v-for="item in areaList"
|
|
:key="item.cityid"
|
|
:label="item.city_name"
|
|
:value="item">
|
|
</el-option>
|
|
</el-select>
|
|
</div>`,
|
|
props: {
|
|
'provinceId': {
|
|
type: String,
|
|
default: '',
|
|
},//已选中的省ID
|
|
'cityId': {
|
|
type: String,
|
|
default: '',
|
|
},//已选中的市ID
|
|
'areaId': {
|
|
type: String,
|
|
default: '',
|
|
},//已选中的区ID
|
|
'provinceName': {
|
|
type: String,
|
|
default: '',
|
|
},//已选中的省名称
|
|
'cityName': {
|
|
type: String,
|
|
default: '',
|
|
},//已选中的市名称
|
|
'areaName': {
|
|
type: String,
|
|
default: '',
|
|
},//已选中的区名称
|
|
'isDisabled': {
|
|
type: Boolean,
|
|
default: false,
|
|
},//是否禁止修改
|
|
'size': {
|
|
type: String,
|
|
default: 'small',
|
|
},
|
|
},
|
|
data() {
|
|
return {
|
|
provinceList: [],
|
|
cityList: [],
|
|
areaList: [],
|
|
province: this.getEmptyData(),//选中的省
|
|
city: this.getEmptyData(),//选中的市
|
|
area: this.getEmptyData(),//选中的区
|
|
}
|
|
},
|
|
methods: {
|
|
//获取初始数据
|
|
getData(pid, type, callback) {
|
|
$.ajax({
|
|
url: "/index.php/Retail/Component/getProAndCityList",
|
|
data: {
|
|
pid: pid,
|
|
},
|
|
async: false,
|
|
type: 'POST',
|
|
success: (res) => {
|
|
if (res.status == 1) {
|
|
switch (type) {
|
|
case 1:
|
|
//获取省
|
|
this.provinceList = res.data;
|
|
break;
|
|
case 2:
|
|
//获取市
|
|
this.cityList = res.data;
|
|
break;
|
|
case 3:
|
|
//获取区
|
|
this.areaList = res.data;
|
|
break;
|
|
}
|
|
if (typeof callback == "function") this.$nextTick(() => {
|
|
callback();
|
|
})
|
|
} else {
|
|
|
|
}
|
|
}
|
|
})
|
|
},
|
|
//选择省
|
|
chooseProvince(province) {
|
|
console.log(province);
|
|
//重置市
|
|
this.unitData([province, this.getEmptyData(), this.getEmptyData()]);
|
|
},
|
|
//选择市
|
|
chooseCity(city) {
|
|
this.city = city;
|
|
//重置区
|
|
if (city && city.cityid) {
|
|
//获取区列表
|
|
this.getData(city.cityid, 3, this.chooseArea(this.getEmptyData()));
|
|
} else {
|
|
this.areaList = [];
|
|
this.chooseArea(this.getEmptyData());
|
|
}
|
|
},
|
|
//选择区
|
|
chooseArea(area) {
|
|
this.area = area;
|
|
this.$nextTick(() => {
|
|
this.$emit('update:provinceId', this.province.cityid);
|
|
this.$emit('update:cityId', this.city.cityid);
|
|
this.$emit('update:areaId', this.area.cityid);
|
|
this.$emit('update:provinceName', this.province.city_name);
|
|
this.$emit('update:cityName', this.city.city_name);
|
|
this.$emit('update:areaName', this.area.city_name);
|
|
this.$emit('change', {
|
|
province_id: this.province.cityid,
|
|
city_id: this.city.cityid,
|
|
area_id: this.area.cityid,
|
|
province_name: this.province.city_name,
|
|
city_name: this.city.city_name,
|
|
area_name: this.area.city_name,
|
|
});
|
|
})
|
|
},
|
|
|
|
//初始化省市区
|
|
unitData(data) {
|
|
|
|
//已选中省
|
|
if (data[0].city_name || data[0].cityid) {
|
|
|
|
//把省的选中信息读出来
|
|
this.province = this.getCityData(this.provinceList, data[0].city_name, data[0].cityid);
|
|
|
|
//获取已选中省下面的市
|
|
this.getData(this.province.cityid, 2, () => {
|
|
|
|
//已选中市
|
|
if (data[1].city_name || data[1].cityid) {
|
|
|
|
//把市的选中信息读出来
|
|
this.city = this.getCityData(this.cityList, data[1].city_name, data[1].cityid);
|
|
|
|
//获取已选中市下面的区
|
|
this.getData(this.city.cityid, 3, () => {
|
|
|
|
//已选中区
|
|
if (data[2].city_name || data[2].cityid) {
|
|
|
|
//把区的选中信息读出来
|
|
this.area = this.getCityData(this.areaList, data[2].city_name, data[2].cityid);
|
|
}
|
|
this.chooseArea(data[2])
|
|
});
|
|
} else {
|
|
this.areaList = [];
|
|
this.chooseArea(this.getEmptyData())
|
|
}
|
|
});
|
|
} else {
|
|
this.province = this.getEmptyData();
|
|
this.cityList = [];
|
|
this.city = this.getEmptyData();
|
|
this.areaList = [];
|
|
this.chooseArea(this.getEmptyData())
|
|
}
|
|
},
|
|
getCityData(list, name, id) {
|
|
if (!name && !id) {
|
|
return this.getEmptyData()
|
|
}
|
|
if (name && id) {
|
|
return {
|
|
cityid: id,
|
|
city_name: name,
|
|
}
|
|
}
|
|
for (let i in list) {
|
|
if (list[i].cityid == id || list[i].city_name == name) {
|
|
return {
|
|
cityid: list[i].cityid,
|
|
city_name: list[i].city_name,
|
|
}
|
|
}
|
|
}
|
|
return this.getEmptyData();
|
|
},
|
|
getEmptyData(){
|
|
return {
|
|
cityid: '',
|
|
city_name: '',
|
|
};
|
|
},
|
|
},
|
|
created() {
|
|
this.getData(0, 1, () => {
|
|
this.unitData([{cityid: this.provinceId}, {cityid: this.cityId}, {cityid: this.areaId}])
|
|
});
|
|
},
|
|
watch: {
|
|
provinceId(n) {
|
|
setTimeout(() => {
|
|
if (n != this.province.cityid || this.cityId != this.city.cityid || this.areaId != this.area.cityid) {
|
|
this.unitData([{cityid: this.provinceId}, {cityid: this.cityId}, {cityid: this.areaId}])
|
|
}
|
|
}, 100)
|
|
},
|
|
provinceName(n) {
|
|
setTimeout(() => {
|
|
if (n != this.province.city_name || this.cityName != this.city.city_name || this.areaName != this.area.city_name) {
|
|
this.unitData([{cityid: this.provinceName}, {cityid: this.cityName}, {cityid: this.areaName}])
|
|
}
|
|
}, 100)
|
|
},
|
|
},
|
|
});
|
|
|