FE-V2-XCX/pages/pages_safetyExamine/examineManage/examineList.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="@/images/Version3.3.3/icon_06.png">
				</view>
			</picker>
			<view class="lab_title_r">
				<view class="lab_title_r_btn" @click="searchBtn">
					<img src="@/images/Version3.3.3/icon_aqjc_ss.png"/>
				</view>
				<input type="text" v-model="getData.searchValue" placeholder="计划标题/实验室/房间号" maxlength="50" placeholder-style="color: #CCCCCC;font-size:22rpx;">
				<view class="clear" @click="clearBtn">清除</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">
				<view class="list_three_li_t">
					<view class="list_three_li_t_l">
						<img src="@/images/Version3.3.3/icon_xyxc_qx.png"/>
						<text></text>
					</view>
					<view class="list_three_li_t_c">{{item.subjectName}}-{{item.roomNumber}}</view>
					<view class="list_three_li_t_c2"  v-if="item.isOverdue==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="blue_color" v-if="item.manageStatus==0">待检查</text>
						<text class="red_color" v-if="item.manageStatus==1">检查中</text>
						<text class="green_color" v-if="item.manageStatus==2">已检查</text>
						<text>{{item.checkType==1?'校院巡查':'实验室自查'}}</text>
						<text>{{item.collegeName}}</text>
					</view>
				</view>
				<!-- 开始检查 -->
				<view v-if="item.manageStatus==0 && item.notStarted" class="list_three_li_b" @click="handleClick(item,'add')">开始检查</view>
				<view v-if="item.manageStatus==1" class="list_three_li_b" @click="handleClick(item,'edit')">编辑</view>
				<view v-if="!item.notStarted" class="list_three_li_b_tow"><img src="@/images/Version3.3.3/icon_xyxcgl_jhwks.png"/>计划未开始</view>
				<view v-if="item.manageStatus==2" class="list_three_li_b_three">
					<img src="@/images/Version3.3.3/icon_djcsys.png"/>
					<text>整改进度：</text>
					<text>{{item.rectifySchedule}}</text>
					<text class="report">整改报告</text>
				</view>
			</view>
		</view>
	</scroll-view>	
	<view class="bottom_btn" @click="handleClick('startInspect')">开始检查</view>
  </view>

</template>

