FE-V2-XCX/pages/pages_safetyExamine/examineManage/examineAdd.vue

<!-- 安全检查-开展检查 -->
<template>
  <view class="examine">
	<scroll-view scroll-y @scrolltolower="scrollGet" class="info-max-box">
		<view class="basics">
			<view class="basics_li">
				<view class="basics_li_l">实验室</view>
				<view class="basics_li_r lab_r">
					<input class="picker-text" @click="popupClick(1)" type="text" disabled v-model="form.subjectName" placeholder="请选择房间" placeholder-style="font-size: 30rpx;color:#333;">
					<view class="img-box" @click.stop="saoCode">
						<img src="@/images/Version3.3.3/icon_aqjc_sm.png">
					</view>
				</view>
			</view>
			<view class="basics_li">
				<view class="basics_li_l">学院</view>
				<picker @change="collegeChange" :value="collegeIndex" :range="collegeArray" class="scope_r">
					<view class="basics_li_r college_r">
						<view>{{form.collegeName?form.collegeName:'选择学院'}}</view>
						<img src="@/images/Version3.3.3/icon_06.png">
					</view>
				</picker>
			</view>
			<view class="basics_li">
				<view class="basics_li_l">楼栋</view>
				<view class="basics_li_r building_r">
					<input class="picker-text"  type="text" disabled v-model="form.buildName" placeholder="选择实验室后自动匹配" placeholder-style="font-size: 30rpx;color:#333;">
				</view>
			</view>
			<view class="basics_li">
				<view class="basics_li_l">检查类型</view>
				<picker @change="categoryChange" :value="categoryIndex" :range="categoryArray" class="scope_r">
					<view class="basics_li_r college_r">
						<view>{{form.checkType?(form.checkType==1?'校院巡查':'实验室自查'):'选择检查类型'}}</view>
						<img src="@/images/Version3.3.3/icon_06.png">
					</view>
				</picker>
			</view>
			<view class="basics_li">
				<view class="basics_li_l">计划标题</view>
				<picker @change="planChange" :value="planIndex" :range="planArray" class="scope_r">
					<view class="basics_li_r college_r">
						<view>{{form.title?form.title:'选择检查类型'}}</view>
						<img src="@/images/Version3.3.3/icon_06.png">
					</view>
				</picker>
			</view>
			<view class="custom"  @click="customFun">自定义输入</view>
		</view>
		<view class="inspect">
			<view class="inspect_li">
				<view class="inspect_li_l">检查结果</view>
				<picker @change="resultChange" :value="resultIndex" :range="resultArray" class="scope_r">
					<view class="inspect_li_r college_r">
						<view>{{form.checkResult==1?'符合':'不符合'}}</view>
						<img src="@/images/Version3.3.3/icon_06.png">
					</view>
				</picker>
			</view>
			<view class="inspect_li" v-if="form.checkResult==0">
				<view class="inspect_li_l">整改日期</view>
				<picker mode="date" @change="startChange(form,$event)">
					<view class="inspect_li_r date_r">
						<input disabled class="picker-text" type="text" v-model="form.rectifyDeadline" placeholder="请选择日期" placeholder-style="font-size: 30rpx;color:#333;">
						<img src="@/images/Version3.3.3/icon_rl.png">
					</view>
				</picker>
			</view>
			<view class="inspect_li" v-if="form.checkResult==0">
				<view class="inspect_li_l">整改通知</view>
				<view class="inform_r"> 
					<view v-for="(item,index) in informArray" :key="index" @click="tabClick(index)"><text :class="informIndex==index?'checked':'inform_r_l' "></text><text class="inform_r_r">{{item}}</text></view>
				</view>
			</view>
		</view>
	</scroll-view>
	<!-- 房间选择弹出层 -->
	<view class="popup-max-box" v-if="popupType">
		<view class="popup-null" @click="popupClick(2)"></view>
		<view class="popup-big-box">
			<view class="popup-input-box">
				<input type="text" maxlength="10" v-model="room" placeholder="请输入房间号">
				<view @click="getSelectInfoByRoom">搜索</view>
			</view>
			<view class="popup-for-max-box">
				<view class="popup-for-null" v-if="!roomList[0]">暂无数据</view>
				<view class="popup-for-box" v-for="(item,index) in roomList" :key="index">
					<view class="name-p">{{item.name}} ({{item.room}})</view>
					<view class="button-p" @click="popupClickItem(item)">确定</view>
				</view>
			</view>
		</view>
	</view>
	<!-- 检查名称弹窗 -->
	<uni-popup ref="popup" class="inspect_name" type="bottom">
		<view class="popup-content">
			<view class="inspect_name_t">
				<input type="text" v-model="customTitle" maxlength="20" placeholder="请输入计划标题"/>
			</view>
			
			<view class="inspect_name_b">
				<text @click="titleCancel()">取消</text>
				<text @click="titleConfirm()">确定</text>
			</view>
		</view>
	</uni-popup>
	<view class="bottom_btn" @click="handleClick('nextStep')" v-if="form.checkResult==0">下一步</view>
	<view class="bottom_btn" @click="submitForm()" v-if="form.checkResult==1">提交</view>
  </view>

