v3-lab-xcx/pages_student/gasBottle/examination/examinationAdd.vue

<!-- 资质申请/填写资料-->
<template>
    <view id="register">
		<view class="register_li">
			<view class="register_li_min">
				<img class="icon_img" src="@/pages_student/images/icon_zgsq_sqr.png">
				<view>申请人：</view>
				<input v-model="form.applyUser" disabled  type="text" >
			</view>
			<view class="register_li_min">
				<img class="icon_img" src="@/pages_student/images/icon_zgsq_dhh.png">
				<view>联系方式：</view>
				<input v-model="form.phone"   type="text" >
			</view style="border: none;">
		</view>
		<view class="add_gas">
			<view class="add_gas_list">
				<view class="add_gas_list_li" v-for="(item,index) in listDetailArr">
					<text>{{item.airName}}-{{item.configName}}</text>
					<text>X{{item.bottleNumber}}</text>
					<view @click="deleteGas(item)"  class="icon_img"><img src="@/images/basicsModules/icon_sczl_sc.png"></view>
					<text></text>
					<text @click="addGas()">重新选择</text>
				</view>
			</view>
			<view class="add_gas_btn" @click="addGas()">
				<img class="icon_img" src="@/pages_student/images/icon_zgsq_j.png">
				添加气瓶
			</view>
		</view>
		<view class="register_li2">
			<picker @change="bindPickerChange" :value="pickerIndex" :range="pickerArray">
				<view class="register_li_min">
					<view>*</view>
					<view>实验地点：</view>
					<input v-model="form.location" disabled type="text" placeholder="请选择实验地点" placeholder-style="color:#999;">
				</view>
			</picker>
			<!-- 使用期限 -->
			<view class="register_li_min2">
				<view><text  style="color: #f00;margin-right: 10rpx;">*</text>使用期限:</view>
				<picker mode="date" @change="startChange($event)">
					<input class="picker-text" v-model="form.startTime" disabled  type="text"  placeholder="开始时间" placeholder-style="color:#999;">
				</picker>
				<view>-</view>
				<picker mode="date" @change="endChange($event)">
					<input class="picker-text2" v-model="form.endTime" disabled  type="text"  placeholder="结束时间" placeholder-style="color:#999;">
				</picker>
			</view>
			<view class="register_li_min">
			    <view>*</view>
				<view>气体用途：</view>
				<input v-model="form.gasUse"   type="text"  placeholder="请输入气体用途" placeholder-style="color:#999;">
			</view>
			<view class="register_li_min">
			    <view>*</view>
				<view>安全措施：</view>
				<input v-model="form.safetyPrecautions"   type="text"  placeholder="请输入主要安全管理措施" placeholder-style="color:#999;">
			</view>
			<view  class="issue_li" style="border-bottom:0;">
				<view>*</view>
				<view>用气申请表：</view>
				<view @click="selectImage">
					<img :src="baseUrl+form.applyCertificate">
					<text>+上传图片</text>
				</view>
			</view>
		</view>

		<view v-if="listType==0" class="sub_btn" @click="submitVerify()">提交</view>
		<view v-if="listType==2" class="sub_btn">重新申请</view>
	</view>
</template>

