Web_TracerMethodology/pages/selectVisitPerson/selectVisitPerson.vue

<template>
	<view class="container">
		<uni-popup ref="popup" type="bottom" :maskClick="true">
			<view class="content">
				<form @submit="formSubmit" @reset="formReset">
					<text class="contentTitle">{{edit?'编辑访查对象':'新增访查对象'}}</text>
					<!-- <input class="input" type="text" focus="true" v-model="visiterInfo" placeholder-class="placeholder" placeholder="请填写访查对象信息" /> -->
					<scroll-view scroll-y="true" class="scroll-Y">
						<view v-for="(item,index) in templateData" class="formItem">
							<text :class="[item.required?'label requred':'label']">{{item.title}}:</text>
							<input class="value" :name="`${index}`" type="text" placeholder-class="placeholder"
							:value="formDefaultData&&formDefaultData[index].value"	placeholder="请输入相应内容" />
						</view>
					</scroll-view>
					<view class="bottomBtnGroup">
						<button class="cancel" @click="cancelAdd">取消</button>
						<button class="comfirm" formType='submit'>确定</button>
					</view>
				</form>
			</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})">
				<view class="infoWrap">
					 <text v-if="t.showFiled" v-for="(t,i) in item.contentVOs" class="infoTag">{{t.value}}</text>
				</view>
				<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&&current.investigationId ==item.investigationId "
					class="checked">当前选中</text>
				<text v-if="edit" class="editBtn" @click="editInvestigationUser(item,index)">编辑</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, //当前选中的对象在列表中的下标
				formDefaultData:null, //受访者表单默认数据
				currentEditInvestigationUsers:null,
			};
		},
		computed: {
			...mapState({
				investigationUsers: state => {
					return JSON.parse(JSON.stringify(state.checkMainPoints.investigationUsers));
				},
				currentSelectedInvestigationUser: state => state.checkMainPoints.currentSelectedInvestigationUser,
				templateData: state => state.selectVisitPerson.templateData,
			}),
		},
		watch: {
			currentSelectedInvestigationUser: function(newVal, oldVal) {
				//当删光所有访谈对象时newVal为null,需要做判断
				if(newVal){
					 const index = this.investigationUsers.findIndex(item => item.investigationId == newVal.investigationId);
					 this.current = newVal;
					 this.index = index;
				}
			},
		},
		onLoad({
			checkId,
			situationType,
			deptId,
			pageTemplateId
		}) {
			this.checkId = Number(checkId);
			this.situationType = situationType;
			this.deptId = deptId;
			this.pageTemplateId = pageTemplateId;
			this.current = this.currentSelectedInvestigationUser;
			const index = this.investigationUsers.findIndex(item => item.investigationId == this.currentSelectedInvestigationUser.investigationId);
			if (index >= 0) {
				this.index = index;
			} else {
				this.index = 0
			}
		},
		onUnload() {
			this.$store.commit('checkMainPoints/comChangeState', {
				key: 'currentSelectedInvestigationUser',
				data: this.current
			});
			this.$store.commit('checkMainPoints/comChangeState', {
				key: 'ifReloadPageData',
				data: true
			})
		},
		methods: {
			formSubmit: function(e) {
				//提交查访对象信息表单
				try{
					 const formdata = e.detail.value;
					 const contentVOs = Object.keys(formdata).map(t => {
					 	if(this.templateData[Number(t)].required == 1 &&formdata[t].length==0){
					 		   throw '有必填项未填写！'
					 	}else{
							return {
								title: this.templateData[Number(t)].title,
								value: formdata[t],
								filedType: 'Text',
								required:this.templateData[Number(t)].required,
								showFiled:this.templateData[Number(t)].showFiled
							}
						}
					 });
					 //注意commitInvestigationUser方法报错也可能引发抛出错误，注意查看console
					 this.commitInvestigationUser(contentVOs);
				}catch(err){
	                 console.log({err})
					 uni.showModal({
					     title: '提示',
					     content: '请完整填写表单必填项！',
						 showCancel:false,
					 });
				}
			},
			formReset: function(e) {
				console.log('清空数据')
			},
			manageHandle() {
				if (!this.edit) {
					this.edit = true;
				} else {
					this.edit = false;
				}
			},
			addVisiter() {
				this.edit = false;
				this.$store.dispatch({
					type: 'selectVisitPerson/commActions',
					key: 'getTemplateData',
					data: {
						pageTemplateId: this.pageTemplateId
					}
				}).then(data => {
					this.$store.commit('selectVisitPerson/comChangeState', {
						key: 'templateData',
						data: data
					});
				})
				this.$refs.popup.open();
			},
			cancelAdd() {
				this.$refs.popup.close();
				this.visiterInfo = '';
			},
			//提交受访者信息
			commitInvestigationUser(data) {
				if(!this.edit){
					  this.$store.dispatch({
					  	type: 'selectVisitPerson/commActions',
					  	key: 'addInvestigationUser',
					  	data: {
					  		checkId: this.checkId,
					  		contentVOs: data,
					  		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();
					  				}
					  			}
					  		});
					  	}
					  })
				}else{
					  this.$store.dispatch({
					  	type: 'selectVisitPerson/commActions',
					  	key: 'editInvestigationUser',
					  	data: {
					  		id: this.currentEditInvestigationUsers.investigationId,
					  		contentVOs: data,
					  	}
					  }).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
			 */
			editInvestigationUser(item, index){
				  this.$store.dispatch({
				  	type: 'selectVisitPerson/commActions',
				  	key: 'getTemplateData',
				  	data: {
				  		pageTemplateId: this.pageTemplateId
				  	}
				  }).then(data => {
				  	this.$store.commit('selectVisitPerson/comChangeState', {
				  		key: 'templateData',
				  		data: data
				  	});
				  });
				  this.currentEditInvestigationUsers = item;
				  this.formDefaultData = this.investigationUsers[index].contentVOs;
				  this.$refs.popup.open();
			},
			//删除受访者
			/**
			 * @param {Object} item
			 * @param {Number} index
			 */
			delInvestigationUser(item, index) {
				const {
					investigationId
				} = item;
				this.$store.dispatch({
					type: 'selectVisitPerson/commActions',
					key: 'delInvestigationUser',
					data: {
						checkId: this.checkId,
						investigationId: investigationId
					}
				}).then(data => {
					if(data.length == 0){
						//删光所有访谈对象时
						this.current = null;
						this.$store.commit('checkMainPoints/comChangeState', {
							key: 'currentSelectedInvestigationUser',
							data: null
						});
						return;
					}
					if (index == this.index) {
						//当删除的是当前选中的对象
						let prevInvestigationUser=null,nexInvestigationUser=null;
						prevInvestigationUser = this.index > 0 ? this.investigationUsers[this.index - 1] :
							null;
						if(!prevInvestigationUser){
							//删除的是第一个时，不存在上一个
							nexInvestigationUser = this.investigationUsers[this.index + 1];
						}
						this.current = prevInvestigationUser;
						this.$store.commit('checkMainPoints/comChangeState', {
							key: 'currentSelectedInvestigationUser',
							data: prevInvestigationUser||nexInvestigationUser
						})
					}
					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]
						})
					}
					//还未设置默认受访对象时
					console.log('this.currentSelectedInvestigationUser',this.currentSelectedInvestigationUser)
					if (!this.currentSelectedInvestigationUser) {
						this.$store.commit('checkMainPoints/comChangeState', {
							key: 'currentSelectedInvestigationUser',
							data: data[0]
						})
					}

				});
			},
			selectPersonHandle(item) {
				this.current = item;
				this.index = item.index;
				this.$store.commit('checkMainPoints/comChangeState', {
					key: 'currentSelectedInvestigationUser',
					data: item
				})
			}
		}
	}
