JP-Equipment-Jingli/pages/storeManagement/equipmentInspection/planDetail.vue

<template>
	<view>
		<u-navbar title="计划详情">
			<view class="details" slot="bottom">
				<view class="list">
					<view class="list-head">
						<view class="title">
							检验时间{{queryDate}}
						</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="container">
			
			<view class="main">
				<view class="list-item" v-for="(item,index) in scanList" :key="index">
					<!--信息 -->
					<view class="list-infos">
						<view class="infos-head">
							<view class="name">
								{{item.title}}
							</view>
							<view class="qr-code" style="color:red;" @click="delOutListMethod(index)">
								删除
							</view>
							
						</view>
						<view class="infos">
							<view class="infos-1">
								<view class="infos-item">
									<view class="item-name">
										型号：
									</view>
									<view class="item-value">
										{{item.model}}
									</view>
								</view>

							</view>
							<view class="infos-2">
								<view class="infos-item">
									<view class="item-name">
										设备编号：
									</view>
									<view class="item-value">
										{{showCode(item)}}
									</view>
								</view>

							</view>

						</view>

					</view>
					<view class="receive-options">
						<view class="title">
							检验结果
						</view>
						<view class="receive-radio">
							<u-radio-group v-model="item.reStatus" @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 placeholder="备注" class="uni-textarea"  v-model="item.reRemark" name="" id="" cols="30" rows="10"></textarea>

					<!-- 上传图片 -->
					<view class="upload-img">
						<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>


			</view>
			<u-divider :isnone="scanList.length==0" 
			
			nonetext="点击'扫码'进行检验" border-color="#CFD2D5">已经到底了</u-divider>
			
		</view>

		<view class="bottom">
			<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 {
		parseUnixTime
	} from '@/apis/utils'
	export default {
		components:{
			ujpUpload
		},
		data() {
			return {
				queryDate: "",
				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
					},

				],
				// u-radio-group的v-model绑定的值如果设置为某个radio的name，就会被默认选中
				value: '合格',
				show: false
			};
		},
		onLoad(op) {
			// this.id=op.id
			// this.getInfo()
			this.queryDate = parseUnixTime(new Date(), "{y}-{m}-{d}")

			this.action = process.car.BASE_URL + "uploadPicture"

			this.formData.subFolder = "planDetail"
			//接口应该免登陆
			var token = this.carhelp.getToken()

			this.header = {

				'Authorization': token
			}
		},
		methods: {
			error(e) {
			           console.log(e);
			},
			delOutListMethod(c) {
			
				if (c > -1) {
					this.scanList.splice(c, 1)
					uni.showToast({
						title: "删除成功",
						icon: "none"
					})
				}
			},
			
			gotoOut() {
				if(this.scanList.length==0){
					uni.showToast({
						title: "请扫码检验设备",
						icon: "none"
					})
					return
				}
				var bl=true;
				for(var x in this.scanList){
					var obj=this.scanList[x];
					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()
					this.scanList[x]=obj;
					
				}
				if(!bl){
					return;
				}
				
				var returnObj=this.scanList.map(item=>{
					return {
						deviceId:item.id,
						remark:item.reRemark,
						status:item.reStatus,
						imgUrls:item.imgUrls,
					}
				})
				
				console.log(returnObj);
				var json={
				
					deviceData:returnObj
					
				}
				this.submitInfo({
					recordData:JSON.stringify(json)
				})
				
			},submitInfo(obj){
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				API.saveInspection(obj).then((res) => {
					uni.hideLoading();
					const eventChannel = this.getOpenerEventChannel();
					eventChannel.emit('refreshData');
					uni.navigateBack()
				}).catch(error => {
					uni.showToast({
						title: error,
						icon: "none"
					})
				})
			},
			// 选中某个单选框时，由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;
			},
			changeShow() {
				this.show = !this.show
			},
			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(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;
				
				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 info = res.data.deviceInfo;
						info.reStatus="1"
						info.reRemark=""
						
						uni.showToast({
							title: "扫码成功",
							icon: "none"
						})
						 this.scanList.push(info)



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

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


		},

	};
</script>

<style scoped lang="scss">
	.head {
		background-color: #fff;
		padding: 32rpx;

		.title {
			color: rgba(51, 51, 51, 1);
			font-size: 36rpx;
			margin-bottom: 16rpx;
		}

		.item {
			display: flex;flex-wrap: wrap;
			color: #777777;
			margin-top: 16rpx;

			.name,
			.value {
				font-weight: bold;
			}

			.unfold {
				margin-left: auto;
				position: relative;
				color: red;
				font-family: Microsoft Yahei;

				/deep/.uicon-arrow-down {
					margin-left: 8rpx;
				}
			}

			.options {
				width: 120rpx;
				height: 60rpx;
				line-height: 60rpx;
				text-align: center;
				background-color: #fff;
				color: rgba(65, 80, 88, 1);
				font-family: Microsoft Yahei;
				position: absolute;
				top: 320rpx;
				right: 24rpx;
				box-shadow: 5px 5px 10px gray;
			}
		}
	}
	.scantitle{
		text-align: center;
		font-size: 44rpx;
		 padding-top: 20px;
	}
	.details {
		background-color: #fff;
		margin-top: 24rpx;
		padding: 0 32rpx;
	
		.item {
			display: flex;flex-wrap: wrap;
			justify-content: space-between;
			padding: 12rpx 0;
			border-bottom: 1px solid rgba(244, 244, 244, 1);
	
			.name {
				line-height: 30px;
				color: rgba(119, 119, 119, 1);
			}
	
			.value {
				color: #101010;
			}
		}
	}
	.list {
		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;
				}
	
			}
	
			.address,
			.remark {
				display: flex;flex-wrap: wrap;
				color: #777777;
				font-size: 24rpx;
				margin-bottom: 8rpx;
			}
		}
	}
	.container {
		
		margin-top: 80px;
		padding-bottom: 60px;
		.main {
			padding: 0 24rpx;

			.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;flex-wrap: wrap;
					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;
							}
						}
					}


				}

				.infos {
					margin-top: 16rpx;
					display: flex;flex-wrap: wrap;
					justify-content: space-between;
					color: #777777;
					font-size: 24rpx;



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

						.item-value {
							width: 200rpx;
							overflow: hidden;
							white-space: nowrap;
							text-overflow: ellipsis;
						}
					}
				}
			}

			// 接收选项
			.receive-options {
				display: flex;flex-wrap: wrap;
				align-items: center;
				padding: 24rpx 0;

				.title {
					color: #333333;
					margin-right: 24rpx;
					font-weight: bold;
				}

				.receive-radio {
					flex: 1;

					/deep/.u-radio-group {
						width: 100%;

					}

					/deep/.u-radio {
						margin-right: 48rpx;
					}
				}

			}

			// 备注
			.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;
				}
			}

		}



	}

	.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>