|
@@ -75,30 +75,26 @@ p {
|
|
<span style="color: red" slot="label" slot-scope="{value}">{{value}}</span>
|
|
<span style="color: red" slot="label" slot-scope="{value}">{{value}}</span>
|
|
</a-checkbox-group>-->
|
|
</a-checkbox-group>-->
|
|
<p>
|
|
<p>
|
|
- <input
|
|
|
|
- v-model="isAllChecked"
|
|
|
|
- type="checkbox"
|
|
|
|
- @click="checkAll($event)"
|
|
|
|
- class="select_all"
|
|
|
|
- /> 全选
|
|
|
|
|
|
+ <input type="checkbox" class="select_all" @change="checkAllBox" v-model="checkAll" /> 全选
|
|
</p>
|
|
</p>
|
|
|
|
|
|
<p
|
|
<p
|
|
v-for="(item,index) of province"
|
|
v-for="(item,index) of province"
|
|
:key="item.value"
|
|
:key="item.value"
|
|
- @click="showCity(item,index)"
|
|
|
|
:class="{backgroundOnly:provinceIndex == index}"
|
|
:class="{backgroundOnly:provinceIndex == index}"
|
|
>
|
|
>
|
|
<input
|
|
<input
|
|
class="checkItem"
|
|
class="checkItem"
|
|
type="checkbox"
|
|
type="checkbox"
|
|
- v-model="checkeds"
|
|
|
|
- :value="item.id"
|
|
|
|
- @onClick="checkeda(item.id)"
|
|
|
|
- @change="changChecked"
|
|
|
|
- :id="item.id"
|
|
|
|
|
|
+ :value="item.value"
|
|
|
|
+ :id="item.value"
|
|
|
|
+ v-model="checkMatched"
|
|
|
|
+ @change="checkOne(item,index)"
|
|
/>
|
|
/>
|
|
- {{item.label}}
|
|
|
|
|
|
+ <span
|
|
|
|
+ @click="showCity(item,index)"
|
|
|
|
+ style="color:black;display:inline-block;margin-left:5px;width:80%"
|
|
|
|
+ >{{item.label}}</span>
|
|
</p>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@@ -112,9 +108,18 @@ p {
|
|
<p
|
|
<p
|
|
v-for="(item,index) of city"
|
|
v-for="(item,index) of city"
|
|
:key="item.id"
|
|
:key="item.id"
|
|
- @click="showRegion(item.code,index)"
|
|
|
|
:class="{backgroundOnly:cityIndex == index}"
|
|
:class="{backgroundOnly:cityIndex == index}"
|
|
- >{{item.name}}</p>
|
|
|
|
|
|
+ >
|
|
|
|
+ <!-- <input
|
|
|
|
+ class="checkItem"
|
|
|
|
+ type="checkbox"
|
|
|
|
+ :value="item.value"
|
|
|
|
+ :id="item.value"
|
|
|
|
+ v-model="checkMatched"
|
|
|
|
+ @change="checkOne(item,index)"
|
|
|
|
+ /> -->
|
|
|
|
+ {{item.name}}
|
|
|
|
+ </p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@@ -129,10 +134,10 @@ p {
|
|
</p>
|
|
</p>
|
|
<div class="content">
|
|
<div class="content">
|
|
<p v-for="(item,index) of checkData" :key="index">
|
|
<p v-for="(item,index) of checkData" :key="index">
|
|
- {{item.name}}
|
|
|
|
|
|
+ {{item.label}}
|
|
<span
|
|
<span
|
|
style="float:right;font-weight:normal;color:blue;cursor: pointer;font-size:14px"
|
|
style="float:right;font-weight:normal;color:blue;cursor: pointer;font-size:14px"
|
|
- @click="detele(index)"
|
|
|
|
|
|
+ @click="detele(item,index)"
|
|
>删除</span>
|
|
>删除</span>
|
|
</p>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
@@ -144,6 +149,7 @@ p {
|
|
<script>
|
|
<script>
|
|
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
|
|
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
|
|
import { getProvince } from '@/api/manage'
|
|
import { getProvince } from '@/api/manage'
|
|
|
|
+import $ from 'jquery'
|
|
export default {
|
|
export default {
|
|
name: 'ByteDanceUserOrientationTemplateList',
|
|
name: 'ByteDanceUserOrientationTemplateList',
|
|
components: {},
|
|
components: {},
|
|
@@ -160,8 +166,7 @@ export default {
|
|
provinceIndex: null,
|
|
provinceIndex: null,
|
|
cityIndex: null,
|
|
cityIndex: null,
|
|
checkAll: false,
|
|
checkAll: false,
|
|
- arr: [],
|
|
|
|
- checkeds: []
|
|
|
|
|
|
+ arr: []
|
|
}
|
|
}
|
|
},
|
|
},
|
|
computed: {},
|
|
computed: {},
|
|
@@ -190,70 +195,36 @@ export default {
|
|
this.showClass = false
|
|
this.showClass = false
|
|
this.provinceIndex = index
|
|
this.provinceIndex = index
|
|
this.cityIndex = null
|
|
this.cityIndex = null
|
|
- // if (item.name == '北京') {
|
|
|
|
- // this.city.push(item)
|
|
|
|
- // this.showCityData = true
|
|
|
|
- // } else {
|
|
|
|
- getProvince(this.CityData, { parentCode: item.code }).then(res => {
|
|
|
|
|
|
+ getProvince(this.CityData, { parentCode: item.value }).then(res => {
|
|
if (res.code == '0') {
|
|
if (res.code == '0') {
|
|
this.city.push(...res.result.records)
|
|
this.city.push(...res.result.records)
|
|
this.showCityData = true
|
|
this.showCityData = true
|
|
}
|
|
}
|
|
})
|
|
})
|
|
- // }
|
|
|
|
},
|
|
},
|
|
- checkAll(e) {
|
|
|
|
- // 点击全选事件函数
|
|
|
|
- let checkObj = document.querySelectorAll('.checkItem') // 获取所有checkbox项
|
|
|
|
- if (e.target.checked) {
|
|
|
|
- // 判定全选checkbox的勾选状态
|
|
|
|
- for (let i = 0; i < this.imageList.length; i++) {
|
|
|
|
- if (!checkObj[i].checked) {
|
|
|
|
- // 将未勾选的checkbox选项push到绑定数组中
|
|
|
|
- this.checkeds.push(parseFloat(checkObj[i].value))
|
|
|
|
- console.log(this.checkeds)
|
|
|
|
- }
|
|
|
|
- }
|
|
|
|
|
|
+ checkAllBox() {
|
|
|
|
+ this.checkMatched = []
|
|
|
|
+ this.checkData = []
|
|
|
|
+ if (this.checkAll) {
|
|
|
|
+ this.checkMatched = this.province.map(item => {
|
|
|
|
+ return item.value
|
|
|
|
+ })
|
|
|
|
+ this.checkData.push(...this.province)
|
|
} else {
|
|
} else {
|
|
- // 如果是去掉全选则清空checkbox选项绑定数组
|
|
|
|
- this.checkeds = []
|
|
|
|
|
|
+ this.checkMatched = []
|
|
|
|
+ this.checkData = []
|
|
}
|
|
}
|
|
},
|
|
},
|
|
- showRegion(item, index) {
|
|
|
|
- this.area = []
|
|
|
|
- this.cityIndex = index
|
|
|
|
- getProvince(this.CityData, { parentCode: item }).then(res => {
|
|
|
|
- if (res.code == '0') {
|
|
|
|
- console.log(res)
|
|
|
|
- this.area.push(...res.result.records)
|
|
|
|
- this.arr = res.result.records
|
|
|
|
- this.showClass = true
|
|
|
|
- }
|
|
|
|
- })
|
|
|
|
- },
|
|
|
|
- add(item) {
|
|
|
|
- if (this.checkMatched.indexOf(item.id) != -1) {
|
|
|
|
- var index = this.checkData.findIndex(v => v.id === item.id)
|
|
|
|
|
|
+ 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)
|
|
this.checkData.splice(index, 1)
|
|
- this.checkMatched.splice(index, 1)
|
|
|
|
- this.$emit('update:checkData', this.checkData)
|
|
|
|
|
|
+ this.checkAll = false
|
|
} else {
|
|
} else {
|
|
this.checkData.push(item)
|
|
this.checkData.push(item)
|
|
- this.checkMatched.push(item.id)
|
|
|
|
- this.$emit('update:checkData', this.checkData)
|
|
|
|
}
|
|
}
|
|
- },
|
|
|
|
- allCheck() {
|
|
|
|
- this.checkAll = !this.checkAll
|
|
|
|
- if (this.checkAll) {
|
|
|
|
- this.checkData.push(...this.area)
|
|
|
|
- var dataId = this.area.map(item => {
|
|
|
|
- return item.id
|
|
|
|
- })
|
|
|
|
- this.checkMatched.push(...dataId)
|
|
|
|
- } else {
|
|
|
|
- this.checkData.splice(this.checkData.length - this.arr.length, this.arr.length)
|
|
|
|
- this.checkMatched.splice(this.checkData.length - this.arr.length, this.arr.length)
|
|
|
|
|
|
+ if(this.checkData.length == this.province.length){
|
|
|
|
+ this.checkAll = true
|
|
}
|
|
}
|
|
},
|
|
},
|
|
clear() {
|
|
clear() {
|
|
@@ -262,9 +233,12 @@ export default {
|
|
this.checkAll = false
|
|
this.checkAll = false
|
|
this.$emit('update:checkData', this.checkData)
|
|
this.$emit('update:checkData', this.checkData)
|
|
},
|
|
},
|
|
- detele(index) {
|
|
|
|
- this.checkData.splice(index, 1)
|
|
|
|
- this.checkMatched.splice(index, 1)
|
|
|
|
|
|
+ detele(item,index) {
|
|
|
|
+ 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
|
|
this.$emit('update:checkData', this.checkData)
|
|
this.$emit('update:checkData', this.checkData)
|
|
}
|
|
}
|
|
}
|
|
}
|