Web_TracerMethodology/pages/responsibleList/responsibleList.vue

<template>
	<view class="container">
		<view class="top">
			<view class="searchBar">
				<input class="inputArea" @input="keywordsHandle" type="text" v-model="keywords" placeholder="搜索当事人" placeholder-class="placeholder" />
				<view class="searchActiver" @click="searchHandle">
					<image class="searchIcon" src="../../static/search.png" mode=""></image>
				</view>
			</view>
			<view class="tabWrap">
				<view @click="tabClick(0)" :class="[currentTabIndex==0?'tab on':'tab']">全院</view>
				<view @click="tabClick(1)" :class="[currentTabIndex==1?'tab on':'tab']">当前病区</view>
			</view>
		</view>
		<view class="content">
			<index-list :padding='padding' v-on:listClick="listClickHandle" :checkedResponsibleList='checkedResponsibleList' :options="list"></index-list>
		</view>
		<view class="bottom">
			<view class="selectAll" @click="selectAllHandle">
				<image v-if="selectAll" class="icon" src="../../static/selectAll.png" mode=""></image>
				<image v-if="!selectAll" class="icon" src="../../static/selectAllnoclor.png" mode=""></image>
				<text :class="[selectAll?'text on':'text']">{{selectAll?'取消':'全选'}}</text>
			</view>
			<view class="cancelBtn" @click="cancelCheck">取消</view>
			<view class="comfirm" @click="sureCheck">确定</view>
		</view>
	</view>
</template>

