v3-lab-xcx/pages_supplier/gasManage/gasManageAdd.vue

<!-- 回收申请 -->
<template>
    <view id="register">
		<view class="register_li">
			<picker @change="bindPickerChange" :value="pickerIndex" :range="pickerArray">
				<view class="register_li_min">
					<view>*</view>
					<view style="color: #333333;">气体名称：</view>
					<input v-model="form.airName" disabled   type="text" placeholder="请选择气体名称">
				</view>
			</picker>
			<view class="register_li_min" style="border: none;">
			    <view style="margin-left: 12rpx;"></view>
				<view style="color: #333333;">气体组分：</view>
				<input v-model="form.airConstituents" maxlength="20"  type="text" placeholder="请输入气体组分">
			</view>
		</view>
		<view class="small_title" v-if="specsList.length>0">气瓶规格</view>
		<view class="register_li2" v-if="specsList.length>0">
			<view v-for="(item,index) in specsList"  :class="item.checked==false?'register_li2_btn':'colorB'"  @tap="tabClickSpecs(item)" >{{item.configName}}</view>
		</view>
		<view  class="sub_btn" @click="submitForm()">提交</view>
	</view>
</template>

<script>
    import {googsList,googsInfoList,bottleAdd,bottleAmend,bottleDetail} from '@/api/apiDemo/index.js'
	import { config } from '@/api/request/config.js'
    export default {
        data() {
            return {
				form:{
					id:'',
					airName:'',
					airConstituents:'',
					configId:'',
					configDtos:[],
				},
				pickerArray:[],
				googsArray:[],
				listType:0,//0回收申请 1配送申请 2货品问题
				specsList:[],
				status:null,//0添加1编辑
				id:null,
            }
        },
        onLoad(option) {
			this.status=option.status;
			this.id=option.id;
        },
        onShow(){

        },
        methods: {

			//气瓶规格选中事件
			tabClickSpecs(data){
				this.specsList.forEach(function(item){
					if(data.configId==item.configId){
						item.checked=item.checked==true?false:true;
					}
				})
			},
			//气体选中事件
			bindPickerChange(e){
				let _this=this;
				let index=e.target.value
				_this.form.airName=this.pickerArray[index]
				_this.googsArray.forEach(function(item){
					if(_this.pickerArray[index]==item.goodsName){
						_this.getGoogsInfoList(item.id)
						_this.form.configId=item.id
					}
				})
			},
			//获取气体列表数据
			async getGoogsList(){
			    let _this = this;
			    const {data} = await googsList()
			    if(data.code==200){
					let res=data.rows;
					_this.googsArray=res;
					if(res){
						res.forEach(function(item){
							_this.pickerArray.push(item.goodsName)
						})
					}
			    }
			},
			//获取气体列表数据
			async getGoogsInfoList(id){
			    let _this = this;
			    const {data} = await googsInfoList(id)
			    if(data.code==200){
					let res=data.data;
					if(res){

						if(_this.status==0){//添加
							res.forEach(function(item){
								_this.specsList.push({'configName':item.name,'configId':item.id,'checked':false,})
							})
						}else if(_this.status==1){//编辑
							let arr=[];
							//重新组装

							res.forEach(function(item){
								arr.push({'configName':item.name,'configId':item.id,'checked':false,})
							})
							//循环对比
							arr.forEach(function(item){
								_this.specsList.forEach(function(item2){
									if(item.configId==item2.configId){
										item.checked=true;
										item.id=item2.id;
									}
								})
							})
							_this.specsList=arr;
						}
					}
			    }
			},
			//获取详情
			async getInfo(){
			    let _this = this;
			    const {data} = await bottleDetail(this.id)
			    if(data.code==200){
					let res=data.data
					this.form.id=res.id;
					this.form.airName=res.airName;
					this.form.airConstituents=res.airConstituents;
					this.form.configId=res.configId;

					if(res.configVos){
						this.specsList=res.configVos;
					}
					_this.getGoogsInfoList(res.configId)
			    }
			},
			//注册提交
			async submitForm(){
				let _this = this;
				if(!this.form.airName){
					uni.showToast({
						title: '请选择气体名称!',
						icon:"none",
						mask:true,
						duration: 2000
					});
					return
				}


				//提交的时候过滤空数据
				let arr=[];

				_this.specsList.forEach(function(item){
					if(item.checked==true){
						arr.push(item)
					}
				})
				_this.form.configDtos=arr;
				if(this.status==0){//新增
					const {data} = await bottleAdd(_this.form);
					if(data.code == 200){
					    uni.showToast({
					        title: '提交成功',
					        icon:"none",
					        mask:true,
					        duration: 2000
					    });
					    setTimeout(function(){
					       uni.redirectTo({
					       	url: '/pages/supplierWorkbench',
					       });
					    },2000);
					}
				}else if(this.status==1){//编辑
					const {data} = await bottleAmend(_this.form);
					if(data.code == 200){
					    uni.showToast({
					        title: '提交成功',
					        icon:"none",
					        mask:true,
					        duration: 2000
					    });
					    setTimeout(function(){
					       uni.redirectTo({
					       	url: '/pages/supplierWorkbench',
					       });
					    },2000);
					}
				}

			},


        },
		mounted() {
			this.getGoogsList()
			if(this.status==1 || this.status==2){
				this.getInfo();
			}
		}
    }
</script>

<style lang="stylus" scoped>
    #register{
        height:100%;
        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;
				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;
				}

			}
		}
		.small_title{
			font-size: 30rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #999999;
			line-height: 100rpx;
			margin: 0 40rpx;
		}
		.register_li2{
			background #fff;
			border-radius:20rpx;
			margin:0 20rpx 0;
			padding:44rpx 0 20rpx 20rpx;
			box-sizing: border-box;
			display: flex;
			flex-wrap: wrap;

			.register_li2_btn{
				width: 200rpx;
				height: 60rpx;
				background: #F5F5F5;
				border-radius: 10rpx;
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #999999;
				line-height: 60rpx;
				text-align: center;
				margin-right: 22rpx;
				margin-bottom: 24rpx;
			}
			.colorB{
				width: 200rpx;
				height: 60rpx;
				background: #0183FA;
				border-radius: 10rpx;
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #FFFFFF;
				line-height: 60rpx;
				text-align: center;
				margin-right: 22rpx;
				margin-bottom: 24rpx;
			}
		}
		/* 按钮 */
		.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>