JP-Equipment-Jingli/pages/storeManagement/equipmentEnter/deliveryDetails.vue

<template>
	<view >
		<u-navbar title="归还单详情">
			<view class="details" slot="bottom">
				<view class="list">
					<view class="list-head">
						<view class="title">
							扫码核验
						</view>
						<view class="amount"  @click="gotoscan('')">
							<u-icon name="scan" color="#0051ff" ></u-icon>扫码识别
						</view>
					</view>
				</view>
			</view>
		</u-navbar>
		
		<u-popup  v-model="showpopup" class=""  mode="bottom"
		border-radius="14"
		:closeable="true" >
					<view class="scantitle">连续扫码</view>
					<view class="list">
					<view class=" list-infos">
						<view class="infos-head">
							<view class="name">
								{{nowscan.title?nowscan.title:'扫码后出当前结果'}}
							</view>
						
							<view class="name">
								编号：{{nowscan.code}}
							</view>
						</view>
						<view class="infos-head infos-head2" style="margin-bottom: 12rpx;">
							<view class="name">
								上次巡检:{{nowscan.experimentLastTime}}
							</view>
						
							<view class="name" v-show="nowscan.experimentPeriod">
								周期:{{nowscan.experimentPeriod}}天
							</view>
						</view>
						<view class="infos">
							<view class="infos-1">
								<view class="infos-item">
									<view class="item-name">
										厂家：
									</view>
									<view class="item-value">
										{{nowscan.manufactor}}
									</view>
								</view>
								<view class="infos-item">
									<view class="item-name">
										单位：
									</view>
									<view class="item-value">
										{{nowscan.unit}}
									</view>
								</view>
							</view>
							<view class="infos-2">
								<view class="infos-item">
									<view class="item-name">
										规格：
									</view>
									<view class="item-value">
										{{nowscan.specifications}}
									</view>
								</view>
								<view class="infos-item">
									<view class="item-name">
										型号：
									</view>
									<view class="item-value">
										{{nowscan.model}}
									</view>
								</view>
							</view>
						
						</view>
						</view>
					</view>
					
					<!--  #ifdef  MP-WEIXIN -->
					<camera mode="scanCode"   resolution='medium' 
					 @scancode="takeCode"  v-if="showpopup"
					 device-position="back" flash="off" @error="error"
					 style="width: 100%; height: 300px;"></camera>
					<!--  #endif -->
				</u-popup>
		<!-- 出库单状态 -->
		<view class="container" style="margin-top: 60px;">
		<view class="head">
			<view class="photo">
				<u-avatar size="84" :src="outUser.userImg"></u-avatar>
				
			</view>
			<view class="name">
				{{info.createByName}}
			</view>
			<view class="submit">
				提交了<text>入库申请</text>
			</view>
			<view class="state" :style="{
				color:recordStatusColor(info.status),
				borderColor:recordStatusColor(info.status)
			}">
				{{info.status=='1'?'已入库':'待入库'}}
			</view>
		</view>
		<!-- 出库单详情 -->
		<view class="details">
			<view class="item">
				<view class="name">
					所属项目
				</view>
				<view class="value">
					{{info.projectName}}
				</view>
			</view>
			
			<view class="item">
				<view class="name">
					创建时间
				</view>
				<view class="value">
					{{info.createTime}}
				</view>
			</view>

		</view>
		
				
		<!-- 出库设备清单 -->
		<view class="container">
			<view class="main">
				<view class="list-item" v-for="(item,index) in deviceInfoList" :key="index">
					<!--信息 -->
					<view class="list-infos">
						<view class="infos-head">
							<view class="name">
								{{item.deviceInfo.title}}
							</view>
							<template v-if="info.status==0">
							
								<view class="qr-code" v-if="deviceReList[index].deviceIdScan==0"  >
									
								</view>
								<view class="qr-code2" v-else    @click="gotoscan('')" >
									<text><u-icon name="checkmark-circle" color="#45BA45" ></u-icon></text >
									<text>扫码成功</text>
								</view>
							</template>
							<template v-else>
								<view  style="color: #3385FF;"  @click="ckInfo(item)" >
								
									<text>查看设备</text>
								</view>
							</template>
						</view>
						<view class="infos">
							<view class="infos-1">
								<view class="infos-item">
									<view class="item-name">
										型号：
									</view>
									<view class="item-value">
										{{item.deviceInfo.model}}
									</view>
								</view>
		
							</view>
							<view class="infos-2">
								<view class="infos-item">
									<view class="item-name">
										设备编号：
									</view>
									<view class="item-value">
										{{item.deviceInfo.code}}
									</view>
								</view>
		
							</view>
		
						</view>
		
					</view>
					<view class="receive-options">
						<view class="title">
							是否收到
						</view>
						<view class="receive-radio">
							<u-radio-group v-model="deviceReList[index].status" @change="radioGroupChange">
								<u-radio @change="radioChange" v-for="(radio, index2) in radiolist" :key="index2"
									:name="radio.value" :disabled="radio.disabled">
									{{radio.name}}
								</u-radio>
							</u-radio-group>
						</view>
					</view>
					<!-- 备注 -->
					<textarea class="uni-textarea" v-model="deviceReList[index].remark" placeholder="备注" name="" id="" cols="30" rows="10"></textarea>
				
				<!-- 上传图片 -->
					<view class="upload-img" v-if="info.status=='0'">
						<ujp-upload width="144" height="144" :ref="'uUpload'+index" 
						 :key="index"
						 name="photoFile" :multiple="false"
						 :form-data="formData" :header="header" :action="action"
						 max-count="4"  upload-text=" " del-bg-color="#0051FF"  ></ujp-upload>
					</view>
					<view class="upload-img" v-else >
						<ujp-upload width="144" height="144"  :key="1"
						 v-if="deviceReList[index].imgUrls"
						 :fileList="deviceReList[index].imgUrls.split(',').map(item=>{return {url:item,view:1}})"
						 name="photoFile" :multiple="false" :deletable="false"
						
						 max-count="0"  upload-text=" " del-bg-color="#0051FF"  ></ujp-upload>
					</view>
				</view>
		
				<u-divider
				border-color="#CFD2D5">已经到底了</u-divider>
			</view>
		
		</view>
		
    </view>
		<view class="bottom" v-if="info.status==0" >
			
			<u-button  type="primary"  @click="gotoOut()" >确认归还</u-button>
			
		</view>
	</view>
