FE-lab-xcx/pages_safetyCheck/views/snapshotManage/snapshotItems.vue

<!-- 隐患项 -->
<template>
	<view class="hiddenDangerItems">
		<view class="header">
			<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-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 == 1?'total-color-2':(curTabTow == 2?'total-color-3':''))"
					v-if="pageType == 2">
					{{curTabTow == 0?'待整改共'+total+'项':(curTabTow == 1?'已整改共'+total+'项':(curTabTow == 2?'暂无法整改共'+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 == 2">
							<img v-if="curTabTow==2" src="@/pages_safetyCheck/images/icon_zg_zh@1x.png">
							<img v-if="curTabTow==1" src="@/pages_safetyCheck/images/icon_xz_zg@1x.png">
							<img v-if="curTabTow==4" src="@/pages_safetyCheck/images/icon_xz_fc@1x.png">
						</view>
						<view>{{item.hazardCheckCode}}{{item.hazardCheckName}}</view>
					</view>
					<view v-if="pageType == 2 && item.dangerNum" class="list-li-b" @click="hiddenDangerClick(item)">
						此检查项在当前实验室累计出现<text>{{item.dangerNum}}</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>

</template>

<script>
	import {
		config
	} from '@/api/request/config.js'
	import {
		securityAppCheckPhotoList,
	} 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: 0,
				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));
			console.log(optionData)
			uni.setNavigationBarTitle({
				title: optionData.subName + '(' + optionData.subRoom + ')'
			})
			this.$set(this, 'pageType', optionData.pageType);
			this.$set(this, 'tabTextTow',[{
							value: '0',
							label: '待整改'
						}, {
							value: '1',
							label: '已整改'
						}, {
							value: '2',
							label: '暂无法整改'
						}])
			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, 'checkFlag', null);
				this.$set(this.queryParams, 'page', 1);
				this.$set(this, 'curTabTow', value);
				this.$set(this, 'total', 0);
				this.$set(this, 'dataList', []);
				this.$nextTick(()=>{
					this.getList();
				})
			},
			dialogOpen() {
				this.dialogVisible = true;
			},
			dialogClose() {
				this.dialogVisible = false;
			},
			
			checkItemModuleButton(type, item) {
				if (type == 'open') {
					let obj = {
						infoType: this.pageType,
						checkType: this.curTabTow,
					}
					if (this.pageType == 0) {
						//检查
						obj.manageId = this.newData.manageId
					} else if (this.pageType != 0) {
						//复查/整改
						obj.planId = this.newData.checkPlanSetVoList.planId;
						obj.planSetId = this.newData.checkPlanSetVoList.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;
				uni.navigateTo({
					url: '/pages_safetyCheck/views/snapshotManage/snapshotRectification?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))
				//隐患整改
				obj.hazardCheckId = '';
				obj.searchValue = '';
				obj.subId = this.newData.subId;
				obj.rectifyStatus = this.curTabTow;
				const {
					data
				} = await securityAppCheckPhotoList(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: 198rpx;
			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>