<script>
	import indexList from '../../components/index-list/index-list.vue';
	export default {
		data() {
			return {
				currentTabIndex:0,
				checkedResponsibleListTemp:[],
				checkedResponsibleListTemp_all:[],
				checkedResponsibleListTemp_dept:[],
				checkedResponsibleList:[],//已选择的当事人列表
				list:[],
				checkId:'',
				padding:0,
				// list:[{
				// 	"letter": "A",
				// 	"data": [
				// 		{id:0,main:"阿克苏机场",sub:'sub'},
				// 		{id:1,main:"阿拉山口机场",sub:'sub'},
				// 		{id:2,main:"阿勒泰机场",sub:'sub'},
				// 		{id:3,main:"阿里昆莎机场",sub:'sub'},
				// 		{id:4,main:"安庆天柱山机场",sub:'sub'},
				// 		{id:5,main:"澳门国际机场",sub:'sub'},
				// 	]
				// }, {
				// 	"letter": "B",
				// 	"data": [
				// 		{id:6,main:"阿克苏机场",sub:'sub'},
				// 		{id:7,main:"阿拉山口机场",sub:'sub'},
				// 		{id:8,main:"阿勒泰机场",sub:'sub'},
				// 		{id:9,main:"阿里昆莎机场",sub:'sub'},
				// 		{id:10,main:"安庆天柱山机场",sub:'sub'},
				// 		{id:11,main:"澳门国际机场",sub:'sub'},
				// 	]
				// }],
				deptId:'',
				keywords:'',
				deptIdTemp:'',
				selectAll:false,
				isFromCheckMainPoints:false,
			};
		},
		onLoad({deptId,isFromCheckMainPoints,checkId}) {
			this.deptIdTemp = deptId;
			this.isFromCheckMainPoints = isFromCheckMainPoints;
			if(checkId)this.checkId = checkId
		},
		onShow() {
			const {responsibleList} = this.$store.state;
			// console.log({responsibleList});
			this.checkedResponsibleList = responsibleList.checkedResponsibleList;
		},
		computed:{
		},
		mounted(){
			
			this.getResponsibleList();
			//设置当事人页面滚动距离顶部距离
			uni
				.createSelectorQuery()
				.in(this)
				.select('.top')
				.boundingClientRect()
				.exec(res => {
					if (res[0]) {
						this.padding = res[0].height;
						// resolve(res[0].top);
					} else {
						that.$nextTick(() => {
							++count <= 8 ? getHeight() : this.padding = 0;
						});
					}
				});
		},
		methods:{
			bindClick(){
				
			},
			selectAllHandle(){
				if(!this.selectAll){
					this.selectAll = true;
					const getResponsibleListIds = (arr,index)=>{
						if(index == arr.length-1){
							return arr[index].data
						}
						return arr[index].data.concat(getResponsibleListIds(arr,index+1))
					}
					this.checkedResponsibleList = getResponsibleListIds(this.list,0);
				}else {
					this.selectAll = false;
					this.checkedResponsibleList = [];
				}
				
				// console.log('selectAllHandle',this.checkedResponsibleList);
			},
			keywordsHandle(e){
				if(e.target.value.length==0){
					this.getResponsibleList();
				}
				this.keywords = e.target.value;
			},
			searchHandle(){
				this.getResponsibleList();
			},
			//获取当时人列表
			getResponsibleList(){
				this.$store.dispatch({
				    type: "responsibleList/commActions",
				    payload: {
				      key: "getResponsibleList",
				      data: {
				         deptId:this.deptId,
						 keywords:this.keywords
				      },
				    }
				}).then((data)=>{
					  this.list = data;
				})
			},
			//当事人列表点击handle
			listClickHandle(checkedList){
				if(this.currentTabIndex == 0){
					//全院
					this.checkedResponsibleListTemp_all = checkedList;
				}
				
				if(this.currentTabIndex == 1){
					//当前病区
					this.checkedResponsibleListTemp_dept = checkedList;
				}
				
				// console.log(this.currentTabIndex,this.checkedResponsibleListTemp_all,this.checkedResponsibleListTemp_dept)
				
			},
			sureCheck(){
	
				const responsibleUserIds = this.currentTabIndex == 0?this.checkedResponsibleListTemp_all.map(item=>item.id):this.checkedResponsibleListTemp_dept.map(item=>item.id);
				const responsibleUserNames = this.currentTabIndex == 0?this.checkedResponsibleListTemp_all.map(item=>item.main):this.checkedResponsibleListTemp_dept.map(item=>item.main);
				// console.log(this.currentTabIndex,this.checkedResponsibleListTemp_all,this.checkedResponsibleListTemp_dept)
				// console.log({responsibleUserIds,responsibleUserNames});
				// return;
				if(this.isFromCheckMainPoints){
					//批量保存当事人
					const {checkMainPoints:{detailList}} = this.$store.state;
					const detailListFlat = (arr,index)=>{
						if(index == arr.length-1){
							return arr[index].responseList
						}
						return arr[index].responseList.concat(detailListFlat(arr,index+1))
					}
					const tempCheckIds = detailListFlat(detailList,0);
					const checkIds = tempCheckIds.map(item=>item.id);
					
					this.$store.dispatch({
					    type: "responsibleList/commActions",
					    payload: {
					      key: "bindCheckDetailResponsibleUser",
					      data: {
					         responsibleUserId:responsibleUserIds.join(','),
							 responsibleUserName:responsibleUserNames.join(','),
							 checkIds:checkIds,
					      },
					    }
					}).then((data)=>{
						  uni.showModal({
						      title: '提示',
						      content: '批量分配当事人成功！',
						      showCancel:false,
							  success:(res)=>{
								   if (res.confirm) {
									  uni.navigateBack({
									      delta: 1
									  });
								   }
							  }
						  });
					})
				}else {
					this.$store.dispatch({
					    type: "responsibleList/commActions",
					    payload: {
					      key: "bindCheckDetailResponsibleUser",
					      data: {
					         responsibleUserId:responsibleUserIds.join(','),
							 responsibleUserName:responsibleUserNames.join(','),
							 checkIds:[parseInt(this.checkId)],
					      },
					    }
					});
					this.$store.commit('responsibleList/updateCheckedResponsibleList',this.currentTabIndex == 0?this.checkedResponsibleListTemp_all:this.checkedResponsibleListTemp_dept);
					uni.navigateBack({
					    delta: 1
					});
				}
				
				
			},
			cancelCheck(){
				uni.navigateBack({
				    delta: 1
				});
			},
			tabClick(index){
				 if(index==1){
					 this.deptId = this.deptIdTemp;
				 }else {
					 this.deptId ='';
				 }
				 // this.checkedResponsibleListTemp = [],
				 // this.checkedResponsibleList = [],
				 this.getResponsibleList();
				 this.currentTabIndex = index;
			}
		}
	}
