FE-V2-XCX/pages/gasBottle/stockList/storageAdd.vue

<!-- 新增入库 -->
<template>
    <view id="register">
		<view class="register_li">
			<view class="register_li_min" @click="seleteGasFun()">
				<view>*</view>
				<view style="color: #999999;">气瓶：</view>
				<input v-model="form.gasName" disabled placeholder="请选择气瓶" placeholder-style="color:#333;"  type="text" >
			</view>
			<view class="register_li_min" style="border-bottom:0;">
				<view></view>
				<view style="color: #999999;">气体规格:</view>
				<input v-model="form.levelSizeName" disabled  type="text" >
			</view>
		</view>
		<view class="register_li">
			<view class="register_li_min" style="border:0;" v-if="isSelect">
				<view></view>
				<view>瓶身颜色：</view>
				<picker @change="bottleColorChange"  :range="bottleColorArr">
					<input class="picker-text" v-model="form.bottleColour" disabled type="text" placeholder-style="color:#999; text-align: right;font-size:24rpx;" placeholder="请选择瓶身颜色">
				</picker>
			</view>
			<view class="register_li_min" style="border:0;" v-if="!isSelect">
				<view></view>
				<view>瓶身颜色：</view>
				<input class="picker-text" v-model="form.bottleColour"  type="text" placeholder-style="color:#999; text-align: right;font-size:24rpx;" placeholder="请输入瓶身颜色">
			</view>
			<view class="custom_li_min" style="justify-content: flex-end;">
				<view class="custom"  @click="selectFun">{{isSelect?'自定义输入':'选择颜色'}}</view>
			</view>
			<view class="register_li_min" v-for="(item,index) in list">
				<view></view>
				<view>{{item.name}}</view>
				<view class="radio_group">
					<view class="radio" v-for="(item2,index2) in item.radioList" @click="radioClick(item,item2)">
						<img v-if="!item2.checked" src="@/pages_manage/images/icon_5.png">
						<img v-if="item2.checked" src="@/pages_manage/images/icon_6.png">
						<text>{{item2.name}}</text>
					</view>
				</view>
			</view>
			<view class="register_li_min">
				<view> </view>
				<view>气表压力：</view>
				<input v-model="form.gasPressure" maxlength="6"  @input="onKeyVinInput($event)" placeholder-style="color:#999;" placeholder="请输入气表压力">
			</view>
			<!-- 检验有效期 -->
			<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.validPeriod" disabled  type="text" placeholder-style="color:#999;"  placeholder="时间">
				</picker>
			</view>
			<view class="register_li_min" >
				<view>*</view>
				<view>信标标签：</view>
				<input v-model="form.beaconTag"   type="text" placeholder-style="color:#999;" placeholder="请输入信标标签ID">
				<img @click.stop="saoCode"  class="code_img" src="@/pages_manage/images/Version2.2/icon_aqjc_sm.png">
			</view>
			<view class="register_li_min">
				<view>*</view>
				<view>实验室：</view>
				<picker @change="bindPickerChange" :value="laboratoryIndex" :range="laboratory">
					<input class="picker-text" v-model="form.subjectName" disabled type="text" placeholder-style="color:#999; text-align: right;font-size:24rpx;" placeholder="请选择入库实验室">
				</picker>
			</view>
			<view class="register_li_min" style="border: none;">
			    <view>*</view>
				<view>备注：</view>
				<input v-model="form.remark"   type="text" placeholder-style="color:#999;" placeholder="请输入验收备注">
			</view>
		</view>
		<view class="sub_btn" @click="submitForm()">确认信息并入库</view>
	</view>
</template>

