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

<!-- 隐患项 -->
<template>
	<view class="hiddenDangerItems">
		<view class="header">
			<view class="lotName" :class="pageType != 0?'lotNameOne':''" v-if="lotName">{{lotName}}</view>
			<view class="line"></view>
			<view class="tabTitle_tow">
				<view class="tabTitle_tow_li" @tap="tabClickTow(item.value)" :key="index"
					v-for="(item,index) in tabTextTow">
					<view :class="{on:curTabTow==item.value}" class="tabTitle_tow_text">{{item.label}}</view>
					<view :class="{on:curTabTow==item.value}" class="tabTitle_tow_across"></view>
				</view>
			</view>
			<view class="line"></view>
			<view class="search">
				<view class="search-l" v-if="pageType == 0 && curTabTow != 0">
					<view :class="checkFlag == 1 ?'search-B':'search-A'" @click="checkFlagChange(1)">符合</view>
					<view :class="checkFlag == 0 ?'search-B':'search-A'" @click="checkFlagChange(0)">不符合</view>
				</view>
				<view class="search-r" :class="(pageType == 0 && curTabTow == 0)||(pageType != 0) ?'search-r-margin':''"
					@click="checkItemModuleButton('open')">
					<img src="@/pages_safetyCheck/images/icon_aqjc_ss.png">
					{{newData.hazardCheckCode?newData.hazardCheckCode:''}}{{newData.hazardCheckName?newData.hazardCheckName:'搜索检查项'}}
				</view>
			</view>
			<view class="line"></view>
		</view>
		<scroll-view scroll-y style="overflow-y: scroll;flex:1;" @scrolltolower="scrollGet" class="info-max-box">
			<view class="list">
				<view class="total"
					:class="curTabTow == 0?'total-color-1':(curTabTow == 2?'total-color-3':(curTabTow == 1?'total-color-2':''))"
					v-if="pageType == 0">
					{{curTabTow == 0?'待检查共'+total+'项':(curTabTow == 2?'检查中草稿箱共'+total+'项':(curTabTow == 1?'已检查共'+total+'项':''))}}
				</view>
				<view class="total"
					:class="curTabTow == 0?'total-color-1':(curTabTow == 1?'total-color-2':(curTabTow == 2?'total-color-3':''))"
					v-if="pageType == 1">
					{{curTabTow == 0?'待复查共'+total+'项':(curTabTow == 1?'复查完毕共'+total+'项':(curTabTow == 2?'退回整改共'+total+'项':''))}}
				</view>
				<view class="total"
					:class="curTabTow == 2?'total-color-1':(curTabTow == 0?'total-color-2':(curTabTow == 4?'total-color-3':''))"
					v-if="pageType == 2">
					{{curTabTow == 2?'待整改共'+total+'项':(curTabTow == 1?'已整改共'+total+'项':(curTabTow == 4?'暂无法整改共'+total+'项':''))}}
				</view>
				<view class="list-li" v-for="(item,index) in dataList" :key="index">
					<view class="list-li-t" @click="itemsClick(item)">
						<view v-if="pageType == 0">
							<img v-if="item.checkFlag==null" src="@/pages_safetyCheck/images/icon_zg_zh@1x.png">
							<img v-if="item.checkFlag==false" src="@/pages_safetyCheck/images/icon_xz_zg@1x.png">
							<img v-if="item.checkFlag==true" src="@/pages_safetyCheck/images/icon_xz_fc@1x.png">
						</view>
						<view>{{item.hazardCheckCode}}{{item.hazardCheckName}}</view>
					</view>
					<view v-if="item.hazardCheckId" class="list-li-b" @click="hiddenDangerClick(item)">
						此检查项在当前实验室累计出现<text>{{item.hazardCheckNum}}</text>次隐患
					</view>
				</view>
			</view>
			<view class="get-data-p" v-if="!getDataType">
				<img class="get-data-img" src="@/pages_safetyCheck/images/icon_aqjc_sl.png">
				<view class="get-data-text">上拉加载</view>
			</view>
			<view class="get-data-null-p" v-if="getDataType">- 没有更多数据 -</view>
		</scroll-view>
		<checkItemModule :propsData="propsData" v-if="checkItemModuleType"></checkItemModule>
		<view v-if="pageType==0" @click="submitBtn()" class="sub-btn">检查完成</view>
	</view>

</template>

