|
@@ -1,188 +1,252 @@
|
|
|
<template>
|
|
|
- <div class="multiCheckbox" >
|
|
|
- <div class="linkMulti_list" ref="mycheckMul">
|
|
|
- <div class="title">{{title}}</div>
|
|
|
- <ul class="linkMulti_list_one">
|
|
|
- <li class="checkAll"><a-checkbox :indeterminate="indeterminate" :checked="checkAll" @change="onCheckAllChange"> 全选</a-checkbox> </li>
|
|
|
- <li @click="listItemClick(item)" v-for="(item,index) in listArr" :key='index' :data-layers='curLayerNum' ref="checkList">
|
|
|
- <a-checkbox @change="onChange($event,item,index)" :value='item.value' :checked='item.checked' :data-layers='curLayerNum'>{{item.name}}</a-checkbox>
|
|
|
- <!-- <span>{{item.name}}</span> -->
|
|
|
- <span class="more" v-show="item.children"><a-icon type="right" /></span>
|
|
|
- </li>
|
|
|
- </ul>
|
|
|
- </div>
|
|
|
- <!-- <MultiCheckBox class="childClass" :title='currentItem.name' :listArr='currentItem.children' v-if="currentItem" :curLayerNum='currentLayerNum' /> -->
|
|
|
- </div>
|
|
|
+ <div class="multiCheckbox">
|
|
|
+ <div class="linkMulti_list" ref="mycheckMul">
|
|
|
+ <div class="title">{{title}}</div>
|
|
|
+ <ul class="linkMulti_list_one">
|
|
|
+ <li class="checkAll">
|
|
|
+ <a-checkbox
|
|
|
+ :indeterminate="indeterminate"
|
|
|
+ :checked="checkAll"
|
|
|
+ @change="onCheckAllChange"
|
|
|
+ >全选</a-checkbox>
|
|
|
+ </li>
|
|
|
+ <li
|
|
|
+ @click.stop="listItemClick($event,item)"
|
|
|
+ v-for="(item,index) in listArr"
|
|
|
+ :key="index"
|
|
|
+ :data-layers="curLayerNum"
|
|
|
+ ref="checkList"
|
|
|
+ >
|
|
|
+ <a-checkbox
|
|
|
+ @change="onChange($event,item,index)"
|
|
|
+ :value="item.value"
|
|
|
+ :checked="item.checked"
|
|
|
+ @click.stop="listItemClick($event,item)"
|
|
|
+ >{{item.name}}</a-checkbox>
|
|
|
+ <!-- <span>{{item.name}}</span> -->
|
|
|
+ <span class="more" v-show="item.children">
|
|
|
+ <a-icon type="right" />
|
|
|
+ </span>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ <!-- <MultiCheckBox class="childClass" :title='currentItem.name' :listArr='currentItem.children' v-if="currentItem" :curLayerNum='currentLayerNum' /> -->
|
|
|
+ </div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
+export default {
|
|
|
+ name: 'MultiCheckBox',
|
|
|
+ props: ['title', 'listArr', 'curLayerNum', 'parentChecked'],
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ checkedList: [],
|
|
|
+ indeterminate: false,
|
|
|
+ checkAll: false,
|
|
|
+ plainOptions: [],
|
|
|
+ layersNum: 0, //控制层级
|
|
|
+ currentLayerNum: 0, //当前层级是多少层,
|
|
|
+ currentItem: null
|
|
|
+ }
|
|
|
+ },
|
|
|
+ watch: {
|
|
|
+ checkAll: function(n, o) {
|
|
|
+ if (n != o) {
|
|
|
+ // this.onCheckAllChange()
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // listArr(n,o){
|
|
|
+ // this.listArr.forEach(element => {
|
|
|
+
|
|
|
+ // this.plainOptions.push(element.value);
|
|
|
+ // if(element.checked){
|
|
|
+ // this.checkedList.push(element.value)
|
|
|
+ // }
|
|
|
+ // });
|
|
|
+ // if(this.checkedList.length==this.plainOptions.length){
|
|
|
+ // this.checkAll=true;
|
|
|
+ // }
|
|
|
+ // },
|
|
|
+
|
|
|
+ parentChecked: {
|
|
|
+ handler(n, o) {
|
|
|
+ console.log(n, o, '--parentChecked', this.curLayerNum)
|
|
|
+ if (n) {
|
|
|
+ this.checkAll = true
|
|
|
+ this.listArr.forEach((item, index) => {
|
|
|
+ item.checked = n
|
|
|
+ this.checkedList.push(item.value)
|
|
|
+ })
|
|
|
+ } else if (n == false && o == true) {
|
|
|
+ this.checkAll = false
|
|
|
+ this.listArr.forEach((item, index) => {
|
|
|
+ item.checked = n
|
|
|
+ })
|
|
|
+ this.checkedList = []
|
|
|
+ }
|
|
|
+ },
|
|
|
+ immediate: true,
|
|
|
+ deep: true
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ onChange(e, item, index) {
|
|
|
+ // console.log(e.target,item)
|
|
|
+
|
|
|
+ if (e.target.checked) {
|
|
|
+ // item.checked=true;
|
|
|
+ this.listArr.forEach((ele, i) => {
|
|
|
+ if (index == i) {
|
|
|
+ this.$set(ele, 'checked', e.target.checked)
|
|
|
+ this.checkedList.push(e.target.value)
|
|
|
+ }
|
|
|
+ })
|
|
|
+ } else {
|
|
|
+ this.listArr.forEach((ele, i) => {
|
|
|
+ if (index == i) {
|
|
|
+ this.$set(ele, 'checked', e.target.checked)
|
|
|
+ }
|
|
|
+ })
|
|
|
+
|
|
|
+ let num = this.checkedList.indexOf(e.target.value)
|
|
|
+ if (num > -1) {
|
|
|
+ this.checkedList.splice(num, 1)
|
|
|
+ }
|
|
|
+ }
|
|
|
+ this.indeterminate = !!this.checkedList.length && this.checkedList.length < this.plainOptions.length
|
|
|
+ this.checkAll = this.checkedList.length === this.plainOptions.length
|
|
|
+ // this.listItemClick(item);
|
|
|
+ },
|
|
|
+ onCheckAllChange(e) {
|
|
|
+ Object.assign(this, {
|
|
|
+ checkedList: e.target.checked ? this.plainOptions : [],
|
|
|
+ indeterminate: false,
|
|
|
+ checkAll: e.target.checked
|
|
|
+ })
|
|
|
+ if (this.checkedList.length) {
|
|
|
+ this.listArr.forEach(item => {
|
|
|
+ this.$set(item, 'checked', true)
|
|
|
+ })
|
|
|
+ } else {
|
|
|
+ this.listArr.forEach(item => {
|
|
|
+ this.$set(item, 'checked', false)
|
|
|
+ })
|
|
|
+ }
|
|
|
+ },
|
|
|
+ listItemClick(event, item) {
|
|
|
+ console.log(item)
|
|
|
+ this.$emit('update:parentChecked',item.checked)
|
|
|
+ this.$emit('getItemData', {
|
|
|
+ clickObj: event.target,
|
|
|
+ data: item
|
|
|
+ })
|
|
|
+ },
|
|
|
+ // checkItemChange(e){
|
|
|
+ // console.log(e.target.checked);
|
|
|
+ // // if(e.target.checked){
|
|
|
+
|
|
|
+ // // }
|
|
|
+ // },
|
|
|
+ //判断传入的数组的children层数
|
|
|
+ getLayersNum(arr) {
|
|
|
+ arr.map((item, index) => {
|
|
|
+ if (item.children) {
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ this.currentLayerNum = this.curLayerNum
|
|
|
|
|
|
- export default {
|
|
|
- name:'MultiCheckBox',
|
|
|
- props:['title','listArr','curLayerNum'],
|
|
|
- data() {
|
|
|
- return {
|
|
|
- checkedList: [],
|
|
|
- indeterminate: false,
|
|
|
- checkAll: false,
|
|
|
- plainOptions:[],
|
|
|
- layersNum:0,//控制层级
|
|
|
- currentLayerNum:0,//当前层级是多少层,
|
|
|
- currentItem:null,
|
|
|
- }
|
|
|
- },
|
|
|
- watch: {
|
|
|
- checkAll:function(n,o){
|
|
|
- if(n!=o){
|
|
|
- // this.onCheckAllChange()
|
|
|
- }
|
|
|
- }
|
|
|
- },
|
|
|
- methods: {
|
|
|
- onChange(e,item,index) {
|
|
|
- console.log(e.target,item)
|
|
|
- if(e.target.checked){
|
|
|
- // item.checked=true;
|
|
|
- this.listArr.forEach((ele,i)=>{
|
|
|
- if(index==i){
|
|
|
- this.$set(ele,'checked',true)
|
|
|
- }
|
|
|
- })
|
|
|
-
|
|
|
- this.checkedList.push(e.target.value)
|
|
|
-
|
|
|
- }else{
|
|
|
- this.listArr.forEach((ele,i)=>{
|
|
|
- if(index==i){
|
|
|
- this.$set(ele,'checked',false)
|
|
|
- }
|
|
|
- })
|
|
|
-
|
|
|
-
|
|
|
- let num=this.checkedList.indexOf(e.target.value);
|
|
|
- if(num > -1){
|
|
|
- this.checkedList.splice(num,1)
|
|
|
- }
|
|
|
- }
|
|
|
- this.indeterminate = !!this.checkedList.length && this.checkedList.length < this.plainOptions.length;
|
|
|
- this.checkAll = this.checkedList.length === this.plainOptions.length;
|
|
|
- this.listItemClick(item);
|
|
|
- },
|
|
|
- onCheckAllChange(e) {
|
|
|
- Object.assign(this, {
|
|
|
- checkedList: e.target.checked ? this.plainOptions : [],
|
|
|
- indeterminate: false,
|
|
|
- checkAll: e.target.checked,
|
|
|
- });
|
|
|
- if(this.checkedList.length){
|
|
|
- this.listArr.forEach((item)=>{
|
|
|
- this.$set(item,'checked',true)
|
|
|
- })
|
|
|
- }else{
|
|
|
- this.listArr.forEach((item)=>{
|
|
|
- this.$set(item,'checked',false)
|
|
|
- })
|
|
|
- }
|
|
|
- },
|
|
|
- listItemClick(item){
|
|
|
-
|
|
|
- this.$emit('getItemData',{
|
|
|
- 'clickObj':event.target,
|
|
|
- 'data':item,
|
|
|
-
|
|
|
- })
|
|
|
-
|
|
|
-
|
|
|
- },
|
|
|
- // checkItemChange(e){
|
|
|
- // console.log(e.target.checked);
|
|
|
- // // if(e.target.checked){
|
|
|
+ this.listArr.forEach(element => {
|
|
|
+ this.plainOptions.push(element.value)
|
|
|
+ if (element.checked) {
|
|
|
+ this.checkedList.push(element.value)
|
|
|
+ }
|
|
|
+ })
|
|
|
+ if (this.checkedList.length == this.plainOptions.length) {
|
|
|
+ this.checkAll = true
|
|
|
+ }
|
|
|
+ // console.log(this.checkedList)
|
|
|
+ // console.log(this.curLayerNum)
|
|
|
|
|
|
- // // }
|
|
|
- // },
|
|
|
- //判断传入的数组的children层数
|
|
|
- getLayersNum(arr){
|
|
|
- arr.map((item,index)=>{
|
|
|
- if(item.children){
|
|
|
+ // console.log(this.parentChecked)
|
|
|
|
|
|
- }
|
|
|
- })
|
|
|
- }
|
|
|
- },
|
|
|
- mounted() {
|
|
|
- this.currentLayerNum=this.curLayerNum;
|
|
|
-
|
|
|
- this.listArr.forEach(element => {
|
|
|
-
|
|
|
- this.plainOptions.push(element.value);
|
|
|
- if(element.checked){
|
|
|
- this.checkedList.push(element.value)
|
|
|
- }
|
|
|
- });
|
|
|
- if(this.checkedList.length==this.plainOptions.length){
|
|
|
- this.checkAll=true;
|
|
|
- }
|
|
|
- console.log(this.checkedList)
|
|
|
- // console.log(this.curLayerNum)
|
|
|
- },
|
|
|
+ console.log(this.$refs.checkList)
|
|
|
+ if (this.$refs.checkList) {
|
|
|
+ let refsCheckListArr = Array.from(this.$refs.checkList)
|
|
|
+ refsCheckListArr.forEach((item, index) => {
|
|
|
+ let nodeArr = Array.from(item.children[0].children)
|
|
|
+ // console.log(nodeArr)
|
|
|
+ nodeArr.forEach((ele, i) => {
|
|
|
+ if (i == 0) {
|
|
|
+ let nodeArr2 = Array.from(ele.children)
|
|
|
+ console.log(nodeArr2)
|
|
|
+ nodeArr2.forEach(element => {
|
|
|
+ element.dataset['layers'] = this.curLayerNum
|
|
|
+ })
|
|
|
+ } else {
|
|
|
+ ele.dataset['layers'] = this.curLayerNum
|
|
|
+ }
|
|
|
+ })
|
|
|
+ })
|
|
|
}
|
|
|
+ }
|
|
|
+}
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
-.multiCheckbox{
|
|
|
- width:100%;
|
|
|
- height: 300px;
|
|
|
- ul,li{
|
|
|
- margin: 0;
|
|
|
- padding: 0;
|
|
|
- list-style: none;
|
|
|
+.multiCheckbox {
|
|
|
+ width: 100%;
|
|
|
+ height: 300px;
|
|
|
+ ul,
|
|
|
+ li {
|
|
|
+ margin: 0;
|
|
|
+ padding: 0;
|
|
|
+ list-style: none;
|
|
|
+ }
|
|
|
+ .linkMulti_list {
|
|
|
+ // padding: 5px 0px;
|
|
|
+ display: inline-block;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ box-sizing: border-box;
|
|
|
+ overflow: hidden;
|
|
|
+ .title {
|
|
|
+ height: 36px;
|
|
|
+ line-height: 36px;
|
|
|
+ font-size: 14px;
|
|
|
+ font-weight: 600;
|
|
|
+ border-radius: 5px 5px 0 0;
|
|
|
+ background-color: rgb(248, 249, 250);
|
|
|
+ padding: 0 15px;
|
|
|
+ border-bottom: 1px solid #ccc;
|
|
|
+ box-sizing: border-box;
|
|
|
}
|
|
|
- .linkMulti_list{
|
|
|
- // padding: 5px 0px;
|
|
|
- display: inline-block;
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- box-sizing: border-box;
|
|
|
- overflow: hidden;
|
|
|
- .title{
|
|
|
- height: 36px;
|
|
|
- line-height: 36px;
|
|
|
- font-size: 14px;
|
|
|
- font-weight: 600;
|
|
|
- border-radius: 5px 5px 0 0;
|
|
|
- background-color: rgb(248,249,250);
|
|
|
- padding: 0 15px;
|
|
|
- border-bottom: 1px solid #ccc;
|
|
|
- box-sizing: border-box;
|
|
|
- }
|
|
|
- ul{
|
|
|
- height: 264px;
|
|
|
- overflow: auto;
|
|
|
- }
|
|
|
- .checkAll{
|
|
|
-
|
|
|
- }
|
|
|
- li{
|
|
|
- height: 30px;
|
|
|
- line-height: 30px;
|
|
|
- cursor: pointer;
|
|
|
- padding: 0 15px;
|
|
|
- position: relative;
|
|
|
- .more{
|
|
|
- position:absolute;
|
|
|
- top: 2px;
|
|
|
- right: 10px;
|
|
|
- }
|
|
|
- }
|
|
|
- li:hover{
|
|
|
- background-color: rgb(240,240,240);
|
|
|
- }
|
|
|
-
|
|
|
+ ul {
|
|
|
+ height: 264px;
|
|
|
+ overflow: auto;
|
|
|
+ }
|
|
|
+ .checkAll {
|
|
|
+ }
|
|
|
+ li {
|
|
|
+ height: 30px;
|
|
|
+ line-height: 30px;
|
|
|
+ cursor: pointer;
|
|
|
+ padding: 0 15px;
|
|
|
+ position: relative;
|
|
|
+ .more {
|
|
|
+ position: absolute;
|
|
|
+ top: 2px;
|
|
|
+ right: 10px;
|
|
|
+ }
|
|
|
}
|
|
|
- .ant-checkbox-group{
|
|
|
- width: 100%;
|
|
|
+ li:hover {
|
|
|
+ background-color: rgb(240, 240, 240);
|
|
|
}
|
|
|
+ }
|
|
|
+ .ant-checkbox-group {
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
}
|
|
|
-
|
|
|
-
|
|
|
</style>
|