vantのArea省市街地選択コンポーネント
28708 ワード
ポイントはインタフェースから得られたデータをvantコンポーネント所定のフォーマットに変異させること!!
{province_list:{110000:'北京市',120000:'天津市'},city_List:{110100:'北京市',110200:'県',120100:'天津市',120200:'県'},county_List:{110101:'東城区',110102:'西城区',110105:'朝陽区',110106:'豊台区'120101:'平和区',120102:'河東区',120103:'河西区',120104:'南開区',120105:'河北区',//...}
しかも私は地区コードが全6位を補充しなくてもいいことを発見して、不思議です!!
インタフェースからデータを取得した後:
市街地はみな同じやり方だ
最後に得られたデータは次のとおりです.
html:
js:
-----------------------------------------------------------------------------------
検索する時あいまいに検索して、すべての列にプラスすることができます:全国、全省、全市
でも値を取るときは面倒です
{province_list:{110000:'北京市',120000:'天津市'},city_List:{110100:'北京市',110200:'県',120100:'天津市',120200:'県'},county_List:{110101:'東城区',110102:'西城区',110105:'朝陽区',110106:'豊台区'120101:'平和区',120102:'河東区',120103:'河西区',120104:'南開区',120105:'河北区',//...}
しかも私は地区コードが全6位を補充しなくてもいいことを発見して、不思議です!!
インタフェースからデータを取得した後:
let province_temp = {};
let province = msg.row_data.record；
province.forEach(item => {
province_temp[item.i] = item.n;// =
})
this.areaList['province_list'] = province_temp;
// ： ， ， 市街地はみな同じやり方だ
最後に得られたデータは次のとおりです.
this.areaList:{
province_list:{
11: " ",
12: " ",
13: " ",
14: " ",
15: " ",
...
},
city_list:{
1101: " "
},
county_list:{
110101: " ",
110102: " ",
110105: " ",
110106: " ",
...
}
} html:
<van-cell-group>
<van-field
readonly
clickable
name="area1"
:value="screenval1"
label=" "
placeholder=" "
v-on:click="areaSelect1"
>van-field>
<van-popup v-model="city_show1" position="bottom">
<van-area title=" " :area-list="areaList" v-on:confirm="confirm1" v-on:cancel="oncancel1" v-on:change="changearea" ref="area1">van-area>
van-popup>
van-cell-group>js:
data:
screenval1:'', //
city_show1: false,//
address1:{},//
screenval1:'', //
addarea_map:false,
OriginAddr:'',//
//
changearea(picker, values,column){
//values
//column 012
this.provincecode = Number(values[0].code);//
this.getAreaListcity(this.provincecode,column);//
//
if(values[1]){
// ，
this.citycode = Number(values[1].code);
this.getAreaListcounty(this.citycode);
}
},
//
areaSelect1(){
this.city_show1 = true;
this.cleanarea(1);// ，
},
oncancel1(){
this.city_show1 = false;
},
//， ， input
confirm1(val){
this.screenval1 = val[0].name + "-" + val[1].name + "-" + val[2].name;
this.address_code1 = val[2].code;
this.address1["OProvince"] = val[0].name;
this.address1["OCity"] = val[1].name;
this.address1["OArea"] = val[2].name;
this.address1["OPCode"] = val[0].code;
this.address1["OCCode"] = val[1].code;
this.address1["OACode"] = val[2].code;
this.city_show1 = false;
},
//
cleanarea(num){
let self = this;
this.areaList = {
province_list: {},//
city_list: {},//
county_list: {},//
};
// ，
this.areaList = deepClone(this.areaListTemp);
//
this.getAreaListprovince(0);
this.getAreaListcity(Number(this.address1.OPCode));// ，
this.getAreaListcounty(Number(this.address1.OCCode));// ，
this.$nextTick(function(){
//ref nextTick ， dom
// ， reset code ， 370211， ！！！
self.$refs.area1.reset(String(this.address1.OACode));
})
},//
let getAreaData = (level,parentID,addAll) => {
return axios.get("/Management/Prov_City_Area_Street_GetList", {
params: {
level: level,
parentID: parentID,
addAll: addAll// ，vant
}
})
};
// ，
async getAreaListprovince(code1){
let self = this;
await getAreaData(0,code1,0).then(msg => {
if (msg.status.code == 1) {
//console.log(msg.row_data.record)
let province_temp = {};
let province = msg.row_data.record//
// ， ，
province.forEach(item => {
province_temp[item.i] = item.n;
//province_temp['defaultIndex'] = 8; https://youzan.github.io/vant/#/zh-CN/picker
})
//console.log(province_temp)
self.areaList['province_list'] = province_temp;
if(this.onlyone==0){
self.areaListTemp['province_list'] = deepClone(province_temp);
}
} else {
self.$toast(msg.status.msg)
return;
};
}).catch(msg=>{
console.log(msg)
//self.$toast(msg)
})
},
//
//code2: column:
async getAreaListcity(code2,column){
let self = this;
await getAreaData(1,code2,0).then(msg => {
if (msg.status.code == 1) {
let city_temp = {};
let city = msg.row_data.record;//
// ， ，
city.forEach(item => {
city_temp[item.i] = item.n;
});
self.areaList['city_list'] = city_temp;
if(code2==11 && this.onlyone==0){
self.areaListTemp['city_list'] = deepClone(city_temp);
}
// ，
if(city[0].i && column == 0){
self.citycode = city[0].i;
self.getAreaListcounty(self.citycode);
}
} else {
self.$toast(msg.status.msg)
return;
};
}).catch(msg=>{
console.log(msg)
//self.$toast(msg)
})
},
//
//code3:
async getAreaListcounty(code3){
let self = this;
await getAreaData(2,code3,0).then(msg => {
if (msg.status.code == 1) {
let county_temp = {};
let county = msg.row_data.record;//
county.forEach(item => {
county_temp[item.i] = item.n;
})
self.areaList['county_list'] = county_temp;
if(code3==1101 && this.onlyone==0) {
self.areaListTemp['county_list'] = deepClone(county_temp);
this.onlyone==1;
}
} else {
self.$toast(msg.status.msg)
return;
};
}).catch(msg=>{
console.log(msg)
//self.$toast(msg)
})
},-----------------------------------------------------------------------------------
検索する時あいまいに検索して、すべての列にプラスすることができます:全国、全省、全市
<van-popup v-model="city_show1" position="bottom">
<van-area title=" " :area-list="areaList" v-on:confirm="confirm1" cancel-button-text=" " v-on:cancel="oncancel1" v-on:change="changearea" ref="area1" :columns-placeholder="[' ', ' ', ' ']">van-area>
van-popup>でも値を取るときは面倒です
confirm1(val){
if(val[0].name == '' && val[0].code == ''){
//
val[0].name = ' ';
val[0].code = 0;
this.OProvince = 0;// code( 0)
this.OCity = 0;// code( 0)
this.OArea = 0;// code( 0)
this.address1["OProvince"] = ' ';
this.address1["OCity"] = ' ';
this.address1["OArea"] = ' ';
this.address1["OPCode"] = 0;
this.address1["OCCode"] = 0;
this.address1["OACode"] = 0;// ，
this.screenval1 = ' ';
}else if(val[1].name == '' && val[1].code == ''){
//
val[1].name = ' ';
val[1].code = 0;
this.OProvince = val[0].code;// code( 0)
this.OCity = 0;// code( 0)
this.OArea = 0;// code( 0)
this.address1["OProvince"] = val[0].name;
this.address1["OCity"] = ' ';
this.address1["OArea"] = ' ';
this.address1["OPCode"] = val[0].code;
this.address1["OCCode"] = 0;
this.address1["OACode"] = val[0].code;// ，
this.screenval1 = val[0].name;
}else if(val[2].name == '' && val[2].code == ''){
// ，
val[2].name = ' ';
val[2].code = 0;
this.OProvince = val[0].code;// code( 0)
this.OCity = val[1].code;// code( 0)
this.OArea = 0;// code( 0)
this.address1["OProvince"] = val[0].name;
this.address1["OCity"] = val[1].name;
this.address1["OArea"] = ' ';
this.address1["OPCode"] = val[0].code;
this.address1["OCCode"] = val[1].code;
this.address1["OACode"] = val[1].code;// ，
this.screenval1 = val[1].name;
}else{
//
this.OProvince = val[0].code;// code( 0)
this.OCity = val[1].code;// code( 0)
this.OArea = val[2].code;// code( 0)
this.address1["OProvince"] = val[0].name;
this.address1["OCity"] = val[1].name;
this.address1["OArea"] = val[2].name;
this.address1["OPCode"] = val[0].code;
this.address1["OCCode"] = val[1].code;
this.address1["OACode"] = val[2].code;// ，
this.screenval1 = val[1].name + "-" + val[2].name;// val[0].name + "-" +
}
this.getData(1,pageSize);
this.city_show1 = false;
},