Web_TracerMethodology/pages/selectVisitPerson/selectVisitPerson.vue

<template>
	<view class="container">
		<uni-popup ref="popup" type="bottom" :maskClick="true">
			  <view class="content">
			  	   <text class="contentTitle">新增访查对象</text>
				   <input class="input" type="text" focus="true" v-model="visiterInfo" placeholder-class="placeholder" placeholder="请填写访查对象信息" />
				   <view class="bottomBtnGroup">
				   	<view class="cancel" @click="cancelAdd">取消</view>
				    <view class="comfirm" @click="commitAdd">确定</view>
				   </view>
			  </view>
		</uni-popup>
		 <view class="pageTitle">
		 	  <text class="pageTitleLeft">访查对象</text>
			  <text class="pageTitleRight" @click="manageHandle">{{edit?'完成':'管理'}}</text>
		 </view>
		 <view class="listWrap">
		 	<view class="list" v-for="(item,index) in investigationUsers" :key="index" @click="selectPersonHandle({...item,index})">
		 		<text class="name">{{item.investigationUserName}}</text>
				<view v-if="item.investigationStatus==1||item.investigationStatus==2" :class="[item.investigationStatus==1||item.investigationStatus==2?item.investigationStatus==1?'status done':'status checking':'status']">{{item.investigationStatus==1?'已完成':'进行中'}}</view>
				<text v-if="!edit&&current.investigationUserName ==item.investigationUserName " class="checked">当前选中</text>
				<text v-if="edit" class="delBtn" @click="delInvestigationUser(item,index)">删除</text>
		 	</view>
		 </view>
		 <view class="bottom" @click="addVisiter">
			 + 新增访查对象
		 	 <!-- <image src="" mode=""></image> -->
		 </view>
	</view>
</template>

<script>
	import {mapState} from 'vuex';
	export default {
		data() {
			return {
				// status:1,
				edit:false,//是否编辑状态
				visiterInfo:'',
				current:null,//当前选中对象
				index:null,//当前选中的对象在列表中的下标
			};
		},
		computed:{
			...mapState({
				investigationUsers:state=>state.checkMainPoints.investigationUsers,
				currentSelectedInvestigationUser:state=>state.checkMainPoints.currentSelectedInvestigationUser,
			}),
		},
		watch:{
		     currentSelectedInvestigationUser:function (newVal,oldVal){
				 const index = this.investigationUsers.findIndex(item=>item.investigationUserName == newVal.investigationUserName);
				 this.current = newVal;
				 this.index = index;
			 },
		},
		onLoad({checkId,situationType,deptId}) {
			this.checkId = Number(checkId);
			this.situationType = situationType;
			this.deptId = deptId;
			this.current = this.currentSelectedInvestigationUser;
			const index = this.investigationUsers.findIndex(item=>item.investigationUserName == this.current.investigationUserName);
			if(index>=0){
				this.index = index;
			}else {
				this.index = 0
			}
		},
		onUnload(){
			console.log('页面卸载');
			this.$store.commit('checkMainPoints/comChangeState',{key:'currentSelectedInvestigationUser',data:this.current})
		},
		methods:{
			manageHandle(){
				if(!this.edit){
					this.edit = true;
				}else {
					this.edit = false;
				}
			},
			addVisiter(){
				this.$refs.popup.open();
			},
			cancelAdd(){
				this.$refs.popup.close();
				this.visiterInfo ='';
			},
			//添加受访者
			commitAdd(){
				this.$store.dispatch({
					type: 'selectVisitPerson/commActions',
					key: 'addInvestigationUser',						
					data:{
						checkId:this.checkId,
						investigationUser:this.visiterInfo,
						deptId:Number(this.deptId)
					}
				}).then(data=>{
					if(data){
						uni.showModal({
						    title: '提示',
						    content: '添加成功，是否立即返回？',
						    success:(res)=>{
						        if (res.confirm) {
									 this.cancelAdd();
									 uni.navigateBack({
									     delta: 1
									 });
						             this.reloadData(true);
						        }
								if (res.cancel) {
									 this.cancelAdd();
								     this.reloadData();
								}
						    }
						});
					}
				})
			},
			//删除受访者
			/**
			 * @param {Object} item
			 * @param {Number} index
			 */
			delInvestigationUser(item,index){
				const {investigationUserName} = item;
				this.$store.dispatch({
					type: 'selectVisitPerson/commActions',
					key: 'delInvestigationUser',						
					data:{checkId:this.checkId,investigationUser:investigationUserName}
				}).then(data=>{
				// console.log(index,this.index);
				   if(index==this.index){
					   //当删除的是当前选中的对象
					   const prevInvestigationUser = this.index>0?this.investigationUsers[this.index-1]:{investigationUserName:'',investigationStatus:''};
					   this.current = prevInvestigationUser;
				   }
				   this.reloadData();
				});
			},
			//操作后重新获取数据
			/**
			 * @param {Boolean} bool 判断是否直接将最新添加设置当前选中
			 */
			reloadData(bool){
				this.$store.dispatch({
					type: 'checkMainPoints/commActions',
					key: 'getInvestigationUsers',						
					data:{checkId:this.checkId,situationType:this.situationType,deptId:this.deptId}
				}).then(data=>{
				   this.$store.commit('checkMainPoints/comChangeState',{key:'investigationUsers',data:data});
	
				   if(bool){
					   this.$store.commit('checkMainPoints/comChangeState',{key:'currentSelectedInvestigationUser',data:data[data.length-1]})
				   }
                   //还未设置默认受访对象时
				   if(!this.currentSelectedInvestigationUser||!this.currentSelectedInvestigationUser.investigationUserName){
					   this.$store.commit('checkMainPoints/comChangeState',{key:'currentSelectedInvestigationUser',data:data[0]})
				   }
				   
				});
			},
			selectPersonHandle(item){
				this.current = item;
				this.index = item.index;
			}
		}
	}
