|
@@ -1,30 +1,17 @@
|
|
<template>
|
|
<template>
|
|
<div class="multiCheckbox">
|
|
<div class="multiCheckbox">
|
|
- <div class="linkMulti_list" ref="mycheckMul">
|
|
|
|
|
|
+ <div class="linkMulti_list" >
|
|
<div class="title">{{title}}</div>
|
|
<div class="title">{{title}}</div>
|
|
<ul class="linkMulti_list_one">
|
|
<ul class="linkMulti_list_one">
|
|
- <li class="checkAll">
|
|
|
|
- <a-checkbox
|
|
|
|
- :indeterminate="indeterminate"
|
|
|
|
- :checked="checkAll"
|
|
|
|
- @change="onCheckAllChange"
|
|
|
|
- >全选</a-checkbox>
|
|
|
|
|
|
+ <li class="checkAll" ref="checkAllBox">
|
|
|
|
+ <a-checkbox :indeterminate="indeterminate" :checked="checkAll" @change="onCheckAllChange" :data-layers="curLayerNum" >全选</a-checkbox>
|
|
</li>
|
|
</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>
|
|
|
|
|
|
+ <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.code" :checked="item.checked"
|
|
|
|
+ @click.stop="listItemClick($event,item)" :indeterminate="item.indeterminates" >{{item.name}}</a-checkbox>
|
|
<!-- <span>{{item.name}}</span> -->
|
|
<!-- <span>{{item.name}}</span> -->
|
|
- <span class="more" v-show="item.children">
|
|
|
|
|
|
+ <span class="more" v-show="item.hasChild">
|
|
<a-icon type="right" />
|
|
<a-icon type="right" />
|
|
</span>
|
|
</span>
|
|
</li>
|
|
</li>
|
|
@@ -35,218 +22,290 @@
|
|
</template>
|
|
</template>
|
|
|
|
|
|
<script>
|
|
<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()
|
|
|
|
|
|
+import { getAction, postAction, downFile, downFilePost } from '@/api/manage';
|
|
|
|
+ export default {
|
|
|
|
+ name: 'MultiCheckBox',
|
|
|
|
+ props: {
|
|
|
|
+ title: {
|
|
|
|
+ type: String
|
|
|
|
+ },
|
|
|
|
+ listArr: {
|
|
|
|
+ type: Array,
|
|
|
|
+ default () {
|
|
|
|
+ return []
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ curLayerNum: {
|
|
|
|
+ type: Number,
|
|
|
|
+ default () {
|
|
|
|
+ return 1
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ parentChecked: {
|
|
|
|
+ type: Boolean,
|
|
|
|
+ default () {
|
|
|
|
+ return false
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ indeterminates:{
|
|
|
|
+ type:Boolean,
|
|
|
|
+ default(){
|
|
|
|
+ return false
|
|
|
|
+ }
|
|
}
|
|
}
|
|
},
|
|
},
|
|
- // 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 = []
|
|
|
|
|
|
+ data() {
|
|
|
|
+ return {
|
|
|
|
+ checkedList: [],
|
|
|
|
+ indeterminate: false,
|
|
|
|
+ checkAll: false,
|
|
|
|
+ plainOptions: [],
|
|
|
|
+ layersNum: 0, //控制层级
|
|
|
|
+ currentLayerNum: 0, //当前层级是多少层,
|
|
|
|
+ currentItem: null
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ watch: {
|
|
|
|
+ checkAll: function (n, o) {
|
|
|
|
+ if (n != o) {
|
|
|
|
+ // this.onCheckAllChange()
|
|
}
|
|
}
|
|
},
|
|
},
|
|
- 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)
|
|
|
|
|
|
+ listArr:{
|
|
|
|
+ handler(n, o) {
|
|
|
|
+ this.plainOptions=[];
|
|
|
|
+ // console.log(n,o,'------')
|
|
|
|
+ this.listArr.forEach(element => {
|
|
|
|
+ this.plainOptions.push(element.value)
|
|
|
|
+ if(element.checked){
|
|
|
|
+ let num = this.checkedList.indexOf(element.value)
|
|
|
|
+ if (num == -1) {
|
|
|
|
+ this.checkedList.push(element.value);
|
|
|
|
+ console.log(this.checkedList,'--',this.curLayerNum)
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ }else{
|
|
|
|
+ let num = this.checkedList.indexOf(element.value)
|
|
|
|
+ if (num > -1) {
|
|
|
|
+ this.checkedList.splice(num, 1)
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ });
|
|
|
|
+
|
|
|
|
+ // console.log(this.checkedList.length,this.plainOptions.length)
|
|
|
|
+ this.indeterminate = !!this.checkedList.length && this.checkedList.length < this.plainOptions.length
|
|
|
|
+ this.checkAll = this.checkedList.length === this.plainOptions.length && this.plainOptions.length!=0
|
|
|
|
+ },
|
|
|
|
+ deep: true
|
|
|
|
+ },
|
|
|
|
+
|
|
|
|
+ parentChecked: {
|
|
|
|
+ handler(n, o) {
|
|
|
|
+ // console.log(n, o, '--parentChecked', this.curLayerNum,this.checkedList,this.plainOptions)
|
|
|
|
+ if (n) {
|
|
|
|
+ this.checkAll = true
|
|
|
|
+ this.listArr.forEach((item, index) => {
|
|
|
|
+ item.checked = n
|
|
|
|
+ let num = this.checkedList.indexOf(item.value)
|
|
|
|
+ if (num == -1) {
|
|
|
|
+ this.checkedList.push(item.value);
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+
|
|
|
|
+ })
|
|
|
|
+ } else if (n == false) {
|
|
|
|
+ this.checkAll = false
|
|
|
|
+ this.listArr.forEach((item, index) => {
|
|
|
|
+ item.checked = n
|
|
|
|
+ })
|
|
|
|
+ this.checkedList = []
|
|
}
|
|
}
|
|
- })
|
|
|
|
- } else {
|
|
|
|
- this.listArr.forEach((ele, i) => {
|
|
|
|
- if (index == i) {
|
|
|
|
- this.$set(ele, 'checked', e.target.checked)
|
|
|
|
|
|
+ },
|
|
|
|
+
|
|
|
|
+ deep: true,
|
|
|
|
+ immediate: 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.$set(ele, 'indeterminates',false)
|
|
|
|
+ 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(e,item);
|
|
|
|
+ },
|
|
|
|
+ onCheckAllChange(e) {
|
|
|
|
+
|
|
|
|
+
|
|
|
|
+ console.log(event)
|
|
|
|
+ Object.assign(this, {
|
|
|
|
+ checkedList: e.target.checked ? this.plainOptions : [],
|
|
|
|
+ indeterminate: false,
|
|
|
|
+ checkAll: e.target.checked
|
|
})
|
|
})
|
|
-
|
|
|
|
- let num = this.checkedList.indexOf(e.target.value)
|
|
|
|
- if (num > -1) {
|
|
|
|
- this.checkedList.splice(num, 1)
|
|
|
|
|
|
+ console.log(this.checkedList)
|
|
|
|
+ if (this.checkedList.length) {
|
|
|
|
+ this.listArr.forEach(item => {
|
|
|
|
+ this.$set(item, 'checked', true)
|
|
|
|
+ })
|
|
|
|
+ } else {
|
|
|
|
+ this.listArr.forEach(item => {
|
|
|
|
+ this.$set(item, 'checked', false)
|
|
|
|
+ })
|
|
}
|
|
}
|
|
- }
|
|
|
|
- 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)
|
|
|
|
|
|
+
|
|
|
|
+ this.listItemClick(event,{
|
|
|
|
+ name:'全选',value:'all',checked:e.target.checked,indeterminates:false
|
|
})
|
|
})
|
|
- } else {
|
|
|
|
- this.listArr.forEach(item => {
|
|
|
|
- this.$set(item, 'checked', false)
|
|
|
|
|
|
+ },
|
|
|
|
+
|
|
|
|
+ listItemClick(event, item) {
|
|
|
|
+ // console.log(item)
|
|
|
|
+
|
|
|
|
+ this.$emit('getItemData', {
|
|
|
|
+ clickObj: event.target,
|
|
|
|
+ data: item,
|
|
|
|
+ curLayerNum:this.curLayerNum,
|
|
|
|
+ checkList:this.checkedList,
|
|
|
|
+ plainOptions:this.plainOptions
|
|
})
|
|
})
|
|
- }
|
|
|
|
|
|
+ },
|
|
|
|
+
|
|
},
|
|
},
|
|
- listItemClick(event, item) {
|
|
|
|
- console.log(item)
|
|
|
|
|
|
+ mounted() {
|
|
|
|
+ this.currentLayerNum = this.curLayerNum
|
|
|
|
|
|
- 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) {
|
|
|
|
- }
|
|
|
|
|
|
+ this.listArr.forEach(element => {
|
|
|
|
+ this.plainOptions.push(element.value)
|
|
|
|
+ // console.log(this.plainOptions)
|
|
})
|
|
})
|
|
- }
|
|
|
|
- },
|
|
|
|
- mounted() {
|
|
|
|
- this.currentLayerNum = this.curLayerNum
|
|
|
|
-
|
|
|
|
- this.listArr.forEach(element => {
|
|
|
|
- this.plainOptions.push(element.value)
|
|
|
|
- if (element.checked) {
|
|
|
|
- this.checkedList.push(element.value)
|
|
|
|
|
|
+
|
|
|
|
+
|
|
|
|
+
|
|
|
|
+ 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
|
|
|
|
+ }
|
|
|
|
+ })
|
|
|
|
+ })
|
|
}
|
|
}
|
|
- })
|
|
|
|
- if (this.checkedList.length == this.plainOptions.length) {
|
|
|
|
- this.checkAll = true
|
|
|
|
- }
|
|
|
|
- // console.log(this.checkedList)
|
|
|
|
- // console.log(this.curLayerNum)
|
|
|
|
-
|
|
|
|
- // console.log(this.parentChecked)
|
|
|
|
-
|
|
|
|
- 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
|
|
|
|
- }
|
|
|
|
|
|
+
|
|
|
|
+ if(this.$refs.checkAllBox){
|
|
|
|
+ // console.log(this.$refs.checkAllBox)
|
|
|
|
+ let refsCheckAllArr = Array.from(this.$refs.checkAllBox)
|
|
|
|
+ refsCheckAllArr.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>
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
<style lang="scss" scoped>
|
|
-.multiCheckbox {
|
|
|
|
- width: 100%;
|
|
|
|
- height: 300px;
|
|
|
|
- ul,
|
|
|
|
- li {
|
|
|
|
- margin: 0;
|
|
|
|
- padding: 0;
|
|
|
|
- list-style: none;
|
|
|
|
- }
|
|
|
|
- .linkMulti_list {
|
|
|
|
- // padding: 5px 0px;
|
|
|
|
- display: inline-block;
|
|
|
|
|
|
+ .multiCheckbox {
|
|
width: 100%;
|
|
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 {
|
|
|
|
- }
|
|
|
|
|
|
+ height: 300px;
|
|
|
|
+
|
|
|
|
+ ul,
|
|
li {
|
|
li {
|
|
- height: 30px;
|
|
|
|
- line-height: 30px;
|
|
|
|
- cursor: pointer;
|
|
|
|
- padding: 0 15px;
|
|
|
|
- position: relative;
|
|
|
|
- .more {
|
|
|
|
- position: absolute;
|
|
|
|
- top: 2px;
|
|
|
|
- right: 10px;
|
|
|
|
|
|
+ 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;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ 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);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
- li:hover {
|
|
|
|
- background-color: rgb(240, 240, 240);
|
|
|
|
|
|
+
|
|
|
|
+ .ant-checkbox-group {
|
|
|
|
+ width: 100%;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
- .ant-checkbox-group {
|
|
|
|
- width: 100%;
|
|
|
|
- }
|
|
|
|
-}
|
|
|
|
</style>
|
|
</style>
|