City multi-choice component
Recently, I received a request that the management system need to launch an activity, but the activity is based on the region, with the minimum range to the city, so I have the following component
The page is shown as follows:
On the code ~ ~ ~
<template>
<div class="tm-mil-city">
<p class="tm-mil-city-title tm-mil-mb20">{{name}}</p>
<div class="tm-mil-district-box tm-mil-mb20">
< select class = "TM-mil-selsect" style =' width: 200px' v-model =' provider' placeholder =' all' @ on-change =' changeprovider' >
<Option v-for='item in provinceList' :value='item.id' :key='item.id'>{{ item.regionName }}</Option>
</Select>
< span class = "TM-mil-selsect-all-btntm-mil-ml20tm-mil-colb" @ click = "chooselegion" > select all < /span >
<div class="tm-mil-line-loading" v-if="province && ! cityList.length"><img src="../assets/loading.gif" alt=""></div>
<div class="tm-mil-mb20" v-if="cityList.length">
<CheckboxGroup style="marginTop:10px; width:900px" v-model="checkCity">
<Checkbox v-for='item in cityList' :key='item.id' :label="item.regionCode">{{item.regionName}}</Checkbox>
</CheckboxGroup>
< button v-show = "citylist.length" size = "small" style = "margitop: 10px" @ click = "savecheckity" > ok < /Button >
</div>
</div>
< p class = "TM-mil-city-title TM-mil-mb20" > selected region < /p >
<div class="tm-mil-line-loading" v-if="waiting"><img src="../assets/loading.gif" alt=""></div>
<div class="tm-mil-choose-district" v-else>
<div v-for="(item, idx) in allCheckCityShowList" :key="idx">
<span class="tm-mil-colB">{{provinceFilter(item.province)}}</span>
<span class="tm-mil-ml10" v-for="(obj, indx) in item.cityList" :key="indx" >{{obj}}</span>
</div>
<span v-if="! AllCheckCityShowList.length "> all regions < /span >
</div>
</div>
</template>
Note: < select > </select >/< checkboxgroup > </checkboxgroup > are all components of iview. please refer to iview website for details. similarly, elementUi has the same components.
Iview website
ElementUi official website
data() {
return {
waiting: false, // loading
Provision:'',//Current Province
ProvinceList: [], // province list
Municipality: [{id: 2, name:' Beijing' }, {id: 3, name:' Tianjin' }, {id: 10, name:' Shanghai' }, {id: 23, name:' Chongqing' }, {id: 2, name:' Beijing'}],//municipality directly under the central government
CityList: [], // citylist
ActivityTime: [], // activity time
CheckCity: [], // List of Selected Cities in Current Province-Show
AllCheckCityApi: [], ///all city lists-interface
AllCheckCitySave: {// store the list of cities corresponding to all selected provinces-store
// '10001': [{code:'10111', name:' Beijing'}]
},
AllCheckCityShowList: [// store a list of all selected cities-show
//{provision:' 10001', citylist: ['Shanghai', 2, 3]}
]
}
},
Functions:
Please enter the code
//Get Provincial Data
getOrigin() {
this.axios.get(`/users/open/region/topRegions`).then(res => {
if (res.status === 200) {
this.provinceList = res.data
}
})
}
//Return the name of the province
provinceFilter(id) {
return this.provinceList.filter(item => item.id === id)[0].regionName
}
//Select all regions
chooseAllRegion() {
this.province = 0
this.cityList = []
this.checkCity = []
this.allCheckCityApi = []
this.allCheckCitySave = []
this.allCheckCityShowList = []
}
//Store Data after Saving City-Interface
handleSaveCityList() {
let _arr = []
for (var key in this.allCheckCitySave) {
_arr = _arr.concat(this.allCheckCitySave[key])
}
this.allCheckCityApi = _arr
}
//Change Province
changeProvince(parentId) {
if (! parentId) {
return
}
this.cityList = []
//Get a list of cities in the province
this.axios.get(`/users/open/region/${parentId}/subRegions`).then(res => {
if (res.status === 200) {
this.cityList = res.data
}
})
//Handle the selected cities
let _checkCity = this.allCheckCitySave[parentId] || []
let _checkCityList = []
_checkCity.forEach(el => {
_checkCityList.push(el.regionCode)
})
this.checkCity = JSON.parse(JSON.stringify(_checkCityList))
}
//Save the selected current city
saveCheckCity() {
//Process the selection of different provinces and save the selected launching cities in the current province.
if (! this.checkCity.length) {
return
}
this.waiting = true
//provincial code of current city
let _province = JSON.parse(JSON.stringify(this.province))
//Province name of current city
let _provinceName = this.Municipality.filter(el => el.id === _province)[0] && this.Municipality.filter(el => el.id === _province)[0].name || ''
//list of selected cities (code name level)
let _arrCheckMsgList = []
//currently selected city code
let _arrCheck = JSON.parse(JSON.stringify(this.checkCity))
_arrCheck.forEach(el => {
let _obj = this.cityList.filter(_el => _el.regionCode === el)[0]
//Distinguish municipal districts
let _regionName = _provinceName + _obj.regionName
let _regionLevel = _obj.regionLevel
let obj = {regionCode: el, regionName: _regionName, regionLevel: _regionLevel, parentId: _province}
// let obj = {regionCode: el, regionName: _regionName, regionLevel: _regionLevel}
_arrCheckMsgList.push(obj)
})
//Store in the list of selected cities corresponding to the current province-Store
this.$set(this.allCheckCitySave, _province, _arrCheckMsgList)
//Store Data after Saving City-Interface
this.handleSaveCityList()
//Handle the data display of the selected release area
let _arrCheckMsg = []
//processing the display list-city name-municipality directly under the central government (Beijing, Shanghai, etc.) prefix the municipality directly under the central government when selecting regions, e.g. Beijing municipality area/Beijing county
this.cityList.map(obj => {
if (_arrCheck.indexOf(obj.regionCode) > -1) {
_arrCheckMsg.push(_provinceName + obj.regionName)
}
})
let _msgObj = {
province: _province,
cityList: _arrCheckMsg
}
let _len = this.allCheckCityShowList.filter(item => item.province === _province).length || 0
//Add/Replace
if (! _len) {
this.allCheckCityShowList.push(_msgObj)
this.waiting = false
} else {
this.allCheckCityShowList.forEach((item, idx) => {
if (item.province === _province) {
this.$set(this.allCheckCityShowList, idx, _msgObj)
this.waiting = false
return
}
})
}
}
I have already mentioned it. The specific explanation is in the notes. Please leave a message if you have any questions ~