</template>

<script>
import { config } from '@/api/request/config.js'
import { getSelectInfoByRoom,conditionCollegeInfo,subjectList,getCheckPlanBySubId,checkManageAdd,findCheckManage} from '@/api/index.js'
export default {
  name: "rectifyList",
  components: {
   
  },
  data() {
    return {
		id:'',
		pageType:0,
		//列表请求参数
		getData:{
		 pageNum:1,
		 pageSize:20,
		},
		customTitle:'',
		form:{
			id:'',
			checkPlanId:'',
			manageStatus:'',//保存1  提交2
			subId:'',//实验室
			subjectName:'',
			title:'',//计划标题
			deptId:'',//学院
			collegeName:'',
			buildId:'',//楼栋
			buildName:'',
			checkType:'',// 检查类型(1校院巡查 2实验室自查)    
			checkResult:'1',// 检查结果 0不符合 1符合 
			rectifyDeadline:'',//整改期限
			rectifyNotice:'1',//整改通知(1整改告知书 2整改通知书)
			checkHazardDtoList:[
				{
					voiceRemark:[],//语音备忘存储
					hazardLevel:'0',//隐患等级
					hazardLevelName:'一般隐患',//隐患等级
					hazardCheckCode:'', //检查项目code序号 
					hazardCheckName:'', //检查项目名称 
					hazardCheckPro:'', //最后一级的id  
					hazardCheckPoint:'',// 检查要点  
					hazardDescribe:'', //隐患描述 
					uploadDtoList:[],//隐患照片
				}
			],
		},
		collegeIndex :0,
		collegeArray:[],
		categoryIndex :0,
		categoryArray:['校院巡查','实验室自查'],
		planIndex :0,
		planArray:[],
		planList:[],
		resultIndex :0,
		resultArray:['符合','不符合'],
		informIndex:0,
		informArray:['整改告知书','整改通知书'],
		
		
		//房间弹层 状态
		popupType:false,
		//房间搜索字段
		room:"",
		roomList:[],
		item:{},
		
	}
  },
  onLoad(option) {
	 if(option.id){
	 		 this.id=option.id
	 		 this.findCheckManage()
	 }
  },
  onShow() {
	  
  },
  mounted(){
	   this.conditionCollegeInfo();
  },
  methods: {
		//滚动事件
		scrollGet(){},
	    handleClick(doType){
		  let self=this;
		  if( doType=='nextStep'){//下一步	
			  uni.redirectTo({
				  url: '/pages/pages_safetyExamine/examineManage/examineAddTow?form='+encodeURIComponent(JSON.stringify(this.form))
			  });
		  }
		  
	    },
		customFun(){
			let self=this;
			self.$refs.popup.open()
		},
		titleCancel(){
			let self=this;
			self.$refs.popup.close()
		},
		titleConfirm(){
			let self=this;
			this.form.title=this.customTitle;
			self.$refs.popup.close()
		},
		//详情
		async findCheckManage(){
			let _this = this;
			const {data} = await findCheckManage({id:this.id});
			if(data.code == 200){
					this.form.id=data.data.id;
					this.form.checkPlanId=data.data.checkPlanId;
					this.form.subId=data.data.subId;
					this.form.subjectName=data.data.subjectName;
					this.form.title=data.data.title;
					this.form.deptId=data.data.deptId;
					this.form.collegeName=data.data.collegeName;
					this.form.buildId=data.data.buildId;
					this.form.buildName=data.data.buildName;
					this.form.checkType=data.data.checkType;
					this.form.checkResult=data.data.checkResult==null?'1':data.data.checkResult;
					this.form.rectifyDeadline=data.data.rectifyDeadline;
					this.form.rectifyNotice=data.data.rectifyNotice==null?'1':data.data.rectifyNotice;
					if(data.data.checkHazardDtoList.length>0){//隐患项
						this.form.checkHazardDtoList=data.data.checkHazardDtoList;
					}
					this.form.id=data.data.id;
					//根据实验室id查询实验室计划
					if(data.data.subId){
						this.getCheckPlanBySubId(data.data.subId)
					}
			}
		},
		//查询学院列表
		async conditionCollegeInfo(){
			let _this = this;
			const {data} = await conditionCollegeInfo();
			if(data.code == 200){
					
				for(let i=0;i<data.data.length;i++){
					_this.collegeArray.push(data.data[i].deptName)
				}
				_this.collegeList=data.data;
			}
		},
		//根据实验室id查询该实验室有关计划
		async getCheckPlanBySubId(subId){
			let _this = this;
			const {data} = await getCheckPlanBySubId({'subId':subId});
			if(data.code == 200){
				for(let i=0;i<data.data.length;i++){
					_this.planArray.push(data.data[i].title)
				}
				_this.planList=data.data;	
			}
		},
		
		
		collegeChange(e){
			this.collegeIndex = e.target.value;
			 this.form.deptId=this.collegeList[e.target.value].deptId
			 this.form.deptName=this.collegeList[e.target.value].deptName
		},
		//检查类型
		categoryChange(e){
			this.categoryIndex = e.target.value;
			if(e.target.value==0){
				this.form.checkType=1
			}else if(e.target.value==1){
				this.form.checkType=2
			} 
		},
		//计划
		planChange(e){
			this.planIndex = e.target.value;
			this.form.title=this.planList[e.target.value].title
			this.form.checkPlanId=this.planList[e.target.value].id
		},
		resultChange(e){
			this.resultIndex = e.target.value;
			if(e.target.value==0){
				this.form.checkResult=1;
			}else if(e.target.value==1){
				this.form.checkResult=0;
			}
			
		},
		//开始时间选中事件
		startChange(form,e){
			form.rectifyDeadline=e.target.value
		},
		//整改通知
		tabClick(index) {
			this.informIndex = index;
			if(index==0){
				this.rectifyNotice='1';
			}else if(index==1){
				this.rectifyNotice='2';
			}
		
		},
		//搜索房间弹层开关
		popupClick(type){
			if(type == 1){
				this.room = "";
				this.roomList = [];
				this.popupType = true;
			}else if(type == 2){
				this.popupType = false;
			}
		},
		//搜索房间接口
		async getSelectInfoByRoom(){
			let self = this;
			if(!this.room){
				uni.showToast({
					title: '请输入要搜索房间号',
					icon:"none",
					mask:true,
					duration: 2000
				});
				return
			}
			const {data} = await getSelectInfoByRoom(this.room);
			if(data.code==200){
				if(data.data[0]){
					this.roomList = data.data;
				}else{
					uni.showToast({
						title: '未找到相关房间',
						icon:"none",
						mask:true,
						duration: 2000
					});
				}
			}
		},
		//确认搜索房间
		popupClickItem(item){
			this.$set(this.form,"subId",item.id)
			this.$set(this.form,"subjectName",item.name)
			this.$set(this.form,"deptId",item.deptId)
			this.$set(this.form,"collegeName",item.deptName)
			this.$set(this.form,"buildId",item.building)
			this.$set(this.form,"buildName",item.buildName)
			this.popupType = false;
			this.getCheckPlanBySubId(item.id)
		},
		//调用摄像头
		saoCode(){
			let self = this;
			uni.scanCode({
				onlyFromCamera: true,
				success: function (res) {
					if(res.result.indexOf("code") != -1 && res.result.indexOf("-") != -1 && res.result.indexOf("&") != -1){
						let codeRoom = "";
						let newList = res.result.split("?")[1].split("&")
						let list = newList[0].split("=")[1].split("-")
						codeRoom = list[1];
						if(codeRoom){
							self.roomList = [];
							self.room = codeRoom;
							self.getSelectInfoByRoom();
							self.popupType = true;
						}else{
							uni.showToast({
								title: '请扫描正确的二维码',
								icon:"none",
								mask:true,
								duration: 2000
							});
						}
					}else{
						uni.showToast({
							title: '请扫描正确的二维码',
							icon:"none",
							mask:true,
							duration: 2000
						});
					}
				}
			});
		},
	    //提交
	    async submitForm(){
			let _this = this;
			this.form.manageStatus=2;
			const {data} = await checkManageAdd(_this.form);
			if(data.code == 200){
				uni.showToast({
					title: '提交成功',
					icon:"none",
					mask:true,
					duration: 2000
				});
			}
		  },
  }
}
</script>

