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

feated:添加经纬度

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