Web_TracerMethodology/pages/creatingSituations/components/situationPreview.vue

<template>
	<view class="situation-preview">
		<uni-popup ref="popup" type="bottom" :maskClick="true" @change="onMaskChange">
			<tm-radio-group :list="situationTypeList" :defaultValue='situationPreview.situationType' :setting="{
			  value: 'situationType',
			  name: 'situationTypeName'
			}" :openkeys="[0]" @change="situationTypeChanged" />
		</uni-popup>
		<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="list">
					<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>
	</view>
</template>

<script>
	import { mapState,mapMutations } from "vuex";
	export default {
		computed: {
			...mapState({
				theme: state => state.creatingSituations.theme,
				condition: state => state.creatingSituations.condition,
				checkRent: state => state.creatingSituations.checkRent,
				situationPreview: state => state.creatingSituations.situationPreview,
				situationTypeList:state => state.creatingSituations.situationTypeList
			}),
			situationTypeName(){
				const temp  = this.situationTypeList.filter(item=>item.situationType == this.situationPreview.situationType);
				return temp[0].situationTypeName;
			},
			list: function() {
				const { conditionIds, options } = this.condition;
				let list = [];
				this.loopOptions(options, conditionIds, list);
				return list;
			}
		},
		methods: {
			...mapMutations(['comChangeState']),
			situationTypeChanged(type,name){
				// console.log({type,name});
                this.$store.commit('creatingSituations/comChangeState',{key:'situationPreview',data:{...this.situationPreview,situationType:type}});
			},
			selectSituationType(){
				this.$refs.popup.open();
			},
			onMaskChange(){
				
			},
			loopOptions: function(arr, conditionIds, list) {
				arr.map((item)=>{
					if(conditionIds.includes(item.id)) {
						list.push(item);
					}
					if(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}});
			}
		}
	}
</script>

<style lang="less">
	.situation-preview {
		overflow: hidden;
		font-size: 22.5rpx;
		line-height: 33.75rpx;
		color: #292C33;
		.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 {
							margin-left: 10rpx;
							width: 11.87rpx;
							height: 20rpx;
						}
					}
				}
				.list {
					overflow: hidden;
					display: flex;
					flex-direction: row;
					flex-wrap: wrap;
					align-items: center;
					>text {
						margin-top: 6.25rpx;
						margin-right: 15rpx;
						border-radius: 5rpx;
						padding: 2.5rpx 20.62rpx;
						font-size: 17.5rpx;
						line-height: 26.25rpx;
						color: #7A8499;
						background-color: #EBEFF7;
					}
				}
			}
			.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>