</template>

<script>
	import * as API from '@/apis/pagejs/storeManagement.js'
	import ujpUpload from "@/pages/storeManagement/components/u-upload.vue"
	
	import {
		recordStatus,recordStatusColor
	} from '@/apis/status.js'
	
	export default {
		components:{
			ujpUpload
		},
		data() {
			return {
				nowscan:{
					"title": "",
					"specifications": "",
					"experimentLastTime":"",
					"manufactor": "",
					"unit": "",
					"model": "",
					"code": "",
				
				},
				scanList: [],
				scanFunctionIsUseable:true,
				showpopup:false,
				action:"",
				formData:{
					subFolder:"equipmentEnter"
				},
				header:{
					
				},
				radiolist: [{
						name: '已收到',
						value:"1",
						disabled: false
					},
					{
						name: '未收到',
						value:"2",
						disabled: false
					},
				
				],
				value: '已收到',
				id:"",
				info:{
					projectName:"",
					startTime:"",
					endTime:"",
					createTime:"",
					createByName:""
				},
				outUser:{
					name:"",
					headImg:""
				},
				deviceInfoList:[],
				deviceReList:[],
			}
		},
		onLoad(op){
			this.id=op.id
			this.getInfo()
			
			this.action=process.car.BASE_URL+"uploadPicture"
			
			this.formData.subFolder="feedback"
			//接口应该免登陆
			var token=this.carhelp.getToken()
			
			this.header={
					
				'Authorization':token
			}
		},
		methods:{
			recordStatus,recordStatusColor,
			ckInfo(item) {
				
				var url = "/pages/otherFunctions/equipmentRetrieval/equipmentInfo?id=" + item.deviceId;
			
				uni.navigateTo({
					url: url,
				
				})
			},
			getInfo(bl){
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				API.inRecordDetail({
					id:this.id,
				}).then((res) => {
					uni.hideLoading();
					this.info=res.data.inRecord;
					this.deviceInfoList=res.data.inRecordDeviceList;
					//this.outUser=res.data.outUser;
					if(bl){
						const eventChannel = this.getOpenerEventChannel();
						eventChannel.emit('refreshData');
					}
					
					this.deviceReList=this.deviceInfoList.map(item=>{
						if(this.info.status==0){
							return {
								recordDeviceId:item.id,
								deviceId:item.deviceInfo.id,
								remark:"",
								deviceIdScan:0,
								status:"2",
							}
						}else{
							return {
								recordDeviceId:item.id,
								deviceId:item.deviceInfo.id,
								remark:item.remark,
								imgUrls:item.imgUrls,
								status:item.status,
							}
						}
						
					})
					
				}).catch(error => {
					uni.showToast({
						title: error,
						icon: "none"
					})
				})
			},
			submitInfo(obj){
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				API.saveRecordIn(obj).then((res) => {
					uni.hideLoading();
					
					this.getInfo(true)
				}).catch(error => {
					uni.showToast({
						title: error,
						icon: "none"
					})
				})
			},
			gotoOut(){
				
				var _this=this;
				uni.showModal({
					title: '提示',
					content:"确认清单无误",
					//content: '这是一个模态弹窗',
					success: function(res) {
						if (res.confirm) {
							_this.gotoOutMethod()
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			gotoOutMethod(){
				var returnObj=[...this.deviceReList]
			
				var bl=true;
				for(var x in this.deviceReList){
					var obj=returnObj[x];
					
					delete obj.deviceIdScan;
					var lists1=[];
					var lists2 =this.$refs["uUpload"+x][0].lists
					
					for(var i in lists2){
						var item=lists2[i]
						
						if(item.progress==100&&item.response&&item.response.result){
							
						}else{
							uni.showToast({
								title:"第"+(x+1)+"行图片上传中，请稍后"
							})
							bl=false
							break;
						}
						
						var p =item.response.data.fileUrl;
						
						lists1.push(p);
						
					}
					if(!bl){
						break;
					}
					obj.imgUrls=lists1.join()
					returnObj[x]=obj;
					
				}
				if(!bl){
					return;
				}
				console.log(returnObj);
				var json={
					recordId:this.id,
					deviceData:returnObj
					
				}
				this.submitInfo({
					recordData:JSON.stringify(json)
				})
				
			},// 选中某个单选框时，由radio时触发
			radioChange(e) {
				// console.log(e);
			},
			// 选中任一radio时，由radio-group触发
			radioGroupChange(e) {
				// console.log(e);
			},
			beforeUpload(index, list) {
							// 只上传偶数索引的文件
							if(index % 2 == 0) return true;
							else return false;
			}, error(e) {
			            console.log(e);
			 },
			 gotoscan(val){
				// if(this.deviceposition=='back'){
				// 	this.deviceposition="front"
				// }else{
				// 	this.deviceposition="back"
				// }
				 
				 // #ifdef H5
				 	this.gotoscanH5(val)
				 // #endif
				 
				 // #ifdef MP-WEIXIN
				 	
				 		this.gotoscanMP(val)
				 // #endif
				 
			 },
			 takeCode(e){
				 console.log(e);
				  if(this.scanFunctionIsUseable) {
				         this.scanFunctionIsUseable = false;
				         // 对扫码结果进行处理
				         console.log(e.detail.result);
						//this.getscan(e.detail.result)
						this.getscan(this.takeCodeJp(e.detail.result))
				         // 扫码间隔两秒
				         setTimeout(() => {
				         this.scanFunctionIsUseable = true;
						
				         }, 1000)
				     }
				
			 },
			 gotoscanMP(val){
				 this.showpopup=true;
				  // const ctx = uni.createCameraContext();
				  //            ctx.takePhoto({
				  //                quality: 'high',
				  //                success: (res) => {
				  //                    this.src = res.tempImagePath
				  //                }
				  //            });
			 },
			gotoscanH5(val) {
				console.log('111')
				
				var _this = this;
				uni.showModal({
					title: '提示',
					editable: true,
					//content: '这是一个模态弹窗',
					success: function(res) {
						if (res.confirm) {
							_this.getscan(res.content)
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});


			},getscan(val) {
				 this.showpopup=true;
				
				
				
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				API.queryDeviceByCode({
					code: val,
				}).then((res) => {
					uni.hideLoading();
					if (res.data.deviceInfo) {
						console.log(res.data.deviceInfo)
						this.nowscan=res.data.deviceInfo;
						
						var c = this.deviceInfoList.findIndex(item => {
							return item.deviceInfo.id == res.data.deviceInfo.id
						})
						uni.showToast({
							title: "扫码成功",
							icon: "none"
						})
						if (c!=-1) {
							this.deviceReList[c].status='1'
							this.deviceReList[c].deviceIdScan=1;
							
						} else {
							
						}
					


					} else {
						uni.showToast({
							title: "二维码无效",
							icon: "none"
						})
					}

				}).catch(error => {
					uni.showToast({
						title: error,
						icon: "none"
					})
				})
			},
			
		}
	}
</script>

<style scoped lang="scss">
	page {
		padding-bottom: 200rpx;
	}
	.scantitle{
		text-align: center;
		font-size: 44rpx;
		 padding-top: 20px;
	}
	.list {
		background-color: #fff;
		margin: 24rpx;
		padding: 22rpx 32rpx;
	
		// 清单信息
		.list-infos {
			border-radius: 8px;
	
			.infos-head {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-bottom: 24rpx;
	
				.name {
					color: rgba(51, 51, 51, 1);
					font-size: 32rpx;
				}
	
				.qr-code {
					border-radius: 4px;
					background: linear-gradient(180deg, rgba(22, 119, 255, 1) 0%, rgba(16, 98, 213, 1) 100%);
					color: rgba(255, 255, 255, 1);
					font-size: 24rpx;
					width: 160rpx;
					text-align: center;
					line-height: 64rpx;
	
					text {
						img {
							vertical-align: middle;
						}
					}
				}
			}
	
			.infos {
				margin-top: 16rpx;
				display: flex;
				color: #777777;
				font-size: 24rpx;
	
				.infos-1 {
					margin-right: 68rpx;
				}
	
	
				.infos-item {
					display: flex;
					margin-bottom: 8rpx;
				}
	
			}
	
			.address,
			.remark {
				display: flex;
				color: #777777;
				font-size: 24rpx;
				margin-bottom: 8rpx;
			}
		}
	}
	.container {
		.main {
			padding: 0 24rpx;
			padding-bottom: 60px;
			.list-item {
				border-radius: 8px;
				padding: 24rpx;
				background-color: #fff;
				margin-top: 24rpx;
			}
	
			// 信息
			.list-infos {
				padding-bottom: 24rpx;
				border-bottom: 1px solid rgba(232, 232, 232, 1);
	
				.infos-head {
					display: flex;
					justify-content: space-between;
					align-items: center;
					margin-bottom: 24rpx;
	
					.name {
						color: rgba(51, 51, 51, 1);
						font-size: 32rpx;
					}
	
					.state {
						border: 1px solid rgba(69, 186, 69, 1);
						border-radius: 4px;
						color: rgba(69, 186, 69, 1);
						font-size: 24rpx;
						line-height: 48rpx;
						width: 160rpx;
						text-align: center;
	
						text {
							img {
								vertical-align: middle;
								margin-right: 4rpx;
							}
						}
					}
					.qr-code2 {
						border-radius: 4px;
						//background: linear-gradient(180deg, rgba(22, 119, 255, 1) 0%, rgba(16, 98, 213, 1) 100%);
						color: #45BA45 ;
						border: 1px solid rgba(69, 186, 69, 1);
						font-size: 24rpx;
						width: 160rpx;
						text-align: center;
						line-height: 48rpx;
						
						text {
							img {
								vertical-align: middle;
							}
						}
					}
					.qr-code {
						border-radius: 4px;
						background: linear-gradient(180deg, rgba(22, 119, 255, 1) 0%, rgba(16, 98, 213, 1) 100%);
						color: rgba(255, 255, 255, 1);
						font-size: 24rpx;
						width: 160rpx;
						text-align: center;
						line-height: 48rpx;
	
						text {
							img {
								vertical-align: middle;
							}
						}
					}
				}
	
				.infos {
					margin-top: 16rpx;
					display: flex;
					justify-content: space-between;
					color: #777777;
					font-size: 24rpx;
	
					.infos-1 {}
	
					.infos-item {
						display: flex;
						margin-bottom: 8rpx;
					}
				}
			}
	
			// 接收选项
			.receive-options {
			 display: flex;
				align-items: center;
				padding: 24rpx 0;
	
				.title {
					color: #333333;
					margin-right: 24rpx;
				}
	
				.receive-radio {
					flex: 1;
	
					/deep/.u-radio-group {
						width: 100%;
	
					}
	
					/deep/.u-radio {
						margin-right: 48rpx;
					}
				}
	
			}
	
			// 备注
			uni-textarea,.uni-textarea{
				width: 100%;
				height: 80rpx;
				line-height: 80rpx;
				text-indent: 24rpx;
				background-color: rgba(241, 242, 245, 1);
				color: rgba(136, 136, 136, 1);
				border-radius: 8px;
				font-family: Microsoft Yahei;
				font-size: 28rpx;
			}
			// 上传图片
			.upload-img{
				margin-top: 24rpx;
				/deep/.u-add-tips{
					margin-top: 0;
				}
				// 右上角删除图标
				/deep/.u-delete-icon{
					top: -8rpx;
					right: -8rpx;
					width: 36rpx;
					height: 36rpx;
				}
				/deep/.u-list-item{
					overflow: inherit;
				}
				/deep/.u-list-item{
					margin-right: 8rpx;
				}
			}
	
		}
	
	
	
	}
	// 出库单状态
	.head {
		background-color: #fff;
		padding: 24rpx 32rpx;
		display: flex;
		align-items: center;
		color: #101010;
		font-size: 32rpx;

		.photo {
			width: 84rpx;
			height: 84rpx;
			border-radius: 100rpx;

			img {
				width: 100%;
				height: 100%;
				overflow: hidden;
			}
		}

		.name {
			color: #101010;
			font-size: 32rpx;
			margin-right: 8rpx;
			margin-left: 24rpx;
			max-width: 200rpx;
			overflow: hidden;
			 text-overflow: ellipsis;
			 white-space: nowrap
		}

		.submit {
			text {
				color: #3385FF;
			}
		}

		.state {
			line-height: 48rpx;
			padding: 0 24rpx;
			border-radius: 50px;
			background-color: rgba(255, 255, 255, 1);
			color: rgba(51, 133, 255, 1);
			font-size: 12px;
			text-align: center;
			font-family: Arial;
			border: 1px solid rgba(51, 133, 255, 1);
			margin-left: auto;
		}
	}

	// 出库单详情
	.details {
		background-color: #fff;
		margin-top: 24rpx;
		padding: 0 32rpx;

		.item {
			display: flex;
			justify-content: space-between;
			padding: 22rpx 0;
			border-bottom: 1px solid rgba(244, 244, 244, 1);

			.name {
				color: rgba(119, 119, 119, 1);
			}

			.value {
				color: #101010;
			}
		}
	}

	// 出库单列表
	.list {
		background-color: #fff;
		margin-top: 24rpx;
		padding: 22rpx 32rpx;

		.list-head {
			display: flex;
			justify-content: space-between;
			align-items: center;

			.title {
				color: #333333;
				font-size: 32rpx
			}

			.amount {
				color: #777777;
				font-size: 24rpx;

				text {
					color: #3385FF;
				}

				/deep/.u-icon--right {
					margin-left: 8rpx;
				}
			}
		}

		// 清单信息
		.list-infos {
			border-radius: 8px;
			background-color: #F5F6F9;
			margin-top: 24rpx;
			padding: 24rpx;

			.infos-head {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-bottom: 24rpx;

				.name {
					color: rgba(51, 51, 51, 1);
					font-size: 32rpx;
				}

				.state {
					color: rgba(0, 81, 255, 1);
				}
			}

			.infos {
				margin-top: 16rpx;
				display: flex;
				color: #777777;
				font-size: 24rpx;

				.infos-1 {
					margin-right: 68rpx;
				}

				.infos-item {
					display: flex;
					margin-bottom: 8rpx;
				}
			}
		}
	}

	// 流程
	.process {
		background-color: #fff;
		margin-top: 24rpx;
		padding: 24rpx 32rpx;

		.title {
			color: rgba(51, 51, 51, 1);
			font-size: 32rpx;
		}
        .u-time-axis-item{
			//margin-bottom: 76rpx;
		}
		.u-time-axis {
			//padding: 18rpx 40rpx;
		}

		.u-node {
			width: 18rpx;
			height: 18rpx;
			border-radius: 100rpx !important;
			display: flex;
			justify-content: center;
			align-items: center;
			background: #d0d0d0;
		}
		.u-order{
			margin-bottom: 32rpx;
		}
		.u-order-title {
			color: #333333;
			font-weight: bold;
			font-size: 32rpx;
		}

		.u-order-desc {
			margin-bottom: 16rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.level {
				color: #333333;
				font-size: 32rpx;
				font-weight: bold;
			}

			.date {
				color: rgba(119, 119, 119, 1);
			}

			.state {
				color: rgba(255, 121, 0, 1);
			}
		}

		.u-order-time {
			width: 90rpx;
			color: #777777;
			font-size: 28rpx;
			margin-top: 16rpx;
			display: flex;
			flex-direction: column;
			align-items: center;

			.photo {
				width: 56rpx;
				height: 56rpx;
				border-radius: 100px;
				margin-bottom: 4rpx;

				img {
					width: 100%;
					height: 100%;
					overflow: hidden;
					position: relative;
				}
			}

			.confirm {
				position: absolute;
				top: 46rpx;
				left: 56rpx;
			}

			.name {
				color: rgba(51, 51, 51, 1);
				font-size: 24rpx;
			}

		}
      
	}
	
	// .u-time-axis{
	// 	.u-time-axis-item:last-of-type{
	// 		margin-bottom: 0;
	// 	}
	// }
	// 确认出库
	.bottom{
		background-color: #fff;
		margin-top: 44rpx;
		padding: 16rpx 32rpx;
		z-index: 999;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		uni-button{
			border-radius: 8px;
			background: linear-gradient(180deg, rgba(22,119,255,1) 0%,rgba(16,98,213,1) 100%);
			color: rgba(255, 255, 255, 1);
			font-size: 32rpx;
			line-height: 88rpx;
			
		}
	}
</style>