<script>
    import {getSubjectDict,airbottleStockEnter,subjectList,laboratorySubjectListSubJoinbeacon} from '@/api/index.js'
	import { config } from '@/api/request/config.js'
    export default {
        data() {
            return {
				form:{
				},
				laboratory:['请选择实验室'],
				laboratoryList:[],
				laboratoryIndex:0,
				infoForm:{},
				item:{},
				id:{},
				bottleColorArr:[],
				bottleColorArrList:uni.getStorageSync('bottleColor'),
				isSelect:true,
				list:[
					{
						id:'0',
						name:'有无手轮：',
						lab:'isHandwheel',
						radioList:[
							{
								id:1,
								name:'有',
								checked:true,
							},
							{
								id:0,
								name:'无',
								checked:false,
							},
						]

					},
					{
						id:'0',
						name:'是否固定：',
						lab:'isFixed',
						radioList:[
							{
								id:1,
								name:'是',
								checked:true,
							},
							{
								id:0,
								name:'否',
								checked:false,
							},
						]

					},
					{
						id:'0',
						name:'电子标签：',
						lab:'isElectronicTag',
						radioList:[
							{
								id:1,
								name:'有',
								checked:true,
							},
							{
								id:0,
								name:'无',
								checked:false,
							},
						]

					},
					{
						id:'0',
						name:'气瓶状态标牌：',
						lab:'isStatusSign',
						radioList:[
							{
								id:1,
								name:'有',
								checked:true,
							},
							{
								id:0,
								name:'无',
								checked:false,
							},
						]

					}
				],
				
            
			}
        },
        onLoad(option) {
			let self=this;
			//获取气瓶颜色
			if(this.bottleColorArrList){
				let list = [];
				for(let i=0;i<this.bottleColorArrList.length;i++){
					list.push(this.bottleColorArrList[i].dictValue);
				}
				this.bottleColorArr = Array.from(new Set(list));
			}
			if(option.form){
				this.form=JSON.parse(decodeURIComponent(option.form));
				if(this.form.gasName){
					self.$set(self.form,'bottleColour','');
					console.log(this.bottleColorArrList)
					this.bottleColorArrList.forEach(function(item){
						if(self.form.gasName==item.dictLabel){
							self.$set(self.form,'bottleColour',item.dictValue);
						}
					})
				}
			}
        },
        onShow(){
        },
		mounted(){
			this.getSubjectDict();
			
		},
        methods: {
			//限制只能输入数字
			onKeyVinInput(e) {
				const o = e.detail.value
				const inputRule = /[^\-?\d.]/g
				this.$nextTick(() => {
					this.form.gasPressure = o.replace(inputRule, '');
					if (this.form.gasPressure == '') {
						return
					} else {
						//执行对应代码
					}
				})
			},
			//颜色选择
			selectFun(){
				if(this.isSelect){
					this.isSelect=false;
				}else{
					this.isSelect=true;
				}
				this.form.bottleColour='';
			},
			//开始时间选中事件
			startChange(e){
				this.$set(this.form,'validPeriod',e.target.value);
			},
			//实验室选择器
			bindPickerChange(e){
				let self=this;
				self.laboratoryIndex = e.target.value;
				let subjectName = self.laboratory[self.laboratoryIndex];
				self.$set(self.form,'subjectName',subjectName);
				self.laboratoryList.forEach(function(item){
					if(item.name==subjectName){
						self.$set(self.form,'subjectId',item.id);
					}
				})
			},
			
			//气瓶颜色选择
			bottleColorChange(e){
				let self=this;
				let bottleColour = self.bottleColorArr[e.target.value];
				self.$set(self.form,'bottleColour',bottleColour);
			},
			//单选按钮
			radioClick(p,d){
				d.checked=!d.checked
				if(d.checked){
					//如果有选中的，循环把其他选中的取消
					p.radioList.forEach(function(item){
						if(item.id==d.id){

						}else{
							item.checked=false;
						}
					})
				}else{

				}

			},
			//调用摄像头
			saoCode(){
				let _this = this;
			    uni.scanCode({
			        onlyFromCamera: true,
			        success: function (res) {
						_this.$set(_this.form,'beaconTag',res.result);
			        }
			    });
			},
			//实验室列表
			async getSubjectDict(){
				let self = this;
				let {data} = await laboratorySubjectListSubJoinbeacon()
				if(data.code == 200){
					if(data.data[0]){
						let list = [];
						for(let i=0;i<data.data.length;i++){
							list.push(data.data[i].name);
						}
						this.laboratory = list;
						this.laboratoryList = data.data;
					}
				}
			},
			//选择气瓶
			seleteGasFun(){
				uni.redirectTo({
				    url:'/pages/gasBottle/stockList/seleteGas?form='+encodeURIComponent(JSON.stringify(this.form))
				});
			},
			//提交
			async submitForm(){
				let _this = this;
				if(!this.form.gasName){
					uni.showToast({
						title: '请选择气体名称',
						icon:"none",
						mask:true,
						duration: 2000
					});
					return
				}
				// if(!this.form.gasPressure){
				// 	uni.showToast({
				// 		title: '请输入气表压力',
				// 		icon:"none",
				// 		mask:true,
				// 		duration: 2000
				// 	});
				// 	return
				// }
				// if(!this.form.validPeriod){
				// 	uni.showToast({
				// 		title: '请选择检验有效期',
				// 		icon:"none",
				// 		mask:true,
				// 		duration: 2000
				// 	});
				// 	return
				// }
				if(!this.form.beaconTag){
					uni.showToast({
						title: '请输入信标标签',
						icon:"none",
						mask:true,
						duration: 2000
					});
					return
				}
				if(!this.form.subjectId){
					uni.showToast({
						title: '请选择实验室',
						icon:"none",
						mask:true,
						duration: 2000
					});
					return
				}
				_this.list.forEach(function(item){
					item.radioList.forEach(function(item2){
						if(item.lab=='isHandwheel' && item2.checked){
							_this.form.handwheel=item2.id;
						}else if(item.lab=='isFixed' && item2.checked){
							_this.form.fixed=item2.id;
						}else if(item.lab=='isElectronicTag' && item2.checked){
							_this.form.electronicTag=item2.id;
						}else if(item.lab=='isStatusSign' && item2.checked){
							_this.form.statusLabel=item2.id;
						}
					})
				})
				const {data} = await airbottleStockEnter(_this.form);
				if(data.code == 200){
				    uni.showToast({
				        title: '提交成功',
				        icon:"none",
				        mask:true,
				        duration: 2000
				    });
				    setTimeout(function(){
				       uni.redirectTo({
				            url: '/pages/gasBottle/stockList/stockList'
				        });
				    },2000);
				}
			},


		}
    }