<script>
	import {
		config
	} from '@/api/request/config.js'
	import {
		securityAppCheckSetOptionList,
		securityAppCheckDangerReviewList,
		securityAppCheckDangerGetCheckDangerSubId,
		securityAppCheckSetOptionFinishCheck,
	} from '@/pages_safetyCheck/api/index.js'
	import {
		checkItemModule
	} from '@/pages_safetyCheck/component/checkItemModule.vue'
	export default {
		name: "hiddenDangerItems",
		components: {
			checkItemModule
		},
		data() {
			return {
				baseUrl: config.base_url,
				pageType: 1,
				tabTextTow: [],
				curTabTow: null,
				form: {
					imgDtoList: [],
				},
				lotName: null,
				newData: {

				},
				dialogVisible: false,
				// 查询参数
				queryParams: {
					page: 1,
					pageSize: 10,
				},
				//符合/不符合
				checkFlag: null,
				total: 0,
				dataList: [],
				getDataType: false,
				searchIndex: 0,
				//检查项组件数据
				checkItemModuleType: false,
				propsData: {},
			}
		},
		onLoad(option) {
			let optionData = JSON.parse(decodeURIComponent(option.infoData));
			uni.setNavigationBarTitle({
				title: optionData.subName + '(' + (optionData.pageType == 0 ? optionData.roomNum : optionData
					.subRoom) + ')'
			})
			this.$set(this, 'pageType', optionData.pageType);
			this.$set(this, 'lotName',
				optionData.pageType == 0 ? optionData.checkPlanSetVoList.checkName : (
					optionData.checkPlanSetVoList.overdueUnrectify ? '整改期限' + optionData.checkPlanSetVoList
					.checkStartTime +
					'（逾期未完成整改关闭实验室）' : '整改期限' + optionData.checkPlanSetVoList.checkStartTime));
			this.$set(this, 'tabTextTow',
				optionData.pageType == 0 ? [{
					value: '0',
					label: '待检查'
				}, {
					value: '2',
					label: '检查中'
				}, {
					value: '1',
					label: '已检查'
				}] : (
					optionData.pageType == 1 ? [{
						value: '0',
						label: '待复查'
					}, {
						value: '1',
						label: '复查完毕'
					}, {
						value: '2',
						label: '退回整改'
					}] : (
						optionData.pageType == 2 ? [{
							value: '2',
							label: '待整改'
						}, {
							value: '1',
							label: '已整改'
						}, {
							value: '4',
							label: '暂无法整改'
						}] : []
					)))
			this.$set(this, 'curTabTow', optionData.pageType == 0 ? '0' : (optionData.pageType == 1 ? '0' : (optionData
				.pageType == 2 ? '2' : '')));
			this.$set(this, 'newData', optionData);
			this.$nextTick(() => {
				this.getList()
			})
		},
		onShow() {

		},
		mounted() {

		},
		methods: {
			//滚动事件
			scrollGet() {
				let self = this;
				if (self.total / self.queryParams.pageSize <= self.queryParams.page) {
					this.$set(this, 'getDataType', true);
				} else {
					this.queryParams.page += 1;
					this.$nextTick(() => {
						this.getList();
					})
				}
			},
			//顶部tab点击
			tabClickTow(value) {
				this.$set(this, 'hazardCheckPro', null);
				this.$set(this, 'checkFlag', null);
				this.$set(this.queryParams, 'page', 1);
				this.$set(this, 'curTabTow', value);
				this.$set(this, 'dataList', []);
				this.getList();
			},
			dialogOpen() {
				this.dialogVisible = true;
			},
			dialogClose() {
				this.dialogVisible = false;
			},
			//符合/不符合
			checkFlagChange(type) {
				if (this.checkFlag == type) {
					this.$set(this, 'checkFlag', null);
				} else {
					this.$set(this, 'checkFlag', type);
				}
				this.$set(this.queryParams, 'page', 1);
				this.getList()
			},
			checkItemModuleButton(type, item) {
				if (type == 'open') {
					let obj = {
						infoType: this.pageType,
						checkType: this.curTabTow,
					}
					if (this.curTabTow == 0) {
						//检查
						obj.manageId = this.newData.manageId
					} else if (this.curTabTow != 0) {
						//复查/整改
						obj.planId = this.newData.planId;
						obj.planSetId = this.newData.planSetId;
						obj.subId = this.newData.subId;
					}
					this.$set(this, 'propsData', obj);
					this.$set(this, 'checkItemModuleType', true);
				} else if (type == 'out') {
					this.$set(this, 'checkItemModuleType', false);
					this.$set(this, 'propsData', {});
				} else if (type == 'submit') {
					this.itemsClick(item);
				}
			},
			//检查项选中
			itemsClick(row) {
				let infoData = row;
				infoData.pageType = this.pageType;
				infoData.itemsStatus = this.curTabTow;
				if (this.pageType == 0 && this.curTabTow == 0) {
					//待检查
					uni.redirectTo({
						url: '/pages_safetyCheck/views/inspectManage/inspectAdd?infoData=' + encodeURIComponent(
							JSON
							.stringify(infoData))
					});
				}
				if (this.pageType == 0 && this.curTabTow == 2) {
					//检查中
					infoData.checkName=this.newData.checkPlanSetVoList.checkName;
					infoData.subName=this.newData.subName;
					infoData.roomNum=this.newData.roomNum;
					infoData.subRoom=this.newData.subRoom;
					uni.redirectTo({
						url: '/pages_safetyCheck/views/itemsManage/hiddenDangerItemsDetail?infoData=' +
							encodeURIComponent(JSON
								.stringify(infoData))
					});
				}
				if (this.pageType == 0 && this.curTabTow == 1) {
					//已检查
					uni.redirectTo({
						url: '/pages_safetyCheck/views/itemsManage/hiddenDangerItemsDetail?infoData=' +
							encodeURIComponent(JSON
								.stringify(infoData))
					});
				} else if (this.pageType == 1 && this.curTabTow == 0) {
					//待复查
				} else if (this.pageType == 1 && this.curTabTow == 0) {
					//待整改
				}

			},
			hiddenDangerClick(row) {
				let infoData = row;
				infoData.pageType = this.pageType;
				uni.redirectTo({
					url: '/pages_safetyCheck/views/inspectManage/hiddenDangerRecord?infoData=' +
						encodeURIComponent(JSON.stringify(infoData))
				});
			},
			//
			async getList() {
				let self = this;
				let obj = JSON.parse(JSON.stringify(this.queryParams))
				if (this.pageType == 0) {
					//检查任务
					obj.manageId = this.newData.manageId;
					obj.checkStatus = this.curTabTow;
					obj.checkFlag = this.checkFlag;
					const {
						data
					} = await securityAppCheckSetOptionList(obj);
					if (data.code == 200) {
						if (self.queryParams.page == 1) {
							this.dataList = data.data.records;
							this.total = data.data.total;
							if (data.data.total / self.queryParams.pageSize <= self.queryParams.page) {
								this.$set(this, 'getDataType', true);
							}
						} else {
							this.dataList = [...this.dataList, ...data.data.records]
							this.total = data.data.total;
							if (data.data.total / self.queryParams.pageSize <= self.queryParams.page) {
								this.$set(this, 'getDataType', true);
							}
						}
					}
				} else if (this.pageType == 1) {
					//复查验证
					obj.planId = this.newData.planId;
					obj.planSetId = this.newData.planSetId;
					obj.subId = this.newData.subId;
					obj.appReviewStatus = this.curTabTow;
					const {
						data
					} = await securityAppCheckDangerReviewList(obj);
					if (data.code == 200) {
						if (self.queryParams.page == 1) {
							this.dataList = data.data.records;
							this.total = data.data.total;
							if (data.data.total / self.queryParams.pageSize <= self.queryParams.page) {
								this.$set(this, 'getDataType', true);
							}
						} else {
							this.dataList = [...this.dataList, ...data.data.records]
							this.total = data.data.total;
							if (data.data.total / self.queryParams.pageSize <= self.queryParams.page) {
								this.$set(this, 'getDataType', true);
							}
						}
					}
				} else if (this.pageType == 2) {
					//隐患整改
					obj.planId = this.newData.planId;
					obj.planSetId = this.newData.planSetId;
					obj.subId = this.newData.subId;
					obj.appReviewStatus = this.curTabTow;
					const {
						data
					} = await securityAppCheckDangerGetCheckDangerSubId(obj);
					if (data.code == 200) {
						if (self.queryParams.page == 1) {
							this.dataList = data.data.records;
							this.total = data.data.total;
							if (data.data.total / self.queryParams.pageSize <= self.queryParams.page) {
								this.$set(this, 'getDataType', true);
							}
						} else {
							this.dataList = [...this.dataList, ...data.data.records]
							this.total = data.data.total;
							if (data.data.total / self.queryParams.pageSize <= self.queryParams.page) {
								this.$set(this, 'getDataType', true);
							}
						}
					}
				}
			},
			//检查完成
			async submitBtn() {
				let obj = {
					manageId: this.newData.manageId,
				}
				const {
					data
				} = await securityAppCheckSetOptionFinishCheck(obj);
				if (data.code == 200) {
					let infoData=this.newData;
					uni.redirectTo({
						url: '/pages_safetyCheck/views/inspectManage/inspectList?infoData=' + encodeURIComponent(JSON
							.stringify(infoData))
					});
				}
			},

		}
	}
