v3-lab-xcx/pages_safetyExamine/views/dangerManage/dangerList.vue

<!-- 安全检查-安全隐患 -->
<template>
	<view class="examine">
		<view class="header">
			<view class="tabTitle_tow">
				<view class="tabTitle_tow_li" @tap="tabClickTow(index)" :key="index" v-for="(item,index) in tabTextTow">
					<view :class="{on:curTabTow==index}" class="tabTitle_tow_text">{{item}}</view>
					<view :class="{on:curTabTow==index}" class="tabTitle_tow_across"></view>
				</view>
			</view>
			<view class="lab_title">
				<picker @change="collegeChange" :value="collegeIndex" :range="collegeArray" class="lab_title_l">
					<view class="lab_title_l_n">
						<view>{{getData.deptName?getData.deptName:'选择学院'}}</view>
						<img src="@/pages_safetyExamine/images/icon_06.png">
					</view>
				</picker>
				<view class="lab_title_r">
					<input type="text" v-model="getData.searchValue" placeholder="请输入实验室名称" name="search"
						@confirm='searchBtn' confirm-type='search' maxlength="50"
						placeholder-style="color: #CCCCCC;font-size:26rpx;">
					<view v-if="getData.searchValue>0" class="lab_title_r_btn" @click="clearBtn">
						<img src="@/pages_safetyExamine/images/clear.png" />
					</view>
				</view>
			</view>
		</view>

		<scroll-view scroll-y @scrolltolower="scrollGet" class="info-max-box">
			<view class="list_three">
				<view class="list_three_li" v-for="(item,index) in  dataList" :key="index"
					@click="handleClick(item,'detail')">
					<view class="list_three_li_t">
						<view class="list_three_li_t_l">
							<img v-if="item.checkRange==1" src="@/pages_safetyExamine/images/icon_xyxc_qx.png" />
							<img v-if="item.checkRange==2" src="@/pages_safetyExamine/images/icon_xyxc_xy.png" />
							<img v-if="item.checkRange==3" src="@/pages_safetyExamine/images/icon_xyxc_sys.png" />
							<text></text>
						</view>
						<view class="list_three_li_t_c" v-if="item.checkCategory==1">{{item.subRoom}}</view>
						<view class="list_three_li_t_c" v-if="item.checkCategory==2">
							{{item.subRoom}}-{{item.hazardName}}{{item.code}}
						</view>
						<view class="list_three_li_t_c2" v-if="item.overdueStatus==1">已逾期</view>
						<view class="list_three_li_t_r"></view>
					</view>
					<view class="list_three_li_m">
						<view class="list_three_li_m_t">{{item.title}}</view>
						<view class="list_three_li_m_b">
							<text class="green_color" v-if="item.rectifyStatus==1">已完成</text>
							<text class="blue_color" v-if="item.rectifyStatus==2">待整改</text>
							<text class="orange_color" v-if="item.rectifyStatus==3">待复核</text>
							<text class="gray_color" v-if="item.rectifyStatus==4">暂无法整改</text>
							<text>{{item.hazardType==1?'校院巡查':'实验室自查'}}-{{item.checkCategory==1?'综合检查':'专项检查'}}</text>
							<text>{{item.collegeName}}</text>
						</view>
					</view>
					<view class="list_three_li_b">整改期限：{{item.rectifyDeadline}}</view>
				</view>
			</view>
			<img class="null-img" v-if="!dataList[0]" src="@/pages_safetyExamine/images/null-data-1.png">
		</scroll-view>
	</view>

</template>

