JP-Equipment-Jingli/pages/storeManagement/equipmentDelivery/deliveriedList.vue

<template>
	<view>
		<u-navbar>
			<view class="u-navbar ">
				<view class="title">
					出库设备清单<text>({{recordsTotal}})</text>
				</view>
			</view>
			<view class="details" v-if="status==1" slot="bottom">
				<view class="list-details">
					<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="scanpopo"  mode="bottom"
		border-radius="14"
		:closeable="true" >
					<view class="scantitle">连续扫码</view>
					<view class="scanlist">
					<view class="scan-list-infos" :style="nowscan.healthStatus&&nowscan.healthStatus!=1?'background-color:#FFC107':''">
						<view class="scan-infos-head" @click="gotoInfo(nowscan.id)">
							<view class="name">
								{{nowscan.title?nowscan.title:'扫码后出当前结果'}}
							</view>
						
							<view class="name">
								编号：{{showCode(nowscan)}}
								
										<span class="name"  v-show="nowscan&&nowscan.id" style="color:blue;">
											点击查看
										</span>
							</view>
									
						</view>
						<view class="scan-infos-head " style="margin-bottom: 12rpx;">
							<view class="name" v-html="descriptionKey(nowscan)">
								
							</view>
						
						</view>
						<view class="scan-infos">
							
							<!-- <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="listHead " :class="status==1?'container':''" >
		<view class="list" v-for="(item,index) in list" :key="index">
			<!-- 清单信息 -->
			<view class="list-infos">
				<view class="infos-head">
					<view class="name">
						{{item.deviceName}}
					</view>

					 
				</view>
				
				<view class="infos">
					<view class="infos-1">
						<view class="infos-item">
							<view class="item-name">
								{{recordItemStatus(item.status)}}：
							</view>
							<view class="item-value"  :style="'color:'+recordStatusColor(0)">
								{{item.needCount}}
							</view>
						</view>
						<!-- 
						<view class="infos-item">
							<view class="item-name">
								厂家：
							</view>
							<view class="item-value">
								{{item.deviceInfo.manufactor}}
							</view>
						</view> -->
						<view class="infos-item">
							<view class="item-name">
								单位：
							</view>
							<view class="item-value">
								{{item.deviceInfo?item.deviceInfo.unit:''}}
							</view>
						</view>
					</view>
					<view class="infos-2">
						<view class="infos-item">
							<view class="item-name">
								规格：
							</view>
							<view class="item-value">
								{{item.deviceInfo?item.deviceInfo.specifications:''}}
							</view>
						</view>
						<view class="infos-item">
							<view class="item-name">
								型号：
							</view>
							<view class="item-value">
								{{item.deviceInfo?item.deviceInfo.model:''}}
							</view>
						</view>
					</view>
				
				</view>
				
				<view class="infos" v-if="false">
					<view class="infos-1">
						
						<view class="infos-item">
							<view class="item-name">
								{{recordItemStatus(item.status)}}：
							</view>
							<view class="item-value"  :style="'color:'+recordStatusColor(0)">
								{{item.needCount}}
							</view>
						</view>
					
					</view>
					<view class="infos-2" v-if="false">
						<view class="infos-item">
							<view class="item-name">
								库存：
							</view>
							<view class="item-value"  :style="'color:'+recordStatusColor(1)">
								{{item.deviceInfo?item.deviceInfo.count:''}}
							</view>
						</view>
						
					</view>

				</view>
				<!-- 地址 -->
				<view class="address">
					<view class="name">
						位置：
					</view>
					<view class="value">
						{{item.deviceInfo.addressId?item.deviceInfo.addressId:'未录入'}}
					</view>
				</view>
				<!-- 备注 -->
				<view class="remark" v-if="false">
					<view class="name">
						备注：
					</view>
					<view class="value">
						22
					</view>
				</view>
				<view class="prepare-out" v-if="item.realDeviceList&&item.realDeviceList.length">
					<view class="head">
						<view class="amount">
							<view class="title">
								实际领用：
							</view>
							<view class="value">
								{{item.realDeviceList.length}}
							</view>
						</view>
				
						<view class="unfold" v-show="item.realDeviceList.length>2" @click="changeShow(item)">
							{{item.show?'收起':'展开'}}<u-icon name="arrow-down"></u-icon>
							<!-- 	<view class="option" v-if="show==true">
								
								
							</view> -->
						</view>
				
					</view>
					<!-- 编号 -->
					<view class="serial-number" v-for="(item2,j) in item.realDeviceList"
						v-show="j<2||item.show" :key="j">
						<view class="itemLine">
							<span class="text">
								设备编号：
							</span>
							<span class="number" >
								
								{{item2.deviceCode}}
							</span>
							<span class="view" @click="ckInfo(item2)" >
								查看设备
								
							</span>
						</view>
						
					</view>
				</view>
				<view class="prepare-out" v-else-if="!scanMap.get(item.deviceName+key+item.model+key+item.specifications)">
					<view class="head">
						<view class="amount">
							<view class="title">
								扫码识别
							</view>
							<view class="value">
								
							</view>
						</view>
					
						
					
					</view>
				</view>
				<view class="prepare-out 2" v-else>
					<view class="head">
						<view class="amount">
							<view class="title">
								实际领用：
							</view>
							<view class="value">
								{{scanMap.get(item.deviceName+key+item.model+key+item.specifications).length}}
							</view>
						</view>

						<view class="unfold" v-show="scanMap.get(item.deviceName+key+item.model+key+item.specifications).length>2" @click="changeShow(item)">
							{{item.show?'收起':'展开'}}<u-icon name="arrow-down"></u-icon>
							<!-- 	<view class="option" v-if="show==true">
								
								
							</view> -->
						</view>

					</view>
					<!-- 编号 -->
					<view class="serial-number" v-for="(item2,j) in scanMap.get(item.deviceName+key+item.model+key+item.specifications)"
						v-show="j<2||item.show" :key="j">
						<view class="item">
							<view class="text">
								设备编号：
							</view>
							<view class="number" @click="delOutList(item2)">
								<span v-if="item2.healthStatus!=1"
									:style="'    margin-right: 1px;color:'+recordStatusColor(item2.healthStatus)">[{{item2.healthStatusN}}]</span>
								<span v-if="item2.status!=1"
									:style="'    margin-right: 1px;color:'+recordStatusColor(item2.status)">[{{item2.statusN}}]</span>
								{{showCode(item2)}}
							</view>
						</view>
						<view class="del" @click="delOutList(item2)">
							<u-icon name="trash-fill"></u-icon>
							<!-- <img src="@/assets/img/riLine-delete-bin-line Copy@1x.png" alt=""> -->
						</view>
					</view>
				</view>
				<textarea  class="textarea"
				
				placeholder="备注" name="" id="" v-model="item.remark" cols="30" rows="1"></textarea>
			</view>

		</view>
		<view class="list" v-if="noScanList.length" >
			<view class="list-infos">
				<view class="infos-head">
					<view class="name">
						扫码结果不符合清单
					</view>

				</view>
				<view class="infos">
					<view class="infos-1">
						<view class="infos-item">
							
							<view class="item-value">
								以下设备不计入出库设备中
							</view>
						</view>

					</view>
					</view>


					<view class="prepare-out"  >
						<view class="head">
							<view class="amount">
								<view class="title">
									不符合清单：
								</view>

							</view>

						</view>
						<!-- 编号 -->
						<view class="serial-number" v-for="(item,index) in noScanList" :key="index">
							<view class="item">
								<view class="text">
									设备编号：
								</view>
								<view class="number">
									{{showCode(item)}}
								</view>
							</view>
							<view class="item">
								<view class="text">
									设备名称：
								</view>
								<view class="number">
									{{item.title}}
								</view>
							</view>
						</view>
				
				</view>
			</view>
			
		</view>
		
		<u-divider   border-color="#CFD2D5">已经到底了</u-divider>
		
			
		</view>
		<!-- 确认出库 -->
		<view class="bottom" v-if="status==1">
			<u-button type="primary" @click="gotoOut()">确认出库</u-button>

		</view>
	</view>
