v3-lab-xcx/pages_supplier/backlogManage/backlogManageAirDetail.vue

<!-- 回收申请-->
<template>
    <view id="register">
		<view class="register_li">
			<view class="register_li_min">
				<view></view>
				<view>实验地点：</view>
				<input v-model="form.qpTask.location" disabled type="text" >
			</view>
			<view class="register_li_min">
			    <view></view>
				<view>联系人：</view>
				<input v-model="form.qpTask.userName" disabled  type="text" >
			</view>
			<view class="register_li_min" style="border: none;">
			    <view></view>
				<view>联系方式：</view>
				<input v-model="form.qpTask.phone" disabled  type="text" >
			</view>
		</view>
		<view class="register_li" >
			<view class="register_li_min" v-for="(item,index) in form.detailList">
				<view></view>
				<view>{{item.airName}}-{{item.configName}}：</view>
				<input v-model="'数量：'+item.bottleNumber" disabled  type="text" >
			</view>
		</view>
		<view class="register_li">
			<picker  @change="bindPickerPerson" :value="pickerIndex" :range="personList">
				<view class="register_li_min">
					<view>*</view>
					<view>运输人员：</view>
					<input v-model="form.userName" disabled type="text" placeholder="请选择运输人员">
				</view>
			</picker>
			<picker  @change="bindPickerCar" :value="pickerIndex" :range="carList">
				<view class="register_li_min">
					<view>*</view>
					<view>运输车辆：</view>
					<input v-model="form.carCode" disabled type="text" placeholder="请选择运输车辆">
				</view>
			</picker>
		</view>
		<view  class="sub_btn" @click="submitForm()">配送</view>
	</view>
</template>

<script>
    import {supplierBacklogDetail,
			supplierBacklogRecycleDetail,
			supplierBacklogIssueDetail,
			supplierBacklogPersonCar,
			supplierBacklogDistribution,
			} from '@/api/apiDemo/index.js'
	import { config } from '@/api/request/config.js'
    export default {
        data() {
            return {
				listType:0,//0回收申请 1供气配送申请 2货品问题  3回收
				form:{},
				id:'',//查询详情的id
				distributionId:'',//配送的id
				status:'',//gq hs wt
				personList:[],
				personListArr:[],
				carList:[],
				carListArr:[],
				editForm:{
					id:'',
					remark:'1',
					transportUser:{
						id:'',
						userName:'',
					},
					transportCar:{
						id:'',
						carCode:'',
					},
				},//配送
            }
        },
       onLoad(option) {
			this.id=JSON.parse(decodeURIComponent(option.item)).detailListVO[0].id;
			this.distributionId=JSON.parse(decodeURIComponent(option.item)).id;
			this.status=JSON.parse(decodeURIComponent(option.item)).remark;
       },
        onShow(){
        },
		mounted() {
			this.getInfo();
			this.getPersonCarList();
		},
        methods: {
			//供气人员点击
			bindPickerPerson(e){
				let _this=this;
				let index=e.target.value
				_this.form.userName=this.personList[index]
				_this.personListArr.forEach(function(item){
					if(item.userName==_this.personList[index]){
						_this.editForm.transportUser.id=item.id
						_this.editForm.transportUser.userName=item.userName
					}
				})
			},
			//供气车辆点击
			bindPickerCar(e){
				let _this=this;
				let index=e.target.value
				_this.form.carCode=this.carList[index]
				_this.carListArr.forEach(function(item){
					if(item.carCode==_this.carList[index]){
						_this.editForm.transportCar.id=item.id
						_this.editForm.transportCar.carCode=item.carCode
					}
				})

			},

			async getPersonCarList(){
			    let _this = this;
				const {data} = await supplierBacklogPersonCar()
				if(data.code==200){
					let res=data.data
					//车辆
					_this.carListArr=res.carlist;
					if(res.carlist){
						res.carlist.forEach(function(item){
							_this.carList.push(item.carCode)
						})
					}
					//人员
					_this.personListArr=res.userlist;
					if(res.userlist){
						res.userlist.forEach(function(item){
							_this.personList.push(item.userName)
						})
					}
				}
			},
			//获取详情
			async getInfo(){
			    let _this = this;
				const {data} = await supplierBacklogDetail({id:this.id})
				if(data.code==200){
					let res=data.data
					_this.form=res;
				}
			},
			//配送
			async submitForm(){
				let _this = this;
				if(!this.form.userName){
					uni.showToast({
						title: '请选择运输人员',
						icon:"none",
						mask:true,
						duration: 2000
					});
					return
				}
				if(!this.form.carCode){
					uni.showToast({
						title: '请选择运输车辆',
						icon:"none",
						mask:true,
						duration: 2000
					});
					return
				}
				_this.editForm.id=_this.distributionId;

				const {data} = await supplierBacklogDistribution(_this.editForm);
				if(data.code == 200){
				    uni.showToast({
				        title: '提交成功',
				        icon:"none",
				        mask:true,
				        duration: 2000
				    });
				   setTimeout(function(){
				       uni.redirectTo({
				            url: '/pages_supplier/backlogManage/backlogManage'
				        });
				    },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;
					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;
				}


			}
			.issue_li{
				margin:34rpx 26rpx 0;
				display flex;
				border-bottom: 1px solid #F5F5F5;
				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;
				}
				.issue_img{
					width: 210rpx;
					height: 210rpx;
					border-radius: 10rpx;
					margin-left:250rpx;
				}
			}
		}
		/* 按钮 */
		.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>