zheng_xie_ui/work/pages/meeting/people.vue

<template>
	<view class="talbbox">
		<!-- 左侧 -->
		<view>
			<scroll-view :scroll-top="scrollTop" class="cate-left" scroll-y="true" show-scrollbar="false">
				<view class="cate-item" :class="{act:current==index}" v-for="(item,index) in cateList"
					@click="menuTab(index)" :key="item.userId">
					{{item.name}}
				</view>
			</scroll-view>
		</view>
		<!-- 右侧 -->
		<view class="cate-right">
			<scroll-view :scroll-top="riscrollTop" :scroll-into-view="'cate'+tempCurrent" class="cate-right-scroll" scroll-y="true"
				show-scrollbar="false" @scroll="getCurrentHeight">
				<view :id="'cate'+index" v-for="(item,index) in cateList" :key="item.userId" class="cate-right-item">
					<view class="flexcj">
						<view class="cate-title">{{item.name}}</view>
						<view class="allbtns" @click="getAll(item)">全选</view>
					</view>
					<view class="cate-right-txt">
						<!-- :class="checkList.findIndex((it) => it.userId === el.userId)!=-1?'act':''" -->
						<text v-for="(el,idx) in item.children" @click="getTabFn(el,item)" :class="checkList.findIndex((it) => it.userId === el.userId)!=-1?'act':''"  :key="el.userId">{{el.name}}</text>
					</view>
				</view>
				<view style="height: 30rpx;"></view>
			</scroll-view>
		</view>
		<!-- 弹窗 -->
		<view class="lmtac">
			<view class="flex1 table">
				<view class="upimg">
					<image :src="upimg"></image>
				</view>
				<view class="flex1" style="overflow-y: auto;">
					<view class="lmtit mb14">已添加人员</view>
					<block v-for="(item,index) in cateList" :key="item.userId">
						<block v-if="checkList.findIndex((it) => it.grade.indexOf(item.userId)!=-1)!=-1">
							<view class="lmtxt mb14" >
								<view class="laber">{{item.name}}：</view>
								<view class="lmame">
									<block v-for="(ite,idx) in checkList" ::key="ite.userId">
										<view class="tit" v-if="ite.grade.indexOf(item.userId)!=-1">{{ite.userName}}
											<view class="delimg" @click="getDel(idx)"><image :src="delimg"></image></view>
										</view>
									</block>
								</view>
							</view>
						</block>
					</block>
				</view>
				
			</view>	
			<view class="btns" @click="getSure">确定</view>
		</view>
		<!-- <view class="fwbtns" @click="getSure">确定</view> -->
	</view>
</template>

<script>
	import {getInfotreeSelectFn} from "@/api/mine/meeting.js"
	export default {
		data() {
			return {
				upimg:require("@/work/static/images/meeting/up.png"),
				delimg:require("@/work/static/images/meeting/del.png"),
				cateList: [{name: "驻潜全国政协委员",userId:'a'},
					{name: "驻潜省政协委员",userId:'b',
						children:[
							{boundary: "1",card: "342224199110121234",createBy: "",createTime: "2024-03-15 14:13:38",delFlag: "0",
						grade: "c,b",memberId: 4,name: "测试委员",partyAffiliation: "zggcd",phonenumber: "15333434321",unit: "潜山市政府",userId: 1},
							{boundary: "1",card: "342224199110121234",createBy: "",createTime: "2024-03-15 14:13:38",delFlag: "0",
						grade: "b",memberId: 5,name: "测试委员2",partyAffiliation: "zggcd",phonenumber: "15333434321",unit: "潜山市政府",userId: 2},
						]
					},
					{name: "驻潜安庆市政协委员",userId:'c',
						children:[
							{boundary: "1",card: "342224199110121234",createBy: "",createTime: "2024-03-15 14:13:38",delFlag: "0",
grade: "c,b",memberId: 4,name: "测试委员",partyAffiliation: "zggcd",phonenumber: "15333434321",unit: "潜山市政府",userId: 1},
]
					}
				],
				current: 0, //当前点击项
				rectInfoList: [],
				tempCurrent: 0,
				ricurrent:'',
				scrollTop: 0, //左侧导航栏距离顶部的位置
				riscrollTop:0,//右侧导航栏距离顶部的位置
				checkList:[],//选择的人员
			}
		},
		onLoad(e) {
			if(e.data){
				var newobj=JSON.parse(decodeURIComponent(e.data));
				this.checkList=newobj.list;
			}
			// this.getCasetalbFn()
		},
		mounted() {
			setTimeout(() => {
				this.getRectInfo();
			}, 200)
		},
		methods: {
			getCasetalbFn(){
				getInfotreeSelectFn().then(res=>{
					if(res.code==200){
						this.cateList=res.data;
					}
				})
			},
			menuTab(index){
				var top=this.rectInfoList[index].top;
				this.current = index;
				this.riscrollTop = top;
			},
			getTabFn(ite,item){
				var obj={
					userId:ite.userId,
					userName:ite.name,
					postName:ite.unit,
					userLevel:item.name,
					grade:ite.grade,
				}
				var indexNum = (this.checkList || []).findIndex((item) => item.userId === ite.userId);
				if(indexNum!=-1){
					this.checkList.splice(indexNum,1)
				}else{
					this.checkList.push(obj)
				}
				
				
			},
			getDel(idx){
				this.checkList.splice(idx,1)
			},
			getAll(item){
				var newArr=this.checkList;
				if(item.children&&item.children.length){
					item.children.forEach(ite=>{
						const matchingData = newArr.find(d => d.userId == ite.userId);
						if(matchingData){
						}else{
							var obj={
								userId:ite.userId,
								userName:ite.name,
								postName:ite.unit,
								userLevel:item.name,
								grade:ite.grade,
							}
							this.checkList.push(obj)
						}
					})
				}
			},
			getSure(){
				// 带数据返回
				var obj={
					zxConferenceUserList:this.checkList,
				}
				uni.$emit("refreshtalb",obj)
				uni.navigateBack({
					delta: 1 //返回层数，2则上上页
				});
				
			},
			// 获取与顶部之间的距离
			getRectInfo() {
				var top = 0;
				var bottom = 0;
				var temp = 0;
				for (var i = 0; i < this.cateList.length; i++) {
					let view = uni.createSelectorQuery().in(this).select("#cate" + i);
					view.fields({
						size: true,
						rect: true
					}, data => {
						top = temp;
						bottom = top + data.height;
						temp = bottom;
						this.rectInfoList[i] = {
							'top': top,
							'bottom': bottom
						}
						// console.log(top, bottom);
					}).exec();
				}
			},
			getCurrentHeight(e) {
				var currentHeight = e.detail.scrollTop;
				this.rectInfoList.forEach((item, index) => {
					if (currentHeight >= item.top && currentHeight <= item.bottom) {
						// 当前获取的盒子高度大于top小于bottom，判定将索引传至左侧菜单导航
						this.current = index;
						this.scrollTop = index * uni.upx2px(100);
					}
				})
			}
		}
	}
