FE-lab-xcx/pages_safetyCheck/views/itemsManage/hiddenDangerItemsDetail.vue

<!-- 检查详情 -->
<template>
	<view class="snapshotDetail">
		<scroll-view scroll-y @scrolltolower="scrollGet" class="info-max-box">
			<!-- <view class="tip" v-if="pageType==0">{{optionData.checkPlanSetVoList.checkName}}</view>
			<view class="tip-tow" v-if="pageType==1 || pageType==2">{{optionData.checkPlanSetVoList.checkName}}</view> -->
			<view class="lotName" :class="pageType != 0?'lotNameOne':''" v-if="lotName">{{lotName}}</view>
			<view class="items">
				<view class="items-t" v-if="newData.hazardCheckName!=''">
					<view class="items-t-r">{{newData.hazardCheckCode}} {{newData.hazardCheckName}}</view>
				</view>
				<view class="items-b" v-if="newData.hazardCheckName!=''">＜ {{newData.hazardCheckCode2}}
					{{newData.hazardCheckName2}} ＜ {{newData.hazardCheckCode1}} {{newData.hazardCheckName1}}
				</view>
			</view>
			<view class="items-number" v-if="newData.hazardCheckName!=''">
				此检查项在当前实验室累计出现<text>{{hazardCheckNum}}</text>次隐患</view>
			<view class="list">
				<view class="list-li" v-if="newData.hazardCheckName!=''" @click="inspectDot()">
					<view>检查要点</view>
					<view>
						<img v-if="!newData.inspectDot" src="@/pages_safetyCheck/images/icon_06.png">
						<img v-if="newData.inspectDot" src="@/pages_safetyCheck/images/icon_06_1.png">
					</view>
				</view>
				<view v-if="newData.hazardCheckName!='' && newData.inspectDot" class="hidden-content">{{newData.hazardCheckPoint}}
				</view>
				<view class="list-li" @click="checkCollapse()">
					<view>{{newData.checkFlag?'检查结果':'检查隐患'}}</view>
					<view :id="newData.checkFlag?'fontColor-B':'fontColor-C'">
						{{newData.checkFlag?'符合':'不符合'}}
						<img v-if="!newData.checkCollapse" src="@/pages_safetyCheck/images/icon_06.png">
						<img v-if="newData.checkCollapse" src="@/pages_safetyCheck/images/icon_06_1.png">
					</view>
				</view>
				<view v-if="newData.checkCollapse">
					<view class="hidden-content" v-if="!newData.checkFlag">{{newData.hazardDescribe}}
					</view>
					<view class="photo">
						<img v-for="(item,index) in newData.yhDtoList" :src="baseUrl+item.fileUrl">
					</view>
					<view class="list-li">
						<view>姓名：</view>
						<view>{{newData.checkUserName}}</view>
					</view>
					<view class="list-li">
						<view>检查时间</view>
						<view>{{newData.checkTime}}</view>
					</view>
				</view>
				<view v-if="pageType==1 || pageType==2" v-for="(item,index) in newData.checkRectifyVoList" :key="index">
					<view class="list-li" v-if="item.rectifyTime" @click="rectifyCollapse(item)">
						<view>隐患整改</view>
						<view :id="item.rectifyResult?'fontColor-B':(item.rectifyResult?'fontColor-C':'')">
							{{item.rectifyResult?'已整改':(item.rectifyResult?'暂无法整改':'')}}
							<img v-if="!item.rectifyCollapse" src="@/pages_safetyCheck/images/icon_06.png">
							<img v-if="item.rectifyCollapse" src="@/pages_safetyCheck/images/icon_06_1.png">
						</view>
					</view>
					<view v-if="item.rectifyCollapse && item.rectifyTime">
						<view class="hidden-content">{{item.rectifyMeasure}}
						</view>
						<view class="photo"  @click="lockImg(item.rectifyUploadList)">
							<img v-for="(item2,index2) in item.rectifyUploadList" :src="baseUrl+item2.fileUrl">
						</view>
						<view class="list-li">
							<view>姓名：</view>
							<view>{{item.rectifyName}}</view>
						</view>
						<view class="list-li">
							<view>整改时间</view>
							<view>{{item.rectifyTime}}</view>
						</view>
					</view>
					<view class="list-li" v-if="item.reviewTime" @click="reviewCollapse(item)">
						<view>复查验证</view>
						<view :id="item.examineResult?'fontColor-B':'fontColor-C'">
							{{item.examineResult?'复查完毕':'退回整改'}}
							<img v-if="!item.reviewCollapse" src="@/pages_safetyCheck/images/icon_06.png">
							<img v-if="item.reviewCollapse" src="@/pages_safetyCheck/images/icon_06_1.png">
						</view>
					</view>
					<view v-if="item.reviewCollapse && item.reviewTime">
						<view class="hidden-content" >{{item.examineOpinion}}
						</view>
						<view class="photo"  @click="lockImg(item.examineUploadList)">
							<img v-for="(item3,index3) in item.examineUploadList" :src="baseUrl+item3.fileUrl">
						</view>
						<view class="list-li">
							<view>姓名：</view>
							<view>{{item.reviewName}}</view>
						</view>
						<view class="list-li">
							<view>复查时间</view>
							<view>{{item.reviewTime}}</view>
						</view>
					</view>
				</view>
			</view>
		</scroll-view>
		<view class="sub-btn" v-if="pageType==0 && !newData.checkFlag">
			<view @click="submitBtn(1)">编辑</view>
			<view @click="submitBtn(2)">继续检查</view>
		</view>
		<view class="sub-btn" v-if="pageType==1">
			<view @click="submitBtn(1)">编辑</view>
			<view @click="submitBtn(2)">继续复查</view>
		</view>
		<view class="sub-btn" v-if="pageType==2">
			<view @click="submitBtn(1)">编辑</view>
			<view @click="submitBtn(2)">继续整改</view>
		</view>
		<view v-if="pageType==0 && newData.checkFlag" @click="submitBtn(2)" class="sub-btn-tow">继续检查</view>
	</view>

