HTML 部分
<template>
<view class="content">
<view class="position-group">
<!-- 一级循环 -->
<view class="pronames_one" v-for="(item,index) in positionlist" :key="index"
:class="item.oneliststare?'oneshow':'onehide'">
<view class="pronames-one-label" @click="onelist(index)">
<view class="pronames-one-option" @click.stop="oneListSe(item)">
<label :class="item.isOneSele?'cuIcon-round':'cuIcon-roundcheckfill'"></label>
<text>{{item.onename}}</text>
</view>
<label :class="item.oneliststare?'cuIcon-fold':'cuIcon-unfold'"></label>
</view>
<!-- 二级循环 -->
<view class="pronames_two" v-for="(item2,index2) in item.positiontwo" :key="index2"
:class="item2.twoliststare?'twoshow':'twohide'">
<view class="pronames-two-label" @click="twolist(index,index2)">
<view class="pronames-two-option" @click.stop="twoListSe(item,item2)">
<label :class="item2.isTwoSele?'cuIcon-round':'cuIcon-roundcheckfill'"></label>
<text>{{item2.twoname}}</text>
</view>
<label :class="item2.twoliststare?'cuIcon-fold':'cuIcon-unfold'"></label>
</view>
<view class="pronames_three">
<!-- 三级循环 -->
<view class="pronames_three-label" v-for="(item3,index3) in item2.positionthree" :key="index3"
@click="threeListSe(item,item2,item3)">
<label :class="item3.isThreeSele?'cuIcon-round':'cuIcon-roundcheckfill'"></label>
<text>{{item3.threename}}</text>
</view>
</view>
</view>
</view>
</view>
<view class="foot-utn">
<button type="primary" @click="submit">确认选择</button>
</view>
</view>
</template>js部分
<script>
export default {
data() {
return {
positionlist: [{
id: 0,
onename: "销售|客服|市场",
oneliststare: false, // 是否展开二级
isOneSele: false, // 当前第一级是否全部选中
isOneTain: false, // 当前第一级是否有选中的
positiontwo: [{
twoid: 0,
twoname: "销售业务",
twoliststare: false, // 是否展开三级
isTwoSele: false, // 当前第二级是否全部选中
isTwoTain: false, // 当前第二级是否有选中的
positionthree: [{
trheeid: 0,
threename: "销售代表",
isThreeSele: false, // 当前第三级是否选中
}, {
trheeid: 0,
threename: "客户代表",
isThreeSele: false
}, {
trheeid: 0,
threename: "销售顾问",
isThreeSele: false
}]
}, {
twoid: 1,
twoname: "销售管理",
twoliststare: false,
isTwoSele: false,
isTwoTain: false,
positionthree: [{
trheeid: 0,
threename: "销售主管",
isThreeSele: false
}, {
trheeid: 0,
threename: "销售经理",
isThreeSele: false
}, {
trheeid: 0,
threename: "销售总监",
isThreeSele: false
}]
}]
}, {
id: 1,
onename: "IT|互联网|通信",
oneliststare: false,
isOneSele: false,
isOneTain: false, // 是否有选中的
positiontwo: [{
twoid: 0,
twoname: "软件/互联网开发/系统集成",
twoliststare: false,
isTwoSele: false,
isTwoTain: false,
positionthree: [{
trheeid: 0,
threename: "软件工程师",
isThreeSele: false
}, {
trheeid: 1,
threename: "软件研发工程师",
isThreeSele: false
}, {
trheeid: 2,
threename: "高级软件工程师",
isThreeSele: false
}]
}, {
twoid: 1,
twoname: "互联网产品/运营管理",
twoliststare: false,
isTwoSele: false,
isTwoTain: false,
positionthree: [{
trheeid: 0,
threename: "网店客服",
isThreeSele: false
}, {
trheeid: 1,
threename: "网店运营",
isThreeSele: false
}, {
trheeid: 2,
threename: "网店管理员",
isThreeSele: false
}]
}]
}]
}
},
onLoad() {},
methods: {
onelist(index) {
let positionlist = this.positionlist;
// 展开收起一级列表 start
if (positionlist[index]['oneliststare'] == false) {
positionlist[index]['oneliststare'] = true;
} else {
positionlist[index]['oneliststare'] = false;
}
// 展开收起一级列表 end
},
twolist(index, index2) {
let positionlist = this.positionlist;
let positiontwo = this.positionlist[index].positiontwo[index2]['twoliststare'];
console.log(positiontwo)
// 展开收起二级列表 start
if (positiontwo == false) {
this.positionlist[index].positiontwo[index2]['twoliststare'] = true;
} else {
this.positionlist[index].positiontwo[index2]['twoliststare'] = false;
}
// 展开收起二级列表 end
},
oneListSe(item) {
item.isOneSele = !item.isOneSele
item.positiontwo.forEach(i => {
i.isTwoSele = item.isOneSele
i.isTwoTain = item.isOneSele
i.positionthree.forEach(j => {
j.isThreeSele = i.isTwoSele
})
})
// 下级是否有选中的
let yis = item.positiontwo.some(i => i.isTwoSele)
item.isOneTain = yis
// console.log(item.isOneTain);
},
twoListSe(item, item2) {
item2.isTwoSele = !item2.isTwoSele
item2.positionthree.forEach(i => {
i.isThreeSele = item2.isTwoSele
})
let ers = item2.positionthree.some(i => i.isThreeSele) // 第三层是否有选中的
item2.isTwoTain = ers
let yi = item.positiontwo.some(i => !i.isTwoSele)
let yis = item.positiontwo.some(i => i.isTwoTain)
item.isOneSele = !yi
item.isOneTain = yis
// console.log(item.isOneTain);
// console.log(item2.isTwoTain);
},
threeListSe(item, item2, item3) {
item3.isThreeSele = !item3.isThreeSele
let er = item2.positionthree.some(i => !i.isThreeSele) // 第三层是否有未选中的
let ers = item2.positionthree.some(i => i.isThreeSele) // 第三层是否有选中的
item2.isTwoSele = !er
item2.isTwoTain = ers
let yi = item.positiontwo.some(i => !i.isTwoSele) // 第二层是否有未选中的
let yis = item.positiontwo.some(i => i.isTwoTain) // 第二层是否有选中的
item.isOneSele = !yi
item.isOneTain = yis
// console.log(item.isOneTain);
// console.log(item2.isTwoTain);
},
//确认选择
submit() {
let sie = this.positionlist.filter(i => i.isOneSele || i.isOneTain)
let data = JSON.parse(JSON.stringify(sie))
let sieo = data.map(i => {
let tie = i.positiontwo.filter(j => j.isTwoSele || j.isTwoTain)
let tis = JSON.parse(JSON.stringify(tie))
let tieo = tis.map(o => {
o.positionthree = o.positionthree.map(e => {
return {
isThreeSele: e.isThreeSele,
threename: e.threename
}
})
console.log(o.positionthree);
return {
positionthree: o.positionthree,
archiveId: o.archiveId,
archiveName: o.archiveName,
isTwoSele: o.isTwoSele,
isTwoTain: o.isTwoTain,
twoname: o.twoname
}
})
tieo.forEach(s => {
s.positionthree = s.positionthree.filter(c => c.isThreeSele)
})
return {
positiontwo: tieo,
boxId: i.id,
boxNo: i.boxNo,
lockbarNo: i.lockbarNo,
isOneSele: i.isOneSele,
isOneTain: i.isOneTain,
onename: i.onename
}
})
sieo.forEach(i => {
i.positiontwo = i.positiontwo.filter(i => i.isTwoTain)
})
console.log(sieo)
}
}
}
</script>css 部分
<style>
page {
/* background: #fff; */
}
.position-group {
width: 100%;
height: auto;
padding-bottom: 200rpx;
}
/* 一级 */
.pronames_one {
width: 100%;
height: auto;
}
.pronames-one-label {
width: 100%;
height: 120rpx;
line-height: 120rpx;
background: #fff;
box-sizing: border-box;
padding: 0px 3%;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
background-color: aliceblue;
}
.pronames-one-label text {
font-size: 15px;
color: #2ebbfe;
}
.pronames-one-label label {
color: #aaa;
transition: all 0.5s;
}
/* 二级 */
.pronames_two {
width: 100%;
height: auto;
transition: all 0.5s;
}
.pronames-two-label {
width: 100%;
height: 100rpx;
line-height: 100rpx;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
box-sizing: border-box;
padding: 0px 3%;
background-color: #f7f7f7;
}
.pronames-two-label text {
font-size: 15px;
color: #333;
}
.pronames-two-label label {
color: #aaa;
transition: all 0.5s;
}
.pronames-two-option label {
padding-left: 37px;
}
/* 三级 */
.pronames_three {
width: 100%;
height: auto;
}
.pronames_three-label {
width: 100%;
height: 90rpx;
padding: 0 3%;
line-height: 90rpx;
display: flex;
flex-direction: row;
align-items: center;
background-color: #fff;
}
.pronames_three-label label {
width: 10%;
height: 90rpx;
line-height: 90rpx;
display: block;
color: #D5D5D5;
}
.pronames_three-label text {
width: 90%;
font-size: 15px;
padding-left: 10px;
color: #868686;
}
/* 展开收起效果 start */
.oneshow {}
.oneshow .pronames_two {
display: block;
}
.onehide {}
.onehide .pronames_two {
display: none;
}
/* 展开收起效果 end */
.twoshow {}
.twoshow .pronames_three {
display: block;
}
.twohide {}
.twohide .pronames_three {
display: none;
}
.onehide:not(:last-child) {
border-bottom: 1px #eaeaea solid;
}
.twohide:not(:last-child) {
border-bottom: 1px #eaeaea solid;
}
.cuIcon-fold {
width: 34rpx;
height: 34rpx;
background-image: url('../../static/user5.png');
background-repeat: no-repeat;
background-size: 100%;
transform: rotate(-90deg);
transition-property: transform;
transition-duration: 0.3s;
}
.cuIcon-unfold {
width: 34rpx;
height: 34rpx;
background-image: url('../../static/user5.png');
background-repeat: no-repeat;
background-size: 100%;
transform: rotate(90deg);
transition-property: transform;
transition-duration: 0.3s;
}
.cuIcon-round {
background-image: url('../../static/kai.png'); /* 选中 */
background-repeat: no-repeat;
background-size: 46rpx;
padding-left: 54rpx;
background-position: left center;
}
.cuIcon-roundcheckfill {
background-image: url('../../static/guan.png'); /* 未选中 */
background-repeat: no-repeat;
background-size: 46rpx;
padding-left: 54rpx;
background-position: left center;
}
</style>效果图
扫一扫
584
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
