Commit 1e802661 authored by 姬鋆屾's avatar 姬鋆屾

feated:添加经纬度

parent 77c3396e
<template>
<div id="addressHorizontalSelect">
<el-row :gutter="10">
<el-col
:span="span">
<el-col :span="span">
<el-select
size="small"
v-model="provinceCode"
@focus="getProvinces"
@change="changeProvince"
placeholder="省"
filterable>
size="small"
v-model="provinceCode"
@focus="getProvinces"
@change="changeProvince"
placeholder="省"
filterable
>
<el-option
v-for="item in provinceList"
:key="item.iid"
:label="item.name"
:value="item.iid">
v-for="item in provinceList"
:key="item.iid"
:label="item.name"
:value="item.iid"
>
</el-option>
</el-select>
</el-col>
<el-col
:span="span"
v-if="!hideCity">
<el-col :span="span" v-if="!hideCity">
<el-select
size="small"
v-model="cityCode"
@focus="getCities"
@change="changeCity"
placeholder="市"
filterable>
size="small"
v-model="cityCode"
@focus="getCities"
@change="changeCity"
placeholder="市"
filterable
>
<el-option
v-for="item in cityList"
:key="item.iid"
:label="item.name"
:value="item.iid">
v-for="item in cityList"
:key="item.iid"
:label="item.name"
:value="item.iid"
>
</el-option>
</el-select>
</el-col>
<el-col
:span="span"
v-if="!hideCity && !hideArea">
<el-col :span="span" v-if="!hideCity && !hideArea">
<el-select
size="small"
v-model="areaCode"
@focus="getAreas"
@change="changeArea"
placeholder="区/县"
filterable>
size="small"
v-model="areaCode"
@focus="getAreas"
@change="changeArea"
placeholder="区/县"
filterable
>
<el-option
v-for="item in areaList"
:key="item.iid"
:label="item.name"
:value="item.iid">
v-for="item in areaList"
:key="item.iid"
:label="item.name"
:value="item.iid"
>
</el-option>
</el-select>
</el-col>
<el-col
:span="span"
v-if="!hideCity && !hideArea&& !hideStreet">
<el-col :span="span" v-if="!hideCity && !hideArea && !hideStreet">
<el-select
size="small"
v-model="streetCode"
@focus="getStreet"
@change="changeStreet"
placeholder="街道"
filterable>
size="small"
v-model="streetCode"
@focus="getStreet"
@change="changeStreet"
placeholder="街道"
filterable
>
<el-option
v-for="item in streetList"
:key="item.iid"
:label="item.name"
:value="item.iid">
v-for="item in streetList"
:key="item.iid"
:label="item.name"
:value="item.iid"
>
</el-option>
</el-select>
</el-col>
<el-col
:span="span"
v-if="!hideCity && !hideArea&& !hideStreet&& !hideStreet">
:span="span"
v-if="!hideCity && !hideArea && !hideStreet && !hideStreet"
>
<el-select
size="small"
v-model="communityCode"
@focus="getCommunity"
@change="changeCommunity"
placeholder="社区"
filterable>
size="small"
v-model="communityCode"
@focus="getCommunity"
@change="changeCommunity"
placeholder="社区"
filterable
>
<el-option
v-for="item in communityList"
:key="item.iid"
:label="item.name"
:value="item.iid">
v-for="item in communityList"
:key="item.iid"
:label="item.name"
:value="item.iid"
>
</el-option>
</el-select>
</el-col>
</el-row>
</div>
</template>
<script>
export default {
name: 'addressHorizontalSelect',
name: "addressHorizontalSelect",
components: {},
props: {
value: {
type: [String, Number, Array],
},
hideCity: { // 隐藏市
hideCity: {
// 隐藏市
type: Boolean,
default: false
default: false,
},
hideArea: { // 隐藏区/县
hideArea: {
// 隐藏区/县
type: Boolean,
default: false
default: false,
},
hideStreet: { // 隐藏街道
hideStreet: {
// 隐藏街道
type: Boolean,
default: false
default: false,
},
hideCommunity: { // 隐藏社区
hideCommunity: {
// 隐藏社区
type: Boolean,
default: false
default: false,
},
addressCode: null // 地址编码
addressCode: null, // 地址编码
},
model: {
prop: 'value',
event: 'addressSelect'
prop: "value",
event: "addressSelect",
},
data() {
......@@ -137,242 +144,241 @@ export default {
areaList: [], // 区/县列表
streetList: [], // 街道列表
communityList: [], // 社区列表
provinceCode: '', // 省份编码
cityCode: '', // 城市编码
areaCode: '', // 区/县编码
streetCode: '', // 街道编码
communityCode: '', // 社区编码
provinceCode: "", // 省份编码
cityCode: "", // 城市编码
areaCode: "", // 区/县编码
streetCode: "", // 街道编码
communityCode: "", // 社区编码
cityFlag: false, // 避免重复请求的标志
provinceFlag: false,
areaFlag: false,
streetFlag: false,
communityFlag: false,
provinceName:'',
cityName:'',
areaName:'',
streetName:'',
communityName:''
}
provinceName: "",
cityName: "",
areaName: "",
streetName: "",
communityName: "",
};
},
computed: {
span() {
if (this.hideCity) {
return 24
return 24;
}
if (this.hideArea) {
return 12
return 12;
}
if (this.hideStreet) {
return 8
return 8;
}
if (this.hideCommunity) {
return 6
return 6;
}
return 3
}
return 3;
},
},
created() {
this.getProvinces()
this.getProvinces();
},
methods: {
fetchData(array, code) {
var split = code.split("&");
let parms = {pid: split[0], size: -1}
this.$post("/base/area/list", parms).then((res) => {
if (res.code == 1) {
array.splice(0, array.length);
res.data.data.map(i => {
let obj = {}
obj.name = i.name
obj.iid = i.iid + "&" + i.areaCode
array.push(obj)
return obj;
})
}
})
.catch((error) => {
this.$message.error(error.message);
});
let parms = { pid: split[0], size: -1 };
this.$post("/base/area/list", parms)
.then((res) => {
if (res.code == 1) {
array.splice(0, array.length);
res.data.data.map((i) => {
let obj = {};
obj.name = i.name;
obj.iid = i.iid + "&" + i.areaCode;
array.push(obj);
return obj;
});
}
})
.catch((error) => {
this.$message.error(error.message);
});
},
// 根据国家编码获取省份列表
getProvinces() {
if (this.provinceFlag) {
return
return;
}
this.fetchData(this.provinceList, "0&510000000000")
this.provinceFlag = true
this.fetchData(this.provinceList, "0&510000000000");
this.provinceFlag = true;
},
// 省份修改,拉取对应城市列表
changeProvince(val) {
this.fetchData(this.cityList, this.provinceCode)
this.cityFlag = true
this.cityCode = ''
this.areaCode = ''
this.streetCode = ''
this.communityCode = ''
this.fetchData(this.cityList, this.provinceCode);
this.cityFlag = true;
this.cityCode = "";
this.areaCode = "";
this.streetCode = "";
this.communityCode = "";
this.cityName=''
this.areaName=''
this.streetName=''
this.communityName=''
this.cityName = "";
this.areaName = "";
this.streetName = "";
this.communityName = "";
var split = val.split("&");
this.$emit("input", split[1]);
this.$emit('addressSelect', split[1])
this.$emit("addressSelect", split[1]);
},
// 根据省份编码获取城市列表
getCities() {
if (this.cityFlag) {
return
return;
}
if (this.provinceCode) {
this.fetchData(this.cityList, this.provinceCode)
this.cityFlag = true
this.fetchData(this.cityList, this.provinceCode);
this.cityFlag = true;
}
},
// 城市修改,拉取对应区域列表
changeCity(val) {
this.fetchData(this.areaList, this.cityCode)
this.areaFlag = true
this.areaCode = ''
this.streetCode = ''
this.communityCode = ''
this.fetchData(this.areaList, this.cityCode);
this.areaFlag = true;
this.areaCode = "";
this.streetCode = "";
this.communityCode = "";
this.areaName=''
this.streetName=''
this.communityName=''
this.areaName = "";
this.streetName = "";
this.communityName = "";
var split = val.split("&");
this.$emit("input", split[1]);
this.$emit('addressSelect', split[1])
this.$emit("addressSelect", split[1]);
},
// 根据城市编码获取区域列表
getAreas() {
if (this.areaFlag) {
return
return;
}
if (this.cityCode) {
this.fetchData(this.areaList, this.cityCode)
this.fetchData(this.areaList, this.cityCode);
}
},
// 区域修改
changeArea(val) {
this.fetchData(this.streetList, this.areaCode)
this.areaFlag = true
this.streetCode = ''
this.communityCode = ''
this.fetchData(this.streetList, this.areaCode);
this.areaFlag = true;
this.streetCode = "";
this.communityCode = "";
this.streetName=''
this.communityName=''
this.streetName = "";
this.communityName = "";
var split = val.split("&");
this.$emit("input", split[1]);
this.$emit('addressSelect', split[1])
this.$emit("addressSelect", split[1]);
},
// 根据区域编码获取街道列表
getStreet() {
if (this.streetFlag) {
return
return;
}
if (this.areaCode) {
this.fetchData(this.streetList, this.areaCode)
this.streetFlag = true
this.fetchData(this.streetList, this.areaCode);
this.streetFlag = true;
}
},
// 街道修改,拉取对应社区列表
changeStreet(val) {
this.fetchData(this.communityList, this.streetCode)
this.streetFlag = true
this.communityCode = ''
this.fetchData(this.communityList, this.streetCode);
this.streetFlag = true;
this.communityCode = "";
this.communityName=''
this.communityName = "";
var split = val.split("&");
this.$emit("input", split[1]);
this.$emit('addressSelect', split[1])
this.$emit("addressSelect", split[1]);
},
// 根据区域编码获取街道列表
getCommunity() {
if (this.communityFlag) {
return
return;
}
if (this.streetCode) {
this.fetchData(this.communityList, this.streetCode)
this.communityFlag = true
this.fetchData(this.communityList, this.streetCode);
this.communityFlag = true;
}
},
// 社区修改,拉取社区列表
changeCommunity(val) {
this.fetchData(this.communityList, this.streetCode)
this.communityFlag = true
this.fetchData(this.communityList, this.streetCode);
this.communityFlag = true;
var split = val.split("&");
this.$emit("input", split[1]);
this.$emit('addressSelect', split[1])
this.$emit("addressSelect", split[1]);
},
// 重置省市区/县编码
reset() {
this.provinceCode = '',
this.cityCode = '',
this.areaCode = '',
this.streetCode = '',
this.communityCode = ''
(this.provinceCode = ""),
(this.cityCode = ""),
(this.areaCode = ""),
(this.streetCode = ""),
(this.communityCode = "");
},
// 地址编码转换成省市区街道社区列表
addressCodeToList(addressCode) {
if (!addressCode) return false
let parms = {areaCode:addressCode}
this.$post("/base/area/list", parms).then((res) => {
if (res.code == 1) {
if(res.data.data.length>0){
let area = res.data.data[0];
let pid = area.pid + "&" + area.areaCode
if (!addressCode) return false;
let parms = { areaCode: addressCode };
this.$post("/base/area/list", parms)
.then((res) => {
if (res.code == 1) {
if (res.data.data.length > 0) {
let area = res.data.data[0];
let pid = area.pid + "&" + area.areaCode;
if(area.areaLevel=='1'){
//省
this.provinceCode = area.iid + "&" + area.areaCode
this.provinceName = area.name
this.fetchData(this.provinceList, pid)
return
}else if(area.areaLevel=='2'){
//市
this.cityCode = area.iid + "&" + area.areaCode
this.cityName = area.name
this.fetchData(this.cityList, pid)
}else if(area.areaLevel=='3'){
//区县
this.areaCode = area.iid + "&" + area.areaCode
this.areaName = area.name
this.fetchData(this.areaList, pid)
}else if(area.areaLevel=='4'){
//街道
let pid = area.pid + "&" + area.areaCode
this.streetName = area.name
this.fetchData(this.streetList,pid)
this.streetCode = area.iid + "&" + area.areaCode
}else if(area.areaLevel=='5'){
//社区
this.fetchData(this.communityList, pid)
this.communityName = area.name
this.communityCode = area.iid + "&" + area.areaCode
if (area.areaLevel == "1") {
//省
this.provinceCode = area.iid + "&" + area.areaCode;
this.provinceName = area.name;
this.fetchData(this.provinceList, pid);
return;
} else if (area.areaLevel == "2") {
//市
this.cityCode = area.iid + "&" + area.areaCode;
this.cityName = area.name;
this.fetchData(this.cityList, pid);
} else if (area.areaLevel == "3") {
//区县
this.areaCode = area.iid + "&" + area.areaCode;
this.areaName = area.name;
this.fetchData(this.areaList, pid);
} else if (area.areaLevel == "4") {
//街道
let pid = area.pid + "&" + area.areaCode;
this.streetName = area.name;
this.fetchData(this.streetList, pid);
this.streetCode = area.iid + "&" + area.areaCode;
} else if (area.areaLevel == "5") {
//社区
this.fetchData(this.communityList, pid);
this.communityName = area.name;
this.communityCode = area.iid + "&" + area.areaCode;
}
this.$post("/base/area/list", { iid: area.pid }).then((res) => {
this.addressCodeToList(res.data.data[0].areaCode);
});
}
this.$post("/base/area/list", {iid:area.pid}).then((res) => {
this.addressCodeToList(res.data.data[0].areaCode)
})
}
}
}).catch((error) => {
this.$message.error(error.message);
});
}
})
.catch((error) => {
this.$message.error(error.message);
});
},
},
watch: {
......@@ -381,16 +387,16 @@ export default {
immediate: true,
handler(newVal) {
if (newVal) {
this.addressCodeToList(newVal)
this.addressCodeToList(newVal);
} else {
this.$nextTick(() => {
this.reset()
})
this.$nextTick(() => {
this.reset();
});
}
}
}
}
}
},
},
},
};
</script>
<style lang="less" scoped>
......
......@@ -62,6 +62,24 @@
placeholder="请输入详细地址"
/>
</el-row>
<el-row>
<!-- <Field label="所在地" prop="location" v-model="form.location" placeholder="请输入所在地"/> -->
<Field
label="经度"
prop="lon"
v-model="form.lon"
placeholder="请输入经度"
/>
</el-row>
<el-row>
<!-- <Field label="所在地" prop="location" v-model="form.location" placeholder="请输入所在地"/> -->
<Field
label="纬度"
prop="lati"
v-model="form.lati"
placeholder="请输入纬度"
/>
</el-row>
<!-- <Field label="电子邮件地址" prop="email" v-model="form.email" placeholder="请输入电子邮件地址"/>
<Field label="公司网站" prop="website" v-model="form.website" placeholder="请输入公司网站"/>
<Field label="税务登记号" prop="taxRegistrationNumber" v-model="form.taxRegistrationNumber" placeholder="请输入税务登记号"/>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment