v3-lab-xcx/pages_safetyExamine/views/patrolPlan/patrolPlanList.vue

<!-- 安全检查-发起巡查计划 -->
<template>
	<view class="examine">
		<view class="tabTitle">
			<view class="tabTitle_li" @tap="tabClick(index)" :key="index" v-for="(item,index) in tabText">
				<view :class="{on:curTab==index}" class="tabTitle_text">{{item}}</view>
				<view :class="{on:curTab==index}" class="tabTitle_across"></view>
			</view>
		</view>
		<scroll-view scroll-y @scrolltolower="scrollGet" class="info-max-box">
			<view>
				<view class="search">
					<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 class="search_btn" v-if="getData.searchValue>0" @click="clearBtn">
						<img src="@/pages_safetyExamine/images/clear.png" />
					</view>
				</view>
				<view class="list">
					<view class="list_li" v-for="(item,index) in  dataList" :key="index"
						@click="handleClick(item,'edit')">
						<view class="list_li_t">
							<view class="list_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_li_t_c">{{item.title}}</view>
							<view class="list_li_t_c2" v-if="item.isOverdue==1">已逾期</view>
							<view class="list_li_t_r"></view>
						</view>
						<view class="list_li_m">
							<view class="list_li_m_t">计划周期:{{item.cycleStartTime}}至{{item.cycleEndTime}}</view>
							<view class="list_li_m_b">
								<text class="blue_color" v-if="item.checkStatus==1">未开始</text>
								<text class="red_color" v-if="item.checkStatus==2">进行中</text>
								<text class="green_color" v-if="item.checkStatus==3">已结束</text>
								<text>{{item.checkType==1?'校院巡查':'实验室自查'}}-专项检查</text>
							</view>
						</view>
						<view class="list_li_b">
							<img src="@/pages_safetyExamine/images/icon_djcsys.png" />
							<text v-if="item.checkStatus==1">待检查实验室：</text>
							<text v-if="item.checkStatus==1">{{item.subjectNum}}间</text>
							<text v-if="item.checkStatus==2 || item.checkStatus==3">检查进度：</text>
							<text v-if="item.checkStatus==2 || item.checkStatus==3">{{item.checkSchedule}}间</text>
						</view>
					</view>
				</view>
			</view>
			<img class="null-img" v-if="!dataList[0]" src="@/pages_safetyExamine/images/null-data-1.png">
		</scroll-view>
		<view class="bottom_btn" @click="handleClick('','subBtn')">{{subBtnTitle}}</view>
	</view>

</template>

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

		},
		data() {
			return {
				pageType: 0,
				//列表请求参数
				getData: {
					pageNum: 1,
					pageSize: 20,
					searchValue: '',
					checkType: '',
				},
				total: 0,
				tabText: ['全部', '未开始', '进行中', '已结束'],
				curTab: 0,
				dataList: [],
				subBtnTitle: '发起巡查计划',
			}
		},
		onLoad(option) {
			console.log(option.pageType)
			if (option.pageType == 1) {
				this.getData.checkType = option.pageType
				uni.setNavigationBarTitle({
					title: '校院巡查计划'
				})
				this.subBtnTitle = '发起巡查计划';
			} else if (option.pageType == 2) {
				this.getData.checkType = option.pageType
				uni.setNavigationBarTitle({
					title: '实验室自查计划'
				})
				this.subBtnTitle = '发起自查计划';
			}

		},
		onShow() {
			this.dataList = [];
			this.getList();
		},
		mounted() {

		},

		methods: {
			//实验室搜索
			searchBtn() {
				this.dataList = [];
				this.getList();
			},
			//清除按钮
			clearBtn() {
				this.getData.pageNum = 1;
				this.getData.searchValue = '';
				this.dataList = [];
				this.getList();
			},
			//滚动事件
			scrollGet() {
				let self = this;
				if (self.total / self.getData.pageSize <= self.getData.pageNum) {
					console.log('没有更多数据!')
				} else {
					setTimeout(function() {
						self.getData.pageNum += 1;
						self.getList();
					}, 1000)

				}
			},

			//顶部tab点击
			tabClick(index) {
				this.curTab = index;
				this.getData.pageNum = 1;
				this.dataList = [];
				this.getData.checkStatus = index;
				this.getList()
			},
			handleClick(row, doType) {
				let self = this;

				if (doType == 'subBtn') { //发起巡查计划
					uni.navigateTo({
						url: '/pages_safetyExamine/views/patrolPlan/patrolPlanAdd?pageType=' + this.getData
							.checkType
					});
				} else if (doType == 'edit') { //编辑
					uni.navigateTo({
						url: '/pages_safetyExamine/views/patrolPlan/patrolPlanEdit?pageType=' + row.checkType +
							'&id=' + row.id
					});
				}

			},
			async getList() {
				let self = this;
				const {
					data
				} = await checkPlanList(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;

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

		.info-max-box {
			flex: 1;
			overflow: scroll;
			padding-bottom: 128rpx;
			padding-top: 100rpx;
		}

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

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

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

		/* 切换按钮 */
		.tabTitle {
			width: 100%;
			height: 100rpx;
			background: #fff;
			display flex;
			justify-content: flex-start;
			align-items: center;
			position: fixed;
			top: 0;
			z-index: 100;

			.tabTitle_li {
				position: relative;
				width: 146rpx;
				text-align center;

				.tabTitle_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_across {
					width: 50rpx;
					height: 4rpx;
					background: #0183FA;
					border-radius: 2rpx;
					margin-left: 46rpx;
					display none;

					&.on {
						display block;
					}
				}

			}
		}

		.search {
			width: 750rpx;
			height: 100rpx;
			background: #FFFFFF;
			padding: 20rpx 30rpx;
			box-sizing: border-box;
			position: relative;
			margin-top: 20rpx;

			>input {
				position: absolute;
				top: 20rpx;
				left: 30rpx;
				width: 690rpx;
				height: 60rpx;
				border-radius: 50rpx;
				opacity: 1;
				border: 1rpx solid #E0E0E0;
				padding: 0 74rpx 0 30rpx;
				box-sizing: border-box;
			}

			.search_btn {
				width: 70rpx;
				height: 60rpx;
				position: absolute;
				top: 20rpx;
				right: 30rpx;
				z-index: 200;

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

		.list {
			padding: 0 30rpx;
			box-sizing: border-box;
			margin-top: 20rpx;

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

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

					.list_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_li_t_c {
						width: 570rpx;
						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_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_li_t_r {
						position: absolute;
						right: -15rpx;
						top: 76rpx;
						width: 30rpx;
						height: 30rpx;
						background: #F5F5F5;
						border-radius: 15rpx;
					}
				}

				.list_li_m {
					position: absolute;
					top: 110rpx;
					left: 0;
					width: 690rpx;
					height: 168rpx;
					border-bottom: 1rpx solid #E0E0E0;
					padding-left: 30rpx;
					box-sizing: border-box;

					.list_li_m_t {
						font-size: 28rpx;
						font-family: PingFang SC-Medium, PingFang SC;
						font-weight: 400;
						color: #666666;
						line-height: 40rpx;
						margin-top: 22rpx;
					}

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

				.list_li_b {
					height: 80rpx;
					position: absolute;
					top: 278rpx;
					left: 0;
					display: flex;
					justify-content: flex-start;
					align-items: center;

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

					>text:nth-of-type(1) {
						font-size: 28rpx;
						font-family: PingFang SC-Medium, PingFang SC;
						font-weight: 400;
						color: #333333;
						line-height: 28rpx;
					}

					>text:nth-of-type(2) {
						font-size: 28rpx;
						font-family: PingFang SC-Medium, PingFang SC;
						font-weight: 400;
						color: #0183FA;
						line-height: 28rpx;
					}
				}
			}
		}

		.bottom_btn {
			position: fixed;
			bottom: 26rpx;
			left: 30rpx;
			font-size: 30rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 400;
			color: #FFFFFF;
			line-height: 90rpx;
			width: 690rpx;
			height: 90rpx;
			background: #0183FA;
			border-radius: 20rpx;
			text-align: center;

		}

	}
</style>