123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686 |
- <template>
- <div class="linkMultiSel">
- <div class="leftBox">
- <div class="bigBOX" ref="mycheckBox">
- <div class="big_item">
- <MultiCheckBox :title="title1" :listArr="listArr1" :curLayerNum="1" :parentChecked="false"
- @getItemData="getItemData" @getCheckedList='getCheckedList' />
- </div>
- <div class="big_item">
- <MultiCheckBox :title="title2" :listArr="listArr2" :curLayerNum="2" :parentChecked="parentChecked1"
- @getItemData="getItemData" @getCheckedList='getCheckedList' v-if="listArr2.length>0" />
- </div>
- <div class="big_item">
- <MultiCheckBox :title="title3" :listArr="listArr3" :curLayerNum="3" :parentChecked="parentChecked2"
- @getItemData="getItemData" @getCheckedList='getCheckedList' v-if="listArr3.length>0" />
- </div>
- <div class="big_item">
- <MultiCheckBox :title="title4" :listArr="listArr4" :curLayerNum="4" :parentChecked="parentChecked3"
- @getItemData="getItemData" @getCheckedList='getCheckedList' v-if="listArr4.length>0" />
- </div>
- </div>
- </div>
- <div class="rightBox">
- <div class="title">已选<a-button class="clear" type="link" @click="clearAll">清空</a-button></div>
- <div class="linkMulti_list">
- <div class="selectBox1">
- <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>
- </template>
- <script>
- import MultiCheckBox from './MultiCheckBox'
- import { getAction, postAction, downFile, downFilePost } from '@/api/manage';
- export default {
- props: ['title', 'listArr','listUrl','maxLayers'],
- components: {
- MultiCheckBox
- },
- data() {
- return {
- listArr1:[],
- title1:'',
- title2: '',
- listArr2: [],
- title3: '',
- listArr3: [],
- title4: '',
- listArr4: [],
- clickKey: 0,
- parentChecked1: false,
- parentChecked2: false,
- parentChecked3: false,
-
- currentData: null,
- layersNum: 0,
- checkedShowList:[],
- }
- },
- watch: {},
- methods: {
- getItemData(val) {
- this.$nextTick(() => {
- // this.clickKey = val.clickObj.dataset.layers
- // let index = parseInt(val.clickObj.dataset.layers) || val.curLayerNum
- let index = val.curLayerNum
- this.currentData = val.data
-
- let childrensArr = Array.from(this.$refs.mycheckBox.children)
- setTimeout(() => {
- // console.log(val, index)
- // console.log(val.data.checked)
- if (index == 1 || this.clickKey == 1) {
- this.$refs.mycheckBox.style.width = '100%'
- if(val.data.hasChild){
- getAction(this.listUrl,{
- parentCode:val.data.code,
- level:this.maxLayers
- }).then((res)=>{
- // console.log(res);
- if(res.success){
- if(res.data.length>0){
- res.data.forEach((item,index)=>{
-
- item.value=item.code
- item.checked=val.data.checked;
- 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.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.data
- this.title2 = val.data.name
- }
- };
-
- })
- }else{
- this.listArr3 = []
- this.title3 = ''
- this.listArr4 = []
- this.title4 = ''
- this.listArr2 = []
- this.title2 = ''
- this.resetStyle(childrensArr, index)
- }
-
- // this.checkedShowList=val.checkList
- } 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.data.length>0){
- res.data.forEach((item,index)=>{
- item.value=item.code
- item.checked=val.data.checked;
- item.indeterminates=false;
-
- })
- this.checkedShowList.forEach((ele)=>{
- res.data.forEach((item)=>{
- if(ele.code==item.code){
- item.checked=true;
- }
- })
-
- })
- 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.data
- 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) {
- if(val.data.hasChild){
- getAction(this.listUrl,{
- parentCode:val.data.code,
- level:this.maxLayers
- }).then((res)=>{
- // console.log(res);
- if(res.success){
- if(res.data.length>0){
- res.data.forEach((item,index)=>{
- item.value=item.code
- item.checked=val.data.checked;
- item.indeterminates=false;
-
- })
- this.checkedShowList.forEach((ele)=>{
- res.data.forEach((item)=>{
- if(ele.code==item.code){
- item.checked=true;
- }
- })
-
- })
- this.listArr4 = res.data
- 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)
- }
- let ind=-1;
- if(this.listArr2){
- // console.log(this.listArr2)
- 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
- }
- }
- 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)=>{
- return item.checked || item.indeterminates
- })
- // console.log(checklist)
- 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){
- 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 || item.indeterminates
- })
- // 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 || item.indeterminates
- })
- 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)
- this.$emit('getSelectedArr',val.checkList)
- })
- },
- styleHandle(arr, i) {
- arr.forEach((item, index) => {
- if (index <= i) {
- item.style.width = `${100 / (i + 1)}%`
- item.style.borderRight = '1px solid #ccc'
- }
- })
- },
- resetStyle(arr, i) {
- arr.forEach((item, index) => {
- if (index < i) {
- item.style.width = `${100 / i}%`
- item.style.borderRight = '1px solid #ccc'
- }
- if (index == i - 1) {
- item.style.borderRight = 'none'
- }
- })
- },
-
-
- deleteItem(item){
- // console.log(item);
- let val='';
- this.checkedShowList.forEach((ele,index)=>{
- if(ele.code==item.code){
- val=ele.value
- }
- })
-
- this.checkedShowList=this.checkedShowList.filter((element,index) => {
- return element.code!=val;
- });
- 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(){
- this.listArr1.forEach((item)=>{
- item.checked=false;
- item.indeterminates=false;
- })
- this.listArr2.forEach((item)=>{
- item.checked=false;
- item.indeterminates=false;
- })
- this.listArr3.forEach((item)=>{
- item.checked=false
- item.indeterminates=false
- })
- this.listArr4.forEach((item)=>{
- item.checked=false
- item.indeterminates=false
- })
- 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() {
- // 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.data.forEach((item,index)=>{
- item.value=item.code
- item.checked=false;
- item.indeterminates=false;
-
- })
- };
- this.listArr1=res.data
- })
- }
-
-
- }
- }
- </script>
- <style lang="scss" scoped>
- .linkMultiSel {
- width: 100%;
- height: 310px;
- display: flex;
- ul,
- li {
- margin: 0;
- padding: 0;
- list-style: none;
- }
- .leftBox {
- width: 62%;
- margin-right: 3%;
- border: 1px solid #ccc;
- border-radius: 5px;
- overflow-x: auto;
- }
- .rightBox {
- width: 35%;
- border: 1px solid #ccc;
- border-radius: 5px;
- .selectBox1{
- height: 250px;
- overflow: auto;
-
- .selectList{
- display: block;
- width: 100%;
- // padding: 0 15px;
- // padding: 3px 0;
- }
- .selectLists{
- display: block;
- width: 100%;
- padding: 0 15px;
- }
- .selectLists:hover{
- background-color: rgba(0,0,0,.1);
- }
- .selectListitem{
- display: block;
- height: 25px;
- line-height: 25px;
- background-color: #eee;
- border-radius: 5px;
- padding: 0 10px;
- margin: 8px 10px;
- position: relative;
- #close{
- font-size: 12px;
- position: absolute;
- right: 10px;
- top: 5px;
- cursor: pointer;
- }
- }
- }
- }
- .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;
- position: relative;
- .clearAllBtn{
- position: absolute;
- top: 3px;
- right: 0;
- }
- }
- .big_item {
- width: 100%;
- // min-width: 200px;
- // width: 426px;
- display: inline-block;
- // height: calc(100% - 10px);
- }
- .bigBOX {
- // width: calc(2 * 100%);
- height: calc(100% - 10px);
- box-sizing: border-box;
- // display: flex;
- }
- }
- </style>
|