</script>

<style lang="less" scoped>
	.container {
		.content {
			position: relative;
			height: 60vh;
			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;
			}

			.scroll-Y {
				padding-top: 40rpx;
				height: 100%;

				.formItem {
					display: flex;
					height: 75rpx;
					flex-direction: row;
					justify-content: flex-start;
					align-items: center;
					margin-bottom: 10rpx;

					.label {
						position: relative;
						display: flex;
						width: 25%;
						height: 100%;
						justify-content: flex-start;
						align-items: center;
						font-size: 22.5rpx;
						color: #000000;
						padding-left: 15rpx;

						&.requred {
							&::before {
								position: absolute;
								left: 0;
								display: inline-block;
								content: '*';
								font-size: 22rpx;
								color: red;
							}
						}
					}

					.value {
						width: 75%;
						height: 100%;
						font-size: 22.5rpx;
						color: #000000;
						border-bottom: 1rpx solid #82848A;
					}

					.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-radius: 0;
					border: none;

					&::after {
						border-radius: 0;
					}

					// 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;
					border-radius: 0;
					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;
				}
                .editBtn {
                	position: absolute;
                	top: 32.5rpx;
                	right: 90rpx;
                	font-size: 22.5rpx;
                	font-family: SourceHanSansCN-Normal, SourceHanSansCN;
                	font-weight: 400;
                	color: #3377FF;
                }
				.delBtn {
					position: absolute;
					top: 32.5rpx;
					right: 25rpx;
					font-size: 22.5rpx;
					font-family: SourceHanSansCN-Normal, SourceHanSansCN;
					font-weight: 400;
					color: #FF3355;
				}
                .infoWrap {
					.infoTag {
						font-size: 22.5rpx;
						font-family: SourceHanSansCN-Normal, SourceHanSansCN;
						font-weight: 400;
						color: #292C33;
						
						&::after {
							display: inline-block;
							content: '/';
						}
						&:last-child {
							&::after {
								display: inline-block;
								content: '';
							}
						}
					}
				}
				.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>