Web_TracerMethodology/pages/creatingSituations/components/situationPreview.vue

<template>
	<view class="situation-preview">
		<tm-modal v-if="modalVisible" @click="modalClickHandle">
			<view class="conditionReview">
				<view class="conditionReviewContent">
					<view class="list" v-for="(item,index) in resultLists" :key="index" >{{`${item.name}: ${item.value}`}}</view>
				</view>
			</view>
		</tm-modal>
		<view class="title">情境预览</view>	
		<view class="box1">
			<view class="row1">
				<view class="top">
					<text>主题：{{theme.title}}</text>
					<view @click="goMapList">
						<text>查看查核地图</text>
						<image src="../../../static/icon-blueMore.png"></image>
					</view>
				</view>
				<view class="conditionDetailBtn" @click="showCondition" v-if="this.theme.id ==0">
					条件详情
					<image src="../../../static/icon-blueMore.png"></image>
				</view>
				<view class="list"  v-if="this.theme.id !=0">
					<text v-for="(item, index) in list" :key="index">{{item.name}}</text>
				</view>
			</view>
			<view class="row2">
				<view class="item">
					<text>查核组</text>
					<text>{{checkRent.checkedItem.name}}</text>
				</view>
				<view class="item">
					<text>组长</text>
					<text>{{checkRent.checkedItem.groupManagerName}}</text>
				</view>
			</view>
		</view>
		<view class="box2">
			<view class="situationType" @click="selectSituationType">
				<text>情境类型</text>
				<text class="typeValue">{{situationTypeName}}</text>
				<image class="arrowRight" src="../../../static/incon-more.png" mode=""></image>
			</view>
			<view class="input-wrap">
				<view>情境名称</view>
				<input maxlength="16" v-model="situationPreview.sitName" placeholder="限2~16个中文、英文或数字" />
			</view>
			<view class="input-wrap">
				<view>情境描述</view>
				<textarea maxlength="300" rows="" v-model="situationPreview.description" placeholder="限300字" />
			</view>
		</view>
		<view class="box2">
			<view>
				<text>计划开始前</text>
				<input v-model="situationPreview.preDay" placeholder="请输入" type="number" />
				<text>天的</text>
				<input v-model="situationPreview.preH" placeholder="请输入" type="number" />
				<text>时提醒</text>
			</view>
			<view>
				<text>启动</text>
				<input v-model="situationPreview.startDay" placeholder="请输入" type="number" />
				<text>天前提醒</text>
			</view>
			<view class="setIfShowNotApplicable" @click="setIfShowNotApplicable">
				<text>是否需要不适用场景</text>
				<image class="icon"
					:src="`/static/${situationPreview.showNotApplicable == 0 ? 'check-checkbox' : 'check-no'}.png`">
				</image>
			</view>
			<view class="setIfShowNotApplicable" @click="setIfCountNum">
				<text>是否统计小计</text>
				<image class="icon"
					:src="`/static/${situationPreview.showCountNum == 1 ? 'check-checkbox' : 'check-no'}.png`">
				</image>
			</view>
			<view v-if="ifShowTemplateSelector" class="situationType" @click="selectTemplateHandle">
				<text>分页模板</text>
				<text class="typeValue">{{situationPreview.templateName}}</text>
				<image class="arrowRight" src="../../../static/incon-more.png"></image>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from "vuex";
	export default {
		data() {
			return {
				
				modalVisible:false,
				ifShowTemplateSelector: false, //是否展示选择模版的选项
				childContainer:[],
				resultLists:[],//创建情境选择的条件
			}
		},
		computed: {
			...mapState({
				theme: state => state.creatingSituations.theme,
				condition: state => state.creatingSituations.condition,
				conditionCard: state => state.creatingSituations.conditionCard,
				checkRent: state => state.creatingSituations.checkRent,
				situationPreview: state => state.creatingSituations.situationPreview,
				situationTypeList: state => state.creatingSituations.situationTypeList
			}),
			situationTypeName() {
				if (this.situationTypeList.length > 0 && this.situationPreview) {
					const temp = this.situationTypeList.filter(item => item.situationType == this.situationPreview
						.situationType);
					return temp.length > 0 ? temp[0].situationTypeName : null;
				}
				return null;
			},
			list: function() {
				const {
					conditionIds,
					options
				} = this.condition;
				let list = [];
				
				if(this.theme.id == 0){
					//个案情境
			     let arr = this.condition.childContainer.reduce((cur,next)=>{
					     return cur.concat(next.list)
				 },[]);
                 
				}
				
				this.loopOptions(options, conditionIds, list);
				return list;
			}
		},
		watch: {
			situationPreview(newVal) {
				if (newVal.situationType == 2) {
					//情境类型为分页时
					this.ifShowTemplateSelector = true;
					this.dispatch('getTemplates').then(res => {
						this.$store.commit('creatingSituations/comChangeState', {
							key: 'templateList',
							data: res
						});
					})
				} else {
					this.ifShowTemplateSelector = false;
					this.$store.commit('creatingSituations/comChangeState', {
						key: 'templateList',
						data: []
					});
				}
			}
		},
		methods: {
			...mapMutations(['comChangeState']),
			modalClickHandle(){
				this.modalVisible = false;
			},
			showCondition(){
				
				const list = this.condition.childContainer.reduce((cur,next)=>{
					   return cur.concat(next.list);
				},[]); 
							
				const rebuildList = list.map(a=>{
					   let tempA = {name:a.name,id:a.id,value:''};
					   for (let i = 0; i < this.conditionCard.checkResults.length; i++) {
					   	     if(this.conditionCard.checkResults[i].id == a.id){
								 //匹配到结果
								 tempA.value = `${tempA.value?tempA.value+',':tempA.value}${this.conditionCard.checkResults[i].value}`
							 }
					   }
					   return tempA;
				})
							
				this.modalVisible = true;
				this.resultLists = rebuildList;
				//this.resultLists = this.conditionCard.checkResults;
			},
			selectSituationType() {
				// this.$refs.popup.open();
				this.$store.commit('creatingSituations/comChangeState', {
					key: 'popupType',
					data: 1
				});
				this.$store.commit('creatingSituations/comChangeState', {
					key: 'showPopupSelectorList',
					data: true
				});
			},
			selectTemplateHandle() {
				this.$store.commit('creatingSituations/comChangeState', {
					key: 'popupType',
					data: 2
				});
				this.$store.commit('creatingSituations/comChangeState', {
					key: 'showPopupSelectorList',
					data: true
				});
			},
			loopOptions: function(arr, conditionIds, list) {
				arr.map((item) => {
					if (conditionIds.includes(item.id)) {
						list.push(item);
					}

					if (item.child&&item.child.length > 0) {
						this.loopOptions(item.child, conditionIds, list);

					}

					if (item.children&&item.children.length > 0) {
						this.loopOptions(item.children, conditionIds, list);
					}
				});
			},
			goMapList: function() {
				uni.navigateTo({
					url: '/pages/checkMapList/checkMapList'
				});
			},
			setIfShowNotApplicable() {
				const showNotApplicable = this.situationPreview.showNotApplicable;
				this.$store.commit('creatingSituations/comChangeState', {
					key: 'situationPreview',
					data: {
						...this.situationPreview,
						showNotApplicable: showNotApplicable ? 0 : 1
					}
				});
			},
			setIfCountNum() {
				const showCountNum = this.situationPreview.showCountNum;
				this.$store.commit('creatingSituations/comChangeState', {
					key: 'situationPreview',
					data: {
						...this.situationPreview,
						showCountNum: showCountNum ? 0 : 1
					}
				});
			},
			dispatch: function(key, data) {
				return this.$store.dispatch({
					type: 'creatingSituations/commActions',
					key,
					data
				});
			},
		}
	}
