Web_TracerMethodology/pages/situationDetail/situationDetail.vue

<template>
	<view class="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">
				<view class="check-list" v-show="isCheckImproveShow" @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>
		<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="isChecker" @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>
		<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";
	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
			}
		},
		computed: {
			canEdit: function() {
				return this.compareTime(this.firstCheckTime) && this.isAdmin;
			}
		},
		onLoad({ situationId }){ // situationId：情景id
		  this.situationID=situationId;
		},
		created: function() {
			this.nowPermission=uni.getStorageSync('nowPermission');
			this.isAdmin=this.nowPermission==1?true:false;
			this.isCheckLeader=this.nowPermission==2?true:false;
			this.isChecker=this.nowPermission==3?true:false;
			this.isStartEndTimeShow=this.nowPermission==2||this.nowPermission==3?true:false;
			this.isCheckImproveShow=this.nowPermission==1||this.nowPermission==4||this.nowPermission==3?true:false;
			this.$store.dispatch({
				type: 'situationDetail/commActions',
				payload: {
					key: 'situationDetail',
					data:{
						id: this.situationID
					}
				}
			}).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.firstCheckTime=data.firstCheckTime;
          this.checkGroupId = data.checkGroupId;
				}
			});
		},
		methods: {
			delSituation(){
				uni.showModal({
					title:'提示',
					content:'请确认是否作废此情境，作废的情境无法被还原',
					success: (res) => {
						if(res.confirm){
							this.$store.dispatch({
								type: 'situationDetail/commActions',
								payload: {
									key: 'situationDelete',
									data:{
										id:this.situationID
									}
								}
							}).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(){
				//跳转到查核列表
				uni.navigateTo({
					url: `/pages/checkList/checkList?situationId=${this.situationID}`
				});
			},
			gotoImprovePage(){
				//跳转到改善列表
				uni.navigateTo({
					 url: `/pages/improve-mission-list/improve-mission-list?situationId=${this.situationID}`
				});
			},
			gotoPlanPage(){
				//跳转到计划列表
				uni.navigateTo({
					url: `/pages/planList/planList?situationId=${this.situationID}&checkGroupId=${this.checkGroupId}`
				});
			},
			startUnplanned(){
				this.isUnplanned=true;
				this.isChecker=false;
			},
			startCheck(){
				this.$refs.popup.show();
			},
			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;
		padding-top: 50rpx;
		height: 100%;
		.copy-btn {
			border: 0;
			height: 50rpx;
			&::after {
				border: 0;
			}
		}
		.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{
						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{
						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{
						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-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;
					}
				}
			}
		}
		.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>