FE-V2-XCX/pages/pages_safetyExamine/patrolPlan/patrolPlanAdd.vue

<!-- 安全检查-发起巡查计划 -->
<template>
  <view class="examine">
	<scroll-view scroll-y @scrolltolower="scrollGet" class="info-max-box">
		<view class="basics">
			<view class="title">
				<view class="title_t">计划标题</view>
				<textarea class="title_b" type="text" v-model="form.name" maxlength="200" placeholder="请输入检查计划标题" placeholder-style="color:#999999;font-size:30rpx;"></textarea>
			</view>
			<view class="type">
				<view class="type_l">检查类型</view>
				<input class="type_r" type="text" v-model="form.type" placeholder="" disabled maxlength="20">
			</view>
			<view class="period">		
				<view class="period_l">检查周期</view>
				<view class="period_r">
					<picker mode="date" @change="startChange(form,$event)">
						<input class="picker-text"  disabled type="text" v-model="form.startTime" placeholder="开始时间">
					</picker>
					<view>至</view>
					<picker mode="date"  @change="endChange(form,$event)">
						<input class="picker-text2" disabled type="text" v-model="form.endTime" placeholder="结束时间">
					</picker>
				</view>
			</view>
			<view class="tiem_quick">
				<view @click="tiemQuick(index)" :class="item.type?'tiem_quick_a':'tiem_quick_b'" v-for="(item,index) in tiemQuickList">{{item.name}}</view>
			</view>
			<view class="scope">
				<view class="scope_l">检查范围</view>
				<picker @change="scopeChange" :value="scopeIndex" :range="scopeArray" class="scope_r">
					<view class="scope_r_n">
						<view>{{scopeArray[scopeIndex]}}</view>
						<img src="@/images/Version3.3.3/icon_06.png">
					</view>
				</picker>
			</view>
			<view class="scope_btn" v-if="scopeIndex==1 || scopeIndex==2" @click="collegeOrLab()">{{scopeIndex==1?'选择学院':'选择实验室'}}</view>
			<view class="scope_text" v-if="scopeIndex==0 || scopeIndex==1">已选择<text>{{form.inspectScope.length}}</text>个学院，共<text>0</text>间实验室</view>
			<view class="scope_text" v-if="scopeIndex==2">已选择<text>{{form.seleteListLab.length}}</text>间实验室</view>
		</view>
		<view class="patrol_group">
			<view class="patrol">
				<view class="patrol_l">巡查组</view>
				<picker @change="patrolChange" :value="patrolIndex" :range="patrolArray" class="patrol_r">
					<view class="patrol_r_n">
						<view>{{patrolArray[patrolIndex]}}</view>
						<img src="@/images/Version3.3.3/icon_06.png">
					</view>
				</picker>
			</view>
			<view class="list">
				<view class="list_title"><img src="@/images/Version3.3.3/icon_jcjh_cy.png">成员</view>
				<view class="list_header"><text>工号</text><text>姓名</text></view>
				<view class="list_li"><text>12345678</text><text>刘洋</text></view>
				<view class="list_li"><text>12345678</text><text>刘洋</text></view>
				<view class="list_li"><text>12345678</text><text>刘洋</text></view>
				<view class="list_bottom">无数据</view>
			</view>
		</view>
	</scroll-view>	
	<view class="bottom_btn" @click="handleClick('subBtn')">保存</view>
	 <!-- 选择学院-->
	<view class="shade" v-if="dialogVisible">
		<view class="null-box" @click="dialogClose()"></view>
		<view class="shade_n">
			<view class="shade_n_title"><text>选择学院</text><text @click="collegeConfirm">确定</text></view>
			<view class="shade_n_b">
				<view class="shade_n_b_li" v-for="(item,index) in  collegeList" :key="index" @click="collegeSelete(index)">
					<text :class="item.type?'color_B':'color_A'">{{item.name}}</text>
					<img v-if="item.type" src="@/images/Version3.3.3/icon_xzwt_xz.png">
				</view>
			</view>
		</view>
	  </view>
  </view>

</template>

