|
@@ -3,19 +3,19 @@
|
|
<div class="leftBox">
|
|
<div class="leftBox">
|
|
<div class="bigBOX" ref="mycheckBox">
|
|
<div class="bigBOX" ref="mycheckBox">
|
|
<div class="big_item">
|
|
<div class="big_item">
|
|
- <MultiCheckBox :title="title" :listArr="listArr" :curLayerNum="1" :parentChecked="false"
|
|
|
|
|
|
+ <MultiCheckBox :title="title1" :listArr="listArr1" :curLayerNum="1" :parentChecked="false"
|
|
@getItemData="getItemData" />
|
|
@getItemData="getItemData" />
|
|
</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" 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" 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" v-if="listArr4.length>0" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@@ -30,13 +30,16 @@
|
|
|
|
|
|
<script>
|
|
<script>
|
|
import MultiCheckBox from './MultiCheckBox'
|
|
import MultiCheckBox from './MultiCheckBox'
|
|
|
|
+ import { getAction, postAction, downFile, downFilePost } from '@/api/manage';
|
|
export default {
|
|
export default {
|
|
- props: ['title', 'listArr'],
|
|
|
|
|
|
+ props: ['title', 'listArr','listUrl','maxLayers'],
|
|
components: {
|
|
components: {
|
|
MultiCheckBox
|
|
MultiCheckBox
|
|
},
|
|
},
|
|
data() {
|
|
data() {
|
|
return {
|
|
return {
|
|
|
|
+ listArr1:[],
|
|
|
|
+ title1:'',
|
|
title2: '',
|
|
title2: '',
|
|
listArr2: [],
|
|
listArr2: [],
|
|
title3: '',
|
|
title3: '',
|
|
@@ -48,6 +51,8 @@
|
|
parentChecked2: false,
|
|
parentChecked2: false,
|
|
parentChecked3: false,
|
|
parentChecked3: false,
|
|
|
|
|
|
|
|
+
|
|
|
|
+
|
|
currentData: null,
|
|
currentData: null,
|
|
layersNum: 0
|
|
layersNum: 0
|
|
}
|
|
}
|
|
@@ -57,87 +62,238 @@
|
|
getItemData(val) {
|
|
getItemData(val) {
|
|
this.$nextTick(() => {
|
|
this.$nextTick(() => {
|
|
this.clickKey = val.clickObj.dataset.layers
|
|
this.clickKey = val.clickObj.dataset.layers
|
|
- let index = parseInt(val.clickObj.dataset.layers)
|
|
|
|
|
|
+ let index = parseInt(val.clickObj.dataset.layers) || val.curLayerNum
|
|
this.currentData = val.data
|
|
this.currentData = val.data
|
|
- console.log(val, val.clickObj.dataset.layers)
|
|
|
|
|
|
+
|
|
let childrensArr = Array.from(this.$refs.mycheckBox.children)
|
|
let childrensArr = Array.from(this.$refs.mycheckBox.children)
|
|
setTimeout(() => {
|
|
setTimeout(() => {
|
|
- console.log(val.data.checked)
|
|
|
|
|
|
+ console.log(val, val.clickObj.dataset.layers)
|
|
|
|
+ // console.log(val.data.checked)
|
|
if (index == 1 || this.clickKey == 1) {
|
|
if (index == 1 || this.clickKey == 1) {
|
|
- this.$refs.mycheckBox.style.width = '100%'
|
|
|
|
- if (val.data.children) {
|
|
|
|
- this.listArr3 = []
|
|
|
|
- this.title3 = ''
|
|
|
|
- this.listArr4 = []
|
|
|
|
- this.title4 = ''
|
|
|
|
-
|
|
|
|
- //处理样式
|
|
|
|
- this.styleHandle(childrensArr, index)
|
|
|
|
-
|
|
|
|
- // if(val.data.checked){
|
|
|
|
- // val.data.children.forEach((item)=>{
|
|
|
|
- // item.checked=true;
|
|
|
|
- // })
|
|
|
|
- // }else{
|
|
|
|
- // val.data.children.forEach((item)=>{
|
|
|
|
- // // item.checked=false;
|
|
|
|
- // this.$set(item,'checked',false)
|
|
|
|
- // })
|
|
|
|
- // }
|
|
|
|
-
|
|
|
|
- this.parentChecked1 = val.data.checked
|
|
|
|
- this.parentChecked2 = val.data.checked
|
|
|
|
- this.parentChecked3 = val.data.checked
|
|
|
|
- this.listArr2 = val.data.children
|
|
|
|
- this.title2 = val.data.name
|
|
|
|
- console.log(
|
|
|
|
- 'parentChecked1',
|
|
|
|
- this.parentChecked1,
|
|
|
|
- '--',
|
|
|
|
- 'parentChecked2',
|
|
|
|
- this.parentChecked2,
|
|
|
|
- '--',
|
|
|
|
- 'parentChecked3',
|
|
|
|
- this.parentChecked3
|
|
|
|
- )
|
|
|
|
- } else {
|
|
|
|
- this.listArr3 = []
|
|
|
|
- this.title3 = ''
|
|
|
|
- this.listArr4 = []
|
|
|
|
- this.title4 = ''
|
|
|
|
- this.listArr2 = []
|
|
|
|
- this.title2 = ''
|
|
|
|
- this.resetStyle(childrensArr, index)
|
|
|
|
- }
|
|
|
|
- } else if (index == 2 || this.clickKey == 2) {
|
|
|
|
- if (val.data.children) {
|
|
|
|
- this.listArr4 = []
|
|
|
|
- this.title4 = ''
|
|
|
|
- this.listArr3 = val.data.children
|
|
|
|
- this.title3 = val.data.name
|
|
|
|
- this.$refs.mycheckBox.style.width = '150%'
|
|
|
|
- this.styleHandle(childrensArr, index)
|
|
|
|
- this.parentChecked2 = val.data.checked
|
|
|
|
- this.parentChecked3 = val.data.checked
|
|
|
|
- } else {
|
|
|
|
- this.listArr4 = []
|
|
|
|
- this.title4 = ''
|
|
|
|
- this.listArr3 = []
|
|
|
|
- this.title3 = ''
|
|
|
|
this.$refs.mycheckBox.style.width = '100%'
|
|
this.$refs.mycheckBox.style.width = '100%'
|
|
- this.resetStyle(childrensArr, index)
|
|
|
|
- }
|
|
|
|
|
|
+ if(val.data.hasChild){
|
|
|
|
+ getAction(this.listUrl,{
|
|
|
|
+ parentCode:val.data.code,
|
|
|
|
+ level:this.maxLayers
|
|
|
|
+ }).then((res)=>{
|
|
|
|
+ console.log(res);
|
|
|
|
+ if(res.success){
|
|
|
|
+ if(res.result.records.length>0){
|
|
|
|
+ res.result.records.forEach((item,index)=>{
|
|
|
|
+ item.value=item.code
|
|
|
|
+ item.checked=val.data.checked;
|
|
|
|
+ item.indeterminates=false;
|
|
|
|
+
|
|
|
|
+ })
|
|
|
|
+ this.listArr3 = []
|
|
|
|
+ this.title3 = ''
|
|
|
|
+ this.listArr4 = []
|
|
|
|
+ this.title4 = ''
|
|
|
|
+
|
|
|
|
+ //处理样式
|
|
|
|
+ this.styleHandle(childrensArr, index)
|
|
|
|
+ this.parentChecked1 = val.data.checked
|
|
|
|
+ this.parentChecked2 = val.data.checked
|
|
|
|
+ this.parentChecked3 = val.data.checked
|
|
|
|
+ this.listArr2=res.result.records
|
|
|
|
+ this.title2 = val.data.name
|
|
|
|
+ }
|
|
|
|
+ };
|
|
|
|
+
|
|
|
|
+ })
|
|
|
|
+ }else{
|
|
|
|
+ this.listArr3 = []
|
|
|
|
+ this.title3 = ''
|
|
|
|
+ this.listArr4 = []
|
|
|
|
+ this.title4 = ''
|
|
|
|
+ this.listArr2 = []
|
|
|
|
+ this.title2 = ''
|
|
|
|
+ this.resetStyle(childrensArr, index)
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ } else if (index == 2 || this.clickKey == 2) {
|
|
|
|
+ if(val.data.hasChild){
|
|
|
|
+ getAction(this.listUrl,{
|
|
|
|
+ parentCode:val.data.code,
|
|
|
|
+ level:this.maxLayers
|
|
|
|
+ }).then((res)=>{
|
|
|
|
+ console.log(res);
|
|
|
|
+ if(res.success){
|
|
|
|
+ if(res.result.records.length>0){
|
|
|
|
+ res.result.records.forEach((item,index)=>{
|
|
|
|
+ item.value=item.code
|
|
|
|
+ item.checked=val.data.checked;
|
|
|
|
+ item.indeterminates=false;
|
|
|
|
+
|
|
|
|
+ })
|
|
|
|
+ this.listArr4 = []
|
|
|
|
+ this.title4 = ''
|
|
|
|
+
|
|
|
|
+ this.$refs.mycheckBox.style.width = '150%'
|
|
|
|
+ this.styleHandle(childrensArr, index)
|
|
|
|
+ this.parentChecked2 = val.data.checked
|
|
|
|
+ this.parentChecked3 = val.data.checked
|
|
|
|
+ this.listArr3=res.result.records
|
|
|
|
+ this.title3 = val.data.name
|
|
|
|
+ }
|
|
|
|
+ };
|
|
|
|
+
|
|
|
|
+ })
|
|
|
|
+ }else{
|
|
|
|
+ this.listArr4 = []
|
|
|
|
+ this.title4 = ''
|
|
|
|
+ this.listArr3 = []
|
|
|
|
+ this.title3 = ''
|
|
|
|
+ this.$refs.mycheckBox.style.width = '100%'
|
|
|
|
+ this.resetStyle(childrensArr, index)
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+
|
|
|
|
+ let ind=-1
|
|
|
|
+ this.listArr1.forEach((ele,i)=>{
|
|
|
|
+ if(ele.code==val.data.parentCode){
|
|
|
|
+ ind=i
|
|
|
|
+ // console.log(ind)
|
|
|
|
+ }
|
|
|
|
+ })
|
|
|
|
+ if(ind>-1){
|
|
|
|
+ this.listArr1[ind].indeterminates = !!val.checkList.length && val.checkList.length <val.plainOptions.length
|
|
|
|
+ this.listArr1[ind].checked = val.checkList.length === val.plainOptions.length && val.plainOptions.length!=0
|
|
|
|
+ }
|
|
|
|
+
|
|
} else if (index == 3 || this.clickKey == 3) {
|
|
} else if (index == 3 || this.clickKey == 3) {
|
|
- if (val.data.children) {
|
|
|
|
- this.listArr4 = val.data.children
|
|
|
|
- this.title4 = val.data.name
|
|
|
|
- this.$refs.mycheckBox.style.width = '200%'
|
|
|
|
- this.styleHandle(childrensArr, index)
|
|
|
|
- this.parentChecked3 = val.data.checked
|
|
|
|
- } else {
|
|
|
|
- this.$refs.mycheckBox.style.width = '150%'
|
|
|
|
- this.resetStyle(childrensArr, index)
|
|
|
|
|
|
+ if(val.data.hasChild){
|
|
|
|
+ getAction(this.listUrl,{
|
|
|
|
+ parentCode:val.data.code,
|
|
|
|
+ level:this.maxLayers
|
|
|
|
+ }).then((res)=>{
|
|
|
|
+ console.log(res);
|
|
|
|
+ if(res.success){
|
|
|
|
+ if(res.result.records.length>0){
|
|
|
|
+ res.result.records.forEach((item,index)=>{
|
|
|
|
+ item.value=item.code
|
|
|
|
+ item.checked=val.data.checked;
|
|
|
|
+ item.indeterminates=false;
|
|
|
|
+
|
|
|
|
+ })
|
|
|
|
+ this.listArr4 = res.result.records
|
|
|
|
+ this.title4 = val.data.name
|
|
|
|
+ this.$refs.mycheckBox.style.width = '200%'
|
|
|
|
+ this.styleHandle(childrensArr, index)
|
|
|
|
+ this.parentChecked3 = val.data.checked
|
|
|
|
+
|
|
|
|
+ }
|
|
|
|
+ };
|
|
|
|
+
|
|
|
|
+ })
|
|
|
|
+ }else{
|
|
|
|
+ this.$refs.mycheckBox.style.width = '150%'
|
|
|
|
+ this.resetStyle(childrensArr, index)
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+
|
|
|
|
+ if(this.listArr2){
|
|
|
|
+ console.log(this.listArr2)
|
|
|
|
+ let ind=-1;
|
|
|
|
+
|
|
|
|
+ this.listArr2.forEach((ele,i)=>{
|
|
|
|
+ if(ele.code==val.data.parentCode){
|
|
|
|
+ ind=i
|
|
|
|
+ // console.log(ind)
|
|
|
|
+ }
|
|
|
|
+ })
|
|
|
|
+ if(ind>-1){
|
|
|
|
+ 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.listArr1.forEach((element,num)=>{
|
|
|
|
+
|
|
|
|
+ if(element.code==this.listArr2[ind].parentCode){
|
|
|
|
+ ind=num
|
|
|
|
+ console.log(ind)
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ })
|
|
|
|
+ let checklist=this.listArr2.filter((item,index)=>{
|
|
|
|
+ return item.checked
|
|
|
|
+ })
|
|
|
|
+ // 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
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+
|
|
|
|
+
|
|
|
|
+
|
|
|
|
+ }else if (index == 4 || this.clickKey == 4){
|
|
|
|
+ if(this.listArr3){
|
|
|
|
+ // console.log(this.listArr3)
|
|
|
|
+ let ind=-1
|
|
|
|
+ this.listArr3.forEach((ele,i)=>{
|
|
|
|
+
|
|
|
|
+ if(item.code==val.data.parentCode){
|
|
|
|
+ ind=i
|
|
|
|
+ // console.log(ind)
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ })
|
|
|
|
+ if(ind>-1){
|
|
|
|
+ this.listArr3[ind].indeterminates = !!val.checkList.length && val.checkList.length <val.plainOptions.length
|
|
|
|
+ this.listArr3[ind].checked = val.checkList.length === val.plainOptions.length && val.plainOptions.length!=0
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ }
|
|
|
|
+ if(this.listArr2){
|
|
|
|
+ // console.log(this.listArr2)
|
|
|
|
+ let ind=-1
|
|
|
|
+ this.listArr3.forEach((ele,i)=>{
|
|
|
|
+
|
|
|
|
+ if(item.code==val.data.parentCode){
|
|
|
|
+ ind=i
|
|
|
|
+ // console.log(ind)
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ })
|
|
|
|
+ this.listArr2.forEach((element,num)=>{
|
|
|
|
+ if(item.code==this.listArr3[ind].parentCode){
|
|
|
|
+ ind=num
|
|
|
|
+ console.log(ind)
|
|
|
|
+ }
|
|
|
|
+ })
|
|
|
|
+ if(ind>-1){
|
|
|
|
+
|
|
|
|
+ let checklist3=this.listArr3.filter((item,index)=>{
|
|
|
|
+ return item.checked
|
|
|
|
+ })
|
|
|
|
+ // console.log(checklist)
|
|
|
|
+
|
|
|
|
+ this.listArr2[ind].indeterminates = !!checklist3.length && checklist3.length < this.listArr3.length
|
|
|
|
+ this.listArr2[ind].checked = checklist3.length === this.listArr3.length && this.listArr3.length!=0
|
|
|
|
+ let z=-1;
|
|
|
|
+ this.listArr1.forEach((element,num)=>{
|
|
|
|
+
|
|
|
|
+ if(item.code==this.listArr2[ind].parentCode){
|
|
|
|
+ z=num
|
|
|
|
+ console.log(z)
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ })
|
|
|
|
+ let checklist2=this.listArr1.filter((item,index)=>{
|
|
|
|
+ return item.checked
|
|
|
|
+ })
|
|
|
|
+ if(z>-1){
|
|
|
|
+ this.listArr1[z].indeterminates = !!checklist2.length && checklist2.length < this.listArr2.length
|
|
|
|
+ this.listArr1[z].checked = checklist2.length === this.listArr2.length && this.listArr2.length!=0
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+
|
|
}
|
|
}
|
|
}, 100)
|
|
}, 100)
|
|
|
|
|
|
@@ -164,7 +320,31 @@
|
|
})
|
|
})
|
|
}
|
|
}
|
|
},
|
|
},
|
|
- mounted() {}
|
|
|
|
|
|
+ mounted() {
|
|
|
|
+ // this.listArr1=this.listArr;
|
|
|
|
+ this.title1=this.title;
|
|
|
|
+ // console.log(this.listUrl)
|
|
|
|
+ if(this.listUrl){
|
|
|
|
+ getAction(this.listUrl,{
|
|
|
|
+ parentCode:0,
|
|
|
|
+ level:this.maxLayers
|
|
|
|
+ }).then((res)=>{
|
|
|
|
+ console.log(res);
|
|
|
|
+ if(res.success){
|
|
|
|
+ res.result.records.forEach((item,index)=>{
|
|
|
|
+ item.value=item.code
|
|
|
|
+ item.checked=false;
|
|
|
|
+ item.indeterminates=false;
|
|
|
|
+
|
|
|
|
+ })
|
|
|
|
+ };
|
|
|
|
+ this.listArr1=res.result.records
|
|
|
|
+ })
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+
|
|
|
|
+
|
|
|
|
+ }
|
|
}
|
|
}
|
|
</script>
|
|
</script>
|
|
|
|
|