<script>
    import {labList,getLoginUser,qualificationApplyManageAdd,qualificationDetail,qualificationApplyAmend,qualificationVerify,gasApplyVerify} from '@/api/apiDemo/index.js'
	import { config } from '@/api/request/config.js'
    export default {
        data() {
            return {
				baseUrl:config.base_url,
				listType:0,
				form:{
					applyUser:'',//申请人
					applyUserid:'',//申请人id
					phone:'',//	联系方式
					location:'',//实验地点
					subjectId:'',//实验地点Id
					startTime:'',//期限开始
					endTime:'',//期限结束
					gasUse:'',//气体用途
					safetyPrecautions:'',//安全措施
					applyCertificate:'',//用气申请表
					listDetail:[],
				},
				listDetailArr:[],
				checkStatus:0,
				pickerArray:[],
				pickerArrayList:[],
				status:null,//0添加1编辑
				id:null,
				amount:0,
            }
        },
        onLoad(option) {
			this.status=option.status;
			this.id=option.id;
			if(option.form){
				this.form=JSON.parse(decodeURIComponent(option.form));
			}
			//气瓶数据
			if(uni.getStorageSync('listDetail')){
				this.listDetailArr=JSON.parse(decodeURIComponent(uni.getStorageSync('listDetail')));
			}
        },
        onShow(){

        },
        methods: {
			//添加气瓶按钮
			addGas(){
				uni.redirectTo({
				    url:'/pages_student/examination/examinationSelect?status='+this.status+'&id='+this.id+'&form='+encodeURIComponent(JSON.stringify(this.form))
				});
			},
			//删除气瓶
			deleteGas(d){
				let _this=this;
				_this.listDetailArr.forEach(function(item){
					if(d.id==item.id){
						_this.listDetailArr.splice(item,1);
						uni.setStorageSync('listDetail',encodeURIComponent(JSON.stringify(_this.listDetailArr)))
					}
				})
			},
			//查询实验室
			async labList(){
				const {data} = await labList()
				if(data.code == 200){
					let _this=this;
					let res=data.data
					_this.pickerArrayList=res;
					res.forEach(function(item){
						_this.pickerArray.push(item.name);
					})

				}
			},
			//查询用户信息
			async getLoginUser(){
				const {data} = await getLoginUser()
				if(data.code == 200){
					let _this=this;
					let res=data.data;
					_this.form.applyUser=res.nickName;
					_this.form.applyUserid=res.id;
					_this.form.phone=res.phonenumber;
				}
			},
			//选择实验室
			async bindPickerChange(e){
				let _this=this;
				let index=e.target.value
				//获取实验室名称
				_this.form.location=_this.pickerArray[index]
				//循环获取实验室id
				_this.pickerArrayList.forEach(function(item){
					if(_this.pickerArray[index]==item.name){
						_this.form.subjectId=item.id;
					}
				})
				//校验当前用户有乜有当前实验室使用 权限
				const {data} = await qualificationVerify({subjectId:_this.form.subjectId})
				if(data.code==200){
					let res=data.data
					if(res.count>0){//有资格

					}else{//没资格
						uni.showToast({
							title:'在申请资格前需要先申请对应实验地点的安全准人资格!',
							icon:"none",
							mask:true,
							duration: 2000
						});
						_this.form.location='';
						_this.form.subjectId='';
					}
				}

			},
			//时间选中
			startChange(e){
				if(new Date(e.target.value).getTime()>=new Date(this.form.endTime).getTime()){
					 uni.showToast({
						title: '结束时间不能小于开始时间',
						icon:"none",
						mask:true,
						duration: 2000
					});
				}else{
					this.form.startTime = e.target.value
				}
			},
			endChange(e){
				if(new Date(this.form.startTime).getTime()>=new Date(e.target.value).getTime()){
					 uni.showToast({
						title: '结束时间不能小于开始时间',
						icon:"none",
						mask:true,
						duration: 2000
					});
				}else{
					this.form.endTime = e.target.value
				}
			},




			// 图片上传
			selectImage() {

			    let self = this;
			    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);
						if(res.code == 200){
							self.form.applyCertificate=res.data.url
						}else{
							uni.showToast({
								title: res.msg,
								icon:"none",
								mask:true,
								duration: 2000
							});
						}
			        },
			        fail: err => {},
			        complete: () => {
			            uni.hideLoading()
			        }
			    });
			},
			//删除图片
			delImg(index){
			    this.newData.imgList.splice(index,1);
			},
			//获取详情
			async getInfo(){
			    let _this = this;
			    const {data} = await qualificationDetail({id:this.id})
			    if(data.code==200){
					let res=data.data
					_this.form=res.apply;
					//编辑的时候判断气瓶状态，是选择首次进入列表数据还是修改后的数据
					if(uni.getStorageSync('listDetail')){

					}else{
						_this.listDetailArr=res.airBottlelist
						uni.setStorageSync('listDetail',encodeURIComponent(JSON.stringify(_this.listDetailArr)))
					}
				}
			},
			//校验气瓶数量
			async submitVerify(){
				let _this=this;
				if(_this.form.location==''){
					uni.showToast({
					    title: '请先选择实验室!',
					    icon:"none",
					    mask:true,
					    duration: 2000
					});
					return;
				}
				_this.amount=0;
				this.listDetailArr.forEach(function(item){
					_this.amount+=item.bottleNumber;
				})
				const {data} = await gasApplyVerify({subjectId:_this.form.subjectId});
				if(data.code == 200){
					let res=data.data
					if(!res.flgSubject){
						uni.showToast({
							title: '请先配置实验室气瓶总量数',
							icon:"none",
							mask:true,
							duration: 2000
						});
						return
					}
					if(!res.flgUser){
						uni.showToast({
							title: '请先配置实验室个人气瓶总量数',
							icon:"none",
							mask:true,
							duration: 2000
						});
						return
					}
					if(_this.amount>res.subjectNum){
						uni.showToast({
							title: '当前申请气瓶个数大于当前实验室气瓶存量!',
							icon:"none",
							mask:true,
							duration: 2000
						});
						return
					}
					if(_this.amount>res.userNum){
						uni.showToast({
							title: '当前申请气瓶个数大于个人气瓶存量!',
							icon:"none",
							mask:true,
							duration: 2000
						});
						return
					}
					_this.submitForm();
				}else{
					return
				}
			},
			//提交
			async submitForm(){
				let _this = this;
				if(!this.form.location){
					uni.showToast({
						title: '请选择实验地点',
						icon:"none",
						mask:true,
						duration: 2000
					});
					return
				}
				if(!this.form.startTime || !this.form.endTime){
					uni.showToast({
						title: '请选择使用期限',
						icon:"none",
						mask:true,
						duration: 2000
					});
					return
				}
				if(!this.form.gasUse){
					uni.showToast({
						title: '请输入气体有用途',
						icon:"none",
						mask:true,
						duration: 2000
					});
					return
				}
				if(!this.form.safetyPrecautions){
					uni.showToast({
						title: '请输入安全措施',
						icon:"none",
						mask:true,
						duration: 2000
					});
					return
				}
				if(!this.form.applyCertificate){
					uni.showToast({
						title: '请上传用气申请表',
						icon:"none",
						mask:true,
						duration: 2000
					});
					return
				}
				if(_this.listDetailArr.length<=0){
					uni.showToast({
						title: '请选择气瓶',
						icon:"none",
						mask:true,
						duration: 2000
					});
					return
				}
				// _this.listDetailArr.forEach(function(item){
				// 	item.gasLevel=item.parent
				// 	item.gasNorms=item.specValue
				// })
				_this.form.listDetailVo=_this.listDetailArr
				if(_this.status==0){//添加
					const {data} = await qualificationApplyManageAdd(_this.form);
					if(data.code == 200){
					    uni.showToast({
					        title: '提交成功',
					        icon:"none",
					        mask:true,
					        duration: 2000
					    });
						uni.removeStorageSync('listDetail');
					    setTimeout(function(){
					       uni.redirectTo({
					            url: '/pages_student/examination/examination'
					        });
					    },2000);
					}
				}else if(_this.status==1){//编辑
					const {data} = await qualificationApplyAmend(_this.form);
					if(data.code == 200){
					    uni.showToast({
					        title: '提交成功',
					        icon:"none",
					        mask:true,
					        duration: 2000
					    });
						uni.removeStorageSync('listDetail');
					    setTimeout(function(){
					       uni.redirectTo({
					            url: '/pages_student/examination/examination'
					        });
					    },2000);
					}
				}

			},

        },
		mounted(){
		   this.labList()
		   this.getLoginUser()
		   if(this.status==1){
		   	this.getInfo();
		   }
		},
    }