</script>

<style lang="stylus" scoped>
	.hiddenDangerItems {
		height: 100%;
		display flex;
		flex-direction: column;
		overflow: hidden;
		box-sizing: border-box;

		#totalColor-A {
			color: #0183FA;
			background: rgba(1, 131, 250, 0.2);
		}

		#totalColor-B {
			color: #16B531;
			background: rgba(22, 181, 49, 0.2);
		}

		#totalColor-C {
			color: #FF8C00;
			background: rgba(255, 140, 0, 0.2);
		}

		.header {
			width: 100%;
			height: 268rpx;
			overflow: hidden;
			background: #fff;

			.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;
			}

			.tabTitle_tow {
				width: 520rpx;
				height: 80rpx;

				display flex;
				justify-content: flex-start;
				align-items: center;

				.tabTitle_tow_li {
					flex: 1;
					position: relative;
					text-align center;

					.tabTitle_tow_text {
						display: inline-block;
						font-size: 30rpx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #333333;
						line-height: 46rpx;
						position: relative;

						&.on {
							color: #0183FA;
						}
					}

					.tabTitle_tow_across {
						width: 50rpx;
						height: 4rpx;
						background: #0183FA;
						border-radius: 2rpx;
						margin-left: 38%;
						display none;

						&.on {
							display block;
						}
					}

				}
			}

			.line {
				width: 100%;
				height: 13rpx;
				background: #F5F5F5;
			}

			.search {
				width: 750rpx;
				height: 80rpx;
				background: #FFFFFF;
				border-radius: 0rpx 0rpx 0rpx 0rpx;
				display: flex;
				justify-content: flex-start;
				align-items: center;

				.search-l {
					display: flex;
					justify-content: flex-start;
					align-items: center;
					margin: 0 20rpx 0 30rpx;

					.search-A {
						border-radius: 50rpx 50rpx 50rpx 50rpx;
						border: 1rpx solid #E0E0E0;
						width: 100rpx;
						height: 60rpx;
						background: #E0E0E0;
						font-weight: normal;
						font-size: 24rpx;
						color: #333333;
						line-height: 60rpx;
						text-align: center;
						margin-right: 10rpx;
					}

					.search-B {
						border-radius: 50rpx 50rpx 50rpx 50rpx;
						border: 1rpx solid #0183FA;
						width: 100rpx;
						height: 60rpx;
						background: #0183FA;
						font-weight: normal;
						font-size: 24rpx;
						color: #FFFFFF;
						line-height: 60rpx;
						text-align: center;
						margin-right: 10rpx;
					}
				}

				.search-r-margin {
					width: 700rpx !important;
					margin: 0 auto;
				}

				.search-r {
					width: 440rpx;
					height: 60rpx;
					background: #FFFFFF;
					border-radius: 50rpx 50rpx 50rpx 50rpx;
					border: 1rpx solid #E0E0E0;
					font-size: 24rpx;
					color: #999999;
					line-height: 60rpx;
					text-align: left;
					display: flex;
					justify-content: flex-start;
					align-items: center;
					padding: 0 20rpx;
					box-sizing: border-box;

					>img {
						width: 30rpx;
						height: 30rpx;
						margin-right: 20rpx;
					}
				}
			}
		}

		.list {
			width: 750rpx;
			background: #FFFFFF;
			padding-bottom: 20rpx;
			box-sizing: border-box;

			.total {
				display: inline-block;
				height: 50rpx;
				background: rgba(1, 131, 250, 0.2);
				border-radius: 0rpx 0rpx 20rpx 0rpx;
				font-size: 24rpx;
				color: #0183FA;
				line-height: 50rpx;
				text-align: left;
				padding: 0rpx 22rpx;
				box-sizing: border-box;
				margin-bottom: 20rpx;
			}

			.total-color-1 {
				background: rgba(1, 131, 250, 0.2);
				color: #0183FA;
			}

			.total-color-2 {
				background: rgba(22, 181, 49, 0.2);
				color: #16B531;
			}

			.total-color-3 {
				background: #F7E0C4;
				color: #FF8C00;
			}

			.list-li {
				margin: 0 30rpx;

				.list-li-t {
					width: 690rpx;
					background: #F5F5F5;
					border-radius: 10rpx 10rpx 10rpx 10rpx;
					display: flex;
					justify-content: flex-start;
					padding: 12rpx 20rpx 14rpx 14rpx;
					box-sizing: border-box;
					margin: 20rpx 0;

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

					>view:nth-of-type(2) {
						flex: 1;
						font-size: 24rpx;
						color: #3D3D3D;
						line-height: 34rpx;
						text-align: left;
					}
				}

				.list-li-b {
					font-size: 24rpx;
					color: #3D3D3D;
					line-height: 24rpx;
					text-align: right;

					>text {
						color: #FF0000;
					}
				}

			}
		}

		.get-data-p {
			height: 100rpx;
			text-align: center;

			.get-data-img {
				width: 30rpx;
				height: 30rpx;
				margin: 0 auto;
				margin-top: 15rpx;
			}

			.get-data-text {
				text-align: center;
			}
		}

		.get-data-null-p {
			height: 100rpx;
			line-height: 100rpx;
			text-align: center;
		}

		.sub-btn {
			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>