Web_TracerMethodology/pages/situationDetail/situationDetail.vue

<template>
	<view :class="[isAdmin?'detail-page isAdmin':'detail-page']">
		<tm-top-menu v-if="isAdmin">
			<button class="copy-btn" @click="editSituation('POST')">复制创建</button>
		</tm-top-menu>
		<view class="content-info">
			<view class="top-box">
				<view class="subscript">
					<!-- <image class="sub-pic" src="../../static/sDetail-subscript.png"></image> -->
					<text class="sub-text">{{topic}}</text>
				</view>
				<text class="name-text">{{name}}</text>
				<text class="time-text">| 情境起止时间：{{startDate}}~{{endDate}}</text>
				<text class="nextTime-text">| 下次查核时间：{{nextCheckTime}}</text>
				<text class="startEndTime-text" v-show="isStartEndTimeShow">| {{startEndTime}}</text>
				<text class="team-text">{{checkGroupName}}</text>
			</view>
			<view class="list-box">
				<!-- v-show="isCheckImproveShow" -->
				<view class="check-list" v-show="isChecker"   @click="gotoCheckPage">
					<image class="check-pic" src="../../static/check-list.png"></image>
					<text class="list-title">查核列表</text>
					<text class="list-info">{{checkStatus}}</text>
				</view>
				<view class="improve-list" v-show="isCheckImproveShow"   @click="gotoImprovePage">
					<image class="improve-pic" src="../../static/improve-list.png"></image>
					<text class="list-title">改善列表</text>
					<text class="list-info">查看改善记录</text>
				</view>
				<view class="plan-list" v-show="isCheckLeader" @click="gotoPlanPage">
					<image class="check-pic" src="../../static/check-list.png"></image>
					<text class="list-title">计划列表</text>
					<text class="list-info">共{{planCount}}次查核计划，剩余{{toDistribute}}个待分配</text>
				</view>
			</view>
			<view class="info-box">
				<view class="text-box">
					<text class="info-text">{{description}}</text>
				</view>
			</view>
			<view class="planListWrap" v-if="nowPermission == 1||nowPermission == 6 || nowPermission == 7 || nowPermission == 8">
				<view class="planList" v-for="(item,index) in zichaduchaList" @click="toCheckGroupPage(item)" :key="index">
					  <view class="head">{{item.checkNum}}</view>
					  <view class="blockWrap">
							<view class="block">
									<text class="sup">已查核</text>
									<text class="sub">{{item.checked}}</text>
							</view>
							<view class="block">
									<text class="sup">待改善</text>
									<text class="sub">{{item.preImprove}}</text>
							</view>
							<view class="block">
									<text class="sup">已改善</text>
									<text class="sub">{{item.improved}}</text>
							</view>
							<view class="block" v-if="nowPermission != 8">
									<text class="sup">自查</text>
									<text class="sub" style="color:#3377FF;" @click.stop="gotoDetail(item)">明细</text>
							</view>
					  </view>
				</view>
			</view>
		</view>
		<view class="button-box">
			<view class="btn-left btn-item" @click="delSituation" v-show="isAdmin">
				<text class="left-text">作废</text>
			</view>
			<view class="btn-right btn-item" @click="editSituation('PUT')" v-show="canEdit">
				<text class="right-text">编辑</text>
			</view>
			<view class="btn-center btn-item" v-show="ifShowUnplanedBtn" @click="startUnplanned">
				<text class="center-text">开始一次计划外查核</text>
			</view>
			<view class="btn-left btn-item" v-show="isUnplanned" @click="createCheck">
				<text class="left-text">新建一个计划外查核</text>
			</view>
			<view class="btn-right btn-item" v-show="isUnplanned" @click="startCheck">
				<text class="right-text">提前开始一个计划内查核</text>
			</view>
			<view class="btn-right btn-item" @click="planSetting" v-show="ifShowPlanSetBtn">
				<text class="right-text">计划设置</text>
			</view>
		</view>
		<popup ref="popup" :situationID="situationID"></popup>
		<tm-callback-listpage/>
	</view>
</template>