</script>

<style lang="less">
    .container {
		.content {
			position: relative;
			height:45vh;
			padding: 0 40rpx;
			padding-top: 35rpx;
			border-radius: 25rpx 25rpx 0px 0px;
			background-color: #FFFFFF;
			.contentTitle {
				font-size: 30rpx;
				font-family: SourceHanSansCN-Normal, SourceHanSansCN;
				font-weight: 400;
				color: #292C33;
			}
			.input {
				color:#292C33;
				height: 87.5rpx;
				margin-top: 35rpx;
				border-bottom: 0.62rpx solid #DADEE6;
			}
			.placeholder {
				font-size: 22.5rpx;
				font-family: SourceHanSansCN-Normal, SourceHanSansCN;
				font-weight: 400;
				color: #A1A7B3;
			}
			.bottomBtnGroup {
				position: absolute;
				bottom: 0;
				left: 0;
				width: 100%;
				display: flex;
				flex-direction: row;
				.cancel {
					flex: 1;
					height:75rpx;
					text-align: center;
					line-height: 75rpx;
					font-size: 22.5rpx;
					font-family: SourceHanSansCN-Normal, SourceHanSansCN;
					font-weight: 400;
					color: #3377FF;
					border-top:0.62rpx solid #DADEE6;
				}
				.comfirm {
					flex: 1;
					height:75rpx;
					text-align: center;
					line-height: 75rpx;
					font-size: 22.5rpx;
					font-family: SourceHanSansCN-Normal, SourceHanSansCN;
					font-weight: 400;
					color: #FFFFFF;
					background-color:#3377FF;
				}
			}
		}
		.pageTitle {
			display: flex;
			width: 100%;
			flex-direction: row;
			justify-content:space-between;
			box-sizing: border-box;
			padding: 0 25rpx;
			padding-top:25rpx;
			padding-bottom:15rpx;
			.pageTitleLeft {
				font-size: 22.5rpx;
				font-family: SourceHanSansCN-Normal, SourceHanSansCN;
				font-weight: 400;
				color: #666F80;

			}
			.pageTitleRight {
				font-size: 20rpx;
				font-family: SourceHanSansCN-Normal, SourceHanSansCN;
				font-weight: 400;
				color: #3377FF;
			}
		}
		.listWrap {
			padding-left: 25rpx;
			margin-bottom: 15rpx;
			background-color: #FFFFFF;
			.list {
				position: relative;
				display: flex;
				height: 87.5rpx;
				flex-direction: row;
				justify-content: flex-start;
				align-items: center;
				border-bottom: 1px solid #DADEE6;
				.checked {
					position: absolute;
					top:32.5rpx;
					right: 25rpx;
					font-size: 22.5rpx;
					font-family: SourceHanSansCN-Normal, SourceHanSansCN;
					font-weight: 400;
					color: #7A8599;
				}
				.delBtn {
					position: absolute;
					top:32.5rpx;
					right: 25rpx;
					font-size: 22.5rpx;
					font-family: SourceHanSansCN-Normal, SourceHanSansCN;
					font-weight: 400;
					color: #FF3355;
				}
				.name {
					font-size: 22.5rpx;
					font-family: SourceHanSansCN-Normal, SourceHanSansCN;
					font-weight: 400;
					color: #292C33;
				}
				.status {
					width: 75rpx;
					height: 31.25rpx;
					border-radius: 5rpx;
					font-size: 17.5rpx;
					font-family: SourceHanSansCN-Medium, SourceHanSansCN;
					font-weight: 500;
					text-align: center;
					line-height: 31.25rpx;
					margin-left: 15rpx;
					&.done {
						color: #29CC96;
						background-color: rgba(41, 204, 150,0.1);
					}
					
					&.checking {
						color: #FFAA00;
						background:rgba(255, 204, 102,0.1);
					}
				}
				
				&:last-child {
					border: none;
				}
			}
		}
		.bottom {
			display: flex;
			justify-content: center;
			align-items: center;
			height: 75rpx;
			font-size: 22.5rpx;
			font-family: SourceHanSansCN-Normal, SourceHanSansCN;
			font-weight: 400;
			color: #3377FF;
			background: #FFFFFF;
		}
	}
</style>