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

地区选择回显优化3

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