</template>

<script>
	import * as API from '@/apis/pagejs/storeManagement.js'
	import {
		recordItemStatus,
		recordStatusColor
	} from '@/apis/status.js'
	export default {
		data() {
			return {
				nowscan:{
				"title": "",
				"specifications": "",
				"experimentLastTime":"",
				"manufactor": "",
				"unit": "",
				"model": "",
				"code": "",
			
			},
			status:"",
			deviceposition:"back",
			scanFunctionIsUseable:true,
				showpopup:false,
				show: false,
				list: [],
				scanList: [],
				id: "",
				key:"-#jp$-",
				recordsTotal: 0,
				listFrom: {
					pageIndex: 1,
					pageSize: 99999,

				}
			}
		},
		onReachBottom() {

			if (this.list.length < this.recordsTotal) {
				this.myLoadmore();
			}
		},
		onLoad(op) {
			this.id = op.id
			this.status = op.status
			this.getList()
		},
		onReady() {

		},
		computed: {
			noScanList() {
				var list= this.list.map(item=>{
					return item.deviceName+this.key+item.model+this.key+item.specifications
				})
				var map = new Map()
			
				var reList= this.scanList.filter(item=>{
					return  list.indexOf(item.title+this.key+item.model+this.key+item.specifications)==-1
				})
			
				return reList
			},
			scanMap() {
				var map = new Map()

				this.scanList.forEach(item => {
					var title=item.title+this.key+item.model+this.key+item.specifications
					if (map.has(title)) {
						var list = map.get(title)
						list.unshift(item)
						map.set(title, list)
					} else {
						map.set(title, [item])
					}

				})

				console.log(map)
				return map
			},
		},
		methods: {
			recordItemStatus,
			recordStatusColor,
			ckInfo(item) {
				
				var url = "/pages/otherFunctions/equipmentRetrieval/equipmentInfo?id=" + item.deviceId;
			
				uni.navigateTo({
					url: url,
				
				})
			},
			gotoOutMethod(list) {
				var obj={
					"recordId":this.id,
					"deviceData":list,
				}
				uni.showLoading({
					title: "加载中",
					mask: true,
				})		
				
				API.saveRecordOut({
					recordData: JSON.stringify(obj),
				
				}).then((res) => {
					this.status=3;
					const eventChannel = this.getOpenerEventChannel();
					  eventChannel.emit('refreshData');
					  uni.hideLoading()
					uni.showModal({
						title: '提示',
						content: '操作成功',
						showCancel:false,
						success: function (res) {
							if (res.confirm) {
								
								uni.navigateBack()
							} else if (res.cancel) {
								console.log('用户点击取消');
							}
						}
					});
				}).catch(error => {
					uni.showToast({
						title: error,
						icon: "none"
					})
				})
			},
			gotoOut() {
				//recordData
			
				var list=[];
				var bl=true;
				this.list.forEach(item=>{
					var maplistStr="";
					var maplist=this.scanMap.get(item.deviceName+this.key+item.model+this.key+item.specifications);
					if(!maplist||maplist.length==0){
						bl=false;
						// uni.showToast({
						// 	title: item.deviceName+"未出库设备",
						// 	icon: "none"
						// })
					}else{
						var maplistStr=maplist.map(item2=>{
							return item2.id
						}).join()
					}
					
					list.push({
						"remark":item.remark?item.remark:"",
						"deviceIds":maplistStr,
						"recordDeviceId":item.id
					})
					
				})
				if(!bl){
					//uni.hideLoading();
					var _this=this;
					uni.showModal({
						title: '提示',
						content:"存在未扫码的设备，确认是否出库？",
						//content: '这是一个模态弹窗',
						success: function(res) {
							if (res.confirm) {
								_this.gotoOutMethod(list)
							} else if (res.cancel) {
								console.log('用户点击取消');
							}
						}
					});
					return;
				}
				
				var _this=this;
				uni.showModal({
					title: '提示',
					content:"确认清单无误？",
					//content: '这是一个模态弹窗',
					success: function(res) {
						if (res.confirm) {
							_this.gotoOutMethod(list)
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			 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;
				         // 对扫码结果进行处理
				         
						//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('用户点击取消');
						}
					}
				});


			},
			delOutListMethod(deviceInfo) {
				var c = this.scanList.findIndex(item => {
					return item.id == deviceInfo.id
				})
				if (c > -1) {
					this.scanList.splice(c, 1)
					uni.showToast({
						title: "删除成功",
						icon: "none"
					})
				}
			},
			delOutList(item) {
				var _this = this;
				uni.showModal({
					title: '提示',
					//editable:true,
					content: '确认是否删除',
					success: function(res) {
						if (res.confirm) {
							_this.delOutListMethod(item)
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			getscan(val) {
				console.log(val);
				
				 this.showpopup=true;
				var c = this.scanList.find(item => {
					return item.code == val
				})
				if (c) {
					
					return
				}
				
				
				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.scanList.find(item => {
							return item.id == res.data.deviceInfo.id
						})
						if (c) {
							uni.showToast({
								title: "已存在,添加失败",
								icon: "none"
							})
						} else {
							this.scanList.push(res.data.deviceInfo)
							uni.showToast({
								title: "添加成功",
								icon: "none"
							})
						}



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

				}).catch(error => {
					uni.showToast({
						title: error,
						icon: "none"
					})
				})
			},
			getList() {
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				API.outRecordDeviceById({
					recordId: this.id,
					pageSize: this.listFrom.pageSize,
					pageIndex: this.listFrom.pageIndex,
				}).then((res) => {
					uni.hideLoading();
				
					if (this.listFrom.pageIndex == 1) {
						this.list = res.data.data;
					} else {
						this.list = [
							...this.list,
							...res.data.data
						];
					}
					this.recordsTotal = res.data.recordsTotal;
				}).catch(error => {
					uni.showToast({
						title: error,
						icon: "none"
					})
				})
			},
			myLoadmore() {
				this.listFrom.pageIndex += 1;
				this.getList();
			},
			changeShow(item) {
				console.log(item.show)
				console.log(item)
				if (item.show) {
					item.show = false;
				} else {
					item.show = true;
				}
				this.$forceUpdate()

			}
		}
	}
</script>

<style scoped lang="scss">
	.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;

		// }
	}

	page {
		padding-bottom: 100px;
	}

	.u-navbar {
		display: flex;flex-wrap: wrap;
		font-size: 36rpx;
		align-items: center;
		justify-content: center;
		flex: 1;
		position: absolute;
		left: 0;
		right: 0;
		height: 60rpx;
		text-align: center;
		flex-shrink: 0;
		left: 237rpx;
		right: 107rpx;
		width: 300rpx;

		.title {


			line-height: 60rpx;
			font-size: 36rpx;
			flex: 1;

			text {
				color: #2A8EFB
			}
		}
	}
	.details {
		background-color: #fff;
		margin-top: 24rpx;
		padding: 0 32rpx;
		.list-details {
			background-color: #fff;
			margin: 24rpx;
			padding: 22rpx 32rpx;
			
			.list-head {
				display: flex;flex-wrap: wrap;
				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;
		
				.infos-head {
					display: flex;flex-wrap: wrap;
					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:red;
						font-size: 24rpx;
						width: 160rpx;
						text-align: center;
						line-height: 64rpx;
		
						text {
							img {
								vertical-align: middle;
							}
						}
					}
				}
		
				.infos {
					margin-top: 16rpx;
					display: flex;flex-wrap: wrap;
					color: #777777;
					font-size: 24rpx;
		
					.infos-1 {
						margin-right: 68rpx;
					}
		
		
					.infos-item {
						display: flex;flex-wrap: wrap;
						margin-bottom: 8rpx;
						.item-value{
							max-width: 200rpx;
						}
					}
		
				}
		
				.address,
				.remark {
					display: flex;flex-wrap: wrap;
					color: #777777;
					font-size: 24rpx;
					margin-bottom: 8rpx;
				}
			}
		}
	}
	.scantitle{
		text-align: center;
		font-size: 44rpx;
		 padding-top: 20px;
	}
	.container{
		margin-top: 80px;
		
	}
	.listHead{
	
		padding-bottom: 60px;
	}
	.list {
		background-color: #fff;
		margin: 24rpx;
		padding: 22rpx 32rpx;
		
		// 清单信息
		.list-infos {
			border-radius: 8px;
			
			.infos-head {
				display: flex;flex-wrap: wrap;
				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;flex-wrap: wrap;
				color: #777777;
				font-size: 24rpx;

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


				.infos-item {
					display: flex;flex-wrap: wrap;
					margin-bottom: 8rpx;
					.item-value{
						max-width: 200rpx;
					}
				}

			}

			.address,
			.remark {
				display: flex;flex-wrap: wrap;
				color: #777777;
				font-size: 24rpx;
				margin-bottom: 8rpx;
			}
		}

		.prepare-out {
			padding: 24rpx;
			margin-top: 40rpx;
			border-radius: 8px;
			background-color: rgba(245, 246, 249, 1);

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

				.amount {
					display: flex;flex-wrap: wrap;
					color: rgba(0, 81, 255, 1);
					font-size: 32rpx;
				}

				.unfold {
					color: rgba(146, 158, 165, 1);
					font-size: 24rpx;
					position: relative;

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

				.option {
					width: 160rpx;
					height: 32rpx;
					background-color: #fff;
					position: absolute;
					top: 30rpx;
					right: 0;
				}
			}

			// 编号
			.serial-number {
				display: flex;flex-wrap: wrap;
				justify-content: space-between;
				align-items: center;
				margin-top: 16rpx;
				color: rgba(51, 51, 51, 1);
				font-weight: bold;
				.itemLine{
					width: 100%;
					.view {
						float: right;
						color: #0051ff;
					}
				}
				.item {
					display: flex;flex-wrap: wrap;
					
				}
			}

		}

		// 备注
		.textarea {
			width: 100%;
			height: 80rpx;
			line-height: 80rpx;
			text-indent: 24rpx;
			margin-top: 24rpx;
			background-color: rgba(241, 242, 245, 1);
			color: rgba(136, 136, 136, 1);
			border-radius: 8px;
			font-family: Microsoft Yahei;
			font-size: 28rpx;
		}
	}
</style>