Web_TracerMethodology/pages/creatingSituations/components/taskPreview.vue

<template>
	<view class="taskPreview">
		<view class="title">任务预览</view>
		<view class="box1">
			<view class="row1">
				<view class="top">
					<text>主题：{{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>{{situationsCenter.currentSelectedSituation.checkGroupName}}</text>
				</view>
				<view class="item">
					<text>查核人</text>
					<text>{{(checkPerson.checkedItems.map(item=>item.empName)).join(',')}}</text>
				</view>
			</view>
		</view>

		<view class="box2">
			<view>
				<text>计划频率</text>
				<text style="padding-left: 20px;">{{checkPlan.checkedItem.label}}</text>
			</view>
			<view>
				<text>起止时间</text>
				<text style="padding-left: 20px;">{{`${checkPlan.dateObj.start} ~ ${checkPlan.dateObj.end}`}}</text>
			</view>
			<view>
				<text>查核频次</text>
				<text style="padding-left: 20px;">{{checkPlan.checkList.length}}</text>
			</view>
			<view class="situationType" @click="selectSituationType">
				<text>情境类型</text>
				<text class="typeValue">{{situationTypeName}}</text>
				<image class="arrowRight" src="../../../static/incon-more.png" mode=""></image>
			</view>
	        
		</view>
	</view>
</template>

<script>
	import { mapState,mapMutations } from "vuex";
	export default {
		data(){
			return {
				 ifShowTemplateSelector:false,//是否展示选择模版的选项
			}
		},
		computed: {
			...mapState({
				theme: state => state.creatingSituations.theme,
				checkPlan: state => state.creatingSituations.checkPlan,
				condition: state => state.creatingSituations.condition,
				checkRent: state => state.creatingSituations.checkRent,
				situationPreview: state => state.creatingSituations.situationPreview,
				situationsCenter: state => state.situationsCenter,
				checkPerson: state => state.creatingSituations.checkPerson,
				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 = [];
				this.loopOptions(options, conditionIds, list);
				return list;
			},
			title(){
				if(this.theme.id == 0)return '个案追踪';
				if(this.theme.id == 1)return '普通';
				if(this.theme.id == 2)return '自查督查';
			}
		},
		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']),
			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.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">
	.taskPreview {
		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>