< template>
< ! -- 左侧第二个 -- >
< div class = "left-second-more" >
< div class = "layer-list-wrapper1" >
< el- collapse v- model= "activeNames" @change= "handleChange" >
< el- collapse- item v- for = "(item,index) in leftSelectMoreArr" : key= "index+1" : name= "item.nameNumber" >
< template slot= "title" >
< div class = "left-title" >
< div class = "left-icon" v- if = "item.textName" > { { item. textName } } < / div>
< div class = "left-name" > { { item. name} } （{ { item. numData} } 个）< / div>
< / div>
< i class = "iconfont" : class = "judgeActive('1')!=-1? 'icon-bofang-copy-copy':'icon-bofang'" > < / i>
< / template>
< el- checkbox- group v- model= "checkList" @change= "handleCheckedCitiesChange" >
< el- checkbox v- for = "(itemVal,indexVal) in item.stationArr" : key= "indexVal+1" : label= "itemVal.stationLabel" >
{ { itemVal. stationName } }
< span : class = "itemVal.stationType==1?'check-handwork':'check-auto'" > { { itemVal. stationType== 1 ? '手工' : "自动" } } < / span>
< / el- checkbox>
< / el- checkbox- group>
< / el- collapse- item>
< / el- collapse>
< / div>
< / div>
< / template>
< script>
export default {
components : { } ,
props : {
leftSelectMoreArr : {
type : Array,
default : ( ) => [ ] ,
} ,
} ,
data ( ) {
return {
checkList : [ ] ,
activeNames : [ ] ,
differentData : [ ] ,
isFlag : false ,
stationType : "" ,
numberVal1 : 0 ,
numberVal2 : 0 ,
numberVal3 : 0 ,
} ;
} ,
created ( ) {
if ( this . leftSelectMoreArr. length > 0 ) {
this . activeNames = [ this . leftSelectMoreArr[ 0 ] . nameNumber] ;
if ( this . leftSelectMoreArr[ 0 ] . stationArr. length > 0 ) {
this . leftSelectMoreArr[ 0 ] . stationArr. forEach ( ( ele ) => {
this . checkList. push ( ele. stationLabel) ;
} ) ;
this . stationType = this . leftSelectMoreArr[ 0 ] . nameNumber;
}
}
this . $emit ( "getTreeVal" , this . checkList, this . stationType) ;
} ,
watch : {
checkList ( newVal, oldVal ) {
this . differentData = this . getDifferentData ( newVal, oldVal) ;
let length1 = newVal. length;
let length2 = oldVal. length;
if ( length1 > length2) {
this . isFlag = true ;
} else {
this . isFlag = false ;
}
} ,
stationType ( newVal, oldVal ) { } ,
} ,
mounted ( ) { } ,
methods : {
handleChange ( val ) { } ,
handleCheckedCitiesChange ( val ) {
this . $emit ( "getTreeVal" , this . checkList, this . stationType) ;
} ,
judgeActive ( data ) {
return this . activeNames. indexOf ( data) ;
} ,
getDifferentData ( arr1, arr2 ) {
return arr1. concat ( arr2) . filter ( function ( v, i, arr ) {
return arr. indexOf ( v) === arr. lastIndexOf ( v) ;
} ) ;
} ,
removeDuplicates ( array ) {
return [ ... new Set ( array) ] ;
} ,
removeCommonElements ( arr1, arr2 ) {
return arr1. filter (
( item ) => ! arr2. some ( ( otherItem ) => otherItem === item)
) ;
} ,
} ,
} ;
< / script>
< style lang= "scss" >
. left- second- more {
. layer- list- wrapper1 {
height : calc ( 100 % - 22px) ;
width : 100 % ;
border- radius: 4px;
background- color: #fff;
margin- top: 10px;
display : flex;
flex- direction: column;
. el- collapse {
width : 100 % ;
border : 0 ;
color : #4b4b4b;
. el- collapse- item {
margin- bottom: 12px;
}
. el- collapse- item__header {
width : 100 % ;
height : 60px;
background : #f8f9ff;
border- bottom: none;
justify- content: space- between;
align- items: center;
border- radius: 4px;
padding : 0 16px;
. el- collapse- item__arrow {
display : none;
}
. left- title {
display : flex;
align- items: center;
. left- icon {
width : 26px;
height : 26px;
line- height: 26px;
text- align: center;
border- radius: 500000px;
background : #e1e6f0;
color : #303133 ;
font- size: 14px;
margin- right: 12px;
}
. left- name {
color : #303133 ;
font- weight: 700 ;
}
}
. iconfont {
font- size: 10px;
}
}
. el- collapse- item__header: hover {
background : #3886ff;
border- radius: 4px;
. left- title {
. left- icon {
border- radius: 4px;
background : #fff;
color : #0064ff;
}
. left- name {
color : #fff;
font- weight: 700 ;
}
}
. iconfont {
color : #fff;
}
}
. is- active {
background : #3886ff ! important;
border- radius: 4px;
. left- title {
. left- icon {
border- radius: 4px;
background : #fff;
color : #0064ff;
}
. left- name {
color : #fff;
font- weight: 700 ;
}
}
. iconfont {
color : #fff;
transform : rotate ( 90deg) ;
}
}
. el- collapse- item__content {
padding : 2px 16px;
border- left: 1px solid #e1e6f0;
border- right: 1px solid #e1e6f0;
border- bottom: 1px solid #e1e6f0;
border- bottom- left- radius: 4px;
border- bottom- right- radius: 4px;
margin- bottom: 12px;
}
. el- collapse- item: last- child {
. el- collapse- item__wrap {
border : 0 ;
. el- collapse- item__content {
margin- bottom: 0px;
}
}
}
}
. el- collapse: : - webkit- scrollbar {
width : 0px;
height : 0 ;
}
. el- checkbox- group {
. el- checkbox {
width : 100 % ;
display : flex;
justify- content: space- between;
align- items: center;
margin : 16px 0 ;
. el- checkbox__input {
height : 14px;
}
. el- checkbox__input. is- checked + . el- checkbox__label {
color : #3886ff;
}
. el- checkbox__label {
width : 100 % ;
display : flex;
align- items: center;
padding : 0 ;
color : #606266 ;
line- height: 14px;
margin- left: 12px;
img {
width : 20px;
margin- right: 8px;
}
. check- handwork {
width : 44px;
height : 24px;
line- height: 24px;
text- align: center;
display : block;
margin- left: auto;
border- radius: 4px;
background : #3886ff1a;
border : 1px solid #3886ff;
color : #3886ff;
}
. check- auto {
width : 44px;
height : 24px;
line- height: 24px;
text- align: center;
display : block;
margin- left: auto;
border- radius: 4px;
background : #70c4221a;
border : 1px solid #70c422;
color : #70c422;
}
}
}
. el- checkbox: hover{
. el- checkbox__input{
. el- checkbox__inner{
border- color: #3886ff;
}
}
. el- checkbox__label{
color : #3886ff;
}
}
. el- checkbox: last- child {
. el- checkbox__label {
margin- bottom: 0px;
}
}
}
}
}
. layer- list- wrapper1: : - webkit- scrollbar {
display : none;
}
. el- checkbox {
line- height: 27px;
}
< / style>
< leftSelectMore v- if = "leftSelectMoreFlag" : leftSelectMoreArr= "leftSelectMoreArr" @getTreeVal= 'getSingleVal' > < / leftSelectMore>
import leftSelectMore from "@/components/leftSelect/leftSelectMore.vue" ;
components : { leftSelectMore } ,
data ( ) {
return {
leftSelectMoreArr : [
{
name : "省控断面" ,
numData : "1" ,
nameNumber : 1 ,
stationArr : [
{
stationName : "桥1" ,
stationLabel : 1 ,
stationType : 1 ,
} ,
{
stationName : "桥2" ,
stationLabel : 2 ,
stationType : 2 ,
} ,
] ,
} ,
{
name : "市控断面" ,
numData : "1" ,
nameNumber : 2 ,
stationArr : [
{
stationName : "桥3" ,
stationLabel : 3 ,
stationType : 1 ,
} ,
{
stationName : "桥4" ,
stationLabel : 4 ,
stationType : 2 ,
} ,
] ,
} ,
] ,
leftSelectMoreFlag : true ,
}
} ,
methods : {
getSingleVal ( val, stationType ) {
console. log ( "选中的" )
}
}
