palletApp/pages/pallet/ck.vue

<template>
	<view class="page"> 
		<view class="back"></view>
		<view class="wrapnob"> 
		
			<!-- 托盘基础信息卡片 -->
			<!-- <view v-if="rmbm" class="info-card">
			  <view class="info-row" @click="openPalletDetail()">
			    <text class="label">工装托盘表号：{{ trayInfo.palletNo }}</text>
			    <text class="value status" :class="'status-'+trayInfo.status">
					{{ retType(trayInfo.status,1) }}
				</text>
			  </view>
			</view>
			<view v-else style="margin: 20rpx;">
				<view class="nosearch">~请扫码查询托盘信息~</view>
			</view> -->
			
			<view v-if="!rmbm" style="margin: 20rpx;">
				<view class="nosearch">~请扫码查询托盘信息~</view>
			</view>
			
			<!-- 列表 -->
			<!-- v-if="trayInfo&&trayInfo.loadId" -->
			<swiper v-if="palletlist.length>0" class="swiper-box" :duration="300">
				
				<swiper-item class="swiper-item">
					<scroll-view scroll-y style="height: 100%;width: 100%;">
						
						<!-- 装载信息区域 -->
						<view class="loading-section">
						  <!-- 分组信息折叠面板 -->
						  <view class="accordion" v-for="(group, index) in palletlist" :key="index">
						    <view class="accordion-header" @click="gotoDetail(group)">
						      <view class="header-info">
						        <text class="group-title">船号：</text>
						        <text class="group-tray">{{ group.project }}</text>
						      </view>
						      <uni-icons type="right" size="18" color="#999" style="margin-left: 6rpx;"></uni-icons>
						    </view>
							<view class="accordion-content0" >
							  <!-- 分组详细信息 -->
							  <view class="group-details">
							    <view class="detail-row">
							      <text class="detail-label">安装托盘表号:</text>
							      <text class="detail-value">{{ group.instno }}</text>
							    </view>
							    <view class="detail-row">
							      <text class="detail-label" style="width: 75rpx;">图号:</text>
							      <text class="detail-value">{{ group.dwgno }}</text>
							    </view>
							  </view>
							  <view class="detail-arr" @tap="toggleGroup(index)">
							  	<span class="detail-value-num">数量：</span>
								<text class="detail-num">{{ group.items&&group.items.length>0?group.items.length:0 }}</text>
							  	<uni-icons :type="group.expanded ? 'arrowup' : 'arrowdown'" size="16" color="#999"></uni-icons>
							  </view>
							</view>
						    <view class="accordion-content" v-if="group.expanded">
						      <!-- 管件清单明细 -->
						      <view class="item-list">
						        <view class="list-header">
						          <text class="header-item" style="width: 90rpx;">序号</text>
						          <text class="header-item" style="display: flex;flex:1">明细</text>
						        </view>
						        <view class="list-item" v-for="(item, ii) in group.items" :key="ii" @click="gotoInfo(item)">
						          <text class="item-cell" style="width: 80rpx;">{{ ii+1 }}</text>
						          <text class="item-cell" style="display: flex;flex:1;text-align: left;">{{ item.uniStr  }}</text>
								  <uni-icons type="right" size="18" color="#999" style="margin-left: 6rpx;"></uni-icons>
						        </view>
						      </view>
						    </view>
						  </view>
						</view>
						
					</scroll-view>
				</swiper-item>
			
			</swiper>
		
		</view>
		
		<u-toast ref="uToast" />
		
		<!-- 托盘详情 -->
		<u-popup v-model="show"  @close="close" mode="center" :mask="true" :closeable="true" :border-radius="20" close-icon-pos="top-right">
			<view class="ppcon">
				<psDetail :palletAll="palletAll"></psDetail>
			</view>
		</u-popup>
		
		<!-- 托盘明细详情 -->
		<u-popup v-model="showmx"  @close="closemx" mode="center" :mask="true" :closeable="true" :border-radius="20" close-icon-pos="top-right">
			<view class="ppcon">
				<palletDetail :pallet="palletInfo"></palletDetail>
			</view>
		</u-popup>
		
		<!-- <scanQR ref="scan" @scanSuccess="scanSuccess"></scanQR> -->
		<!-- 扫码组件 html5-qrcode -->
		<scan-code ref="scan"></scan-code>
		
		<u-toast ref="uToast" />
		
	</view>
	