<script>
	import popup from './components/bottom-popup.vue';
	import {dateHandle} from "../../utils/dateHandle.js";
	import {
		mapState
	} from 'vuex';
	export default {
		data() {
			return {
				nowPermission:'',//用户当前权限
				situationID:'',//情境id
				checkGroupName:'',//查核组名
				checkStatus:'',//查核状态
				name:'',//查核名
				description:'',//描述
				startDate:'',//查核开始时间
				endDate:'',//查核结束时间
				nextCheckTime:'',//下次查核时间
				topic:'',//个案或系统
				startEndTime:'',//距离情境开始或结束时间
				planCount:'',//总查核计划数
				toDistribute:'',//待分配计划数
				firstCheckTime:'',//首次查核时间
				isCheckImproveShow:false,//查核改善列表是否显示
				isStartEndTimeShow:false,//距离情境开始或结束时间是否显示
				isAdmin:false,//是否为管理员
				isCheckLeader:false,//是否为查核组长或职能科室负责人
				isChecker:false,//是否为查核者
				isUnplanned:false,//是否计划外查核
				checkFlag:'',//计划查核标志，是新建还是提前开始
				checkID:'',//新建查核计划时，计划列表中的前一个计划 id
                checkItemList:[],//时间区间包含当前时间的item
                checkGroupId: 0, // 查核组id
				zichaduchaList:[],//自查督查明细
				ifShowUnplanedBtn:false,//是否展示计划外查核按钮
				ifShowPlanSetBtn:false,//是否展示计划设置按钮
				
			}
		},
		computed: {
			...mapState({
				ifReloadPageData: state => state.situationDetail.ifReloadPageData,
			}),
			canEdit: function() {
				return this.compareTime(this.firstCheckTime) && this.isAdmin && this.allowEdit;
			}
		},
		watch:{
			ifReloadPageData(cur,prev){
				if(cur){
					this.getPlanDetailList();
				}
			}
		},
		onLoad({ situationId,systemSituationType}){ // situationId：情景id,systemSituationType 情境类型
		  console.log({situationId});
		  this.situationID=situationId;
		  this.systemSituationType = systemSituationType;
		  this.getPlanDetailList();
		},
		created: function() {
			this.nowPermission=uni.getStorageSync('nowPermission');
			this.isAdmin=this.nowPermission==1?true:false;
			this.isCheckLeader=this.nowPermission==2||this.nowPermission==6||this.nowPermission==4?true:false;
			this.isChecker=this.nowPermission==3||this.nowPermission==1||this.nowPermission==7||this.nowPermission==8?true:false;
			this.isStartEndTimeShow=this.nowPermission==2||this.nowPermission==3?true:false;
			this.isCheckImproveShow=this.nowPermission==1||this.nowPermission==4||this.nowPermission==3||this.nowPermission==6||this.nowPermission==7||this.nowPermission==8?true:false;
			this.ifShowUnplanedBtn = this.nowPermission==3?true:false;
			this.ifShowPlanSetBtn = this.nowPermission==6?true:false;
		
			this.$store.dispatch({
				type: 'situationDetail/commActions',
				payload: {
					key: 'situationDetail',
					data:{
						id: this.situationID,
						systemSituationType:this.systemSituationType,
					}
				}
			}).then((data) => {
				
				if (data) {
					this.name=data.name;
					this.description=data.description;
					this.startDate=data.startDate;
					this.endDate=data.endDate;
					this.nextCheckTime=data.nextCheckTime;
					this.checkGroupName=data.checkGroupName;
					this.topic=data.topic==0?'个案':'系统';
					this.checkStatus=data.checkStatus;
					this.startEndTime=data.startEndTime;
					this.planCount=data.planCount;
					this.toDistribute=data.toDistribute;
					this.situationType = data.situationType;
				  this.firstCheckTime=data.firstCheckTime;
				  this.checkGroupId = data.checkGroupId;
				  this.allowEdit = data.allowEdit;
				  this.currentNum = data.currentNum;
				}
			});
		},
		methods: {
			gotoDetail(data){
				//跳转明细列表
		        
				uni.navigateTo({url:`/pages/planDetailList/planDetailList?situationId=${this.situationID}&num=${data.num}&planType=${1}&systemSituationType=${this.systemSituationType}&entry=${1}`}); //entry 入口  0 查核列表  1 自查
			},
			planSetting(){
				//计划设置
				uni.navigateTo({url: `/pages/creatingSituations/creatingSituations?actTarget=planSet&situationId=${this.situationID}&themeName=${this.name}&systemSituationType=${this.systemSituationType}`});
			},
			toCheckGroupPage(itemData){
				//自查督查情境跳转到查核列表
				uni.navigateTo({
					url: `/pages/checkGroup/checkGroup?situationId=${this.situationID}&num=${itemData.num}&planType=${0}&name=${itemData.checkNum}&systemSituationType=${this.systemSituationType}&entry=${0}`
				});
			},
			delSituation(){
				uni.showModal({
					title:'提示',
					content:'请确认是否作废此情境，作废的情境无法被还原',
					success: (res) => {
						if(res.confirm){
							this.$store.dispatch({
								type: 'situationDetail/commActions',
								payload: {
									key: 'situationDelete',
									data:{
										id:this.situationID,
										systemSituationType:this.systemSituationType
									}
								}
							}).then((data) => {
								if (data) {
									uni.showModal({
										title:'提示',
										content:'作废成功',
										showCancel: false,
										success: (res) => {
											uni.navigateTo({url: `/pages/situationsCenter/situationsCenter`});
										}
									});
								}
							});
						}
					}
				})

			},
			editSituation(type){
				let url=`/pages/creatingSituations/creatingSituations?id=${this.situationID}&type=${type}`;
				if(type === 'PUT') {
					let editEnable=this.compareTime(this.firstCheckTime);
					if(editEnable){
						uni.navigateTo({url});
					} else{
						uni.showModal({
							title:'提示',
							content:'已进行过一次查核，不可编辑',
						  showCancel:false
						})
					}
				} else {
					uni.navigateTo({url});
				}
			},
			compareTime(time){
				if(!time)return false;
				let myDate=dateHandle.todayDate().replace(/-/g,"/");
				let firstCheckTime=time.replace(/-/g,"/");
				firstCheckTime=Date.parse(firstCheckTime);
				myDate=Date.parse(myDate);
				if(myDate>firstCheckTime){
					return false;
				}else{
					return true;
				}
			},
			gotoCheckPage(){
				if(this.systemSituationType != 2){
					 //普通情境跳转到查核列表
					 uni.navigateTo({
					 	url: `/pages/checkList/checkList?situationId=${this.situationID}&situationType=${this.situationType}`
					 });
				}else{
					//自查督查情境跳转到查核列表
					if(this.systemSituationType == 2&&this.nowPermission!=4){
						//自查督查非单位负责人
						 let planType = 0;  //默认督查
						 if(this.nowPermission == 4 || this.nowPermission == 8){
							   planType = 1;
						 }
						 uni.navigateTo({
						 	url: `/pages/checkGroup/checkGroup?situationId=${this.situationID}&num=${this.currentNum?this.currentNum:0}&planType=${planType}&name=${this.checkStatus}&situationType=${this.situationType}&systemSituationType=${this.systemSituationType}&entry=${0}`
						 });
					}
					if(this.systemSituationType == 2&&this.nowPermission==4){
						//自查督查单位负责人
						uni.navigateTo({
							url: `/pages/planList/planList?situationId=${this.situationID}&systemSituationType=${this.systemSituationType}`
						});
					}
				}
				
			},
			gotoImprovePage(){
				//跳转到改善列表
				uni.navigateTo({
					 url: `/pages/improve-mission-list/improve-mission-list?situationId=${this.situationID}&systemSituationType=${this.systemSituationType}`
				});
			},
			gotoPlanPage(){
				//跳转到计划列表
				if(this.systemSituationType == 2 && this.firstCheckTime && this.nowPermission == 6){
					//当自查督查情境详情已经设置过计划时，职能科室负责人不允许再设置
					uni.showModal({
						title:'提示',
						content:'计划已设置，无需再次设置！',
					    showCancel:false
					})
					return;
				}
				uni.navigateTo({
					url: `/pages/planList/planList?situationId=${this.situationID}&checkGroupId=${this.checkGroupId}&systemSituationType=${this.systemSituationType}`
				});
			},
			startUnplanned(){
				this.isUnplanned=true;
				this.isChecker=false;
			},
			startCheck(){
				this.$refs.popup.show();
			},
			getPlanDetailList(){
				if(this.systemSituationType == 2){
					   //自查督查时才需要获取查核明细列表
					   this.$store.dispatch({
					   	type: 'situationDetail/commActions',
					   	payload: {
					   		key: 'getPlanDetailList',
					   		data:{
					   			situationId:this.situationID
					   		}
					   	}
					   }).then((data) => {
							if(data){
								 this.zichaduchaList = data;
							}
							this.$store.commit('situationDetail/comChangeState', {
								key: 'ifReloadPageData',
								data: false
							});
					   })
				}
			},
			createCheck(){
				this.$store.dispatch({
					type: 'situationDetail/commActions',
					payload: {
						key: 'planList',
						data:{
							situationId:this.situationID
						}
					}
				}).then((data) => {
					if (data) {
						data.map((item,index)=>{
							if(this.compareTime(item.startDate)==false||this.compareTime(item.endDate)){
								this.checkItemList.push(item);
							}
							else{
								return;
							}
						});
						this.$store.dispatch({
							type: 'situationDetail/commActions',
							payload: {
								key: 'createCheck',
								data:{
									checkId:this.checkItemList[0].id
								}
							}
						}).then((data) => {
							if(data){
								this.gotoCheckPage();
							}

						});
					}
				});
			}
		},
		components: {
			popup,
		}
	}
