提交 aa8d61db 编写于 作者: yi.li's avatar yi.li

地区选择回显优化3

上级 0acd1a33
...@@ -19,7 +19,7 @@ ...@@ -19,7 +19,7 @@
size="small" size="small"
ref="cascaderRegion" ref="cascaderRegion"
:options="optionsRegion" :options="optionsRegion"
:props="props" :props="propsRegion"
v-model="changeInfoForm.area" v-model="changeInfoForm.area"
@change="handleChange" @change="handleChange"
filterable filterable
...@@ -85,7 +85,7 @@ ...@@ -85,7 +85,7 @@
countyList: [], countyList: [],
townList: [], townList: [],
region: [], region: [],
props: { propsRegion: {
value: "id", value: "id",
label: "name", label: "name",
children: "children", children: "children",
...@@ -93,55 +93,48 @@ ...@@ -93,55 +93,48 @@
lazyLoad(node, resolve) { lazyLoad(node, resolve) {
const { level } = node; const { level } = node;
console.log("node", node); console.log("node", node);
//初始化时,把children置为空,解决回显数据会重复问题
node.children = [];
if (node.level == 1) { if (node.level == 1) {
vm.changeInfoForm.provinceName = node.data.label;
vm.changeInfoForm.provinceId = node.data.value;
let req = { let req = {
provinceId: node.data.id provinceId: node.data.id
}; };
vm.GET("basic-data/position/cities", req).then(res => { vm.GET("basic-data/position/cities", req).then(res => {
let newData = res.data.cityList; let newData = res.data.cityList;
vm.cityList = res.data.cityList;
newData.map(item => { newData.map(item => {
vm.$set(item, "id", item.cityId); vm.$set(item, "id", item.cityId);
vm.$set(item, "name", item.cityName); vm.$set(item, "name", item.cityName);
vm.$set(item, "children", []); vm.$set(item, "children", []);
}); });
// console.log("newData", newData); console.log("newData省", newData);
resolve(newData); resolve(newData);
}); });
} else if (node.level == 2) { } else if (node.level == 2) {
vm.changeInfoForm.cityName = node.data.label;
vm.changeInfoForm.cityId = node.data.value;
let req = { let req = {
cityId: node.data.id cityId: node.data.id
}; };
vm.GET("basic-data/position/counties", req).then(res => { vm.GET("basic-data/position/counties", req).then(res => {
let newData = res.data.countyList; let newData = res.data.countyList;
vm.countyList = res.data.countyList;
newData.map(item => { newData.map(item => {
vm.$set(item, "id", item.countyId); vm.$set(item, "id", item.countyId);
vm.$set(item, "name", item.countyName); vm.$set(item, "name", item.countyName);
vm.$set(item, "children", []); vm.$set(item, "children", []);
}); });
// console.log("newData", newData); console.log("newData市", newData);
resolve(newData); resolve(newData);
}); });
} else if (node.level == 3) { } else if (node.level == 3) {
vm.changeInfoForm.countyName = node.data.label;
vm.changeInfoForm.countyId = node.data.value;
let req = { let req = {
countyId: node.data.id countyId: node.data.id
}; };
vm.GET("basic-data/position/towns", req).then(res => { vm.GET("basic-data/position/towns", req).then(res => {
let newData = res.data.townList; let newData = res.data.townList;
vm.townList = res.data.townList;
newData.map(item => { newData.map(item => {
vm.$set(item, "id", item.townId); vm.$set(item, "id", item.townId);
vm.$set(item, "name", item.townName); vm.$set(item, "name", item.townName);
vm.$set(item, "leaf", true); vm.$set(item, "leaf", true);
}); });
// console.log("newData", newData); console.log("newData县", newData);
resolve(newData); resolve(newData);
}); });
} }
...@@ -211,15 +204,16 @@ ...@@ -211,15 +204,16 @@
}, },
watch: { watch: {
async showChangeInfo(val) { showChangeInfo(val) {
if (val) { if (val) {
await this.initData(); this.initData();
this.$forceUpdate();
} }
}, },
}, },
methods: { methods: {
async initData() { async initData() {
await this.getRegionOption()
console.log('父级传入的值',this.receiveInfo); console.log('父级传入的值',this.receiveInfo);
const { receiver, receiverMobile, provinceId, provinceName, cityId, cityName, countyId, countyName, townId, townName, address } = this.receiveInfo; const { receiver, receiverMobile, provinceId, provinceName, cityId, cityName, countyId, countyName, townId, townName, address } = this.receiveInfo;
this.changeInfoForm.receiver = receiver; this.changeInfoForm.receiver = receiver;
...@@ -234,34 +228,23 @@ ...@@ -234,34 +228,23 @@
this.changeInfoForm.townId = townId; this.changeInfoForm.townId = townId;
this.changeInfoForm.townName = townName; this.changeInfoForm.townName = townName;
await this.getRegionOption()
//对地区数据做回显处理 //对地区数据做回显处理
if(provinceId) { /*if(provinceId) {
await this.getCity(provinceId);
// if(provinceId) {
await this.getCity(provinceId);
// }
if(cityId) { if(cityId) {
await this.getCounty(provinceId, cityId); await this.getCounty(provinceId, cityId);
if(countyId) {
await this.getTown(provinceId, cityId, countyId);
}
} }
if(countyId) { // vm.$refs["cascaderRegion"].inputValue = `${provinceName} / ${cityName} / ${countyName} / ${townName}`;
await this.getTown(provinceId, cityId, countyId);
}
this.changeInfoForm.area = [Number(provinceId), Number(cityId), Number(countyId), Number(townId)]; this.changeInfoForm.area = [Number(provinceId), Number(cityId), Number(countyId), Number(townId)];
this.$forceUpdate(); // this.$forceUpdate();
}else { }else {
this.changeInfoForm.area = []; this.changeInfoForm.area = [];
} }*/
console.log('传入值处理后',this.changeInfoForm) // console.log('传入值处理后',this.changeInfoForm)
/*let arrayLike = {
0: provinceId,
1: cityId,
2: countyId,
3: townId,
'length': 4
}
let arr = Array.from(arrayLike)
console.log('初始化后的值',arr);*/
}, },
handleChange(value) { handleChange(value) {
let areaId = "000"; let areaId = "000";
...@@ -270,7 +253,6 @@ ...@@ -270,7 +253,6 @@
} }
this.administrativeValue = areaId; this.administrativeValue = areaId;
console.log('修改后的值',value, this.administrativeValue); console.log('修改后的值',value, this.administrativeValue);
// 000_110_110100000000_110101000000_110101001000
setTimeout(function() { setTimeout(function() {
let region = vm.$refs["cascaderRegion"].inputValue; let region = vm.$refs["cascaderRegion"].inputValue;
...@@ -281,18 +263,6 @@ ...@@ -281,18 +263,6 @@
//获取地区 //获取地区
async getRegionOption() { async getRegionOption() {
let req = {}; let req = {};
// openLoading(vm);
// vm.GET("basic-data/position/provinces", req).then(res => {
// closeLoading(vm);
// if (res.code == "000000") {
// this.provinceList = res.data.provinceList;
// vm.optionsRegion = operationData.setRegionOption3(
// res.data.provinceList
// );
// console.log('region',vm.optionsRegion)
// }
// });
vm.GET("basic-data/position/provinces", req).then((data) => { vm.GET("basic-data/position/provinces", req).then((data) => {
if(data.code == '000000') { if(data.code == '000000') {
this.provinceList = data.data.provinceList; this.provinceList = data.data.provinceList;
...@@ -302,10 +272,115 @@ ...@@ -302,10 +272,115 @@
this.$set(item, "children", []); this.$set(item, "children", []);
}); });
this.optionsRegion = this.provinceList; this.optionsRegion = this.provinceList;
// this.$forceUpdate();
const { provinceId, provinceName, cityId, cityName, countyId, countyName, townId, townName } = this.receiveInfo;
if (provinceId) {
vm.GET("basic-data/position/cities", {provinceId: provinceId}).then((data) => {
if(data.code == '000000') {
this.cityList = data.data.cityList;
this.cityList.map(item => {
this.$set(item, "id", item.cityId);
this.$set(item, "name", item.cityName);
this.$set(item, "children", []);
});
this.optionsRegion.map((item, index) => {
if(item.id == provinceId) {
item.children = this.cityList;
}
})
if (cityId) {
vm.GET("basic-data/position/counties", {cityId: cityId}).then((data) => {
if(data.code == '000000') {
this.countyList = data.data.countyList;
this.countyList.map(item => {
this.$set(item, "id", item.countyId);
this.$set(item, "name", item.countyName);
this.$set(item, "children", []);
if (countyId == 110100000000) {
this.$set(item, "leaf", true);
}
});
this.optionsRegion.map((item, index) => {
if(item.id == provinceId) {
item.children.map((city, idx) => {
if(city.id == cityId) {
city.children = this.countyList;
}
})
}
})
if (countyId) {
vm.GET("basic-data/position/towns", {countyId: countyId}).then((data) => {
if(data.code == '000000') {
this.townList = data.data.townList;
this.townList.map(item => {
this.$set(item, "id", item.townId);
this.$set(item, "name", item.townName);
this.$set(item, "leaf", true);
});
this.optionsRegion.map((item, index) => {
if(item.id == provinceId) {
item.children.map((city, index2) => {
if(city.id == cityId) {
city.children.map((county, index3) => {
if(county.id == countyId) {
county.children = this.townList;
}
})
}
})
}
})
}
})
}
}
})
}
}
})
}
if(provinceId) {
if (!townId) {
this.changeInfoForm.area = [Number(provinceId), Number(cityId), Number(countyId)];
}else {
this.changeInfoForm.area = [Number(provinceId), Number(cityId), Number(countyId), Number(townId)];
}
this.$forceUpdate();
}else {
this.changeInfoForm.area = [];
}
} }
}) })
}, },
/*async getRegionOption() {
let req = {};
/!* openLoading(vm);
await vm.GET("basic-data/position/provinces", req).then(res => {
closeLoading(vm);
if (res.code == "000000") {
this.provinceList = res.data.provinceList;
vm.optionsRegion = operationData.setRegionOption3(
res.data.provinceList
);
console.log('region',vm.optionsRegion)
}
});*!/
vm.GET("basic-data/position/provinces", req).then((data) => {
if(data.code == '000000') {
this.provinceList = data.data.provinceList;
this.provinceList.map(item => {
this.$set(item, "id", item.provinceId);
this.$set(item, "name", item.provinceName);
this.$set(item, "children", []);
});
this.optionsRegion = this.provinceList;
}
})
},*/
async getCity(provinceId) { async getCity(provinceId) {
await vm.GET("basic-data/position/cities", {provinceId: provinceId}).then((data) => { await vm.GET("basic-data/position/cities", {provinceId: provinceId}).then((data) => {
if(data.code == '000000') { if(data.code == '000000') {
...@@ -390,6 +465,7 @@ ...@@ -390,6 +465,7 @@
return option; return option;
}, },
cancelChangeInfo() { cancelChangeInfo() {
this.changeInfoForm.area = [];
this.$emit('closeChangeInfo',{type: 1}) this.$emit('closeChangeInfo',{type: 1})
}, },
setAreaData() { setAreaData() {
...@@ -397,12 +473,20 @@ ...@@ -397,12 +473,20 @@
this.changeInfoForm.provinceId = this.changeInfoForm.area[0]; this.changeInfoForm.provinceId = this.changeInfoForm.area[0];
this.changeInfoForm.cityId = this.changeInfoForm.area[1]; this.changeInfoForm.cityId = this.changeInfoForm.area[1];
this.changeInfoForm.countyId = this.changeInfoForm.area[2]; this.changeInfoForm.countyId = this.changeInfoForm.area[2];
this.changeInfoForm.townId = this.changeInfoForm.area[3]; if (this.changeInfoForm.area.length == 4) {
this.changeInfoForm.townId = this.changeInfoForm.area[3];
}else {
this.changeInfoForm.townId = null;
}
if (vm.region.length) { if (vm.region.length) {
this.changeInfoForm.provinceName = vm.region[0]; this.changeInfoForm.provinceName = vm.region[0];
this.changeInfoForm.cityName = vm.region[1]; this.changeInfoForm.cityName = vm.region[1];
this.changeInfoForm.countyName = vm.region[2]; this.changeInfoForm.countyName = vm.region[2];
this.changeInfoForm.townName = vm.region[3]; if (vm.region.length == 4) {
this.changeInfoForm.townName = vm.region[3];
}else {
this.changeInfoForm.townName = '';
}
} }
} }
}, },
......
...@@ -354,6 +354,8 @@ ...@@ -354,6 +354,8 @@
lazyLoad(node, resolve) { lazyLoad(node, resolve) {
const { level } = node; const { level } = node;
console.log("node", node); console.log("node", node);
//初始化时,把children置为空,解决回显数据会重复问题
node.children = [];
if (node.level == 1) { if (node.level == 1) {
let req = { let req = {
provinceId: node.data.id provinceId: node.data.id
......
Markdown 格式
0% or
您添加了 0 到此讨论。请谨慎行事。
先完成此消息的编辑!
想要评论请 注册