</script>

<style lang="stylus" scoped>
    #register{
        height:auto;
        width:100%;
        display flex;
        flex-direction column;
		padding-bottom: 220rpx;
		/* 添加气瓶按钮 */
		.add_gas{
			width: 710rpx;
			background: #FFFFFF;
			border-radius: 20rpx;
			margin: 20rpx;
			padding: 0 20rpx;
			box-sizing: border-box;
			.add_gas_list{
				.add_gas_list_li{
					height: 100rpx;
					display: flex;
					justify-content: space-between;
					align-items: center;
					border-bottom: 1px dotted #f5f5f5;
					>text{
						font-size: 28rpx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #333333;
						line-height: 28rpx;
					}

					>text:nth-of-type(1){
						width: 260rpx;
					}
					>text:nth-of-type(2){

					}
					>text:nth-of-type(3){
						width: 2rpx;
						height: 30rpx;
						background: #E0E0E0;
						margin: 0 24rpx 0;
					}
					>text:nth-of-type(4){
						color: #0183FA;
					}
					.icon_img{
						width: 30rpx;
						height: 30rpx;
						margin-right: 12rpx;
						>img{
							width: 30rpx;
							height: 30rpx;
						}
					}
					>img{
						width: 28rpx;
						height: 30rpx;
						margin-left: 128rpx;

					}
				}
			}
			.add_gas_btn{
				height: 100rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #0183FA;
				line-height: 28rpx;

				>img{
					width: 30rpx;
					height: 30rpx;
						margin-right: 14rpx;

				}
			}
		}
		.register_li{
			background #fff;
			border-radius:20rpx;
			margin:20rpx 20rpx 0;
			padding:20rpx 0;
			box-sizing: border-box;
			.register_li_min{
				margin:0 26rpx;
				display flex;
				align-items center;
				border-bottom: 1px solid #F5F5F5;
				.icon_img{
					width: 30rpx;
					height: 30rpx;
					margin-right: 12rpx;
				}
				view{
					line-height:100rpx;
					font-size:28rpx;
				}
				view:nth-child(1){
					color:red;
					line-height:28rpx;
					margin-right: 12rpx;
				}
				view:nth-child(2){
					//width:140rpx;
					font-size: 28rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #999999;
				}

				>input{
					flex:1;
					text-align: right;
					font-size: 24rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #333333;
				}


			}

		}
		.register_li2{
			background #fff;
			border-radius:20rpx;
			margin:20rpx 20rpx 0;
			padding:20rpx 0;
			box-sizing: border-box;
			.register_li_min{
				margin:0 26rpx;
				display flex;
				align-items center;
				border-bottom: 1px solid #F5F5F5;
				.icon_img{
					width: 30rpx;
					height: 30rpx;
					margin-right: 12rpx;
				}
				view{
					line-height:100rpx;
					font-size:28rpx;
				}
				view:nth-child(1){
					color:red;
					line-height:28rpx;
					margin-right: 12rpx;
				}
				view:nth-child(2){
					//width:140rpx;
					font-size: 28rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #333;
				}

				>input{
					flex:1;
					text-align: right;
					font-size: 24rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #333333;
				}


			}
			/* 时间 */
			.register_li_min2{
				margin:0 26rpx;
				border-bottom: 1px solid #f5f5f5;
				height: 100rpx;
				display: flex;
				justify-content: flex-start;
				align-items: center;
				>view:nth-child(1){
					font-size: 28rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #333;
					line-height: 100rpx;
					margin-right: 120rpx;
				}
				.picker-text{
					font-size: 24rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #333333;
					line-height: 100rpx;
					width: 188rpx;

				}
				>view:nth-child(2){
					font-size: 24rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #333333;
					line-height: 100rpx;
				}
				.picker-text2{
					font-size: 24rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #333333;
					line-height: 100rpx;
					width: 188rpx;
					text-align: right;
				}
			}

			.issue_li{
				margin:34rpx 26rpx 0;

				view:nth-child(1){
					color:red;
					line-height:28rpx;
					margin-right: 12rpx;
					display: inline-block;
				}
				view:nth-child(2){
					//width:140rpx;
					font-size: 28rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #333;
					display: inline-block;
				}
				view:nth-child(3){
					width: 668rpx;
					height: 270rpx;
					border: 1px solid #E0E0E0;
					border-radius: 10rpx;
					text-align: center;
					margin-top: 34rpx;
					position: relative;
					>img{
						width: 668rpx;
						height: 270rpx;
						position: absolute;
						z-index: 10;
					}
					>text{
						font-size: 24rpx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #999999;
						line-height: 270rpx;
						position: absolute;
						left: 278rpx;
						z-index: 20;

					}
				}
				.issue_img{
					width: 210rpx;
					height: 210rpx;
					border-radius: 10rpx;
					margin-left:250rpx;
				}
			}
		}

		/* 按钮 */
		.sub_btn{
			width: 650rpx;
			height: 100rpx;
			background: #0183FA;
			border-radius: 20rpx;
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #FFFFFF;
			line-height: 100rpx;
			text-align: center;
			margin-left: 50rpx;
			position: fixed;
			bottom:30rpx;
			z-index: 1000;
		}
	}
	/deep/.input-value-border{
		display :none !important;
	}
</style>