FE-V2-XCX/pages/pages_safetyExamine/snapshotManage/snapshotAdd.vue

<!-- 随手拍-添加 -->
<template>
  <view class="examine">
	<scroll-view scroll-y @scrolltolower="scrollGet" class="info-max-box">
		<view class="header"  @click="handleClick('manage')">
			<text>随手拍管理</text>
			<img src="@/images/Version3.3.3/icon_04.png">
		</view>
		<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>{{form.deptName?form.deptName:'选择学院'}}</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.subName" 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="check-for-input-max-box">
				<view class="left-title-p">隐患描述：</view>
				<textarea type="text" v-model="form.hazardDescribe" maxlength="50" placeholder="请输入隐患描述" placeholder-style="font-size:28rpx;color:#999;"></textarea>
			</view>
			<view class="check-for-img-max-box">
				<view class="left-title-p">隐患照片（最多上传5张）：</view>
				<view class="right-img-box">
					<view class="img-box" v-for="(imgUrl,imgIndex) in form.imgDtoList" :key="imgIndex">
						<img class="img-data" :src="configURL+imgUrl.fileUrl">
						<img class="position-img" src="@/pages_manage/images/icon_ssp_closure.png" @click="delImg(imgIndex)">
					</view>
					<img class="add-button" src="@/pages_manage/images/icon_07.png" @click="selectImage()" v-if="form.imgDtoList.length<5">
				</view>
			</view>
		</view>
		<view class="record" ><text  @click="handleClick('self')">随手拍上报记录</text></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="submitForm()">提交</view>
  </view>

</template>

<script>
import { config } from '@/api/request/config.js'
import { getSelectInfoByRoom,conditionCollegeInfo,checkClapAdd } from '@/api/index.js'
export default {
  name: "rectifyList",
  components: {
   
  },
  data() {
    return {
		configURL:config.base_url,
		pageType:0,
		//列表请求参数
		getData:{
		 pageNum:1,
		 pageSize:20,
		},
		form:{
			deptId:'',
			deptName:'',
			subId:'',
			subName:'',
			hazardDescribe:'',
			imgDtoList:[],
		},
		collegeIndex :0,
		collegeArray:[],
		categoryIndex :0,
		collegeList:[],
		categoryArray:['校级巡查','院级巡查'],
		planIndex :0,
		planArray:['请选择巡查计划标题','2023年3月份校级督导检查','2023年4月份校级督导检查'],
		resultIndex :0,
		resultArray:['不符合','符合'],
		informIndex:0,
		informArray:['整改告知书','整改通知书'],
		
		
		//房间弹层 状态
		popupType:false,
		//房间搜索字段
		room:"",
		roomList:[],
		
	}
  },
  onLoad(option) {
	 
  },
  onShow() {
	  
  },
  mounted(){
	  this.conditionCollegeInfo();
  },
  methods: {
		//滚动事件
		scrollGet(){},
	    handleClick(doType){
		  let self=this;
		  if( doType=='manage'){//随手拍管理
			  uni.navigateTo({
			      url: '/pages/pages_safetyExamine/snapshotManage/snapshotList?pageType=1'
			  });
		  }else if(doType=='self'){//随手拍上报记录
			  uni.navigateTo({
			      url: '/pages/pages_safetyExamine/snapshotManage/snapshotList?pageType=2'
			  });
		  }else if(doType=='subBtn'){//提交
			  
		  }
		  
	    },
		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
		},
		// 图片上传
		selectImage() {
		    let self = this;
		    if(this.form.imgDtoList.length>4){
		        uni.showToast({
		            title: '最多上传5张图片',
		            icon:"none",
		            mask:true,
		            duration: 2000
		        });
		        return
		    }
		    wx.chooseImage({
		        count: 1,
		        sizeType: ["original", "compressed"],
		        sourceType: ["album", "camera"],
		        success: function(res) {
		            let tempFilePaths = res.tempFilePaths[0];
		            self.uploadImg(tempFilePaths);
		        }
		    });
		},
		async uploadImg(tempFilePaths){
		    var self = this;
		    uni.showLoading({
		        title: '上传中',
		        mask: true
		    });
		    uni.uploadFile({
		        url: config.base_url+'/base/file/upload', //仅为示例，非真实的接口地址
		        header:{'Authorization':uni.getStorageSync('token')},
		        filePath: tempFilePaths,
		        name: 'file',
		        formData: {
		            'user': 'test'
		        },
		        success: (uploadFileRes) => {
		            let res = JSON.parse(uploadFileRes.data);
					console.log(res.data)
					if(res.code == 200){
						this.form.imgDtoList.push({'fileUrl':res.data.url,'fileName':res.data.name});
						console.log(res.data.url)
					}else{
						uni.showToast({
							title: res.msg,
							icon:"none",
							mask:true,
							duration: 2000
						});
					}
		        },
		        fail: err => {},
		        complete: () => {
		            uni.hideLoading()
		        }
		    });
		},
		//删除图片
		delImg(minIndex){
		    this.form.imgDtoList.splice(minIndex,1);
			this.$forceUpdate();
		},
		//搜索房间弹层开关
		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){
			console.log(item)
			this.$set(this.form,"subId",item.id)
			this.$set(this.form,"subName",item.name)
			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
						});
					}
				}
			});
		},
		//查询学院列表
		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;
			}
		},
		//添加
		async submitForm(){
			let _this = this;
			const {data} = await checkClapAdd(_this.form);
			if(data.code == 200){
			    uni.showToast({
			        title: '提交成功',
			        icon:"none",
			        mask:true,
			        duration: 2000
			    });
				// uni.redirectTo({
				// 	url: '/pages/pages_safetyExamine/patrolPlan/patrolPlanList?pageType='+this.form.checkType
				// });
			   
			}
		},
		
	  
  }
}
</script>

