v3-lab-xcx/pages_manage/views/gasBottle/useGasApply/useGasApplyAdd.vue

<!-- 用气申请-->
<template>
    <view id="register">
		<view class="register_li">
			<view class="register_li_min">
				<img class="icon_img" src="@/pages_manage/images/icon_zgsq_sqr.png">
				<view>申请人：</view>
				<input v-model="form.applyUser" disabled  type="text" >
			</view>
			<view class="register_li_min" style="border: none;">
				<img class="icon_img" src="@/pages_manage/images/icon_zgsq_dhh.png">
				<view>联系方式：</view>
				<input v-model="form.phone"   type="text" >
			</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>
			<picker @change="bindPickerChange2" :value="pickerIndex2" :range="pickerArray2">
				<view class="register_li_min">
					<view>*</view>
					<view>使用气体：</view>
					<input v-model="form.useGasName" 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="submitForm()">提交</view>
		<view v-if="listType==2" class="sub_btn">重新申请</view>
	</view>
</template>

<script>
    import {labList,getLoginUser,useAgsApplyAdd,useAgsApplyDetail,useAgsApplyAmend,qualificationVerify,googsList} 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:'',//实验地点
					useGasName:'',//气体名称
					useGasId:'',//气体名称Id
					subjectId:'',//实验地点Id
					startTime:'',//期限开始
					endTime:'',//期限结束
					gasUse:'',//气体用途
					safetyPrecautions:'',//安全措施
					applyCertificate:'',//用气申请表
				},
				checkStatus:0,
				pickerArray:[],
				pickerArrayList:[],
				pickerArray2:[],//气体名称
				pickerArrayList2:[],//气体名称
				status:null,//0添加1编辑
				id:null,
            }
        },
        onLoad(option) {
			this.status=option.status;
			this.id=option.id;

        },
        onShow(){

        },
        methods: {

			//查询实验室
			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 googsList(){
			    let _this = this;
			    const {data} = await googsList({id:this.id})
			    if(data.code==200){
					let _this=this;
					let res=data.rows
					_this.pickerArrayList2=res;
					res.forEach(function(item){
						_this.pickerArray2.push(item.goodsName);
					})
				}
			},
			//查询用户信息
			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 bindPickerChange2(e){
				let _this=this;
				let index=e.target.value
				//获取实验室名称
				_this.form.useGasName=_this.pickerArray2[index]
				//循环获取实验室id
				_this.pickerArrayList2.forEach(function(item){
					if(_this.pickerArray2[index]==item.goodsName){
						_this.form.useGasId=item.id;
					}
				})
			},
			//选择实验室
			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 + '/system/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 useAgsApplyDetail({id:this.id})
			    if(data.code==200){
					let res=data.data
					_this.form=res.apply;


				}
			},

			//提交
			async submitForm(){
				let _this = this;
				if(!this.form.applyUser){
					uni.showToast({
						title: '请输入申请人',
						icon:"none",
						mask:true,
						duration: 2000
					});
					return
				}
				if(!this.form.phone){
					uni.showToast({
						title: '请输入联系方式',
						icon:"none",
						mask:true,
						duration: 2000
					});
					return
				}
				if(!this.form.location){
					uni.showToast({
						title: '请输入实验地点',
						icon:"none",
						mask:true,
						duration: 2000
					});
					return
				}
				if(!this.form.startTime){
					uni.showToast({
						title: '请输入期限开始',
						icon:"none",
						mask:true,
						duration: 2000
					});
					return
				}
				if(!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
				}
				_this.form.listDetail=_this.listDetailArr;
				if(_this.status==0){//添加
					const {data} = await useAgsApplyAdd(_this.form);
					if(data.code == 200){
					    uni.showToast({
					        title: '提交成功',
					        icon:"none",
					        mask:true,
					        duration: 2000
					    });
					    setTimeout(function(){
					       uni.redirectTo({
					            url: '/pages_manage/gasBottle/useGasApply/useGasApply'
					        });
					    },2000);
					}
				}else if(_this.status==1){//编辑
					const {data} = await useAgsApplyAmend(_this.form);
					if(data.code == 200){
					    uni.showToast({
					        title: '提交成功',
					        icon:"none",
					        mask:true,
					        duration: 2000
					    });
					    setTimeout(function(){
					       uni.redirectTo({
					            url: '/pages_manage/gasBottle/useGasApply/useGasApply'
					        });
					    },2000);
					}
				}

			},

        },
		mounted(){
		   this.googsList()
		   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;
		.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: 110rpx;
				}
				.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;
		}
	}
	/deep/.input-value-border{
		display :none !important;
	}
</style>