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>
				<picker @change="collegeChange" :value="collegeIndex" :range="collegeArray" class="scope_r">
					<view class="basics_li_r college_r">
						<view>{{collegeArray[collegeIndex]}}</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 lab_r">
					<input class="picker-text" @click="popupClick(1)" type="text" disabled v-model="form.fjNumber" 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>
				<view class="basics_li_r building_r">
					<input class="picker-text"  type="text" disabled v-model="form.fjNumber" 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>{{categoryArray[categoryIndex]}}</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>{{planArray[planIndex]}}</view>
						<img src="@/images/Version3.3.3/icon_06.png">
					</view>
				</picker>
			</view>
		</view>
		<view class="attachment">
			<view class="attachment_t">
				<text>材料附件</text>
				<text>点击文件标题查看</text>
			</view>
			<view class="attachment_li">
				<img src="@/images/Version3.3.3/icon_djc_wj.png"/>
				<text>文件标题文件标题</text>
				<img class="attachment_li_del" src="@/images/Version3.3.3/icon_fjgk_sc.png"/>
			</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>{{resultArray[resultIndex]}}</view>
						<img src="@/images/Version3.3.3/icon_06.png">
					</view>
				</picker>
			</view>
			<view class="inspect_li" v-if="form.inspectResult==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.startTime" 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.inspectResult==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>	
	<view class="bottom_btn" @click="handleClick('nextStep')" v-if="form.inspectResult==0">下一步</view>
	<view class="bottom_btn" @click="handleClick('subBtn')" v-if="form.inspectResult==1">提交</view>
  </view>

</template>

<script>
import { config } from '@/api/request/config.js'
import { getSelectInfoByRoom} from '@/api/index.js'
export default {
  name: "rectifyList",
  components: {
   
  },
  data() {
    return {
		pageType:0,
		//列表请求参数
		getData:{
		 pageNum:1,
		 pageSize:20,
		},
		form:{
			name:'',
			startTime:'',
			inspectResult:0,//检查结果
		},
		collegeIndex :0,
		collegeArray:['选择学院','学院名称1','学院名称2','学院名称3',],
		categoryIndex :0,
		categoryArray:['校级巡查','院级巡查'],
		planIndex :0,
		planArray:['请选择巡查计划标题','2023年3月份校级督导检查','2023年4月份校级督导检查'],
		resultIndex :0,
		resultArray:['不符合','符合'],
		informIndex:0,
		informArray:['整改告知书','整改通知书'],
		
		
		//房间弹层 状态
		popupType:false,
		//房间搜索字段
		room:"",
		roomList:[],
		
	}
  },
  onLoad(option) {
	 
  },
  onShow() {
	  
  },
  mounted(){
	  
  },
  methods: {
		//滚动事件
		scrollGet(){},
	    handleClick(doType){
		  let self=this;
		  if( doType=='nextStep'){//下一步	
			  uni.redirectTo({
				  url: '/pages/pages_safetyExamine/examineManage/examineAddTow'
			  });
		  }else if(doType=='subBtn'){//提交
			  
		  }
		  
	    },
		collegeChange(e){
			this.collegeIndex = e.target.value;
		},
		categoryChange(e){
			this.categoryIndex = e.target.value;
		},
		planChange(e){
			this.planIndex = e.target.value;
		},
		resultChange(e){
			this.resultIndex = e.target.value;
			this.form.inspectResult=e.target.value;
		},
		//开始时间选中事件
		startChange(form,e){
			form.startTime=e.target.value
		},
		//顶部tab点击
		tabClick(index) {
			this.informIndex = index;
		
		},
		//搜索房间弹层开关
		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,"fjNumber",item.room)
			this.$set(this.form,"deptName",item.deptName)
			this.$set(this.form,"buildingId",item.building)
			this.$set(this.form,"deptId",item.deptId)
			this.$set(this.form,"laboratoryId",item.id)
			this.$set(this.form,"buildingName",item.buildName)
			this.$set(this.form,"laboratoryName",item.name)
			this.$set(this.form,"fzrId",item.userId)
			this.$set(this.form,"fzrName",item.safeUserName)
			this.$set(this.form,"fzrLxfs",item.safeUserPhone)
			this.popupType = false;
		},
		//调用摄像头
		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
						});
					}
				}
			});
		},
	  
  }
}
</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: 562rpx;
		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;
				}
			}
		}
	}
	.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;
					}
				}
			}
		}
	}
	.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>