</template>

<script>
	import {
		config
	} from '@/api/request/config.js'
	import {
		parseTime
	} from '@/component/public.js'
	import {
		securityAppCheckPlanCheckInfo,
		securityDraftFindBySetOptionId,
		securityAppCheckPhotoGetCheckNumBySub,
		securityAppCheckDangerGetCheckProDetail,
	} from '@/pages_safetyCheck/api/index.js'
	export default {
		name: "snapshotDetail",
		components: {

		},
		data() {
			return {
				baseUrl: config.base_url,
				inspectionItems: 0, //0有检查项 1无检查项
				newData: {},
				setOptionId: '',
				manageId: '',
				subId: '',
				hazardCheckPro: '',
				hazardCheckNum: 0,
				pageType: 0, //0检查 1复查 2整改
				itemsStatus:'',
				optionData:null,
				lotName: null,

			}
		},
		onLoad(option) {
			let optionData = JSON.parse(decodeURIComponent(option.infoData));
			console.log('详情',optionData)
			this.$set(this, 'lotName',
				optionData.pageType == 0 ? optionData.checkPlanSetVoList.checkName : (
					optionData.checkPlanSetVoList.overdueUnrectify ? '整改期限' + optionData.checkPlanSetVoList
					.checkStartTime +
					'（逾期未完成整改关闭实验室）' : '整改期限' + optionData.checkPlanSetVoList.checkStartTime));
			this.$set(this, 'pageType', optionData.pageType);
			this.$set(this, 'itemsStatus', optionData.itemsStatus);
			this.$set(this, 'setOptionId', optionData.setOptionId);
			this.$set(this, 'manageId', optionData.manageId);
			this.$set(this, 'subId', optionData.subId);
			this.$set(this, 'hazardCheckPro', optionData.hazardCheckPro);
			this.$set(this, 'optionData', optionData);
			
			
		},
		onShow() {

		},
		mounted() {
			if(this.pageType==0){
				//检查
				if(this.itemsStatus==0 || this.itemsStatus==1){
					//开始检查-提交的详情
					this.securityAppCheckPlanCheckInfo();
				}else if(this.itemsStatus==2){
					//保存草稿详情
					this.securityDraftFindBySetOptionId();
					
					
				}
			}else if(this.pageType==1 || this.pageType==2){
				//复查-整改
				this.securityAppCheckDangerGetCheckProDetail();
			}
			
			this.securityAppCheckPhotoGetCheckNumBySub();
		},
		methods: {
			//滚动事件
			scrollGet() {},
			//获取检查提交详情
			async securityAppCheckPlanCheckInfo() {
				let obj = {
					setOptionId: this.setOptionId,
					manageId: this.manageId,
				}
				const {
					data
				} = await securityAppCheckPlanCheckInfo(obj);
				if (data.code == 200) {
					uni.setNavigationBarTitle({
						title: data.data.subName + '(' + (this.pageType == 0 ? data.data.roomNum : data.data
							.subRoom) + ')'
					})
					data.data.checkCollapse=true;
					data.data.inspectDot=false;
					this.$set(this, 'newData', data.data);
					this.$set(this.newData, 'checkTime', parseTime(data.data.checkTime, "{y}-{m}-{d}"));
					
				}
			},
			//获取草稿详情
			async securityDraftFindBySetOptionId() {
				let obj = {
					setOptionId: this.setOptionId,
				}
				const {
					data
				} = await securityDraftFindBySetOptionId(obj);
				if (data.code == 200) {
					uni.setNavigationBarTitle({
						title: this.optionData.subName + '(' + (this.pageType == 0 ? this.optionData.roomNum : this.optionData.subRoom) + ')'
					})
					data.data.checkCollapse=true;
					data.data.inspectDot=false;
					this.$set(this, 'newData', data.data);
					this.$set(this.newData, 'checkPlanSetVoList', this.optionData.checkPlanSetVoList);
					this.$set(this.newData, 'subName', this.optionData.subName);
					this.$set(this.newData, 'roomNum', this.optionData.roomNum);
					this.$set(this.newData, 'checkTime', parseTime(data.data.checkTime, "{y}-{m}-{d}"));
				}
			},
			//整改详情
			async securityAppCheckDangerGetCheckProDetail() {
				let obj = {
					planId: this.optionData.checkPlanSetVoList.planId,
					planSetId: this.optionData.checkPlanSetVoList.planSetId,
					checkCategory: this.optionData.checkCategory,
					hazardCheckPro: this.optionData.hazardCheckPro,
					subId: this.optionData.subId,
				}
				const {
					data
				} = await securityAppCheckDangerGetCheckProDetail(obj);
				if (data.code == 200) {
					uni.setNavigationBarTitle({
						title: data.data.subName + '(' + data.data.roomNum + ')'
					})
					data.data.checkCollapse=false;
					data.data.inspectDot=false;
					data.data.checkTime= parseTime(data.data.checkTime, "{y}-{m}-{d}");
					data.data.checkRectifyVoList.forEach(function(item,index){
						item.rectifyTime= parseTime(item.rectifyTime, "{y}-{m}-{d}");
						item.reviewTime= parseTime(item.reviewTime, "{y}-{m}-{d}");
						item.rectifyCollapse=false;
						item.reviewCollapse=false;
						if(index==data.data.checkRectifyVoList.length-1){
							item.rectifyCollapse=true;
							item.reviewCollapse=true;
						}
					})
					this.$set(this, 'newData', data.data);
			
				}
			},
			
			//获取检查项在当前实验室出现的次数
			async securityAppCheckPhotoGetCheckNumBySub() {
				let obj = {
					subId: this.subId,
					hazardCheckPro: this.hazardCheckPro,
				}
				const {
					data
				} = await securityAppCheckPhotoGetCheckNumBySub(obj);
				if (data.code == 200) {
					this.$set(this, 'hazardCheckNum', data.data);

				}
			},
			//检查-按钮
			submitBtn(status) {
				if (status == 1) {
					//编辑
					if(this.pageType==0){
						//检查
						let infoData = {
							setOptionId: this.setOptionId,
							manageId: this.manageId,
							subId: this.subId,
							hazardCheckPro: this.hazardCheckPro,
							pageType: this.pageType,
							itemsStatus: this.itemsStatus,
							checkPlanSetVoList: this.optionData.checkPlanSetVoList,
							editStatus:true,
						};
						uni.redirectTo({
							url: '/pages_safetyCheck/views/inspectManage/inspectAdd?infoData=' + encodeURIComponent(
								JSON
								.stringify(infoData))
						});
					}else if(this.pageType==1){
						//复核
						let infoData = {
							subId: this.subId,
							hazardCheckPro: this.hazardCheckPro,
							checkCategory:this.optionData.checkCategory,
							pageType: this.pageType,
							itemsStatus: this.itemsStatus,
							checkPlanSetVoList: this.optionData.checkPlanSetVoList,
							editStatus:true,
						};
						uni.redirectTo({
							url: '/pages_safetyCheck/views/itemsManage/hiddenDangerRectification?infoData=' + encodeURIComponent(
								JSON
								.stringify(infoData))
						});
					}else if(this.pageType==2){
						//整改
						let infoData = {
							subId: this.subId,
							hazardCheckPro: this.hazardCheckPro,
							checkCategory:this.optionData.checkCategory,
							pageType: this.pageType,
							itemsStatus: this.itemsStatus,
							checkPlanSetVoList: this.optionData.checkPlanSetVoList,
							editStatus:true,
						};
						uni.redirectTo({
							url: '/pages_safetyCheck/views/itemsManage/hiddenDangerRectification?infoData=' + encodeURIComponent(
								JSON
								.stringify(infoData))
						});
						
					}
					
				} else if (status == 2) {
					//继续检查
					let infoData = {
						subId: this.subId,
						checkCategory:this.optionData.checkCategory,
						subName: this.newData.subName,
						roomNum: this.newData.roomNum,
						manageId: this.manageId,
						checkPlanSetVoList: this.optionData.checkPlanSetVoList,
						pageType: this.pageType,
					};

					uni.redirectTo({
						url: '/pages_safetyCheck/views/itemsManage/hiddenDangerItems?infoData=' +
							encodeURIComponent(JSON
								.stringify(infoData))
					});
				}
			},
			//图片预览
			lockImg(list) {
				if (!list[0]) {
					return
				}
				let urlList = [];
				for (let i = 0; i < list.length; i++) {
					urlList.push(config.base_url + list[i].photoUrl)
				}
				wx.previewImage({
					urls: urlList, //需要预览的图片http链接列表，多张的时候，url直接写在后面就行了
					current: '', // 当前显示图片的http链接，默认是第一个
					success: function(res) {},
					fail: function(res) {},
					complete: function(res) {},
				})
			},
			//折叠展开
			inspectDot(){
				this.newData.inspectDot=!this.newData.inspectDot
			},
			checkCollapse(row){
				this.newData.checkCollapse=!this.newData.checkCollapse
			},
			rectifyCollapse(row){
				row.rectifyCollapse=!row.rectifyCollapse
			},
			reviewCollapse(row){
				row.reviewCollapse=!row.reviewCollapse
			},
		}
	}
