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

<!-- 气瓶详情-->
<template>
    <view id="register">
		<view class="register_li">
			<picker @change="bindPickerChange" disabled :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></view>
				<view style="color: #333333;">气体组分：</view>
				<input v-model="form.airConstituents"  disabled 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'"  >{{item.configName}}</view>
		</view>
		<view v-if="status==1" 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:{
					airName:'',
					airConstituents:'',
					configDtos:[],
				},
				pickerArray:[],
				googsArray:[],
				listType:0,//0回收申请 1配送申请 2货品问题
				specsList:[],
				status:null,//0添加1编辑2查看
				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)
					}
				})
			},
			//获取气体列表数据
			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){
						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;
								}
							})
						})
						_this.specsList=arr;
					}
			    }
			},
			//获取详情
			async getInfo(){
			    let _this = this;
			    const {data} = await bottleDetail(this.id)
			    if(data.code==200){
					let res=data.data
					this.form=res;
					if(res.configVos){
						this.specsList=res.configVos
					}
					_this.getGoogsInfoList(res.configId)
			    }
			},
			//提交
			async submitForm(){
				uni.redirectTo({
				    url:'/pages_supplier/gasManage/gasManageAdd?status=1&id='+this.id
				});
			},


        },
		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>