FE-V2-XCX/pages/gasBottle/gasUse/gasUse.vue

<!--气瓶使用-->
<template>
    <view id="gasRecycle">
		<view class="title">{{form.gasName}}-{{form.levelName}}({{form.sizeName}})</view>
		<view class="register_li">
			<view class="register_li_min">
				<view>余量：</view>
				<input v-model="form.gasPressure" disabled  type="text" style="color: #D60000;">
			</view>
			<view class="register_li_min">
				<view>学院：</view>
				<input v-model="form.collegeName" disabled  type="text" >
			</view>
			<view class="register_li_min" style="border: none;">
				<view>实验地点：</view>
				<input v-model="form.subjectName" disabled  type="text" >
			</view>
		</view>
		<view class="register_li2">
			<view class="period" v-if="pageType==0">
				<view class="period_l"><i>*</i>开始时间</view>
				<view class="period_r">
					<input class="picker-text"  @click="changeDateTime()" disabled type="text" v-model="form.usageStartTime" placeholder="开始时间">
				</view>
			</view>
			<view class="period" v-if="pageType==0">
				<view class="period_l"><i>*</i>结束时间</view>
				<view class="period_r">
					<input class="picker-text" @click="changeDateTime2()"  disabled type="text" v-model="form.usageEndTime" disabled placeholder="结束时间">
				</view>
			</view>
			<view class="register_li_min" v-if="pageType==0">
				<view>*</view>
				<view>使用时长：</view>
				<input v-model="form.usageTime+usageTimeUnit" placeholder="--" disabled type="text" >
			</view>
			<view class="register_li_min" v-if="pageType==0">
				<view>*</view>
				<view>当前压力：</view>
				<input v-model="form.currentPressure" @input="onKeyVinInput($event)" type="number" @change="calculateAmountFun()" placeholder="请输入当前压力值">
			</view>
			<view class="register_li_min" v-if="pageType==0">
				<view>*</view>
				<view>本次使用量：</view>
				<input v-model="form.usageAmount" placeholder="--" type="text" >
			</view>
			<view class="up-img-box">
				<view class="asterisk">*</view>
			    <view class="title-view">气表照片：</view>
			    <view class="img-max-box">
			        <view class="img-box" v-for="(item,index) in imgList" :key="index">
			            <img class="img-data" :src="baseUrl+item">
			            <img class="position-img" src="@/pages_manage/images/icon_ssp_closure.png" @click="delImg(index)">
			        </view>
			        <img class="add-button" src="@/pages_manage/images/icon_07.png" @click="selectImage" v-if="imgList.length<1">
			        <img class="add-button" src="@/pages_manage/images/Version3.0/img_sydj_sltp.png" >
			    </view>
			</view>
		</view>
		<view class="btn" v-if="pageType==0">
			<view class="btn_l" @click="handleClick('gasApply')">气瓶出库</view>
			<view class="btn_r" @click="submitForm(1)">登记完成</view>
		</view>
		<view v-if="pageType==1" class="sub_btn" @click="submitForm(2)">提交余量不符并使用</view>
		<!-- 一遮罩-->
		<view class="shade-outfire" v-if="dialogVisible">
			<view class="null-box" @click="dialogOutfire()"></view>
			<view class="shade-outfire-n">
				<view class="btns">
					<text @click="dialogOutfire()">取消</text>
					<text @click="submitDate()">确认</text>
				</view>
				<DateTimePicker
				   @onChange="onChangeStartDate"
				  :defaultDate="startDate"
				  :maxDate="endDate"
				  :mode="4"
				  @="StartDate"
				/>
			</view>
		</view>
	</view>
</template>