</script>

<style lang="less">
	.container {
		display: flex;
		height: 100%;
		flex-direction: column;
		.top {   position: relative;
		         z-index: 10;
				 height:170rpx;
				 padding: 0 25rpx;
				 padding-top: 18.75rpx;
				 background-color: #FFFFFF;
				 box-sizing: border-box;
				 box-shadow: 0px 3.75rpx 12.5rpx 0px rgba(0, 13, 51, 0.1);
				 .searchBar {
					 display: flex;
					 flex-direction: row;
					 justify-content: space-evenly;
					 align-items: center;
					 height: 55rpx;
					 background: #F0F2F7;
					 border-radius: 5rpx;
					 padding-left: 25rpx;
					 .inputArea {
						 flex-grow:0.9;
						 font-size: 22.5rpx;
						 font-family: SourceHanSansCN-Normal, SourceHanSansCN;
						 font-weight: 400;
					 }
					 .placeholder {
						 font-size: 22.5rpx;
						 font-family: SourceHanSansCN-Normal, SourceHanSansCN;
						 font-weight: 400;
						 color: #A1A7B3;
					 }
					 .searchActiver {
						 display: flex;
						 justify-content: center;
						 align-items: center;
						 flex-grow: 0.1;
						 height:100%;
						 .searchIcon {
							 width: 21.25rpx;
							 height: 21.25rpx;
						 }
					 }
				 }
				 .tabWrap {
					 display: flex;
					 flex-direction: row;
					 justify-content: space-around;
					 align-items: center;
					 margin-top: 25rpx;
					 .tab {
						 display: flex;
						 justify-content: center;
						 align-items: center;
						 width: 325rpx;
						 height: 50rpx;
						 font-size: 22.5rpx;
						 font-family: SourceHanSansCN-Normal, SourceHanSansCN;
						 font-weight: 400;
						 color: #292C33;
						 background: #EBEFF7;
						 border-radius: 25rpx;
						 
						 &.on {
							 color: #FFFFFF;
							 background: #3377FF;
						 }
					 }
				 }
		}
		.content {
				 flex: 1;
				 overflow: hidden;
		}
		.bottom {
			     display: flex;
				 flex-direction: row;
				 height:75rpx;
				 border-top: 0.62rpx solid #DADEE6;
				 background-color: #FFFFFF;
				 .selectAll {
					 display: flex;
					 width: 20%;
					 flex-direction: row;
					 justify-content: center;
					 align-items: center;
					 .icon {
						 width: 25rpx;
						 height: 24.37rpx;
						 margin-right: 15rpx;
					 }
					 .text {
						 font-size: 22.5rpx;
						 font-family: SourceHanSansCN-Normal, SourceHanSansCN;
						 font-weight: 400;
						 color: #8F9BB3;
						 &.on {
							 color:#3377FF;
						 }
					 }
				 }
				 .cancelBtn {
					 display: flex;
					 width: 40%;
					 height: 100%;
					 justify-content: center;
					 align-items: center;
					 font-size: 22.5rpx;
					 font-family: SourceHanSansCN-Normal, SourceHanSansCN;
					 font-weight: 400;
					 color: #3377FF;
					 border-left: 0.62rpx solid #DADEE6;
				 }
				 .comfirm {
					 display: flex;
					 width: 40%;
					 height: 100%;
					 font-size: 22.5rpx;
					 font-family: SourceHanSansCN-Normal, SourceHanSansCN;
					 font-weight: 400;
					 color: #FFFFFF;
					 justify-content: center;
					 align-items: center;
					 background: #3377FF;
				 }
		}
	}
</style>