|
@@ -4,19 +4,19 @@
|
|
<div class="bigBOX" ref="mycheckBox">
|
|
<div class="bigBOX" ref="mycheckBox">
|
|
<div class="big_item">
|
|
<div class="big_item">
|
|
<MultiCheckBox :title="title1" :listArr="listArr1" :curLayerNum="1" :parentChecked="false"
|
|
<MultiCheckBox :title="title1" :listArr="listArr1" :curLayerNum="1" :parentChecked="false"
|
|
- @getItemData="getItemData" />
|
|
|
|
|
|
+ @getItemData="getItemData" @getCheckedList='getCheckedList' />
|
|
</div>
|
|
</div>
|
|
<div class="big_item">
|
|
<div class="big_item">
|
|
<MultiCheckBox :title="title2" :listArr="listArr2" :curLayerNum="2" :parentChecked="parentChecked1"
|
|
<MultiCheckBox :title="title2" :listArr="listArr2" :curLayerNum="2" :parentChecked="parentChecked1"
|
|
- @getItemData="getItemData" v-if="listArr2.length>0" />
|
|
|
|
|
|
+ @getItemData="getItemData" @getCheckedList='getCheckedList' v-if="listArr2.length>0" />
|
|
</div>
|
|
</div>
|
|
<div class="big_item">
|
|
<div class="big_item">
|
|
<MultiCheckBox :title="title3" :listArr="listArr3" :curLayerNum="3" :parentChecked="parentChecked2"
|
|
<MultiCheckBox :title="title3" :listArr="listArr3" :curLayerNum="3" :parentChecked="parentChecked2"
|
|
- @getItemData="getItemData" v-if="listArr3.length>0" />
|
|
|
|
|
|
+ @getItemData="getItemData" @getCheckedList='getCheckedList' v-if="listArr3.length>0" />
|
|
</div>
|
|
</div>
|
|
<div class="big_item">
|
|
<div class="big_item">
|
|
<MultiCheckBox :title="title4" :listArr="listArr4" :curLayerNum="4" :parentChecked="parentChecked3"
|
|
<MultiCheckBox :title="title4" :listArr="listArr4" :curLayerNum="4" :parentChecked="parentChecked3"
|
|
- @getItemData="getItemData" v-if="listArr4.length>0" />
|
|
|
|
|
|
+ @getItemData="getItemData" @getCheckedList='getCheckedList' v-if="listArr4.length>0" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@@ -25,7 +25,7 @@
|
|
<div class="title">已选<a-button class="clear" type="link" @click="clearAll">清空</a-button></div>
|
|
<div class="title">已选<a-button class="clear" type="link" @click="clearAll">清空</a-button></div>
|
|
<div class="linkMulti_list">
|
|
<div class="linkMulti_list">
|
|
<div class="selectBox1">
|
|
<div class="selectBox1">
|
|
- <span class="selectListitem" v-for="(item,index) in checkedShowList" :key='index'>{{item}}<a-icon type="close" id="close" @click="deleteItem(item)" /></span>
|
|
|
|
|
|
+ <span class="selectListitem" v-for="(item,index) in checkedShowList" :key='index'>{{item.name}}<a-icon type="close" id="close" @click="deleteItem(item)" /></span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@@ -66,13 +66,14 @@
|
|
methods: {
|
|
methods: {
|
|
getItemData(val) {
|
|
getItemData(val) {
|
|
this.$nextTick(() => {
|
|
this.$nextTick(() => {
|
|
- this.clickKey = val.clickObj.dataset.layers
|
|
|
|
- let index = parseInt(val.clickObj.dataset.layers) || val.curLayerNum
|
|
|
|
|
|
+ // this.clickKey = val.clickObj.dataset.layers
|
|
|
|
+ // let index = parseInt(val.clickObj.dataset.layers) || val.curLayerNum
|
|
|
|
+ let index = val.curLayerNum
|
|
this.currentData = val.data
|
|
this.currentData = val.data
|
|
|
|
|
|
let childrensArr = Array.from(this.$refs.mycheckBox.children)
|
|
let childrensArr = Array.from(this.$refs.mycheckBox.children)
|
|
setTimeout(() => {
|
|
setTimeout(() => {
|
|
- console.log(val, val.clickObj.dataset.layers)
|
|
|
|
|
|
+ console.log(val, index)
|
|
// console.log(val.data.checked)
|
|
// console.log(val.data.checked)
|
|
if (index == 1 || this.clickKey == 1) {
|
|
if (index == 1 || this.clickKey == 1) {
|
|
this.$refs.mycheckBox.style.width = '100%'
|
|
this.$refs.mycheckBox.style.width = '100%'
|
|
@@ -85,10 +86,20 @@
|
|
if(res.success){
|
|
if(res.success){
|
|
if(res.data.length>0){
|
|
if(res.data.length>0){
|
|
res.data.forEach((item,index)=>{
|
|
res.data.forEach((item,index)=>{
|
|
|
|
+
|
|
item.value=item.code
|
|
item.value=item.code
|
|
item.checked=val.data.checked;
|
|
item.checked=val.data.checked;
|
|
item.indeterminates=false;
|
|
item.indeterminates=false;
|
|
-
|
|
|
|
|
|
+ })
|
|
|
|
+ console.log(this.checkedShowList)
|
|
|
|
+ this.checkedShowList.forEach((ele)=>{
|
|
|
|
+ res.data.forEach((item)=>{
|
|
|
|
+ if(ele.code==item.code){
|
|
|
|
+ item.checked=true;
|
|
|
|
+ return
|
|
|
|
+ }
|
|
|
|
+ })
|
|
|
|
+
|
|
})
|
|
})
|
|
this.listArr3 = []
|
|
this.listArr3 = []
|
|
this.title3 = ''
|
|
this.title3 = ''
|
|
@@ -115,7 +126,8 @@
|
|
this.title2 = ''
|
|
this.title2 = ''
|
|
this.resetStyle(childrensArr, index)
|
|
this.resetStyle(childrensArr, index)
|
|
}
|
|
}
|
|
- this.checkedShowList=val.checkList
|
|
|
|
|
|
+
|
|
|
|
+ // this.checkedShowList=val.checkList
|
|
} else if (index == 2 || this.clickKey == 2) {
|
|
} else if (index == 2 || this.clickKey == 2) {
|
|
if(val.data.hasChild){
|
|
if(val.data.hasChild){
|
|
getAction(this.listUrl,{
|
|
getAction(this.listUrl,{
|
|
@@ -131,6 +143,14 @@
|
|
item.indeterminates=false;
|
|
item.indeterminates=false;
|
|
|
|
|
|
})
|
|
})
|
|
|
|
+ this.checkedShowList.forEach((ele)=>{
|
|
|
|
+ res.data.forEach((item)=>{
|
|
|
|
+ if(ele.code==item.code){
|
|
|
|
+ item.checked=true;
|
|
|
|
+ }
|
|
|
|
+ })
|
|
|
|
+
|
|
|
|
+ })
|
|
this.listArr4 = []
|
|
this.listArr4 = []
|
|
this.title4 = ''
|
|
this.title4 = ''
|
|
|
|
|
|
@@ -167,6 +187,7 @@
|
|
}
|
|
}
|
|
|
|
|
|
} else if (index == 3 || this.clickKey == 3) {
|
|
} else if (index == 3 || this.clickKey == 3) {
|
|
|
|
+
|
|
if(val.data.hasChild){
|
|
if(val.data.hasChild){
|
|
getAction(this.listUrl,{
|
|
getAction(this.listUrl,{
|
|
parentCode:val.data.code,
|
|
parentCode:val.data.code,
|
|
@@ -181,6 +202,14 @@
|
|
item.indeterminates=false;
|
|
item.indeterminates=false;
|
|
|
|
|
|
})
|
|
})
|
|
|
|
+ this.checkedShowList.forEach((ele)=>{
|
|
|
|
+ res.data.forEach((item)=>{
|
|
|
|
+ if(ele.code==item.code){
|
|
|
|
+ item.checked=true;
|
|
|
|
+ }
|
|
|
|
+ })
|
|
|
|
+
|
|
|
|
+ })
|
|
this.listArr4 = res.data
|
|
this.listArr4 = res.data
|
|
this.title4 = val.data.name
|
|
this.title4 = val.data.name
|
|
this.$refs.mycheckBox.style.width = '200%'
|
|
this.$refs.mycheckBox.style.width = '200%'
|
|
@@ -196,45 +225,36 @@
|
|
this.resetStyle(childrensArr, index)
|
|
this.resetStyle(childrensArr, index)
|
|
}
|
|
}
|
|
|
|
|
|
-
|
|
|
|
|
|
+ let ind=-1;
|
|
if(this.listArr2){
|
|
if(this.listArr2){
|
|
- console.log(this.listArr2)
|
|
|
|
- let ind=-1;
|
|
|
|
-
|
|
|
|
|
|
+ // console.log(this.listArr2)
|
|
this.listArr2.forEach((ele,i)=>{
|
|
this.listArr2.forEach((ele,i)=>{
|
|
- if(ele.code==val.data.parentCode){
|
|
|
|
- ind=i
|
|
|
|
- // console.log(ind)
|
|
|
|
- }
|
|
|
|
|
|
+ if(ele.code==val.data.parentCode){
|
|
|
|
+ ind=i
|
|
|
|
+ console.log(ind)
|
|
|
|
+ }
|
|
})
|
|
})
|
|
if(ind>-1){
|
|
if(ind>-1){
|
|
this.listArr2[ind].indeterminates = !!val.checkList.length && val.checkList.length <val.plainOptions.length
|
|
this.listArr2[ind].indeterminates = !!val.checkList.length && val.checkList.length <val.plainOptions.length
|
|
this.listArr2[ind].checked = val.checkList.length === val.plainOptions.length && val.plainOptions.length!=0
|
|
this.listArr2[ind].checked = val.checkList.length === val.plainOptions.length && val.plainOptions.length!=0
|
|
}
|
|
}
|
|
-
|
|
|
|
- }
|
|
|
|
-
|
|
|
|
-
|
|
|
|
- this.listArr1.forEach((element,num)=>{
|
|
|
|
-
|
|
|
|
- if(element.code==this.listArr2[ind].parentCode){
|
|
|
|
- ind=num
|
|
|
|
- console.log(ind)
|
|
|
|
- }
|
|
|
|
|
|
+ }
|
|
|
|
+ let z=-1
|
|
|
|
+ this.listArr1.forEach((element,num)=>{
|
|
|
|
+ if(element.code==this.listArr2[ind].parentCode){
|
|
|
|
+ z=num
|
|
|
|
+ console.log(ind)
|
|
|
|
+ }
|
|
|
|
|
|
})
|
|
})
|
|
let checklist=this.listArr2.filter((item,index)=>{
|
|
let checklist=this.listArr2.filter((item,index)=>{
|
|
- return item.checked
|
|
|
|
|
|
+ return item.checked || item.indeterminates
|
|
})
|
|
})
|
|
// console.log(checklist)
|
|
// console.log(checklist)
|
|
- if(ind>-1){
|
|
|
|
- this.listArr1[ind].indeterminates = !!checklist.length && checklist.length < this.listArr2.length
|
|
|
|
- this.listArr1[ind].checked = checklist.length === this.listArr2.length && this.listArr2.length!=0
|
|
|
|
|
|
+ if(z>-1){
|
|
|
|
+ this.listArr1[z].indeterminates = !!checklist.length && checklist.length < this.listArr2.length
|
|
|
|
+ this.listArr1[z].checked = checklist.length === this.listArr2.length && this.listArr2.length!=0
|
|
}
|
|
}
|
|
-
|
|
|
|
-
|
|
|
|
-
|
|
|
|
-
|
|
|
|
}else if (index == 4 || this.clickKey == 4){
|
|
}else if (index == 4 || this.clickKey == 4){
|
|
if(this.listArr3){
|
|
if(this.listArr3){
|
|
// console.log(this.listArr3)
|
|
// console.log(this.listArr3)
|
|
@@ -273,7 +293,7 @@
|
|
if(ind>-1){
|
|
if(ind>-1){
|
|
|
|
|
|
let checklist3=this.listArr3.filter((item,index)=>{
|
|
let checklist3=this.listArr3.filter((item,index)=>{
|
|
- return item.checked
|
|
|
|
|
|
+ return item.checked || item.indeterminates
|
|
})
|
|
})
|
|
// console.log(checklist)
|
|
// console.log(checklist)
|
|
|
|
|
|
@@ -289,7 +309,7 @@
|
|
|
|
|
|
})
|
|
})
|
|
let checklist2=this.listArr1.filter((item,index)=>{
|
|
let checklist2=this.listArr1.filter((item,index)=>{
|
|
- return item.checked
|
|
|
|
|
|
+ return item.checked || item.indeterminates
|
|
})
|
|
})
|
|
if(z>-1){
|
|
if(z>-1){
|
|
this.listArr1[z].indeterminates = !!checklist2.length && checklist2.length < this.listArr2.length
|
|
this.listArr1[z].indeterminates = !!checklist2.length && checklist2.length < this.listArr2.length
|
|
@@ -329,39 +349,216 @@
|
|
deleteItem(item){
|
|
deleteItem(item){
|
|
console.log(item);
|
|
console.log(item);
|
|
let val='';
|
|
let val='';
|
|
- this.plainOptions.forEach((ele,index)=>{
|
|
|
|
- if(ele.label==item){
|
|
|
|
|
|
+ this.checkedShowList.forEach((ele,index)=>{
|
|
|
|
+ if(ele.code==item.code){
|
|
val=ele.value
|
|
val=ele.value
|
|
}
|
|
}
|
|
})
|
|
})
|
|
- this.checkedList=this.checkedList.filter((element,index) => {
|
|
|
|
- return element!=val
|
|
|
|
- });
|
|
|
|
|
|
+
|
|
this.checkedShowList=this.checkedShowList.filter((element,index) => {
|
|
this.checkedShowList=this.checkedShowList.filter((element,index) => {
|
|
- return element!=item
|
|
|
|
|
|
+ return element.code!=val;
|
|
});
|
|
});
|
|
- if(this.checkedList.length==0){
|
|
|
|
- this.indeterminate=false
|
|
|
|
- this.checkAll=false
|
|
|
|
|
|
+ if(item.level==1){
|
|
|
|
+ this.listArr1.forEach((ele)=>{
|
|
|
|
+ if(ele.code==val){
|
|
|
|
+ ele.checked=false
|
|
|
|
+ }
|
|
|
|
+ })
|
|
|
|
+ }
|
|
|
|
+ if(item.level==2){
|
|
|
|
+ console.log('------------------------------------');
|
|
|
|
+ let childList=this.checkedShowList.filter((element,index) => {
|
|
|
|
+ return element.parentCode==item.parentCode;
|
|
|
|
+ });
|
|
|
|
+ let data=[]
|
|
|
|
+ let checkList=[];
|
|
|
|
+ let plainOptions=[]
|
|
|
|
+ this.listArr1.forEach((ele)=>{
|
|
|
|
+ if(ele.code==item.parentCode){
|
|
|
|
+ data=ele;
|
|
|
|
+ }
|
|
|
|
+ if(ele.checked){
|
|
|
|
+ checkList.push(ele.code)
|
|
|
|
+ }
|
|
|
|
+ plainOptions.push(ele.code)
|
|
|
|
+ })
|
|
|
|
+ if(childList.length==0){
|
|
|
|
+ data.indeterminates=false
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+
|
|
|
|
+ this.getItemData({
|
|
|
|
+ clickObj:{},
|
|
|
|
+ data: data,
|
|
|
|
+ curLayerNum:1,
|
|
|
|
+ checkList,
|
|
|
|
+ plainOptions,
|
|
|
|
+ })
|
|
|
|
+
|
|
|
|
+
|
|
|
|
+ }
|
|
|
|
+ if(item.level==3){
|
|
|
|
+
|
|
}
|
|
}
|
|
},
|
|
},
|
|
|
|
|
|
clearAll(){
|
|
clearAll(){
|
|
this.listArr1.forEach((item)=>{
|
|
this.listArr1.forEach((item)=>{
|
|
- item.checked=false
|
|
|
|
|
|
+ item.checked=false;
|
|
|
|
+ item.indeterminates=false;
|
|
})
|
|
})
|
|
this.listArr2.forEach((item)=>{
|
|
this.listArr2.forEach((item)=>{
|
|
- item.checked=false
|
|
|
|
|
|
+ item.checked=false;
|
|
|
|
+ item.indeterminates=false;
|
|
})
|
|
})
|
|
this.listArr3.forEach((item)=>{
|
|
this.listArr3.forEach((item)=>{
|
|
item.checked=false
|
|
item.checked=false
|
|
|
|
+ item.indeterminates=false
|
|
})
|
|
})
|
|
this.listArr4.forEach((item)=>{
|
|
this.listArr4.forEach((item)=>{
|
|
item.checked=false
|
|
item.checked=false
|
|
|
|
+ item.indeterminates=false
|
|
})
|
|
})
|
|
this.checkedShowList=[]
|
|
this.checkedShowList=[]
|
|
},
|
|
},
|
|
|
|
|
|
|
|
+ getCheckedList(val){
|
|
|
|
+ console.log(val);
|
|
|
|
+ if(val.curLayerNum==1){
|
|
|
|
+ if(val.checkList.length>0){
|
|
|
|
+ this.checkedShowList=this.checkedShowList.filter((item)=>{
|
|
|
|
+ return item.level!=1
|
|
|
|
+ })
|
|
|
|
+ // console.log(this.checkedShowList)
|
|
|
|
+ if(val.checkList.length==this.listArr1.length){
|
|
|
|
+ this.checkedShowList=[];
|
|
|
|
+ val.checkList.forEach((ele)=>{
|
|
|
|
+ var result = this.checkedShowList.some(item => {
|
|
|
|
+ if(item.code == ele){
|
|
|
|
+ return true
|
|
|
|
+ }
|
|
|
|
+ })
|
|
|
|
+ if(!result){
|
|
|
|
+ this.listArr1.forEach((item)=>{
|
|
|
|
+ if(ele==item.code){
|
|
|
|
+ this.checkedShowList.push(item)
|
|
|
|
+ }
|
|
|
|
+ })
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ })
|
|
|
|
+ }else if(val.checkList.length<this.listArr1.length){
|
|
|
|
+ val.checkList.forEach((ele)=>{
|
|
|
|
+ var result = this.checkedShowList.some(item => {
|
|
|
|
+ if(item.code == ele){
|
|
|
|
+ return true
|
|
|
|
+ }
|
|
|
|
+ })
|
|
|
|
+ if(!result){
|
|
|
|
+ this.listArr1.forEach((item)=>{
|
|
|
|
+ if(ele==item.code){
|
|
|
|
+ this.checkedShowList.push(item)
|
|
|
|
+ }
|
|
|
|
+ })
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ })
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ // console.log(this.checkedShowList)
|
|
|
|
+ }else{
|
|
|
|
+ this.checkedShowList=this.checkedShowList.filter((item)=>{
|
|
|
|
+ return item.level!=1
|
|
|
|
+ })
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ }else if(val.curLayerNum==2){
|
|
|
|
+ this.checkedShowList=this.checkedShowList.filter((item)=>{
|
|
|
|
+ return item.code!=val.currentList[0].parentCode
|
|
|
|
+ })
|
|
|
|
+
|
|
|
|
+ if(val.checkList.length>0&&val.checkList.length<val.currentList.length){
|
|
|
|
+ this.checkedShowList=this.checkedShowList.filter((item)=>{
|
|
|
|
+ return item.parentCode!=val.currentList[0].parentCode
|
|
|
|
+ })
|
|
|
|
+ // console.log(this.checkedShowList)
|
|
|
|
+ val.checkList.forEach((ele)=>{
|
|
|
|
+ var result = this.checkedShowList.some(item => {
|
|
|
|
+ if(item.code == ele){
|
|
|
|
+ return true
|
|
|
|
+ }
|
|
|
|
+ })
|
|
|
|
+ if(!result){
|
|
|
|
+ val.currentList.forEach((item)=>{
|
|
|
|
+ if(ele==item.code){
|
|
|
|
+ this.checkedShowList.push(item)
|
|
|
|
+ }
|
|
|
|
+ })
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ })
|
|
|
|
+ // console.log(this.checkedShowList)
|
|
|
|
+ }else if(val.checkList.length==0){
|
|
|
|
+ this.checkedShowList=this.checkedShowList.filter((item)=>{
|
|
|
|
+ return item.parentCode!=val.currentList[0].parentCode
|
|
|
|
+
|
|
|
|
+ })
|
|
|
|
+ }else if(val.checkList.length==val.currentList.length){
|
|
|
|
+ this.checkedShowList=this.checkedShowList.filter((item)=>{
|
|
|
|
+ return item.parentCode!=val.currentList[0].parentCode
|
|
|
|
+ })
|
|
|
|
+ this.listArr1.forEach((item)=>{
|
|
|
|
+ if(item.code==val.currentList[0].parentCode){
|
|
|
|
+ this.checkedShowList.push(item)
|
|
|
|
+ }
|
|
|
|
+ })
|
|
|
|
+ }
|
|
|
|
+ }else if(val.curLayerNum==3){
|
|
|
|
+ this.checkedShowList=this.checkedShowList.filter((item)=>{
|
|
|
|
+ return item.code!=val.currentList[0].parentCode
|
|
|
|
+ })
|
|
|
|
+
|
|
|
|
+ if(val.checkList.length>0&&val.checkList.length<val.currentList.length){
|
|
|
|
+ this.checkedShowList=this.checkedShowList.filter((item)=>{
|
|
|
|
+ return item.parentCode!=val.currentList[0].parentCode
|
|
|
|
+ })
|
|
|
|
+ console.log(this.checkedShowList)
|
|
|
|
+ val.checkList.forEach((ele)=>{
|
|
|
|
+ var result = this.checkedShowList.some(item => {
|
|
|
|
+ if(item.code == ele){
|
|
|
|
+ return true
|
|
|
|
+ }
|
|
|
|
+ })
|
|
|
|
+ if(!result){
|
|
|
|
+ val.currentList.forEach((item)=>{
|
|
|
|
+ if(ele==item.code){
|
|
|
|
+ this.checkedShowList.push(item)
|
|
|
|
+ }
|
|
|
|
+ })
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ })
|
|
|
|
+ console.log(this.checkedShowList)
|
|
|
|
+ }else if(val.checkList.length==0){
|
|
|
|
+ this.checkedShowList=this.checkedShowList.filter((item)=>{
|
|
|
|
+ return item.parentCode!=val.currentList[0].parentCode
|
|
|
|
+
|
|
|
|
+ })
|
|
|
|
+ }else if(val.checkList.length==val.currentList.length){
|
|
|
|
+ this.checkedShowList=this.checkedShowList.filter((item)=>{
|
|
|
|
+ return item.parentCode!=val.currentList[0].parentCode
|
|
|
|
+ })
|
|
|
|
+ this.listArr2.forEach((item)=>{
|
|
|
|
+ if(item.code==val.currentList[0].parentCode){
|
|
|
|
+ this.checkedShowList.push(item)
|
|
|
|
+ }
|
|
|
|
+ })
|
|
|
|
+ }
|
|
|
|
+ }else if(val.curLayerNum==4){
|
|
|
|
+
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+
|
|
|
|
|
|
},
|
|
},
|
|
mounted() {
|
|
mounted() {
|