v3-lab-xcx/pages_manage/gasBottle/gasApply/gasApplyAdd.vue

<!--申请气瓶-->
<template>
    <view id="transportPerson">
		<picker @change="bindPickerChange" :value="pickerIndex" :range="pickerArray">
			<view class="title">
				<viwe class="title_l">实验地点：</viwe>
				<input class="title_r" v-model="form.location" disabled type="text" placeholder="请选择实验地点">
			</view>
		</picker>
		<scroll-view scroll-y @scrolltolower="scrollGet" class="scroll-box">
		    <view class="list">
				<view class="list_li" v-for="(item,index) in listDetail">
					<view class="list_li_l">
						<view class="list_li_l_t">{{item.airName}}-{{item.configName}}</view>
						<view class="list_li_l_b">
							<img  src="@/images/basicsModules/icon_14.png">
							<text>{{item.companyName}}</text>
						</view>
					</view>
					<view class="list_li_r">
						<view class="minus"  @click="minus(item)"><img  src="@/pages_manage/images/icon_zgsq_jian.png"></view>
						<input v-model="item.bottleNumber"  disabled  type="text" >
						<view class="add"  @click="add(item)"><img  src="@/pages_manage/images/icon_zgsq_j.png"></view>
					</view>
				</view>
			</view>
		</scroll-view>
		<view class="empty" v-if="pageType==4">
			<img class="for-back-img" src="@/pages_manage/images/icon_sqqp_sqys.png">
			<view>
				<text>气瓶已全部向供应商申请运输</text>
				<text>如需更多气瓶请重新提交资格申请</text>
			</view>
		</view>
		<view v-if="amount>0" class="sub_btn">
			<view class="sub_btn_l">已选择{{amount}}个气瓶</view>
			<view class="sub_btn_r" @click="submitVerify()">提交</view>
		</view>
		<view v-if="amount==0" class="sub_btn2">
			<view class="sub_btn_l">暂未选择气瓶</view>
			<view class="sub_btn_r">提交</view>
		</view>
		<view class="sub_btn2" v-if="pageType==4">提交申请</view>
	</view>
</template>
<script>
	import { taskListGood,labList,gasApplyAdd,gasApplyVerify} from '@/api/apiDemo/index.js'
    export default {

        name: "transportPerson",
        data() {
            return {

				pageType:0,
				//列表请求参数
				params:{
					pageNum:1,
					pageSize:20,
					searchValue:'',
				},
                listDetail:[],
				form:{
					location:'',
				},
				pickerArray:[],
				pickerArrayList:[],
				amount:0,
				status:null,//0添加1编辑
            }
        },
        onLoad(option) {
			this.status=option.status;
        },
        onShow() {

        },
        methods: {
			search(){
				 this.getList();
			},
			minus(d) {
				let _this=this;
				 if(d.bottleNumber>0){
					 _this.amount=0;
					d.bottleNumber--;
					this.listDetail.forEach(function(item){
						_this.amount+=item.bottleNumber;
					})
				 }

			},
			add(d) {
				let _this=this;
				_this.amount=0;
				d.bottleNumber++;
				this.listDetail.forEach(function(item){
					_this.amount+=item.bottleNumber;
				})

			},
			//滚动加载事件
			scrollGet(){
			   this.params.pageNum += 1;
			   this.getList();
			},
			//选择实验室
			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.locationId=item.id;
					}
				})

			},
			//查询实验室
			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 getList(){
				    let _this = this;

				    const {data} = await taskListGood(this.params);
				    if(data.code==200){
						let res=data.rows;
						if(res){

							if(_this.params.pageNum==1){
								res.forEach(function(item){
									item.bottleNumber=0;
								})
								_this.listDetail=res;
							}else{
								res.forEach(function(item){
									item.bottleNumber=0;
								})
								_this.listDetail=_this.listDetail.concat(res);

							}

						}

				    }
				},
				async submitVerify(){

					let _this=this;

					if(_this.form.location==''){
						uni.showToast({
						    title: '请先选择实验室!',
						    icon:"none",
						    mask:true,
						    duration: 2000
						});
						return;
					}
					const {data} = await gasApplyVerify({subjectId:_this.form.locationId});
					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.listDetail){
					let arr=[];
					let supplierId='';
					_this.listDetail.forEach(function(item){
						item.supplierId=item.companyId
						supplierId=item.companyId
						if(item.bottleNumber>0){
							arr.push(item)
						}
					})
					_this.form.detailListVO=arr;
				}
				const {data} = await gasApplyAdd(_this.form);
				if(data.code == 200){
				    uni.showToast({
				        title: '提交成功',
				        icon:"none",
				        mask:true,
				        duration: 2000
				    });
				    setTimeout(function(){
				       uni.redirectTo({
				            url: '/pages_manage/gasBottle/gasApply/gasApply'
				        });
				    },2000);
				}
			},

        },
		mounted(){
		   this.getList()
		   this.labList()

		},
    }