<style lang="stylus" scoped>
.examine{
	height:100%;
	display flex;
	box-sizing: border-box;
	.info-max-box{
		flex: 1;
		overflow: scroll;
		padding: 20rpx 0rpx 128rpx;
		box-sizing: border-box;
	}
	.basics{
		margin: 0 30rpx;
		width: 690rpx;
		height: 632rpx;
		background: #FFFFFF;
		border-radius: 20rpx;
		padding: 30rpx 28rpx 0;
		box-sizing: border-box;
		.basics_li{
			display: flex;
			justify-content: flex-start;
			margin-bottom: 24rpx;
			.basics_li_l{
				width: 146rpx;
				text-align: left;
				font-size: 30rpx;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 400;
				color: #333333;
				line-height: 80rpx;
			}
			.basics_li_r{
				width: 486rpx;
				height: 80rpx;
				border-radius: 10rpx;
				opacity: 1;
				border: 1rpx solid #E0E0E0;
				padding-left: 20rpx;
				box-sizing: border-box;
				
				
			}
			/* 学院 */
			.college_r{
				width: 486rpx;
				height: 80rpx;
				border-radius: 10rpx;
				border: 1rpx solid #E0E0E0;
				display: flex;
				justify-content: flex-start;
				align-items: center;
				>view{
					flex:1;
					line-height:80rpx;
					font-size: 30rpx;
					font-family: PingFang SC-Medium, PingFang SC;
					font-weight: 400;
					color: #333333;
					line-height: 80rpx;
				}
				>img{
					width: 14rpx;
					height: 8rpx;
					margin-right: 30rpx;
				}
			}
			/* 实验室 */
			.lab_r{
				width: 486rpx;
				height: 80rpx;
				display: flex;
				justify-content: flex-start;
				.picker-text{
					width: 438rpx;
					height: 80rpx;
				}
				.img-box{
					width: 48rpx;
					>img{
						width:30rpx;
						height:28rpx;
						margin:16rpx 18rpx 0 0;
					}
				}
			}
			/* 楼栋 */
			.building_r{
				width: 486rpx;
				height: 80rpx;
				>input{
					height: 80rpx;
					font-size: 30rpx;
					font-family: PingFang SC-Medium, PingFang SC;
					font-weight: 400;
					color: #333333;
					line-height: 80rpx;
				}
			}
		}
		.custom{
			width: 150rpx;
			height: 60rpx;
			border-radius: 10rpx 10rpx 10rpx 10rpx;
			opacity: 1;
			border: 1rpx solid #0183FA;
			font-size: 26rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 400;
			color: #0183FA;
			line-height: 60rpx;
			text-align: center;
			float: right;
		}
	}
	.attachment{
		width: 690rpx;
		background: #FFFFFF;
		border-radius: 20rpx;
		margin: 20rpx 30rpx 0;
		padding-bottom: 32rpx;
		box-sizing: border-box;
		.attachment_t{
			border-bottom: 1rpx solid #D8D8D8;
			>text:nth-of-type(1){
				font-size: 30rpx;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 400;
				color: #333333;
				line-height: 110rpx;
				margin-left: 28rpx;
			}
			>text:nth-of-type(2){
				font-size: 30rpx;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 400;
				color: #999999;
				line-height: 110rpx;
				margin-left: 24rpx;
			}
		}
		.attachment_li{
			height: 40rpx;
			display: flex;
			justify-content: flex-start;
			align-items: center;
			margin-top: 32rpx;
			>img{
				width: 30rpx;
				height: 26rpx;
				margin-right: 20rpx;
				margin-left: 50rpx;
			}
			>text{
				flex: 1;
				font-size: 28rpx;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 400;
				color: #0183FA;
				line-height: 40rpx;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
			}
			.attachment_li_del{
				width: 30rpx;
				height: 30rpx;
			}
		}
	}
	.inspect{
		margin: 20rpx 30rpx 0;
		width: 690rpx;
		height: auto;
		background: #FFFFFF;
		border-radius: 20rpx;
		padding: 40rpx 28rpx 20rpx;	
		box-sizing: border-box;
		.inspect_li{
			display: flex;
			justify-content: flex-start;
			margin-bottom: 24rpx;
			.inspect_li_l{
				width: 146rpx;
				text-align: left;
				font-size: 30rpx;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 400;
				color: #333333;
				line-height: 80rpx;
			}
			.inspect_li_r{
				width: 486rpx;
				height: 80rpx;
				border-radius: 10rpx;
				opacity: 1;
				border: 1rpx solid #E0E0E0;
				padding-left: 20rpx;
				box-sizing: border-box;
				
			}
			.college_r{
				width: 486rpx;
				height: 80rpx;
				border-radius: 10rpx;
				border: 1rpx solid #E0E0E0;
				display: flex;
				justify-content: flex-start;
				align-items: center;
				>view{
					flex:1;
					line-height:80rpx;
					font-size: 30rpx;
					font-family: PingFang SC-Medium, PingFang SC;
					font-weight: 400;
					color: #333333;
					line-height: 80rpx;
				}
				>img{
					width: 14rpx;
					height: 8rpx;
					margin-right: 30rpx;
				}
			}
			/* 整改日期 */
			.date_r{
				width: 486rpx;
				height: 80rpx;
				display: flex;
				justify-content: flex-start;
				.picker-text{
					width: 438rpx;
					height: 80rpx;
				}
				>img{
					width:30rpx;
					height:28rpx;
					margin:16rpx 18rpx 0 0;
				}
			}
			/* 整改通知 */
			.inform_r{
				width: 486rpx;
				height: 80rpx;
				padding-left: 20rpx;
				box-sizing: border-box;
				display: flex;
				justify-content: flex-start;
				align-items: center;
				>view{
					display: flex;
					justify-content: flex-start;
					align-items: center;
					margin-right: 24rpx;
					.inform_r_l{
						display: inline-block;
						width: 30rpx;
						height: 30rpx;
						border-radius: 50%;
						border: 1rpx solid #E0E0E0;
						margin-right: 14rpx;
					}
					.inform_r_r{
						font-size: 30rpx;
						font-family: PingFang SC-Medium, PingFang SC;
						font-weight: 400;
						color: #333333;
						line-height: 80rpx;
					}
					.checked{
						display: inline-block;
						width: 30rpx;
						height: 30rpx;
						border-radius: 50%;
						border: 1rpx solid #0183FA;
						margin-right: 14rpx;
						position: relative;
					}
					.checked::after{
						content: '';
						position: absolute;
						top: 5rpx;
						left:5rpx;
						width: 20rpx;
						height: 20rpx;
						border-radius: 50%;
						background: #0183FA;
					}
				}
			}
		}
	}
	.popup-max-box{
		z-index:10;
		height:100%;
		width:100%;
		position fixed;
		background rgba(0,0,0,0.2)
		display flex;
		flex-direction column
		.popup-null{
			flex:1;
		}
		.popup-big-box{
			border-top-left-radius:20rpx;
			border-top-right-radius:20rpx;
			background #fff
			.popup-input-box{
				padding:30rpx 20rpx;
				display:flex;
				input{
					flex:1;
					height:70rpx;
					border:1rpx solid #e0e0e0;
					border-radius:10rpx;
					margin-right:20rpx;
					padding:0 20rpx;
				}
				view{
					background #0183FA
					color:#fff;
					border-radius:10rpx;
					width:140rpx;
					line-height:70rpx;
					text-align center;
					font-size:28rpx;
				}
			}
			.popup-for-max-box{
				margin:0 20rpx 30rpx;
				height:600rpx;
				overflow-y scroll;
				.popup-for-null{
					line-height:100rpx;
					text-align center
					color:#999;
				}
				.popup-for-box{
					display:flex;
					padding:10px 0;
					.name-p{
						flex:1;
						line-height:60rpx;
					}
					.button-p{
						background #0183FA
						color:#fff;
						text-align center
						width:100rpx;
						line-height:60rpx;
						height:60rpx;
						border-radius:10rpx;
					}
				}
			}
		}
	}
	/* 计划标题 */
	.inspect_name{
	
		.popup-content{
			width: 750rpx;
			height: 350rpx;
			background: #FFFFFF;
			border-radius: 10rpx 10rpx 0px 0px;
			padding :0 50rpx;
			box-sizing :border-box;
			overflow :hidden;
			.inspect_name_t{
				margin-top:66rpx;
				padding: 0 30rpx;
				box-sizing: border-box;
				>input{
					width:100%;
					height:80rpx;
					border: 2rpx solid #E0E0E0;
					color:#A2A2A2;
					font-size:28rpx;
					line-height 80rpx
					border-radius:10rpx;
					padding: 0 20rpx;
					box-sizing: border-box;
				}
			}
			.inspect_name_b{
				margin-top :64rpx;
				display: flex;
				justify-content: center;
				>text:nth-of-type(1){
					width: 160rpx;
					height: 60rpx;
					border-radius: 40rpx;
					font-size: 30rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #333333;
					line-height: 60rpx;
					text-align :center;
					margin-right: 120rpx;
					border: 2rpx solid #e0e0e0;
				}
				>text:nth-of-type(2){
					width: 160rpx;
					height: 60rpx;
					background: linear-gradient(-35deg, #309CFF, #0183FA);
					border-radius: 40rpx;
					font-size: 30rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #FFFFFF;
					line-height: 60rpx;
					text-align :center;
				}
				
				
			}
	
		}
	
	}
	.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>