Web_TracerMethodology/pages/situationDetail/components/bottom-popup.vue

<template>
	<view class="popup-page" v-show="showModalStatus">
		<view class="popup-box" v-show="showModalStatus">
			<view class="item-box" v-for="(item,index) in planList" :key="index">
				<view class="radio-item" @click="toggleSelect(item,index)">
					<image class="icon" :src="`/static/${item.isChecked ? 'check-radio' : 'check-no'}.png`"></image>
				</view>
				<text :class="item.nameClass">{{item.name}}（{{item.startDate}} ~ {{item.endDate}}）</text>
				<view class="compeleted-box" v-if="item.isCompeleted">
					<text class="compeleted-text" >已完成</text>
				</view>
				<view class="continued-box" v-if="item.isContinued">
					<text class="continued-text" >进行中</text>
				</view>
				<image class="checked-pic" v-if="item.isContinued" src="../../../static/checkStatus.png"></image>
			</view>
		</view>
		<view class="btn-confirm" @click="saveChange">
			<text class="btn-text">确定</text>
		</view>
	</view>
</template>

<script>
	export default {
		props:{
			situationID:String,
		},
		data() {
			return {
				currentType:this.type,//当前类型
				selectedPlanID:'',//选择的计划id
				showModalStatus:false,//查核计划选择弹框
				flag:-3,//是否为进行中计划，判断下一个未开始的查核计划
				planList:[],//查核计划列表
				arrUnstarted:[],//未开始计划数组
			}
		},
		created: function() {
			this.$store.dispatch({
				type: 'situationDetail/commActions',
				payload: {
					key: 'planList',
					data:{
						situationId:this.situationID
					}
				}
			}).then((data) => {
				if (data) {
					this.planList=data.map((item,index)=>{				
						if(item.status==1){
							this.arrUnstarted.push(item);
							this.flag=this.arrUnstarted[0].id;
						}
						return {
							id:item.id,
							name:item.name,
							startDate:item.startDate,
							endDate:item.endDate,
							status:item.status,
							isCompeleted:item.status==3?true:false,
							isContinued:item.status==2?true:false,
							isChecked:false,
							nameClass:item.id==this.flag?'item-text':'disable-text',
						}
					});
				}
			});
		},
		methods: {
			show(){
				this.showModalStatus=true;
			},	
			hide(){
				this.showModalStatus=false;
			},
			hidePopupBox(){
				this.hide();
			},
			toggleSelect(item,index) {
				this.planList.map((item,index)=>{
					item.isChecked=false;
				});
				if(item.id==this.flag){
					this.planList[index].isChecked=true;
					this.selectedPlanID=item.id;
				}
				else{
					return;
				}
				
			},
			saveChange(){
				this.$store.dispatch({
					type: 'situationDetail/commActions',
					payload: {
						key: 'planAdvance',
						data:{
							checkId:this.selectedPlanID
						}
					}
				}).then((data)=>{
					if(data){
						this.hide();
					}
				});
			},
		},
	}
</script>

<style lang="less">
	.popup-page{
		height: 100%;
		width: 100%;
		position: fixed;
		top: 0rpx;
		left: 0rpx;
		z-index: 10001;
		// background: rgba(0,0,0,0.5);
		background-color: #FFFFFF;
		.popup-box{
			width: 100%;
			position: fixed;
			top: 0rpx;
			left: 0rpx;
			z-index: 2000;
			background-color: #FFFFFF;
			display: flex;
			flex-direction: column;
			overflow: hidden;
			.item-box{
				width: 100%;
				height: 87.5rpx;
				border: 0.62rpx solid #DADEE6;
				.radio-item {
					float: left;
					margin-left: 25rpx;
					margin-top: 30rpx;
				
					.icon {
						width: 25rpx;
						height: 25rpx;
					}
				}
				.item-text{
					font-size: 22.5rpx;
					font-family: SourceHanSansCN-Normal, SourceHanSansCN;
					font-weight: 400;
					color: #292C33;
					line-height: 87.5rpx;
					margin-left: 25rpx;
					float: left;
				}
				.disable-text{
					font-size: 22.5rpx;
					font-family: SourceHanSansCN-Normal, SourceHanSansCN;
					font-weight: 400;
					color: #666E80;
					line-height: 87.5rpx;
					margin-left: 25rpx;
					float: left;
				}
				.compeleted-box{
					width: 75rpx;
					height: 31.25rpx;
					border-radius: 8px;
					background: rgba(41, 204, 150, 0.1);
					text-align: center;
					float: left;
					margin-top: 28.12rpx;
					.compeleted-text{
						font-size: 17.5rpx;
						font-family: SourceHanSansCN-Medium, SourceHanSansCN;
						font-weight: 500;
						color: #29CC96;
						line-height: 31.25rpx;
					}
				}
				.continued-box{
					width: 75rpx;
					height: 31.25rpx;
					border-radius: 8px;
					background: rgba(255, 204, 102, 0.1);
					text-align: center;
					float: left;
					margin-top: 28.12rpx;
					.continued-text{
						width: 75rpx;
						height: 31.25rpx;
						font-size: 17.5rpx;
						font-family: SourceHanSansCN-Medium, SourceHanSansCN;
						font-weight: 500;
						color: #FFAA00;
						line-height: 31.25rpx;
					}
				}
				.checked-pic{
					width: 19.37rpx;
					height: 14.37rpx;
					float: right;
					margin-top: 36.87rpx;
					margin-right: 25rpx;
				}
			}
		}
		.btn-confirm {
			width: 750rpx;
			height: 75rpx;
			background: #3377FF;
			position: fixed;
			bottom: 0rpx;

			.btn-text {
				font-size: 22.5rpx;
				font-family: SourceHanSansCN-Normal, SourceHanSansCN;
				font-weight: 400;
				color: #FFFFFF;
				line-height: 75rpx;
				margin-left: 352.5rpx;
			}
		}
	}
</style>