</template>

<script>
	import psDetail from "@/components/psDetail.vue";
	import palletDetail from "@/components/palletDetail.vue";
	
	// 扫二维码 jsQR
	// import scanQR from "@/components/scanQR.vue"; 
	
	// 扫二维码 html5-qrcode
	import scanCode from '@/components/easy-scancode/easy-scancode.vue'
	
	export default {
		components: {
		  psDetail,
		  palletDetail,
		  // scanQR,
		  scanCode
		},
		data() {
			return {
				show:false, 
				showmx:false, 
				palletAll:null,
				palletInfo:null,
				palletlist:[],
				rmbm:"", // 工装托盘编号
				trayInfo:{},// 托盘基本信息
				tabCurrentIndex: 0,
				loadStatus:'loadmore',
				scrollLeft: 0,//tabs
				address:[],
				users:[],
				depts:[],
				dicts:[],
				gcs:[],
				status:[], 
				
			};
		},
		onLoad(option) {
			if(option.rmbm){
				this.rmbm=option.rmbm;
				// 获取托盘基本信息
				this.getTpInfo();
			}
			// 先加载分类
			this.getTypes();
		},
		onReady(){
			const _that = this;
			// #ifdef H5
			// 扫码识别托盘明细查询
			this.ifsm=true;
			// this.$refs.scan.showScan();
			this.$refs.scan.start({
			    success: (val, res)=> {
			        console.log('扫描成功',val,res);
					_that.rmbm=val;
					_that.$forceUpdate();
					_that.getTpInfo();
			    },
			    fail: (rej)=>{
			        console.log('扫描失败',rej);
					uni.showToast({
						title: '请在HTTPS环境下点击开启',
						icon: 'none',
						duration: 3000
					});
			    }
			})
			// #endif
		},
		//点击导航栏 扫描 buttons 时触发
		onNavigationBarButtonTap: async function(e) {
			const _that = this;
			const index = e.index;
			// 扫码
			if (index === 0) {
				
				// #ifdef H5
				// 扫码识别托盘明细查询
				this.ifsm=true;
				// this.$refs.scan.showScan();
				this.$refs.scan.start({
				    success: (val, res)=> {
				        console.log('扫描成功',val,res);
						_that.rmbm=val;
						_that.$forceUpdate();
						_that.getTpInfo();
				    },
				    fail: (rej)=>{
				        console.log('扫描失败',rej);
						uni.showToast({
							title: '请在HTTPS环境下点击开启',
							icon: 'none',
							duration: 3000
						});
				    }
				})
				// #endif
				
				// #ifdef APP-PLUS
				// 允许从相机和相册扫码
				//qrCode,barCode
				// uni.scanCode({
				// 	scanType: ['qrCode', 'barCode'],
				// 	success: function(res) {
				// 		_that.rmbm=res.result;
				// 		_that.getTpInfo();
				// 	}
				// });
				
				var mpaasScanModule = uni.requireNativePlugin("Mpaas-Scan-Module");
				mpaasScanModule.mpaasScan({
				    // 扫码识别类型，参数可多选，qrCode、barCode，不设置，默认识别所有
				    'scanType':  ['qrCode','barCode'],
				    // 是否隐藏相册，默认false不隐藏
				    'hideAlbum': false,
				    //ios需要设置这个参数，只支持中英文 zh-Hans、en，默认中文                       
				    'language' : 'en',
				    //相册选择照片识别错误提示(ios)
				    'failedMsg': '未识别到二维码，请重试',
				    //Android支持全屏需要设置此参数
				    'screenType': 'full' ,
				    'timeoutInterval':'10', //设置超时时间
				    'timeoutText':'未识别到二维码？' //超时提醒文本             
				},(ret) => {
					if(ret.resp_code==1000){
						// 扫码成功
						_that.rmbm=ret.resp_result;
						_that.getTpInfo();
					}
				});
				// #endif
			}
		},
		methods: {
			/**
			 * h5扫码返回
			*/
			scanSuccess(qrcode){
				console.log("qrcode",qrcode);
				this.rmbm=qrcode;
				this.$forceUpdate();
				this.getTpInfo();
			},
			gotoDetail(item){
				uni.navigateTo({
					url: `/pages/pallet/lbcx?project=${item.project}&instno=${item.instno}&dwgno=${item.dwgno}`
				});
			},
			close() {
				this.rmbm="";
				this.show = false;
				this.ifsm = true;
				this.$forceUpdate();
			},
			open() {
				this.show = true;
			},
			closemx() {
				this.showmx = false;
			},
			openmx() {
				this.showmx = true;
			},
			gotoInfo(item){
				this.palletInfo=item;
				this.$forceUpdate();
				this.openmx();
			},
			// 显示托盘详情
			async openPalletDetail() {
				console.log(this.trayInfo)
				if(this.trayInfo.palletNo){
					this.palletAll = this.trayInfo;
					this.$forceUpdate();
					// 打开托盘详情弹框
					this.open();
				}
				else{
					this.$refs.uToast.show({
					  title: "托盘详情查询收失败！",
					  type: "warning",
					  duration: 3000,
					});
				}
			},
			toggleGroup(index) {
			  this.palletlist[index].expanded = !this.palletlist[index].expanded;
			  this.$forceUpdate();
			},
			async getTpInfo() {
				uni.showLoading({
					title: '数据加载中...'
				});
				// 查询 托盘基本信息
				const {data: res} = await uni.$http.get('/getPallet',{
					palletNo:this.rmbm
				});
				console.log(res)
				if(res.success){ 
					if(res.data){
						this.ifsm = false;
						this.trayInfo=res.data;
						
						// 基本详情 全部弹框查询
						this.openPalletDetail();  
						
						// if(this.trayInfo.loadId){
						// 	// 查询托盘明细
						// 	this.getYpDetail()
						// }
						// else{
						// 	// this.open() // 打开基本详情
						// 	this.openPalletDetail(); // 基本详情
						// }
					}
					else{
						this.ifsm = true;
						this.trayInfo={};
						uni.showModal({
						    title: "扫码提示",
						    content: "托盘二维码【"+this.rmbm+"】无效",
						    showCancel: false,
						    confirmText: "确定"
						})
					}
				}
				else{
					this.ifsm = true;
					this.trayInfo={};
					uni.showModal({
					    title: "扫码提示",
					    content: "托盘二维码【"+this.rmbm+"】无效",
					    showCancel: false,
					    confirmText: "确定"
					})
				}
			},
			async getYpDetail() {
				// 查询托盘明细
				uni.showLoading({
					title: '数据加载中...'
				});
				// 查询 托盘基本信息
				const {data: res} = await uni.$http.get('/getInstdetail',{
					palletNo:this.rmbm
				});
				if(res.success){
					if(res.data&&res.data.length>0){
						res.data.forEach((cell,idx)=>{
							var findx = this.palletlist.findIndex(item => item.project === cell.project && item.instno === cell.instno && item.dwgno === cell.dwgno ); 
							if(findx<0){
								// 新增一条分组
								var add = {
									expanded:false,
									items:[cell],
									project:cell.project,
									instno:cell.instno,
									dwgno:cell.dwgno,
								};
								this.palletlist.push(add);
							}
							else {
								// 分组里子列表添加
								this.palletlist[findx].items.push(cell);
							}
						});
					}
				}
				
			},
			getTypes() {
				//获取数据字典
				this.gcs=[];
				this.status=[];
				var commondata = uni.getStorageSync("commondata");
				if(commondata){
					var data = JSON.parse(commondata);
					if(data){
						this.users=data.users;
						this.dicts=data.dicts;
						this.depts=data.depts;
						this.address=data.address;
						this.dicts.forEach(cell=>{
							if("PJCD"==cell.bmlb&&cell.zfbz!=='1'){
								// 工程
								this.gcs.push(cell);
							}
							if("TPZT"==cell.bmlb){
								// 托盘转运状态
								this.status.push(cell);
							}
						});
						this.$forceUpdate();
					}
				}
				else{
					this.users=[];
					this.dicts=[];
					this.depts=[];
					this.address=[];
				}
			},
			retType(type,str) {
				var rets = '';
				if(str==1){
					// 状态
					this.status.forEach((cell,idx)=>{
						if(type==cell.bm){
							rets=cell.bmsm;
							return;
						}
					});
					if(!rets){
						rets="其他"
					}
				}
				else if(str==2){
					// 部门
					this.depts.forEach((cell,idx)=>{
						if(type==cell.departCode){
							rets=cell.departName;
							return;
						}
					});
				}
				if(!rets){
					rets=type
				}
				return rets;
			},
			
			 
			
		}
		
	}