<script>
	import DateTimePicker from '@/components/dengrq-datetime-picker/dateTimePicker/index.vue';
	import {airbottleStockFindByBeaconTag,airbottleUsageRecordAdd} from '@/api/index.js'
	import { config } from '@/api/request/config.js'
    export default {
        name: "gasRecycle",
		 components: {
		    DateTimePicker
		  },
        data() {
            return {
				baseUrl:config.base_url,
				pageType:0,//0气瓶使用 1余量不符
				//列表请求参数
				getData:{
				    pageNum:1,
					pageSize:20,
					isCg:0,
					zgStatus:"",
				    getType:true,
				    nullDataType:true,
				},
				userType:uni.getStorageSync('userType'),
				gasBottleLevel:uni.getStorageSync('gasBottleLevel'),//  气瓶级别
				gasBottleSpecification:uni.getStorageSync('gasBottleSpecification'), // 气瓶规格
				form:{
					location:'10map'
				},
                dataList:[],
				imgList:[],
				specificationName:{},
				currentStatus:null,
				beaconTag:'',
				dialogVisible:false,
				//时间年月日时分秒
				dateTime: null,
				dateTimeArray: null,
				startYear: 0,
				endYear: 0,
				timeStr:'',
				usageTimeUnit:'分钟',
				currentDate:'',//开始时间默认当前时间
				startDate:'',
				endDate:'',
				dateType:0,//0开始时间 1结束时间
            }
        },
        onLoad(option) {
			this.currentDateStartFun()
			if(option.beaconTag){
				this.beaconTag=option.beaconTag;
			}
			
        },
        onShow() {

        },
		mounted(){
		  this.getInfo()
		  
		 
		},
        methods: {
			//限制只能输入数字
			onKeyVinInput(e) {
				const o = e.detail.value
				const inputRule = /[^\-?\d.]/g
				this.$nextTick(() => {
					this.form.currentPressure = o.replace(inputRule, '');
					if (this.form.currentPressure == '') {
						return
					} else {
						//执行对应代码
					}
				})
			},
			//当前时间年月日时分
			currentDateStartFun(){
				var self = this;
				let yy = new Date().getFullYear();
				let mm = new Date().getMonth()+1;
				let dd = new Date().getDate();
				dd = (dd < 10 ? '0' : '') + dd
				let hh = new Date().getHours();
				let mf = new Date().getMinutes()<10 ? '0'+new Date().getMinutes() : new Date().getMinutes();
				let ss = new Date().getSeconds()<10 ? '0'+new Date().getSeconds() : new Date().getSeconds();
				self.currentDate=yy+'-'+mm+'-'+dd+' '+hh+':'+mf;
			},
			durationFun(){
				let self=this;
				let duration=new Date(self.form.usageEndTime).getTime()-new Date(self.form.usageStartTime).getTime()
				let minutes = parseInt(duration/(1000 * 60))
				this.$set(this.form,'usageTime',minutes);
			},
			//时间确定
			submitDate(){
				this.dialogVisible=false;
			},
			//弹出层关闭
			dialogOutfire() {
			  this.dialogVisible = !this.dialogVisible
			},
			//选中的时间
			onChangeStartDate(date) {
				console.log(date)
				if(this.dateType==0){//开始时间
					if(new Date(date).getTime()>new Date(this.form.usageEndTime).getTime()){
						 uni.showToast({
							title: '开始时间不能大于结束时间',
							icon:"none",
							mask:true,
							duration: 2000
						});
					}else{
						this.form.usageStartTime= date;
					}
				}else if(this.dateType==1){//结束时间
					if(new Date(date).getTime()<new Date(this.form.usageStartTime).getTime()){
						 uni.showToast({
							title: '结束时间不能小于开始时间',
							icon:"none",
							mask:true,
							duration: 2000
						});
					}else{
						this.form.usageEndTime= date
						this.durationFun();//使用时长
					}
				}
				
			},
			//开始时间
			changeDateTime() {
				this.dateType=0;
				this.dialogVisible=true;
			 },
			 //结束时间
			 changeDateTime2() {
				 this.dateType=1;
				 this.dialogVisible=true; 
			},
			//点击事件
			handleClick(doType) {
				let _this=this;
			   if(doType=='inconformity'){//余量不符
				 _this.pageType=1;
			   }else if(doType=='gasApply'){//气瓶出库
				   uni.redirectTo({
				   	 url:'/pages/gasBottle/gasOutstock/gasOutstock?id='+this.form.id
				   })
			   }
			},
			//输入当前压力值后计算本次使用量
			calculateAmountFun(){
				let num=parseFloat(this.form.gasPressure)-parseFloat(this.form.currentPressure)
				if(num<=0){
					num=0;
				}
				if(Object.is(num, NaN)){
					this.$set(this.form,'usageAmount','')
				}else{
					this.$set(this.form,'usageAmount',num.toFixed(2)?num.toFixed(2):'')
				}
				
			},
			// //开始时间选中事件
			// startChange(form,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.$set(this.form,'startTime',e.target.value);
			// 	}
			// },
			// //结束时间选中事件
			// endChange(form,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.$set(this.form,'endTime',e.target.value);
			// 	}
			// },

			// 图片上传
			selectImage(index) {
			    let self = this;
			    if(self.imgList.length>1){
			        uni.showToast({
			            title: '最多上传1张图片',
			            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,index);
			        }
			    });
			},
			async uploadImg(tempFilePaths,index){
			    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.imgList.push(res.data.url);

						}else{
							uni.showToast({
								title: res.msg,
								icon:"none",
								mask:true,
								duration: 2000
							});
						}
			        },
			        fail: err => {},
			        complete: () => {
			            uni.hideLoading()
			        }
			    });
			},
			//删除图片
			delImg(index){
			    this.imgList.splice(index,1);
			},
			async getInfo(){
				let self=this;
				const {data} = await airbottleStockFindByBeaconTag({BeaconTag:self.beaconTag});
				if(data.code==200){
					for(let b=0;b<this.gasBottleSpecification.length;b++){
						if(this.gasBottleSpecification[b].dictValue==data.data.size){
							data.data.sizeName=this.gasBottleSpecification[b].dictLabel
						}										
					}
					for(let t=0;t<this.gasBottleLevel.length;t++){
						if(this.gasBottleLevel[t].dictValue==data.data.level){
							data.data.levelName=this.gasBottleLevel[t].dictLabel
						}
					}
					self.form=data.data;
					this.$set(this.form,'usageTime',0);
					this.$set(this.form,'usageStartTime',self.currentDate);
					
					console.log(self.currentDate)
					
				}
			},
			//提交
			async submitForm(type){
				let _this = this;
				if(_this.imgList.length<=0){
					uni.showToast({
						title: '请选择气表图片!',
						icon:"none",
						mask:true,
						duration: 2000
					});
					return
				}
				if(!_this.form.usageAmount){
					uni.showToast({
						title: '请输入本次使用量!',
						icon:"none",
						mask:true,
						duration: 2000
					});
					return
				}
				this.$set(this.form,'stcokId',this.form.id);
				this.$set(this.form,'id','');
				this.$set(this.form,'usageImg',this.imgList.join(','));
				this.$set(this.form,'gasPressure',this.form.currentPressure);
				
				const {data} = await airbottleUsageRecordAdd(this.form);
				if(data.code == 200){
				    uni.showToast({
				        title: '提交成功',
				        icon:"none",
				        mask:true,
				        duration: 2000
				    });
				    setTimeout(function(){
				       uni.redirectTo({
				            url: '/pages/gasBottle/gasManage/gasManage'
				        });
				    },2000);
				}

			},
        }
    }
