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="inspectionItemsClick()">
					<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 == 2?'total-color-1':(curTabTow == 0?'total-color-3':(curTabTow == 1?'total-color-2':''))" v-if="pageType == 0">
					{{curTabTow == 2?'待检查共'+total+'项':(curTabTow == 0?'检查中草稿箱共'+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)">
						<img v-if="item.rectifyStatus==0" src="@/pages_safetyCheck/images/icon_zg_zh@1x.png">
						<img v-if="item.rectifyStatus==1" src="@/pages_safetyCheck/images/icon_xz_fc@1x.png">
						<img v-if="item.rectifyStatus==2" src="@/pages_safetyCheck/images/icon_xz_zg@1x.png">
						<view v-if="item.hazardCheckId">{{item.hazardCheckCode}}{{item.hazardCheckName}}</view>
						<view v-if="!item.hazardCheckId">{{item.hazardDescribe}}</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>
	</view>

</template>

<script>
	import {
		config
	} from '@/api/request/config.js'
	import {
		securityAppCheckSetOptionList,
		securityAppCheckDangerReviewList,
		securityAppCheckDangerGetCheckDangerSubId,
	} from '@/pages_safetyCheck/api/index.js'
	export default {
		name: "hiddenDangerItems",
		components: {

		},
		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,

			}
		},
		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: '2',label: '检查中'}, {value: '0',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 ? '2' : (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.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()
			},
			//搜索项跳转
			inspectionItemsClick() {
				this.pageType = 2; //1随手拍检查项
				uni.redirectTo({
					url: '/pages_safetyCheck/views/itemsManage/hiddenDangerItemsSearch?form=' + encodeURIComponent(
						JSON.stringify(this.newData))
				});
			},
			itemsClick(row) {
				let infoData = row;
				infoData.pageType = this.pageType;
				uni.redirectTo({
					url: '/pages_safetyCheck/views/inspectManage/inspectAdd?infoData=' + encodeURIComponent(JSON
						.stringify(infoData))
				});
			},
			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);
							}
						}
					}
				}
			},


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

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

					>view {
						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;
		}
	}
</style>