<script>
	import {
		config
	} from '@/api/request/config.js'
	import {
		checkHazardAppList,
		systemDeptDropList
	} from '@/pages_safetyExamine/api/index.js'
	export default {
		name: "rectifyList",
		components: {

		},
		data() {
			return {
				pageType: 0,
				//列表请求参数
				getData: {
					page: 1,
					pageSize: 20,
					hazardType: '1', //1是院校巡查，2是实验室自查
					rectifyStatus: '', //1已完成 2待整改 3待复核 4 暂无法整改
					searchValue: '',
				},
				tabTextTow: ['全部', '待整改', '待复核', '已完成', '暂无法整改'],
				curTabTow: 0,
				form: {
					name: '',
					type: '校院巡查',
					startTime: '',
					endTime: '',
					inspectScope: [],
					tiemQuickList: [],
					scopeIndex: '',
					seleteListLab: [],
					patrolIndex: '',
					seleteListMember: [],
				},
				collegeList: [{
					name: '学院名称',
					type: false
				}, {
					name: '学院名称',
					type: false
				}, {
					name: '学院名称',
					type: false
				}, {
					name: '学院名称',
					type: false
				}, {
					name: '学院名称',
					type: false
				}, {
					name: '学院名称',
					type: false
				}, ],
				collegeIndex: 0,
				collegeArray: [],
				dataList: [],
			}
		},
		onLoad(option) {
			if (option.form) {
				this.form = JSON.parse(decodeURIComponent(option.form));
			}
			if (option.pageType == 1) {
				uni.setNavigationBarTitle({
					title: '校院巡查隐患'
				})
				this.getData.hazardType = option.pageType;
			} else if (option.pageType == 2) {
				uni.setNavigationBarTitle({
					title: '实验室自查隐患'
				})
				this.getData.hazardType = option.pageType;
			}
		},
		onShow() {

		},
		mounted() {
			this.dataList = [];
			this.getList();
			this.conditionCollegeInfo();
		},
		methods: {
			//顶部tab点击
			tabClickTow(index) {
				this.curTabTow = index;
				this.getData.page = 1;
				this.getData.searchValue = '';
				this.getData.deptId = '';
				this.getData.deptName = '';
				this.dataList = [];
				if (index == 0) {
					this.getData.rectifyStatus = '';
				} else if (index == 1) { //待整改
					this.getData.rectifyStatus = 2;
				} else if (index == 2) { //待复核
					this.getData.rectifyStatus = 3;
				} else if (index == 3) { //已完成
					this.getData.rectifyStatus = 1;
				} else if (index == 4) { //暂无法整改
					this.getData.rectifyStatus = 4;
				}
				this.getList()
			},
			//选择学院
			collegeChange(e) {
				this.collegeIndex = e.target.value;
				this.getData.deptId = this.collegeList[e.target.value].deptId
				this.getData.deptName = this.collegeList[e.target.value].deptName
				this.dataList = [];
				this.getList();
			},
			//实验室搜索
			searchBtn() {
				this.dataList = [];
				this.getList();
			},
			//清除
			clearBtn() {
				this.getData.page = 1;
				this.collegeIndex = 0;
				this.getData.deptId = '';
				this.getData.deptName = '';
				this.getData.searchValue = '';
				this.dataList = [];
				this.getList();
			},
			//滚动事件
			scrollGet() {
				let self = this;
				if (self.total / self.getData.pageSize <= self.getData.page) {
					console.log('没有更多数据!')
				} else {
					setTimeout(function() {
						self.getData.page += 1;
						self.getList();
					}, 1000)

				}

			},
			//查询学院列表
			async conditionCollegeInfo() {
				let self = this;
				const {
					data
				} = await systemDeptDropList({
					deptName: '',
					level: 2,
					deptType: 1
				});
				if (data.code == 200) {
					data.data.forEach(function(item) {
						item.type = false;
					})
					self.collegeList = data.data;

					//检查管理
					for (let i = 0; i < data.data.length; i++) {
						self.collegeArray.push(data.data[i].deptName)
					}
				}
			},
			handleClick(row, doType) {
				let self = this;
				if (doType == 'subBtn') { //

				} else if (doType == 'detail') { //详情
					uni.redirectTo({
						url: '/pages_safetyExamine/views/dangerManage/dangerDetail?item=' + encodeURIComponent(JSON
							.stringify(row))
					})
				}

			},
			async getList() {
				let self = this;
				const {
					data
				} = await checkHazardAppList(this.getData);
				if (data.code == 200) {
					this.dataList = [...this.dataList, ...data.data.records]
					this.total = data.data.total;
				}
			},

		}
	}
</script>