</script>

<style scoped lang="scss">
/deep/::-webkit-scrollbar {
        display: none;
        width: 0;
        height: 0;
    }
.talbbox{
	display: flex;height: 100vh;padding-bottom: 412rpx;
	.cate-left{width: 252rpx;flex: 0 0 auto;height: 100%;background-color: #f5f5f5;
		.cate-item{height: 110rpx;line-height: 110rpx;text-align: center;font-weight: 500;
font-size: 28rpx;color: #666666;
			&.act{background-color: #ffffff;font-weight: bold;color: #1D64E2;}
		}
	}
	.cate-right{flex: 1;height: 100%;background: #ffffff;
		.cate-right-scroll{height: 100%;padding-left:34rpx;
			.cate-right-item{
				.cate-title{font-weight: bold;font-size: 30rpx;color: #222327;height: 110rpx;line-height: 110rpx;}
				.cate-right-txt{display: flex;flex-wrap: wrap;
					text{font-weight: 500;font-size: 26rpx;color: #666666;min-width: 130rpx;margin-right:24rpx ;margin-bottom: 16rpx;padding: 8rpx 0;
						&.act{color: #1D64E2;}
					}
				}
			}
		
		}
	}
	.allbtns{font-weight: bold;font-size: 26rpx;color: #28C529;padding: 0 26rpx;}
}
// 弹窗
.lmtac{padding: 0 22rpx 40rpx;box-sizing: border-box;display: flex;flex-direction: column;
	position: fixed;left: 0;right: 0;bottom: 0;background: #FFFFFF;height:612rpx;
box-shadow: 0px 12rpx 6rpx 0px #EDEDED;
	.table{display: flex;flex-direction: column;overflow: hidden;}
	.upimg{padding: 20rpx;margin: 0 auto 6rpx;width: 64rpx;flex: 0 0 auto;
		image{width: 24rpx;height: 26rpx;}
	}
	.lmtit{font-weight: bold;font-size: 30rpx;color: #222327;}
	.lmtxt{
		display: flex;align-items: flex-start;font-weight: bold;font-size: 30rpx;
		.laber{color: #222327;flex: 0 0 auto;}
		.lmame{display: flex;flex-wrap: wrap;flex: 1;
			.tit{color: #1D64E2;display: flex;align-items: center;margin-right: 20rpx;}
			.delimg{
				width: 40rpx;height: 40rpx;display: flex;align-items: center;justify-content: center;
				image{width: 26rpx;height: 26rpx;margin-left: 12rpx;}
			}
			
		}
	}
	.btns{width: 100%;height: 80rpx;margin-top: 30rpx;
background: #1D64E2;font-weight: bold;font-size: 30rpx;
color: #FFFFFF;display: flex;align-items: center;justify-content: center;
border-radius: 40rpx;}

	}
</style>