</script>

<style lang="less">
	.situation-preview {
		overflow: hidden;
		font-size: 22.5rpx;
		line-height: 33.75rpx;
		color: #292C33;
		
		.conditionReview {
			width: 80%;
			max-height: 70vh;
			margin:0 auto;
			margin-top: 20vh;
			padding:30rpx;
			border-radius: 18.75rpx;
			background-color: #fff;
			overflow-y: hidden;
			.conditionReviewContent {
				max-height: 70vh;
				overflow-y: scroll;
				padding-bottom: 25rpx;
				.list {
					height:50rpx;
					line-height: 50rpx;
					font-size: 22.5rpx;
					border-bottom: 0.63rpx solid #DADEE6;
				}
			}
		}

		.box1,
		.box2 {
			margin-bottom: 15rpx;
			padding: 25rpx;
			width: 100%;
			background-color: #fff;
		}

		.box1 {
			display: flex;
			flex-direction: column;

			.row1 {
				display: flex;
				flex-direction: column;
				margin-bottom: 35rpx;

				.top {
					display: flex;
					flex-direction: row;
					justify-content: space-between;
					margin-bottom: 6.25rpx;

					>text {
						font-size: 30rpx;
						line-height: 45rpx;
					}

					>view {
						display: flex;
						flex-direction: row;
						align-items: center;
						font-size: 20rpx;
						line-height: 30rpx;
						color: #3377FF;

						image {
							position: relative;
							top:1.25rpx;
							margin-left: 10rpx;
							width: 11.87rpx;
							height: 20rpx;
						}
					}
				}
                .conditionDetailBtn {
					text-align: right;
					font-size: 20rpx;
					line-height: 30rpx;
					color: #3377FF;
					image {
						margin-left: 10rpx;
						width: 11.87rpx;
						height: 20rpx;
					}
				}
				.list {
					overflow: hidden;
					display: flex;
					flex-direction: row;
					flex-wrap: nowrap;
					align-items: center;

					>text {
						margin-top: 6.25rpx;
						margin-right: 15rpx;
						border-radius: 5rpx;
						flex-wrap: wrap;
						padding: 2.5rpx 20.62rpx;
						font-size: 17.5rpx;
						line-height: 26.25rpx;
						color: #7A8499;
						background-color: #EBEFF7;
						// overflow: hidden;
						// text-overflow: ellipsis;
						white-space: nowrap;
					}
					
					// &::after {
					// 	position: relative;
					// 	top:1.25rpx;
					// 	content: '';
					// 	display: inline-block;
					// 	width: 18rpx;
					// 	height: 25rpx;
					// 	opacity: 0.8;
					// 	background: url('@/static/images/icon-more.png');
					// 	background-size:100% 100%;
					// }
				}
				
			}

			.row2 {
				display: flex;
				flex-direction: row;
				justify-content: center;
				align-items: center;

				.item {
					display: flex;
					flex-direction: column;
					width: 47.5%;

					text {
						overflow: hidden;
						white-space: nowrap;
						text-overflow: ellipsis;
						font-size: 25rpx;
						line-height: 37.5rpx;
					}

					text:first-child {
						margin-bottom: 4.37rpx;
						font-size: 17.5rpx;
						line-height: 26.25rpx;
						color: #666F80;
					}

					&:first-child {
						margin-right: 5%;
						border-right: 1px solid #DADEE6;
					}
				}
			}
		}

		.box2 {
			padding: 0;
			padding-left: 25rpx;

			>view {
				display: flex;
				flex-direction: row;
				align-items: center;
				border-bottom: 1px solid #DADEE6;
				height: 87.5rpx;
				color: #525866;

				>text {
					white-space: nowrap;
					color: #292C33;
				}

				>input {
					padding: 0 9.37rpx;
					width: 80rpx;
					height: 33.75rpx;
					font-size: 22.5rpx;
					line-height: 33.75rpx;
					text-align: center;
				}

				&:last-child {
					border-bottom: 0;
				}

				&.input-wrap {
					display: flex;
					flex-direction: row;

					&:last-child {
						align-items: flex-start;
						padding: 20rpx 0;
						height: 200rpx;
					}

					view {
						margin-right: 40rpx;
						white-space: nowrap;
					}

					input,
					textarea {
						padding: 0;
						padding-right: 25rpx;
						width: 100%;
						font-size: 22.5rpx;
						line-height: 33.75rpx;
						text-align: left;
					}

					textarea {
						height: 100%;
					}
				}
			}

			.setIfShowNotApplicable {
				display: flex;
				flex-direction: row;
				justify-content: space-between;

				.icon {
					width: 30rpx;
					height: 30rpx;
					margin-right: 25rpx;
				}
			}

			.situationType {
				position: relative;

				.typeValue {
					display: inline-block;
					margin-left: 40rpx;
				}

				.arrowRight {
					position: absolute;
					right: 20rpx;
					width: 15rpx;
					height: 25rpx;
				}
			}
		}
	}
</style>