</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;
				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;
					flex: 1;
					font-size: 28rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #333333;
				}
				.picker-text{
					text-align: right;
					font-size: 28rpx;
				}

				>input{
					width 400rpx;
					text-align: right;
					font-size: 24rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #333333;
				}
				.code_img{
					width: 30rpx;
					height: 28rpx;
					margin-left: 26rpx;
				}
				/* 单选按钮 */
				.radio_group{
					display: flex;
					.radio{
						display: flex;
						margin-left: 74rpx;
						margin-right: 0;
						>img{
							width: 30rpx;
							height: 30rpx;
						}
						>text{
							margin-left: 34rpx;
							font-size: 28rpx;
							font-family: PingFang SC;
							font-weight: 500;
							color: #333333;
							line-height: 28rpx;
						}
					}
				}
			}
			/* 时间 */
			.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: #333333;
					line-height: 100rpx;
					margin-right: 96rpx;
				}
				.picker-text{
					font-size: 24rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #999999;
					line-height: 100rpx;
					width: 390rpx;
					text-align: right;

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

		}
		/* 按钮 */
		.custom_li_min{
			margin:0 26rpx;
			display flex;
			align-items center;
			border-bottom: 1px solid #F5F5F5;
			.custom{
				width: 150rpx;
				height: 60rpx;
				border-radius: 10rpx 10rpx 10rpx 10rpx;
				opacity: 1;
				border: 1rpx solid #0183FA;
				font-size: 26rpx;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 400;
				color: #0183FA;
				line-height: 60rpx;
				text-align: center;
				float: right;
				margin-bottom: 12rpx;
			}
		}
		
		/* 按钮 */
		.sub_btn{
			width: 650rpx;
			height: 100rpx;
			background: #0183FA;
			border-radius: 50rpx;
			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>