</script>

<style lang="stylus" scoped>
    #transportPerson {
        height: 100%;
        width: 100%;
		flex :1;
        display flex;
        flex-direction column
        overflow hidden;
		.title{
			width: 750rpx;
			height: 118rpx;
			background: #FFFFFF;
			padding: 0 40rpx;
			box-sizing: border-box;
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 20rpx;
			.title_l{
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #999999;
				line-height: 118rpx;
			}
			.title_r{
				flex: 1;
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #333333;
				text-align: right;
			}
		}
        .scroll-box{
        // flex:1;
         overflow-y scroll;
		 padding-top: 30rpx;
		 padding-bottom: 180rpx;
		 .list{
			 background: #FFFFFF;
			 border-radius: 20rpx;
			 margin: 0 20rpx;
			 padding: 0 20rpx;
			 box-sizing: border-box;
			 .list_li{
				 height: 180rpx;
				 display: flex;
				 justify-content: space-between;
				 padding: 0 20rpx;
				 box-sizing: border-box;
				 border-bottom:1px solid #f5f5f5;
				 .list_li_l{
					 flex: 1;
					 .list_li_l_t{
						 font-size: 28rpx;
						 font-family: PingFang SC;
						 font-weight: 500;
						 color: #333333;
						 line-height: 28rpx;
						 margin-top: 44rpx;
					 }
					 .list_li_l_b{
						 display: flex;
						 justify-content: flex-start;
						 margin: 42rpx 0 34rpx 0;
						 >img{
							 width: 28rpx;
							 height: 30rpx;
							 margin-right: 18rpx;
						 }
						 >text{
							font-size: 24rpx;
							font-family: PingFang SC;
							font-weight: 400;
							color: #666666;
							line-height: 24rpx;
						 }
					 }
				 }
				.list_li_r{
					 width: 222rpx;
					 display: flex;
					 justify-content: space-between;
					 align-items: center;
					 .minus{
						 width: 96rpx;
						 height: 96rpx;
						 >img{
							width: 36rpx;
							height: 36rpx;
							margin-top: 30rpx;
							margin-left: 30rpx;
						 }
					 }
					 .add{
						 width: 96rpx;
						 height: 96rpx;
						>img{
							width: 36rpx;
							height: 36rpx;
							margin-top: 30rpx;
							margin-left: 30rpx;
						}
					 }
					 >input{
						 text-align: center;
						 width: 90rpx;
						 font-size: 28rpx;
						 font-family: PingFang SC;
						 font-weight: 500;
						 color: #333333;
						 line-height: 36rpx;
					 }
				}

			 }
		 }
     }
		.empty{
			width: 710rpx;
			height: 700rpx;
			background: #FFFFFF;
			border-radius: 20px;
			text-align: center;
			margin:20rpx;
			>img{
				width: 430rpx;
				height: 280rpx;
				margin-left: 142rpx;
				margin-top: 72rpx;
			}
			>view{
				margin-top: 48rpx;
				>text{
					display: block;
					font-size: 24rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #999999;
					line-height: 44rpx;
				}
			}
		}
		/* 按钮 */
		.sub_btn{
			width: 750rpx;
			height: 120rpx;
			background: #FFFFFF;
			position: fixed;
			bottom: 0;
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 0 20rpx 0 40rpx;
			box-sizing: border-box;
			z-index: 1000;
			.sub_btn_l{
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #333333;
				line-height: 120rpx;
				flex: 1;
			}
			.sub_btn_r{
				width: 200rpx;
				height: 70rpx;
				background: #0183FA;
				border-radius: 35rpx;
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #FFFFFF;
				line-height: 70rpx;
				text-align: center;
			}
		}
		.sub_btn2{
			width: 750rpx;
			height: 120rpx;
			background: #FFFFFF;
			position: fixed;
			bottom: 0;
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 0 20rpx 0 40rpx;
			box-sizing: border-box;
			z-index: 1000;
			.sub_btn_l{
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #CCCCCC;
				line-height: 120rpx;
				flex: 1;
			}
			.sub_btn_r{
				width: 200rpx;
				height: 70rpx;
				background: #E0E0E0;
				border-radius: 35rpx;
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #999999;
				line-height: 70rpx;
				text-align: center;
			}
		}
	}
</style>