<script>
import { config } from '@/api/request/config.js'
import {checkManageList,conditionCollegeInfo} from '@/api/index.js'
export default {
  name: "rectifyList",
  components: {
   
  },
  data() {
    return {
		pageType:0,
		//列表请求参数
		getData:{
			pageNum:1,
			pageSize:20,
		    checkType:'',//检查类型(0全部1校院巡查2实验室自查)
			manageStatus:'',//管理状态(-1全部 0待检查，1检查中，2已检查)
			searchValue:'',
		},
		tabTextTow:['全部','待检查','检查中','已检查'],
		curTabTow:0,
		form:{
			name:'',
			type:'校院巡查',
			startTime:'',
			endTime:'',
			inspectScope:[],
			tiemQuickList:[],
			scopeIndex:'',
			seleteListLab:[],
			patrolIndex:'',
			seleteListMember:[],
		},
		collegeList:[],
		collegeIndex :0,
		collegeArray:[],
		dataList:[],
		currentDate:'',
	}
  },
  onLoad(option) {
	 if(option.pageType==1){
	 		  this.getData.checkType=option.pageType
	 		  uni.setNavigationBarTitle({
	 		  		title:'校院巡查'
	 		  })
	 }else if(option.pageType==2){
	 		   this.getData.checkType=option.pageType
	 		  uni.setNavigationBarTitle({
	 		  		title:'实验室自查'
	 		  })
	 }
  },
  onShow() {
	 //获取当前日期
	 this.currentDate=this.getNowFormatDate() 
  },
  mounted(){
	 
	  this.getList(); 
	  this.conditionCollegeInfo();
	  
  },
  methods: {
		//顶部tab点击
		tabClickTow(index) {
			this.curTabTow = index;
			this.getData.pageNum=1;
			this.dataList=[];
			if(index==0){
				this.getData.manageStatus=-1;
			}else if(index==1){
				this.getData.manageStatus=0;
			}else if(index==2){
				this.getData.manageStatus=1;
			}else if(index==3){
				this.getData.manageStatus=2;
			}
			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.pageNum=1;
			  this.collegeIndex=0;
			  this.getData.deptId='';
			  this.getData.deptName='';
			  this.getData.searchValue='';
			  this.dataList=[];
			  this.getList();
		},
		//滚动事件
		scrollGet(){
			let self=this;
			if(this.pageType==1){//当页面切换到检查管理列表里的时候
				if(self.total/self.getData.pageSize<=self.getData.pageNum){
				    console.log('没有更多数据!')
				}else{
						setTimeout(function(){
							self.getData.pageNum += 1;
							self.getList(); 
						},1000)
							 
				}
			}
			
		},
		//查询学院列表
		async conditionCollegeInfo(){
			let _this = this;
			const {data} = await conditionCollegeInfo();
			if(data.code == 200){
				data.data.forEach(function(item){
					item.type=false;
				})
				_this.collegeList=data.data;
				
				//检查管理
				for(let i=0;i<data.data.length;i++){
					_this.collegeArray.push(data.data[i].deptName)
				}
			}
		},
	    handleClick(row,doType){
		  let self=this;
		  if( doType=='add'){//开始检查	
			  uni.navigateTo({
			      url: '/pages/pages_safetyExamine/examineManage/examineAdd?id='+row.id
			  });
		  }else if(doType=='edit'){
			  uni.navigateTo({
			      url: '/pages/pages_safetyExamine/examineManage/examineAdd?id='+row.id
			  });
		  }
		  
	    },
		//获取当前日期函数
		getNowFormatDate() {
		  let date = new Date(),
		    year = date.getFullYear(), //获取完整的年份(4位)
		    month = date.getMonth() + 1, //获取当前月份(0-11,0代表1月)
		    strDate = date.getDate() // 获取当前日(1-31)
		  if (month < 10) month = `0${month}` // 如果月份是个位数，在前面补0
		  if (strDate < 10) strDate = `0${strDate}` // 如果日是个位数，在前面补0
		 
		  return `${year}-${month}-${strDate}`
		},
		//是否可以开始检查
		compareTime(date1){
		        if(!date1){
				   return false
			    } else {
				   const oDate1 = new Date(date1);
				   const oDate2 = new Date(this.currentDate)
					   
				   if(oDate1.getTime() <= oDate2.getTime()){
					   return true; //可以开始
				   } else {
					   return false; //不能开始
				   }
			    }   
		},
		async getList(){
			let self = this;
			const {data} = await checkManageList(this.getData);
			if(data.code==200){
				//判断计划是否开始
				data.data.records.forEach(function(item){
					item.notStarted=self.compareTime(item.cycleStartTime)
				})
				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: 126rpx;
	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;
	}
	
	.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:146rpx;
				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: 46rpx;
					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;
					left: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: 360rpx;
			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: 630rpx;
					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: 120rpx;
					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;
				}
				.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: 350rpx;
						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: 80rpx;
				width: 100%;
				position: absolute;
				top: 278rpx;
				left: 0;
				border-top: 1rpx solid #E0E0E0;
				font-size: 28rpx;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 400;
				color: #0183FA;
				line-height: 80rpx;
				text-align: center;
			}
			.list_three_li_b_tow{
				height: 80rpx;
				width: 100%;
				position: absolute;
				top: 278rpx;
				left: 0;
				border-top: 1rpx solid #E0E0E0;
				font-size: 28rpx;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 400;
				color: #0183FA;
				line-height: 80rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				>img{
					width: 28rpx;
					height: 30rpx;
					margin-right: 12rpx;
				}
			}
			.list_three_li_b_three{
				height: 80rpx;
				position: absolute;
				top: 278rpx;
				left: 0;
				display: flex;
				justify-content: flex-start;
				align-items: center;
				width: 100%;
				border-top: 1rpx solid #E0E0E0;
				>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){
					flex:1;
					font-size: 28rpx;
					font-family: PingFang SC-Medium, PingFang SC;
					font-weight: 400;
					color: #0183FA;
					line-height: 28rpx;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
				}
				.report{
					font-size: 28rpx;
					font-family: PingFang SC-Medium, PingFang SC;
					font-weight: 400;
					color: #0183FA;
					line-height: 28rpx;
					margin-right: 40rpx;
				}
			}
		}
	}
	.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;
		
	}
	/* 指纹采集 */
	.shade {
	  height: 100%;
	  width: 100%;
	  position: fixed;
	  display: flex;
	  flex-direction: column;
	  z-index: 10;
	  background: rgba(0, 0, 0, 0.2);
	  .null-box {
		flex: 1;
	  }
	  .shade_n {
		  position: absolute;
		  bottom: 0;
		  left: 0;
		  width: 750rpx;
		  height: 560rpx;
		  background: #FFFFFF;
		  border-radius: 20rpx 20rpx 0rpx 0rpx;
		  .shade_n_title{
			  height: 100rpx;
			  padding: 0 30rpx;
			  box-sizing: border-box;
			  display: flex;
			  justify-content:space-between;
			  border-bottom: 1rpx solid #E0E0E0;
			  >text:nth-of-type(1){
				  font-size: 30rpx;
				  font-family: PingFang SC-Medium, PingFang SC;
				  font-weight: 400;
				  color: #333333;
				  line-height: 100rpx;
			  }
			  >text:nth-of-type(2){
				  font-size: 30rpx;
				  font-family: PingFang SC-Medium, PingFang SC;
				  font-weight: 400;
				  color: #0183FA;
				  line-height: 100rpx;
				  
			  }
		  }
		  .shade_n_b{
			  height: 460rpx;
			  padding: 0 30rpx;
			  box-sizing: border-box;
			  overflow-y: auto;
			  .shade_n_b_li{
				   display: flex;
				   justify-content:space-between;
				   align-items: center;
				   height: 80rpx;
				   border-bottom: 1rpx solid #E0E0E0;
				 >text{
					font-size: 28rpx;
					font-family: PingFang SC-Medium, PingFang SC;
					font-weight: 400;
					line-height: 80rpx;
					overflow: hidden;
					text-overflow:ellipsis;
					white-space: nowrap;
				 }
				 >img{
					 width: 24rpx;
					 height: 16rpx;
					 margin-right: 14rpx;
				 } 
			  }
			  .color_A{
				  color: #333333;
			  }
			  .color_B{
				  color: #0183FA;
			  }
			  
			 
		  }
	  }
	}
}
</style>