</script>

<style lang="stylus" scoped>
	.snapshotDetail {
		height: 100%;
		display flex;
		box-sizing: border-box;
		padding-bottom: 160rpx;
		box-sizing: border-box;

		#bgColor-A {
			color: #FFD400;
		}

		#bgColor-B {
			color: #FF8C00;
		}

		#bgColor-C {
			color: #E11608;
		}

		#fontColor-A {
			color: #0183FA;
		}

		#fontColor-B {
			color: #16B531;
		}

		#fontColor-C {

			color: #FF8C00;
		}

		.tip {
			width: 750rpx;
			height: 80rpx;
			background: rgba(1, 131, 250, 0.2);
			border-radius: 0rpx 0rpx 0rpx 0rpx;
			font-size: 30rpx;
			color: #0183FA;
			line-height: 80rpx;
			text-align: center;
		}

		.tip-tow {
			width: 750rpx;
			height: 80rpx;
			background: rgba(255, 140, 0, 0.2);
			border-radius: 0rpx 0rpx 0rpx 0rpx;
			font-size: 30rpx;
			color: #FF8C00;
			line-height: 80rpx;
			text-align: center;
		}
		.lotName {
			height: 70rpx;
			line-height: 70rpx;
			font-size: 28rpx;
			background: rgba(1, 131, 250, 0.2);
			color: #0183FA;
			text-align: center;
		}
		
		.lotNameOne {
			background: #F7E0C4;
			color: #FF8C00;
		}

		.items {
			width: 690rpx;
			min-height: 165rpx;
			background: #FFFFFF;
			border-radius: 20rpx 20rpx 20rpx 20rpx;
			margin: 20rpx 0 0 30rpx;

			.items-li {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 0 30rpx;
				box-sizing: border-box;
				border-bottom: 1rpx solid #E0E0E0;

				>view:nth-of-type(1) {
					font-size: 30rpx;
					color: #333333;
					line-height: 80rpx;
					text-align: left;
				}

				>view:nth-of-type(2) {
					font-size: 28rpx;
					color: #666666;
					line-height: 80rpx;
					text-align: left;
					display: flex;
					justify-content: space-between;
					align-items: center;
				}
			}

			.items-t {
				border-bottom: 1rpx solid #E0E0E0;
				height: 80rpx;
				display: flex;
				justify-content: flex-start;
				align-items: center;
				padding: 0 30rpx;
				box-sizing: border-box;

				.items-t-l {
					width: 175rpx;
					height: 50rpx;
					background: #E11608;
					border-radius: 50rpx 50rpx 50rpx 50rpx;
					font-size: 30rpx;
					color: #FFFFFF;
					line-height: 50rpx;
					text-align: center;
					margin-right: 14rpx;
				}

				.items-t-r {
					font-size: 30rpx;
					color: #333333;
					line-height: 42rpx;
					text-align: left;
				}
			}

			.items-b {
				padding: 0 30rpx;
				box-sizing: border-box;
				height: 80rpx;
				font-size: 28rpx;
				color: #666666;
				line-height: 80rpx;
				text-align: left;
			}
		}

		.items-number {
			font-size: 24rpx;
			color: #3D3D3D;
			line-height: 34rpx;
			text-align: right;
			margin: 20rpx 60rpx 0 0;

			>text {
				font-size: 24rpx;
				color: #FF0000;
				line-height: 34rpx;
				text-align: right;
			}
		}

		.list {
			width: 690rpx;
			margin: 20rpx 30rpx 0;
			background: #FFFFFF;
			border-radius: 20rpx 20rpx 20rpx 20rpx;

			.list-li {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 0 30rpx;
				box-sizing: border-box;
				border-bottom: 1rpx solid #E0E0E0;

				>view:nth-of-type(1) {
					font-size: 30rpx;
					color: #333333;
					line-height: 80rpx;
					text-align: left;
				}

				>view:nth-of-type(2) {
					font-size: 28rpx;
					color: #666666;
					line-height: 80rpx;
					text-align: left;
					display: flex;
					justify-content: space-between;
					align-items: center;

					>img {
						width: 24rpx;
						height: 12rpx;
						margin-left: 10rpx;
					}
				}

			}

			.file-li {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 0 30rpx;
				box-sizing: border-box;

				>img:nth-of-type(1) {
					width: 30rpx;
					height: 30rpx;
				}

				>view {
					flex: 1;
					font-size: 28rpx;
					color: #333333;
					line-height: 80rpx;
					text-align: left;
					margin: 0 92rpx 0 16rpx;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}

				>img:nth-of-type(2) {
					width: 30rpx;
					height: 30rpx;
				}
			}

			.hidden-content {
				width: 630rpx;
				min-height: 120rpx;
				background: #F5F5F5;
				border-radius: 20rpx 20rpx 20rpx 20rpx;
				margin: 20rpx 30rpx 0;
				padding: 20rpx;
				box-sizing: border-box;
				font-size: 28rpx;
				color: #666666;
				line-height: 39rpx;
				text-align: left;
			}

			.photo {
				display: flex;
				justify-content: flex-start;
				flex-wrap: wrap;
				margin-top: 20rpx;
				padding: 0 30rpx;
				box-sizing: border-box;

				>img {
					width: 150rpx;
					height: 150rpx;
					border-radius: 10rpx 10rpx 10rpx 10rpx;
					margin: 0 10rpx 10rpx 0;
				}
			}

			/* .list-li:last-of-type {
				border: none;
			} */
		}

	}

	.sub-btn {
		display: flex;
		justify-content: center;
		position: fixed;
		left: 30rpx;
		bottom: 30rpx;

		>view:nth-of-type(1) {
			width: 345rpx;
			height: 100rpx;
			background: #FF8C00;
			border-radius: 50rpx 0rpx 0rpx 50rpx;
			font-size: 30rpx;
			color: #FFFFFF;
			line-height: 100rpx;
			text-align: center;
		}

		>view:nth-of-type(2) {
			width: 345rpx;
			height: 100rpx;
			background: #0183FA;
			border-radius: 0rpx 50rpx 50rpx 0rpx;
			font-size: 30rpx;
			color: #FFFFFF;
			line-height: 100rpx;
			text-align: center;
		}
	}

	.sub-btn-tow {
		width: 686rpx;
		height: 100rpx;
		background: #0183FA;
		border-radius: 50rpx 50rpx 50rpx 50rpx;
		position: fixed;
		left: 30rpx;
		bottom: 30rpx;
		font-weight: 400;
		font-size: 30rpx;
		color: #FFFFFF;
		line-height: 100rpx;
		text-align: center;
	}
</style>