<script>
import { config } from '@/api/request/config.js'
import { } from '@/api/index.js'
export default {
  name: "rectifyList",
  components: {
   
  },
  data() {
    return {
		pageType:0,
		//列表请求参数
		getData:{
		 pageNum:1,
		 pageSize:20,
		},
		form:{
			name:'',
			type:'校院巡查',
			startTime:'',
			endTime:'',
			inspectScope:[],
			tiemQuickList:[],
			scopeIndex:'',
			seleteListLab:[],
			patrolIndex:'',
			seleteListMember:[],
		},
		tiemQuickList:[{name:'本月',type:false},{name:'本季度',type:false},{name:'全年',type:false}],
		scopeIndex:0,
		scopeArray:['全校','学院','实验室'],
		patrolIndex:0,
		patrolArray:['请选择巡查组','校级巡查组','院级巡查组'],
		dialogVisible:false,
		collegeList:[{name:'学院名称',type:false},{name:'学院名称',type:false},{name:'学院名称',type:false},{name:'学院名称',type:false},{name:'学院名称',type:false},{name:'学院名称',type:false},]
	  
	}
  },
  onLoad(option) {
	 if(option.form){
		this.form=JSON.parse(decodeURIComponent(option.form)); 
		this.tiemQuickList=this.form.tiemQuickList//时间快捷
		this.scopeIndex=this.form.scopeIndex//检查范围
		this.patrolIndex=this.form.patrolIndex//巡查组
		console.log(this.form)
	 }
  },
  onShow() {
	  
  },
  mounted(){
	  
  },
  methods: {
		//滚动事件
		scrollGet(){
		},
		//顶部tab点击
		tabClick(index) {
			this.curTab = index;
		},
	    //开始时间选中事件
		startChange(form,e){
			if(new Date(e.target.value).getTime()>=new Date(form.endTime).getTime()){
				 uni.showToast({
					title: '结束时间不能小于开始时间',
					icon:"none",
					mask:true,
					duration: 2000
				});
			}else{
				form.startTime=e.target.value
			}
		},
	    //结束时间选中事件
		endChange(form,e){
			if(new Date(form.startTime).getTime()>=new Date(e.target.value).getTime()){
				 uni.showToast({
					title: '结束时间不能小于开始时间',
					icon:"none",
					mask:true,
					duration: 2000
				});
			}else{
				form.endTime=e.target.value
			}
		},
		//检查周期快捷
		tiemQuick(index){
			this.tiemQuickList[index].type = !this.tiemQuickList[index].type
			let _this = this;
			if (_this.tiemQuickList[index].type == true) {
				_this.tiemQuickList.forEach(function(item2) {
				  if (item2.name == _this.tiemQuickList[index].name) {
					item2.type = true
				  } else {
					item2.type = false
				  }
				})
				//快捷本月-本季度-全年
				_this.timeSlotChange(_this.tiemQuickList[index].name)
			}else{
				console.log('取消选中')
				_this.form.startTime='';
				_this.form.endTime='';
			}
			
		},
		//检查范围
		scopeChange(e){
			uni.showModal({
				content: '重新选择会删除现有选择的实验室,是否重选?',
				cancelColor:"#999",
				confirmColor:"#0183FA",
				success: function (res) {
				  if (res.confirm) {
					this.scopeIndex = e.target.value;
					this.form.inspectScope=[]
				  } else if (res.cancel) {
					  
				  }
				}
			});
		},
		timeSlotChange (val) {
			  let _this=this;	
		      let startTime, endTime;
		      let now = new Date(); //当前日期 
		      let nowDayOfWeek = now.getDay(); //今天本周的第几天 
		      let nowDay = now.getDate(); //当前日 
		      let nowMonth = now.getMonth(); //当前月 
		      let nowYear = now.getFullYear(); //当前年 
		      let jd=Math.ceil((nowMonth + 1) / 3)
		      switch (val) {
		        case "本周":
		          startTime = new Date(nowYear, nowMonth, nowDay - nowDayOfWeek)
		          endTime = new Date(nowYear, nowMonth, nowDay + 6 - nowDayOfWeek)
		          break;
		        case "本月":
		          startTime = new Date(nowYear, nowMonth, 1)
		          endTime = new Date(nowYear, nowMonth + 1, 0)
		          break;
		        case "本季度":
		          startTime = new Date(nowYear, (jd-1)*3, 1)
		          endTime = new Date(nowYear, jd*3, 0)
		          break
		          case "全年":
		          startTime = new Date(nowYear, 0, 1)
		          endTime = new Date(nowYear, 11, 31)
		          break
		      }
			  _this.form.startTime=_this.formatDateTime(startTime)
			  _this.form.endTime=_this.formatDateTime(endTime)
		},
		// 中国标准时间 转换成 年月日
		 formatDateTime (date) {
		  var y = date.getFullYear();
		  var m = date.getMonth() + 1;
		  m = m < 10 ? ('0' + m) : m;
		  var d = date.getDate();
		  d = d < 10 ? ('0' + d) : d;
		  var h = date.getHours();
		  var minute = date.getMinutes();
		  minute = minute < 10 ? ('0' + minute) : minute;
		  // return y + '-' + m + '-' + d+' '+h+':'+minute;
		  return y + '-' + m + '-' + d
		},
		//巡查组
		patrolChange(e){
			console.log(e)
			this.patrolIndex = e.target.value;
			this.form.tiemQuickList=this.tiemQuickList//检查周期快捷存储
			this.form.scopeIndex=this.scopeIndex//检查范围
			this.form.patrolIndex=this.patrolIndex//巡查组
			if(this.patrolIndex==1){//校级巡查组
				uni.navigateTo({
				    url: '/pages/pages_safetyExamine/patrolPlan/patrolPlanAddMember?form='+encodeURIComponent(JSON.stringify(this.form))
				});
			}else if(this.patrolIndex==2){//院级巡查组
				uni.navigateTo({
				    url: '/pages/pages_safetyExamine/patrolPlan/patrolPlanAddMember?form='+encodeURIComponent(JSON.stringify(this.form))
				});
			}
		},
		//选择学院或者实验室
		collegeOrLab(){
			console.log(this.scopeIndex)
			if(this.scopeIndex==1){//学院
				this.dialogVisible=true;
			}else if(this.scopeIndex==2){//实验室
			    this.form.tiemQuickList=this.tiemQuickList//检查周期快捷存储
			    this.form.scopeIndex=this.scopeIndex//检查范围
				uni.navigateTo({
				    url: '/pages/pages_safetyExamine/patrolPlan/patrolPlanAddLab?form='+encodeURIComponent(JSON.stringify(this.form))
				});
			}
		},
		//选择学院弹窗关闭
		dialogClose(){
		   this.dialogVisible=false;
	    },
		//选择学院确定
		collegeConfirm(){
			let _this=this;
			this.dialogVisible=false;
			let list=[];
			_this.collegeList.forEach(function(item){
				if(item.type==true){
					list.push(item)
				}
			})
			_this.form.inspectScope=list;
		},
		//学院选择
		collegeSelete(index){
			this.collegeList[index].type = !this.collegeList[index].type
		},
	    handleClick(doType){
		  let self=this;
		  
		  if( doType=='subBtn'){//	
			  console.log(11)
		  }
		  
	    },
	  
  }
}
</script>