<style lang="stylus" scoped>
	.examine {
		height: 100%;
		display flex;
		// padding: 0 30rpx;
		// box-sizing: border-box;
		padding-bottom: 20rpx;
		box-sizing: border-box;

		.blue_color {
			color: #0183FA;
			border: 1rpx solid #0183FA;
		}

		.red_color {
			color: #FF4545;
			border: 1rpx solid #FF4545;
		}

		.green_color {
			color: #1FA50D;
			border: 1rpx solid #1FA50D;
		}

		.orange_color {
			color: #FA8E1B;
			border: 1rpx solid #FA8E1B;
		}

		.gray_color {
			color: #A2A2A2;
			border: 1rpx solid #A2A2A2;
		}

		.null-img {
			display block;
			width: 276rpx;
			height: 321rpx;
			margin: 100rpx 0 0 274rpx;
		}

		.info-max-box {
			flex: 1;
			overflow: scroll;

			padding: 220rpx 0rpx 0;
			box-sizing: border-box;
		}

		/* 切换按钮 */
		.header {
			width: 100%;
			position: fixed;
			top: 0rpx;
			z-index: 100;

			.tabTitle_tow {
				width: 100%;
				height: 100rpx;
				background: #fff;
				display flex;
				justify-content: flex-start;
				align-items: center;
				border-bottom: 1rpx solid #E0E0E0;

				.tabTitle_tow_li {
					position: relative;
					width: 152rpx;
					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: 50rpx;
						display none;

						&.on {
							display block;
						}
					}

				}
			}

			.lab_title {
				width: 750rpx;
				height: 100rpx;
				background: #FFFFFF;
				padding: 20rpx 30rpx;
				box-sizing: border-box;
				display: flex;
				justify-content: flex-start;

				.lab_title_l {
					width: 250rpx;
					height: 60rpx;
					margin-right: 20rpx;

					.lab_title_l_n {
						width: 250rpx;
						height: 60rpx;
						border-radius: 10rpx;
						border: 1rpx solid #E0E0E0;
						display: flex;
						justify-content: flex-start;
						align-items: center;

						>view {
							flex: 1;
							line-height: 60rpx;
							margin-left: 20rpx;
							color: #999999;
							font-size: 28rpx;
							white-space: nowrap;
							overflow: hidden;
							text-overflow: ellipsis;
						}

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

				.lab_title_r {
					width: 420rpx;
					height: 60rpx;
					position: relative;
					border-radius: 10rpx;
					border: 1rpx solid #E0E0E0;

					.lab_title_r_btn {
						width: 60rpx;
						height: 60rpx;
						position: absolute;
						top: 0rpx;
						right: 0rpx;
						z-index: 100;

						>img {
							width: 20rpx;
							height: 20rpx;
							position: absolute;
							top: 20rpx;
							left: 24rpx;
						}
					}

					>input {
						width: 274rpx;
						height: 60rpx;
						position: absolute;
						top: 0rpx;
						left: 60rpx;
					}

					.clear {
						width: 60rpx;
						height: 60rpx;
						position: absolute;
						top: 0rpx;
						right: 20rpx;
						font-size: 30rpx;
						font-family: PingFang SC-Medium, PingFang SC;
						font-weight: 400;
						color: #0183FA;
						line-height: 60rpx;
					}
				}
			}

		}

		.list_three {
			padding: 0 30rpx;
			box-sizing: border-box;

			.list_three_li {
				position: relative;
				width: 690rpx;
				height: 320rpx;
				background: #fff;
				border-radius: 10rpx;
				overflow: hidden;
				margin-bottom: 20rpx;

				.list_three_li_t {
					width: 100%;
					position: absolute;
					left: 0;
					top: 0;

					.list_three_li_t_l {
						>img {
							width: 70rpx;
							height: 70rpx;
						}

						>text {
							position: absolute;
							left: -15rpx;
							top: 76rpx;
							display: inline-block;
							width: 30rpx;
							height: 30rpx;
							background: #F5F5F5;
							border-radius: 15rpx;
						}
					}

					.list_three_li_t_c {
						width: 580rpx;
						height: 110rpx;
						position: absolute;
						left: 30rpx;
						top: 0;
						font-size: 30rpx;
						font-family: PingFang SC-Medium, PingFang SC;
						font-weight: 400;
						color: #333333;
						line-height: 110rpx;
						border-bottom: 1rpx dashed #D8D8D8;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
						padding-right: 60rpx;
						box-sizing: border-box;
					}

					.list_three_li_t_c2 {
						position: absolute;
						right: 20rpx;
						top: 38rpx;
						width: 120rpx;
						height: 40rpx;
						font-size: 28rpx;
						font-family: PingFang SC-Medium, PingFang SC;
						font-weight: 400;
						color: #FF5757;
						line-height: 40rpx;
						border: 1rpx solid #FF5757;
						border-radius: 6rpx;
						text-align: center;
					}

					.list_three_li_t_r {
						position: absolute;
						right: -15rpx;
						top: 76rpx;
						width: 30rpx;
						height: 30rpx;
						background: #F5F5F5;
						border-radius: 15rpx;
					}
				}

				.list_three_li_m {
					position: absolute;
					top: 110rpx;
					left: 0;
					width: 690rpx;
					height: 158rpx;
					padding-left: 30rpx;
					box-sizing: border-box;

					.list_three_li_m_t {
						font-size: 28rpx;
						font-family: PingFang SC-Medium, PingFang SC;
						font-weight: 400;
						color: #666666;
						line-height: 40rpx;
						margin-top: 22rpx;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
					}

					.list_three_li_m_b {
						margin-top: 26rpx;

						>text:nth-of-type(1) {
							font-size: 26rpx;
							font-family: PingFang SC-Medium, PingFang SC;
							font-weight: 400;
							line-height: 40rpx;
							border-radius: 6rpx;
							padding: 0 20rpx;
							margin-right: 14rpx;
						}

						>text:nth-of-type(2) {
							font-size: 26rpx;
							font-family: PingFang SC-Medium, PingFang SC;
							font-weight: 400;
							color: #0183FA;
							line-height: 40rpx;
							padding: 0 8rpx;
							border-radius: 6rpx;
							background: rgba(1, 131, 250, 0.1);
							margin-right: 24rpx;
						}

						>text:nth-of-type(3) {
							display: inline-block;
							width: 180rpx;
							font-size: 26rpx;
							font-family: PingFang SC-Medium, PingFang SC;
							font-weight: 400;
							color: #333333;
							line-height: 26rpx;
							overflow: hidden;
							text-overflow: ellipsis;
							white-space: nowrap;

						}
					}
				}

				.list_three_li_b {
					height: 60rpx;
					width: 100%;
					position: absolute;
					top: 258rpx;
					left: 0;
					font-size: 28rpx;
					font-family: PingFang SC-Medium, PingFang SC;
					font-weight: 400;
					color: #666666;
					line-height: 60rpx;
					padding-left: 28rpx;
					box-sizing: border-box;
				}

			}
		}

	}
</style>