<style lang="stylus" scoped>
.examine{
	height:100%;
	display flex;
	box-sizing: border-box;
	.info-max-box{
		flex: 1;
		overflow: scroll;
		padding: 120rpx 0rpx 128rpx;
		box-sizing: border-box;
	}
	.header{
		width: 749rpx;
		height: 100rpx;
		background: #FFFFFF;
		padding:0 40rpx 0 30rpx;
		box-sizing: border-box;
		display: flex;
		justify-content: space-between;
		align-items: center;
		position: fixed;
		left: 0;
		top: 0;
		>text{
			font-size: 30rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 400;
			color: #333333;
			line-height: 42rpx;
		}
		>img{
			width: 8rpx;
			height: 14rpx;
		}
	}
	.basics{
		margin: 0 30rpx;
		width: 690rpx;
		background: #FFFFFF;
		border-radius: 20rpx;
		padding: 30rpx 28rpx 30rpx;
		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;
					}
				}
			}
		}
		/* 隐患描述 */
		.check-for-input-max-box{
			.left-title-p{
				width:150rpx;
				line-height:80rpx;
				text-align right
				font-size:30rpx;
			}
			textarea{
				width: 630rpx;
				height: 158rpx;
				border-radius: 20rpx 20rpx 20rpx 20rpx;
				border: 1rpx solid #E0E0E0;
				padding: 20rpx 14rpx;
				box-sizing: border-box;
				font-size: 30rpx;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 400;
				color: #333333;
				line-height: 34rpx;
			}
		}
		/* 隐患照片 */
		.check-for-img-max-box{
			.left-title-p{
				width: 100%;
				text-align: left;
				font-size: 30rpx;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 400;
				color: #333333;
				line-height: 80rpx;
			}
			.right-img-box{
				.img-box{
					display inline-block;
					height:200rpx;
					width:200rpx;
					position relative
					margin:0 14rpx 20rpx 0;
					border-radius 10rpx;
					overflow hidden;
					.img-data{
						height:200rpx;
						width:200rpx;
					}
					.position-img{
						position absolute
						right:0;
						top:0;
						width:36rpx;
						height:36rpx;
					}
				}
				.img-box:nth-of-type(3n+3){
					margin-right: 0rpx;
				}
				.add-button{
					 margin:0 0rpx 20rpx 0;
					border-radius 10rpx;
					overflow hidden;
					display inline-block
					height:200rpx;
					width:200rpx;
				}
			}
		}
	}
	.record{
		overflow: hidden;
		>text{
			display: block;
			width: 220rpx;
			height: 40rpx;
			background: #E0E0E0;
			border-radius: 60rpx 60rpx 60rpx 60rpx;
			margin: 122rpx 0 90rpx 266rpx;
			font-size: 26rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 400;
			color: #0183FA;
			line-height: 40rpx;
			text-align: center;
		}
	}
	.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>