<style lang="stylus" scoped>
.examine{
	height:100%;
	display flex;
	// padding: 0 30rpx;
	// box-sizing: border-box;
	padding-bottom: 126rpx;
	box-sizing: border-box;
	.info-max-box{
		flex: 1;
		overflow: scroll;
		
		padding: 0 30rpx;
		box-sizing: border-box;
	}
	.basics{
		width: 690rpx;
		background: #FFFFFF;
		border-radius: 20rpx;
		margin-top: 20rpx;
		padding: 60rpx 26rpx 32rpx;
		box-sizing: border-box;
		.title{
			.title_t{
				font-size: 30rpx;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 400;
				color: #333333;
				line-height: 42rpx;
				margin-bottom: 12rpx;
			}
			.title_b{
				width: 636rpx;
				height: 150rpx;
				border-radius: 10rpx;
				opacity: 1;
				border: 1rpx solid #E0E0E0;
				padding: 26rpx 23rpx;
				box-sizing: border-box;
			}
		}
		.type{
			display: flex;
			justify-content: flex-start;
			align-items: center;
			margin-top: 20rpx;
			.type_l{
				width: 146rpx;
				font-size: 30rpx;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 400;
				color: #333333;
				line-height: 42rpx;
				text-align: left;
			}
			.type_r{
				width: 490rpx;
				height: 80rpx;
				border-radius: 10rpx;
				padding-left:22rpx;
				box-sizing: border-box;
                background: #F5F5F5;				
			}
		}
		.period{
			display: flex;
			justify-content: flex-start;
			align-items: center;
			margin-top: 26rpx;
			.period_l{
				width: 146rpx;
				font-size: 30rpx;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 400;
				color: #333333;
				line-height: 42rpx;
				text-align: left;
			}
			.period_r{
				width: 490rpx;
				height: 80rpx;
				border-radius: 10rpx;
				border: 1rpx solid #E0E0E0;
				display: flex;
				justify-content: flex-start;
				align-items: center;
				.picker-text{
					font-size: 30rpx;
					font-family: PingFang SC-Medium, PingFang SC;
					font-weight: 400;
					color: #999999;
					line-height: 80rpx;
					width: 230rpx;
					text-align: center;
				}
				.picker-text2{
					font-size: 30rpx;
					font-family: PingFang SC-Medium, PingFang SC;
					font-weight: 400;
					color: #999999;
					line-height: 80rpx;
					width: 230rpx;
					text-align: center;
				}
			}
		}
		.tiem_quick{
			margin-left: 146rpx;
			display: flex;
			justify-content: flex-start;
			margin-top: 20rpx;
			>view{
				width: 130rpx;
				height: 80rpx;
				opacity: 1;
				border: 1rpx solid #E0E0E0;
				font-size: 30rpx;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 400;
				line-height: 80rpx;
				text-align: center;
			}
			>view:nth-of-type(1){
				border-radius: 10rpx 0rpx 0rpx 10rpx;
			}
			>view:nth-of-type(3){
				border-radius: 0rpx 10rpx 10rpx 0rpx;
			}
			.tiem_quick_a{
				background: #0183FA;
				color: #FFFFFF;
				
			}
			.tiem_quick_b{
				background: #F5F5F5;
				color: #333333;
			}
		}
		.scope{
			display: flex;
			justify-content: flex-start;
			align-items: center;
			margin-top: 26rpx;
			.scope_l{
				width: 146rpx;
				font-size: 30rpx;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 400;
				color: #333333;
				line-height: 42rpx;
				text-align: left;
			}
			.scope_r{
				flex: 1;
				.scope_r_n{
					width: 490rpx;
					height: 80rpx;
					border-radius: 10rpx;
					border: 1rpx solid #E0E0E0;
					display: flex;
					justify-content: flex-start;
					align-items: center;
					>view{
						flex:1;
						line-height:80rpx;
						margin-left:20rpx;
						color: #999999;
						font-size:28rpx;
					}
					>img{
						width: 14rpx;
						height: 8rpx;
						margin-right: 30rpx;
					}
				}
			}
		}
		.scope_btn{
			display: inline-block;
			background: #0183FA;
			border-radius: 10rpx;
			font-size: 30rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 400;
			color: #FFFFFF;
			line-height: 80rpx;
			text-align: center;
			padding: 0 16rpx;
			box-sizing: border-box;
			margin-top: 40rpx;
			margin-left: 146rpx;
		}
		.scope_text{
			margin-left: 146rpx;
			font-size: 30rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 400;
			color: #333333;
			margin-top: 32rpx;
			line-height: 42rpx;
			>text{
				color: #0183FA;
			}
		}
	}
	.patrol_group{
		width: 690rpx;
		background: #FFFFFF;
		border-radius: 20rpx;
		margin-top: 20rpx;
		padding: 40rpx 30rpx 64rpx;
		box-sizing: border-box;
		.patrol{
			display: flex;
			justify-content: flex-start;
			align-items: center;
			margin-top: 26rpx;
			.patrol_l{
				width: 146rpx;
				font-size: 30rpx;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 400;
				color: #333333;
				line-height: 42rpx;
				text-align: left;
			}
			.patrol_r{
				flex: 1;
				.patrol_r_n{
					width: 490rpx;
					height: 80rpx;
					border-radius: 10rpx;
					border: 1rpx solid #E0E0E0;
					display: flex;
					justify-content: flex-start;
					align-items: center;
					>view{
						flex:1;
						line-height:80rpx;
						margin-left:20rpx;
						color: #999999;
						font-size:28rpx;
					}
					>img{
						width: 14rpx;
						height: 8rpx;
						margin-right: 30rpx;
					}
				}
			}
		}
		.list{
			margin-top: 42rpx;
			.list_title{
				display: flex;
				justify-content: flex-start;
				align-items: center;
				height: 80rpx;
				background: #F5F5F5;
				border-radius: 10rpx 10rpx 0rpx 0rpx;
				font-size: 30rpx;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 400;
				color: #333333;
				line-height: 80rpx;
				>img{
					width: 30rpx;
					height: 30rpx;
					margin: 0 20rpx;
				}
			}
			.list_header{
				display: flex;
				justify-content: flex-start;
				>text{
					flex: 1;
					height: 80rpx;
					background: #F5F5F5;
					font-size: 30rpx;
					font-family: PingFang SC-Medium, PingFang SC;
					font-weight: 400;
					color: #333333;
					line-height: 80rpx;
					text-align: center;
					border: 1rpx solid #E0E0E0;
				}
				>text:nth-of-type(1){
					border-right: none;
				}
			}
			.list_li{
				display: flex;
				justify-content: flex-start;
				>text{
					flex: 1;
					height: 80rpx;
					font-size: 30rpx;
					font-family: PingFang SC-Medium, PingFang SC;
					font-weight: 400;
					color: #333333;
					line-height: 80rpx;
					text-align: center;
					border: 1rpx solid #E0E0E0;
				}
				>text:nth-of-type(1){
					border-right: none;
					border-top: none;
				}
				>text:nth-of-type(2){
					border-top: none;
				}
			}
			.list_bottom{
				flex: 1;
				height: 80rpx;
				font-size: 30rpx;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 400;
				color: #999999;
				line-height: 80rpx;
				text-align: center;
				border: 1rpx solid #E0E0E0;
				border-top: none;
			}
		}
	}
	.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>