</script>

<style lang="less">
	.detail-page{
		position: relative;
		height: 100%;
		.copy-btn {
			border: 0;
			height: 60rpx;
			margin-bottom: 10rpx;
			&::after {
				border: 0;
			}
		}
		
		&.isadmin {
			padding-top: 50rpx;
		}
		.content-info{
			background-color: #FFFFFF;
			.top-box{
				width: 750rpx;
				height: 300rpx;
				background: linear-gradient(270deg, #3071F2 0%, #4C95FC 100%);
				.subscript{
					width: 84.37rpx;
					height: 35rpx;
					float: right;
					margin-top: 15rpx;
					text-align: center;
					background-image: url(../../static/sDetail-subscript.png);
					.sub-text{
						font-size: 17.5rpx;
						font-family: SourceHanSansCN-Medium, SourceHanSansCN;
						font-weight: 500;
						color: #2E6CE6;
						line-height: 35rpx;
					}
				}

				.name-text{
					font-size: 40rpx;
					font-family: SourceHanSansCN-Normal, SourceHanSansCN;
					font-weight: 400;
					color: #FFFFFF;
					float: left;
					margin-left: 50rpx;
					margin-top: 50rpx;
					margin-bottom: 31.25rpx;
				}
				.time-text{
					overflow: hidden;
					position: absolute;
					top: 165rpx;
					left: 55rpx;
					width: 70%;
					white-space: nowrap;
					font-size: 20rpx;
					font-weight: 400;
					font-family: SourceHanSansCN-Normal, SourceHanSansCN;
					text-overflow: ellipsis;
					color: #FFFFFF;
				}
				.nextTime-text{
					font-size: 20rpx;
					font-family: SourceHanSansCN-Normal, SourceHanSansCN;
					font-weight: 400;
					color: #FFFFFF;
					position: absolute;
					left: 55rpx;
					top: 205rpx;
				}
				.startEndTime-text{
					font-size: 20rpx;
					font-family: SourceHanSansCN-Normal, SourceHanSansCN;
					font-weight: 400;
					color: #FFFFFF;
					position: absolute;
					left: 55rpx;
					top: 240rpx;
				}
				.team-text{
					font-size: 20rpx;
					font-family: SourceHanSansCN-Normal, SourceHanSansCN;
					font-weight: 400;
					color: #FFFFFF;
					position: absolute;
					top: 165rpx;
					right: 50rpx;
				}
			}
			.list-box{
				width: 687.5rpx;
				height: 137.5rpx;
				background: #FFFFFF;
				box-shadow: 0px 10px 30px 0px rgba(0, 13, 51, 0.1);
				border-radius: 16px;
				position: absolute;
				left: 31.25rpx;
				top: 280rpx;
				.check-list{
					width: 225rpx;
					height: 97.5rpx;
					float: left;
					margin-top: 40rpx;
					margin-left: 81.25rpx;
					.check-pic{
						width: 38.75rpx;
						height: 41.87rpx;
						margin-top: 8.12rpx;
					}
					.list-title{
						font-size: 25rpx;
						font-family: SourceHanSansCN-Normal, SourceHanSansCN;
						font-weight: 400;
						color: #292C33;
						position: absolute;
						left: 145rpx;
						top: 40rpx;
					}
					.list-info{
						width: 225rpx;
						overflow: hidden;
						white-space: nowrap;
						text-overflow: ellipsis;
						font-size: 17.5rpx;
						font-family: SourceHanSansCN-Normal, SourceHanSansCN;
						font-weight: 400;
						color: #666F80;
						position: absolute;
						left: 145rpx;
						top: 80rpx;
						
					}
				}
				.improve-list{
					width: 225rpx;
					height:97.5rpx;
					float: right;
					margin-top: 40rpx;
					margin-right: 81.25rpx;
					.improve-pic{
						width: 40rpx;
						height: 40rpx;
						margin-top: 8.12rpx;
					}
					.list-title{
						font-size: 25rpx;
						font-family: SourceHanSansCN-Normal, SourceHanSansCN;
						font-weight: 400;
						color: #292C33;
						position: absolute;
						top: 40rpx;
						left: 458.75rpx;
					}
					.list-info{
						width: 225rpx;
						overflow: hidden;
						white-space: nowrap;
						text-overflow: ellipsis;
						font-size: 17.5rpx;
						font-family: SourceHanSansCN-Normal, SourceHanSansCN;
						font-weight: 400;
						color: #666F80;
						position: absolute;
						top: 80rpx;
						left: 458.75rpx;
					}
				}
				.plan-list{
					width: 225rpx;
					height: 97.5rpx;
					float: left;
					margin-top: 40rpx;
					margin-left: 81.25rpx;
					.check-pic{
						width: 38.75rpx;
						height: 41.87rpx;
						margin-top: 8.12rpx;
					}
					.list-title{
						font-size: 25rpx;
						font-family: SourceHanSansCN-Normal, SourceHanSansCN;
						font-weight: 400;
						color: #292C33;
						position: absolute;
						left: 145rpx;
						top: 40rpx;
					}
					.list-info{
						width: 225rpx;
						overflow: hidden;
						white-space: nowrap;
						text-overflow: ellipsis;
						font-size: 17.5rpx;
						font-family: SourceHanSansCN-Normal, SourceHanSansCN;
						font-weight: 400;
						color: #666F80;
						position: absolute;
						left: 145rpx;
						top: 80rpx;
					}
				}
			}
			.info-box{
				overflow: hidden;
				padding-top: 20rpx;
				padding-bottom: 20rpx;
				.text-box{
					width: 687.5rpx;
					margin-top: 116.87rpx;
					margin-left: 31.25rpx;
					.info-text{
						font-size: 22.5rpx;
						font-family: SourceHanSansCN-Normal, SourceHanSansCN;
						font-weight: 400;
						color: #292C33;
					}
				}
			}
			.planListWrap {
				padding: 0 25rpx;
				padding-bottom: 31.25rpx;
				.planList {
					display: flex;
					flex-direction: row;
					width:100%;
					height:100rpx;
					padding: 10rpx;
					margin-bottom: 15rpx;
					background: #F5F6FA;
					border-radius: 10rpx;
					.head {
						display: flex;
						justify-content: center;
						align-items: center;
						width: 145rpx;
						height: 80rpx;
						font-size: 25rpx;
						font-family: SourceHanSansCN-Medium, SourceHanSansCN;
						font-weight: 500;
						color: #FFFFFF;
						border-bottom-right-radius:20rpx;
						background-color: #66B2FE;
					}
					.blockWrap {
						 display: flex;
						 width: 100%;
						 flex-direction: row;
						 justify-content: space-around;
						 .block {
						 	display: flex;
						 	flex-direction: column;
						 	justify-content: center;
						 	align-items: center;
						 	.sup {
						 		font-size: 17.5rpx;
						 		font-family: SourceHanSansCN-Normal, SourceHanSansCN;
						 		font-weight: 400;
						 		color: #666F80;
						 		padding-bottom: 15rpx;
						 	}
						 	.sub {
						 		font-size: 25rpx;
						 		font-family: SourceHanSansCN-Medium, SourceHanSansCN;
						 		font-weight: 500;
						 		color: #292C33;
						 	}
						 }
					}
				}
				
			}
		}
		.button-box{
			display: flex;
			flex-direction: row;
			width: 750rpx;
			height: 75rpx;
			position: fixed;
			bottom: 0;
			.btn-item {
				flex: 1;
			}
			.btn-center{
				background: #3377FF;
				text-align: center;
				.center-text{
					font-size: 22.5rpx;
					font-family: SourceHanSansCN-Normal, SourceHanSansCN;
					font-weight: 400;
					color: #FFFFFF;
					line-height: 75rpx;
				}
			}
			.btn-left{
				// width: 375rpx;
				// height: 75rpx;
				background: #FFFFFF;
				// float: left;
				text-align: center;
				border: 0.62rpx solid #DADEE6;
				.left-text{
					font-size: 22.5rpx;
					font-family: SourceHanSansCN-Normal, SourceHanSansCN;
					font-weight: 400;
					color: #3377FF;
					line-height: 75rpx;
				}
			}
			.btn-right{
				// width: 375rpx;
				// height: 75rpx;
				background: #3377FF;
				// float: right;
				text-align: center;
				.right-text{
					font-size: 22.5rpx;
					font-family: SourceHanSansCN-Normal, SourceHanSansCN;
					font-weight: 400;
					color: #FFFFFF;
					line-height: 75rpx;
				}
			}
		}
	}
</style>