</script>

<style lang="scss" scoped>
	::v-deep uni-picker > .uni-picker-container {
	  z-index: 12998 !important;
	}
	::v-deep uni-picker > .uni-mask {
	  z-index: 12999 !important;
	}
	.searchinput {
	  margin-right: 40rpx !important;
	}
	.u-size-default {
	  padding: 10rpx !important;
	}
	.u-shaixuan {
	  text-align: center;
	  z-index: 90 !important;
	}
	.ppcon{
		width: calc(100vw - 60rpx);
		height: calc(100vh - 100rpx) !important;
		/* #ifdef H5 */
		height: calc(100vh - var(--window-top) - 100rpx) !important;
		/* #endif */
		overflow-y: auto;
	} 
	.cu-form-group .title {
	  font-size: 26rpx !important;
	}
	.cu-form-group uni-picker .picker {
	  font-size: 26rpx !important;
	}
	
	.info-card {
	  background-color: #fff;
	  border-radius: 12rpx;
	  padding:20rpx 30rpx;
	  margin-bottom: 20rpx;
	  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
	  margin: 20rpx 20rpx 0;
	  .label {
	    display: flex;
	    flex: 1;
	    font-size: 28rpx;
	    color: #1890ff;
	  }
	}
	.info-row {
	  display: flex;
	  justify-content: space-between;
	} 
	.label {
	  display: flex;
	  flex: 1;
	  font-size: 28rpx;
	  color: #666;
	}
	.value {
	  font-size: 28rpx;
	  color: #333;
	}
	.status-01 {
	  color: #1890ff;
	}
	.status-02 {
	  color: #00c853;
	}
	.status-03 {
	  color: #ffab00;
	}
	.status-04 {
	  color: #fa3534;
	}
	
	.loading-section {
	  margin-bottom: 20rpx;
	  margin-top: 20rpx;
	}
	
	.accordion {
	  background-color: #fff;
	  border-radius: 12rpx;
	  margin-bottom: 20rpx;
	  overflow: hidden;
	  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
	}
	
	.accordion-header {
	  display: flex;
	  align-items: center;
	  justify-content: space-between;
	  padding: 30rpx;
	  background-color: #fafafa;
	}
	
	.header-info {
	  display: flex;
	  align-items: center;
	}
	
	.group-title {
	  font-size: 30rpx;
	  font-weight: bold;
	  color: #333;
	  margin-right: 20rpx;
	}
	
	.group-tray {
	  font-size: 28rpx;
	  color: #333;
	}
	
	.accordion-content0 {
	  padding: 20rpx 30rpx 0;
	}
	.accordion-content {
	  padding: 10rpx 30rpx 30rpx 30rpx;
	}
	
	.group-details {
	  margin-bottom: 10rpx;
	  display: flex;justify-content: space-between;
	}
	.detail-arr{
		display: flex;
		flex-direction: row;
		margin-bottom: 28rpx;
		align-items: center;
		border-bottom: 1px solid #f0f0f0;
		    padding-bottom: 20rpx;
	}
	.detail-row {
	  display: flex;
	  margin-bottom: 16rpx;
	}
	
	.detail-row:last-child {
	  margin-bottom: 0;
	}
	
	.detail-label {
	  font-size: 28rpx;
	  color: #333;
	  font-weight: 600;
	  width: 180rpx;
	}
	.detail-value-num {
	  font-size: 28rpx;
	  color: #333;
	  font-weight: 600;
	   
	}
	.detail-num{
		color:#007aff;
		 font-weight: 600;
		font-size: 30rpx;
		flex: 1;
	}
	.detail-value {
	  font-size: 28rpx;
	  color: #333;
	  flex: 1;
	}
	
	.item-list {
	  width: 100%;
	  border: 1rpx solid #e0e0e0;
	  border-radius: 8rpx;
	  overflow: hidden;
	  align-items: center;
	}
	
	.list-header {
	  display: flex;
	  background-color: #f5f5f5;
	  border-bottom: 1rpx solid #e0e0e0;
	}
	
	.header-item {
	  text-align: center;
	  font-size: 24rpx;
	  color: #333;
	  padding: 16rpx 10rpx;
	  font-weight: bold;
	}
	
	.list-item {
	  display: flex;
	  border-bottom: 1rpx solid #e0e0e0;
	  align-items: center;
	  padding-right: 6rpx;
	}
	
	.list-item:last-child {
	  border-bottom: none;
	}
	
	.item-cell {
	  text-align: center;
	  font-size: 24rpx;
	  color: #666;
	  padding: 16rpx 10rpx;
	  word-break: break-all;
	}
	
	.swiper-box {
		flex: 1;
		height: calc(100vh - 160rpx) !important;
		/* #ifdef H5 */
		height: calc(100vh - var(--window-top) - 160rpx) !important;
		/* #endif */
		margin: 0 20rpx;
	}
	.cuitem.cur {
	  background: #007aff !important;
	}
	.tabs-box {
	  padding:20rpx 20rpx 10rpx 20rpx;
	  .cuitem {
	    position: relative;
	    display: inline-block;
	    overflow: hidden;
	    background: #fff;
	    padding: 10rpx;
		width: 32%;
		margin: 0 2% 0 0;
	    border-radius: 12rpx;
		text-align: center;
		.cucell{
			width: 100%;
			display: flex;
			flex-direction: row;
			align-items: center;
			height: 60rpx;
			justify-content: center;
		}
		.text-num {
		  font-size: 26rpx;
		  .text-numcolor {
		    color: #33383c;
		  }
		  .text-numcolor.cur {
		    color: #fff;
		  }
		}
		.text-title {
		  font-size: 26rpx;
		  .text-titlecolor {
		    color: #33383c;
		  }
		  .text-titlecolor.cur {
		    color: #ffffff;
		  }
		}
	  }
	  .tabs-all {
	    color: #33383c;
	    font-size: 26rpx;
	    font-weight: 600;
	    margin-top: 16rpx;
	    position: relative;
	    text-align: left;
	  }
	}
	.nosearch{
		background-color: #FFFFFF;
		background-image: url('../../static/image/search.png');
		background-repeat: no-repeat;
		background-position: center center;
		background-size: 66% 66%;
		height: 600rpx;
		border-radius: 0 0 20rpx 20rpx;
		color: #666;
		display: flex;
		align-items: center;
		justify-content: flex-end;
		width: 100%;
		flex-direction: column;
		padding-bottom: 40rpx;
	}
	.nodata{
		background-color: #FFFFFF;
		background-image: url('../../static/image/nodata.jpg');
		background-repeat: no-repeat;
		background-position: center center;
		background-size: 66% 66%;
		height: 600rpx;
		border-radius: 0 0 20rpx 20rpx;
		color: #666;
		display: flex;
		align-items: center;
		justify-content: flex-end;
		width: 100%;
		flex-direction: column;
		padding-bottom: 40rpx;
	}
	 
</style>