</script>

<style lang="stylus" scoped>
    #gasRecycle {
        height: auto;
        width: 100%;
		flex :1;
        display flex;
        flex-direction column;
        overflow hidden;
		padding-bottom: 220rpx;
		.title{
			width: 750rpx;
			height: 100rpx;
			background: #FFFFFF;
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #333333;
			line-height: 100rpx;
			padding-left: 40rpx;
		}
		.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{
					//width:140rpx;
					font-size: 28rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #999999;
					line-height: 100rpx;
				}
				>input{
					flex:1;
					text-align: right;
					font-size: 24rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #333333;
				}
				.inconformity{
					font-size: 24rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #D60000;
					margin-left: 40rpx;
				}
			}

		}
		.register_li2{
			background #fff;
			border-radius:20rpx;
			margin:20rpx 20rpx 0;
			padding:20rpx 0;
			box-sizing: border-box;
			.period{
				display: flex;
				justify-content: flex-start;
				align-items: center;
				margin: 0 26rpx;
				border-bottom: 1px solid #f5f5f5;
				.period_l{
					width: 146rpx;
					font-size: 30rpx;
					font-family: PingFang SC-Medium, PingFang SC;
					font-weight: 400;
					color: #333333;
					line-height: 42rpx;
					text-align: left;
					>i{
						display: inline-block;
						color: #f00;
						line-height: 28rpx;
						margin-right: 12rpx;
					}
				}
				.period_r{
					width: 490rpx;
					height: 80rpx;
					border-radius: 10rpx;
					display: flex;
					justify-content: flex-start;
					align-items: center;
					.picker-text{
						font-size: 30rpx;
						font-family: PingFang SC-Medium, PingFang SC;
						font-weight: 400;
						color: #999;
						line-height: 80rpx;
						width: 516rpx;
						text-align: right;
					}
					// .picker-text2{
					// 	font-size: 30rpx;
					// 	font-family: PingFang SC-Medium, PingFang SC;
					// 	font-weight: 400;
					// 	color: #333;
					// 	line-height: 80rpx;
					// 	width: 230rpx;
					// 	text-align: center;
					// }
				}
			}
			.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:nth-child(1){
					color:red;
					line-height:28rpx;
					margin-right: 12rpx;
				}
				view{
					//width:140rpx;
					font-size: 28rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #333333;
					line-height: 100rpx;
				}
				>input{
					flex:1;
					text-align: right;
					font-size: 24rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #999999;
				}
			}
			/* 照片 */
			.up-img-box{
			    display flex
			    margin:34rpx 26rpx;
				.asterisk{
					padding-top:30rpx;
					color:red;
					line-height:28rpx;
					margin-right: 12rpx;
				}
			    .title-view{
			        width:150rpx;
			        line-height:80rpx;
			        font-size: 30rpx;
			        color:#333;
			    }
			    .img-max-box{
			        width:480rpx;
					display: flex;
			        .img-box{
			            display inline-block
			            height:150rpx;
			            width:150rpx;
			            position relative
			            margin:0 20rpx 20rpx 0;
			            .img-data{
			                height:150rpx;
			                width:150rpx;
			            }
			            .position-img{
			                position absolute
			                right:0;
			                top:0;
			                width:36rpx;
			                height:36rpx;
			            }
			        }
			        .add-button{
			            display inline-block
			            height:150rpx;
			            width:150rpx;
						margin-right: 20rpx;
			        }
			    }
			}

		}
		/* 按钮 */
		.btn{
			display: flex;
			position: fixed;
			bottom: 40rpx;
			left: 50rpx;
			.btn_l{
				width: 324rpx;
				height: 100rpx;
				background: #F28E26;
				border-radius: 50rpx 0rpx 0rpx 50rpx;
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #FFFFFF;
				line-height: 100rpx;
				text-align: center;
			}
			.btn_r{
				width: 324rpx;
				height: 100rpx;
				background: #0183FA;
				border-radius: 0rpx 50rpx 50rpx 0rpx;
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #FFFFFF;
				line-height: 100rpx;
				text-align: center;
			}
		}
		/* 按钮 */
		.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;
		}
		/* 空 */
		.empty{
			background #fff;
			border-radius:20rpx;
			margin:20rpx 20rpx 0;
			padding:20rpx 0;
			box-sizing: border-box;

			>img{
				width: 100rpx;
				height: 100rpx;
				margin-top: 124rpx;
				margin-left: 300rpx;
			}
			>view{
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #333333;
				line-height: 30rpx;
				text-align: center;
				margin-top: 42rpx;
				padding-bottom: 106rpx;
			}
		}
		/* 弹窗 */
		.shade-outfire {
			height: 100%;
			width: 100%;
			position: fixed;
			display: flex;
			flex-direction: column;
			z-index: 10;
			background: rgba(0, 0, 0, 0.2);
		
			.null-box {
				flex: 1;
			}
			/* 内容 */
			.shade-outfire-n {
				width: 100%;
				height: 450rpx;
				background: #FFFFFF;
				border-radius: 20rpx;
				position: absolute;
				bottom: 0rpx;
				left: 0rpx;
				.btns{
					width: 100%;
					height: 100rpx;
					display: flex;
					justify-content: space-between;
					align-items: center;
					padding: 0 30rpx;
					box-sizing: border-box;
					border-bottom: 1rpx solid #dedede;
					>text{
						color: #7f7f7f;
						font-size: 36rpx;
						display: inline-block;
					}
					>text:nth-of-type(2){
						color: #42a06c;
					}
				}
			}
		}
	}
</style>