zheng_xie_ui/work/pages/meeting/people.vue

<template>
	<view class="talbbox">
		<!-- 搜索 -->
		<view class="tabtop">
			<view class="plr12">
				<view class="search flex0" style="margin-bottom: 0;">
					<image :src="searchimg"></image>
					<input placeholder="输入关键字进行查询" v-model="title" @confirm="getConfirm"/>
				</view>
			</view>
			<view class="lbtab flexc">
				<image :src="lbicoimg" class="limg"></image>
				<view class="lbtabs flexc">
					<view class="lbtabp">
						<picker  range-key='label' :value="jbidx" :range="jblist"  @change='bindDateChangea'>
							<view >{{jbtxt || "选择届别"}}</view>
						</picker>
						<image :src="upimg" class="upimg"></image>
					</view>
					<view class="lbtabp" >
						<picker  range-key='label' :value="sfwyidx" :range="sfList"  @change='bindDateChangeb'>
							<view >{{sfwy || "是否常委"}}</view>
						</picker>
						<image :src="upimg" class="upimg"></image>
					</view>
				</view>
			</view>
		</view>
		<view class="mflexbox" v-if="cateList.length">
			<!-- 左侧 -->
			<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.userName||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.userName||el.name}}</text>
						</view>
					</view>
					<view style="height: 30rpx;"></view>
				</scroll-view>
			</view>
		</view>
		<block v-else>
			<no-data></no-data>
		</block>
		<!-- 弹窗 -->
		<view class="lmtac" :class="upflag?'upbox':''">
			<view class="flex1 table">
				<view class="upimg" @click="upflag=!upflag">
					<image :src="upsimg"></image>
				</view>
				<view class="flex1" style="overflow-y: auto;">
					<view class="lmtit mb14">已添加人员</view>
					<view class="lmtxt" >
						<view class="lmame">
							<block v-for="(ite,idx) in checkList" ::key="ite.userId">
								<view class="tit">{{ite.userName||ite.name}}
									<view class="delimg" @click="getDel(idx)"><image :src="delimg"></image></view>
								</view>
							</block>
						</view>
					</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.name}}
											<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 noData from "@/components/nodata/nodata.vue"
	import {getDictionaryFn} from "@/api/mine/register.js"
	import {getInfotreeSelectFn} from "@/api/mine/meeting.js"
	export default {
		components:{noData},
		data() {
			return {
				searchimg: require("@/work/static/images/search.png"),
				upsimg:require("@/work/static/images/meeting/up.png"),
				delimg:require("@/work/static/images/meeting/del.png"),
				lbicoimg:require("@/work/static/images/lwico.png"),
				upimg:require("@/work/static/images/lwup.png"),
				cateList: [],
				sfList:[{label: '是',value: 'Y'},{label: '否',value: 'N'}],
				sfwy:'',
				sfwyidx:'',
				isMember:'',
				current: 0, //当前点击项
				rectInfoList: [],
				tempCurrent: 0,
				ricurrent:'',
				scrollTop: 0, //左侧导航栏距离顶部的位置
				riscrollTop:0,//右侧导航栏距离顶部的位置
				checkList:[],//选择的人员,
				jblist:[],
				jbtxt:'',
				jbidx:'',
				title:'',
				upflag:false,
			}
		},
		onLoad(e) {
			if(e.data){
				var newobj=JSON.parse(decodeURIComponent(e.data));
				this.checkList=newobj.list;
			}
			this.init()
			this.getCasetalbFn()
		},
		mounted() {
			setTimeout(() => {
				this.getRectInfo();
			}, 200)
		},
		methods: {
			init(){
				// 界别circles
				getDictionaryFn('circles').then(res=>{
					if(res.code==200&&res.data.length){
						this.jblist = res.data.map(v => {
							return {
								label: v.dictLabel,
								value: v.dictValue
							}
						})
					}
				})
			},
			bindDateChangea(e){
				var val=e.detail.value;
				this.jbtxt=this.jblist[val].label;
				this.jbid=this.jblist[val].value;
				this.getConfirm()
			},
			bindDateChangeb(e){
				var val=e.detail.value;
				this.sfwy=this.sfList[val].label;
				this.isMember=this.sfList[val].value;
				this.getConfirm()
			},
			getConfirm(){
				this.cateList=[];
				this.getCasetalbFn()
			},
			getCasetalbFn(){
				var params={
					name:this.title,
					boundary:this.jbid,
					isMember:this.isMember
				}
				getInfotreeSelectFn(params).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{
					var obj={
						userId:ite.userId,
						userName:ite.name,
						postName:ite.unit,
						userLevel:item.name,
						grade:ite.grade,
						phonenumber:ite.phonenumber,
						parentGrade:item.userId
					}
					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,
								phonenumber:ite.phonenumber,
								parentGrade:item.userId
							}
							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;flex-direction: column;
	.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;}
}
.tabtop{flex: 0 0 auto;padding-top: 20rpx;background: #1D64E2;
	.lbtab{height: 96rpx;padding:0 24rpx 0 40rpx;
			.limg{width: 40rpx;height: 34rpx;margin-right: 10rpx;flex:0 0 auto;}
			.lbtabs{overflow: auto;flex-wrap: nowrap;flex: 1;
				.lbtabp{display: flex;align-items: center;flex: 0 0 auto;margin-right: 40rpx;
					view{color: #ffffff;font-size: 26rpx;}
				}
				.upimg{width: 18rpx;height: 10rpx;}
				
			}
		}
	
}
.mflexbox{flex: 1;display: flex;overflow: auto;}
.lbtabs /deep/ picker{padding: 0 22rpx;}
// 弹窗
.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:412rpx;
box-shadow: 0px 12rpx 6rpx 0px #EDEDED;transition: all 0.3s;
	&.upbox{
		height: 100vh;
		.upimg{
			image{transform: rotate(180deg);}
		}
	}
	.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: 32rpx;margin-bottom: 12rpx;}
			.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>