|
@@ -69,11 +69,6 @@ p {
|
|
|
<div class="content-box">
|
|
|
<p class="content-title">省份</p>
|
|
|
<div class="content">
|
|
|
- <!-- <a-checkbox-group
|
|
|
- :options="province"
|
|
|
- >
|
|
|
- <span style="color: red" slot="label" slot-scope="{value}">{{value}}</span>
|
|
|
- </a-checkbox-group>-->
|
|
|
<p>
|
|
|
<input type="checkbox" class="select_all" @change="checkAllBox" v-model="checkAll" /> 全选
|
|
|
</p>
|
|
@@ -105,20 +100,28 @@ p {
|
|
|
>
|
|
|
<p class="content-title">城市</p>
|
|
|
<div class="content">
|
|
|
+ <!-- <p>
|
|
|
+ <input
|
|
|
+ type="checkbox"
|
|
|
+ class="select_all"
|
|
|
+ @change="checkAllBoxCity"
|
|
|
+ v-model="checkAllCity"
|
|
|
+ /> 全选
|
|
|
+ </p>-->
|
|
|
<p
|
|
|
v-for="(item,index) of city"
|
|
|
:key="item.id"
|
|
|
:class="{backgroundOnly:cityIndex == index}"
|
|
|
>
|
|
|
- <!-- <input
|
|
|
+ <input
|
|
|
class="checkItem"
|
|
|
type="checkbox"
|
|
|
:value="item.value"
|
|
|
:id="item.value"
|
|
|
- v-model="checkMatched"
|
|
|
- @change="checkOne(item,index)"
|
|
|
- /> -->
|
|
|
- {{item.name}}
|
|
|
+ v-model="checkMatchedCity"
|
|
|
+ @change="checkOneCity(item,index)"
|
|
|
+ />
|
|
|
+ {{item.label}}
|
|
|
</p>
|
|
|
</div>
|
|
|
</div>
|
|
@@ -135,10 +138,10 @@ p {
|
|
|
<div class="content">
|
|
|
<p v-for="(item,index) of checkData" :key="index">
|
|
|
{{item.label}}
|
|
|
- <span
|
|
|
+ <!-- <span
|
|
|
style="float:right;font-weight:normal;color:blue;cursor: pointer;font-size:14px"
|
|
|
@click="detele(item,index)"
|
|
|
- >删除</span>
|
|
|
+ >删除</span>-->
|
|
|
</p>
|
|
|
</div>
|
|
|
</div>
|
|
@@ -166,7 +169,9 @@ export default {
|
|
|
provinceIndex: null,
|
|
|
cityIndex: null,
|
|
|
checkAll: false,
|
|
|
- arr: []
|
|
|
+ checkMatchedCity: [],
|
|
|
+ checkAllCity: false,
|
|
|
+ nowProvince: null
|
|
|
}
|
|
|
},
|
|
|
computed: {},
|
|
@@ -195,9 +200,27 @@ export default {
|
|
|
this.showClass = false
|
|
|
this.provinceIndex = index
|
|
|
this.cityIndex = null
|
|
|
+ this.nowProvince = item
|
|
|
+ this.checkMatchedCity = []
|
|
|
getProvince(this.CityData, { parentCode: item.value }).then(res => {
|
|
|
if (res.code == '0') {
|
|
|
- this.city.push(...res.result.records)
|
|
|
+ this.city = res.result.records.map(item => {
|
|
|
+ return {
|
|
|
+ label: item.name,
|
|
|
+ value: item.id
|
|
|
+ }
|
|
|
+ })
|
|
|
+ if (this.checkMatched.indexOf(item.value) != -1) {
|
|
|
+ this.checkAllCity = true
|
|
|
+ this.checkMatchedCity = this.city.map(item => {
|
|
|
+ return item.value
|
|
|
+ })
|
|
|
+ } else {
|
|
|
+ this.checkMatchedCity = this.checkData.map(item => {
|
|
|
+ return item.value
|
|
|
+ })
|
|
|
+ }
|
|
|
+ // this.city.push(...res.result.records)
|
|
|
this.showCityData = true
|
|
|
}
|
|
|
})
|
|
@@ -213,32 +236,104 @@ export default {
|
|
|
} else {
|
|
|
this.checkMatched = []
|
|
|
this.checkData = []
|
|
|
+ this.checkMatchedCity = []
|
|
|
}
|
|
|
},
|
|
|
checkOne(item, index) {
|
|
|
if (this.checkMatched.indexOf(item.value) == -1) {
|
|
|
var index = this.checkData.findIndex(v => v.value === item.value)
|
|
|
this.checkData.splice(index, 1)
|
|
|
+ if (this.nowProvince.value == item.value) {
|
|
|
+ this.checkMatchedCity = []
|
|
|
+ }
|
|
|
this.checkAll = false
|
|
|
} else {
|
|
|
this.checkData.push(item)
|
|
|
+ if (this.nowProvince) {
|
|
|
+ if (item.value == this.nowProvince.value) {
|
|
|
+ this.checkMatchedCity = this.city.map(item => {
|
|
|
+ return item.value
|
|
|
+ })
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ if (this.checkData.length == this.province.length) {
|
|
|
+ this.checkAll = true
|
|
|
}
|
|
|
- if(this.checkData.length == this.province.length){
|
|
|
- this.checkAll = true
|
|
|
+ },
|
|
|
+ checkAllBoxCity() {
|
|
|
+ this.checkMatchedCity = []
|
|
|
+ if (this.checkAllCity) {
|
|
|
+ this.checkMatchedCity = this.city.map(item => {
|
|
|
+ return item.value
|
|
|
+ })
|
|
|
+ this.checkMatched.push(this.nowProvince.value)
|
|
|
+ this.checkData.push(this.nowProvince)
|
|
|
+ } else {
|
|
|
+ this.checkMatchedCity = []
|
|
|
+ var index = this.checkData.findIndex(v => v.value === this.nowProvince.value)
|
|
|
+ var index1 = this.checkMatched.findIndex(v => v === this.nowProvince.value)
|
|
|
+ this.checkData.splice(index, 1)
|
|
|
+ this.checkMatched.splice(index1, 1)
|
|
|
+ }
|
|
|
+ },
|
|
|
+ checkOneCity(item, index) {
|
|
|
+ var allCity = this.checkMatchedCity.filter(v => {
|
|
|
+ return v.toString().slice(0, 2) == this.nowProvince.value
|
|
|
+ })
|
|
|
+
|
|
|
+ if (allCity.length == this.city.length) {
|
|
|
+ this.checkMatched.push(this.nowProvince.value)
|
|
|
+ this.checkData.push(this.nowProvince)
|
|
|
+ for (var i = 0; i < this.checkMatchedCity.length; i++) {
|
|
|
+ for (var j = 0; j < this.checkData.length; j++) {
|
|
|
+ if (
|
|
|
+ this.checkMatchedCity[i] == this.checkData[j].value &&
|
|
|
+ this.checkMatchedCity[i].toString().slice(0, 2) == this.nowProvince.value
|
|
|
+ ) {
|
|
|
+ this.checkData.splice(j, 1)
|
|
|
+ j--
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ if (this.checkMatchedCity.indexOf(item.value) != -1) {
|
|
|
+ if (allCity.length != this.city.length) {
|
|
|
+ this.checkData.push(item)
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ if (this.checkMatched.indexOf(this.nowProvince.value) != -1) {
|
|
|
+ var index1 = this.checkData.findIndex(v => v.value === this.nowProvince.value)
|
|
|
+ var index2 = this.checkMatched.findIndex(v => v === this.nowProvince.value)
|
|
|
+ this.checkData.splice(index1, 1)
|
|
|
+ this.checkMatched.splice(index2, 1)
|
|
|
+ var data = this.city.filter(v => {
|
|
|
+ return v.value != item.value
|
|
|
+ })
|
|
|
+ this.checkData.push(...data)
|
|
|
+ } else {
|
|
|
+ var index1 = this.checkData.findIndex(v => v.value === item.value)
|
|
|
+ this.checkData.splice(index1, 1)
|
|
|
+ }
|
|
|
}
|
|
|
},
|
|
|
clear() {
|
|
|
this.checkData = []
|
|
|
this.checkMatched = []
|
|
|
+ this.checkMatchedCity = []
|
|
|
this.checkAll = false
|
|
|
this.$emit('update:checkData', this.checkData)
|
|
|
},
|
|
|
- detele(item,index) {
|
|
|
+ detele(item, index) {
|
|
|
+ // if (this.checkMatched.indexOf(this.nowProvince.value) != -1) {
|
|
|
var index1 = this.checkMatched.findIndex(v => v === item.value)
|
|
|
var index2 = this.checkData.findIndex(v => v.value === item.value)
|
|
|
this.checkData.splice(index2, 1)
|
|
|
this.checkMatched.splice(index1, 1)
|
|
|
this.checkAll = false
|
|
|
+ // } else {
|
|
|
+ // }
|
|
|
+
|
|
|
this.$emit('update:checkData', this.checkData)
|
|
|
}
|
|
|
}
|