palletApp/pages/pallet/tpcxtk.vue

<template>
	<view class="page">
		
		<view class="back"></view>
		<view class="wrapnob">
			
			<!-- 列表 -->
			<swiper class="swiper-box" :duration="300" :current="tabCurrentIndex"  @animationfinish="animationfinish">
				
				<swiper-item class="swiper-item" v-for="tabItem in list" :key="tabItem.id">
					<scroll-view scroll-y style="height: 100%;width: 100%;">
						
						<!-- 装载信息区域 -->
						<view class="loading-section">
						  <!-- 分组信息折叠面板 -->
						  <view class="accordion" v-for="(group, index) in tabItem.slist" :key="index+'-'+group.assemcode">
						    <view class="accordion-header">
						      <view class="header-info">
						        <text class="group-title">{{ type=='1'?'制作图号:':'托盘表号:' }}{{ type=='1'?group.dwgno:page.instno }}</text>
								<text class="group-title"> 配送比例:{{group.percent?group.percent+'%':'0.0%'}}</text>
						      </view>
							  <view class="header-info">
								  <text class="group-title"> 全部:{{group.tabs[0].count}}</text>
								  <text class="group-title"> 接收:{{group.tabs[1].count}} </text>
								  <text class="group-title"> 配送:{{group.tabs[2].count}} </text>
								  <text class="group-title"> 未配:{{group.tabs[3].count}} </text>
								  <text class="group-title"> 修改:{{group.tabs[4].count}} </text>
							  </view>
						    </view>
							
						    <view class="accordion-content">
						      <!-- 分组详细信息 -->
						      <view class="group-details">
						        <view class="detail-row">
						          <text class="detail-label">需求单位：</text>
						          <text class="detail-value">{{ group.requireDepartCode?retType(group.requireDepartCode,2):'' }}</text>
						        </view>
						        <view class="detail-row">
						          <text class="detail-label">需求日期：</text>
						          <text class="detail-value">{{ group.requireDate }}</text>
						        </view>
						        <view class="detail-row">
						          <text class="detail-label">需求地址：</text>
						          <text class="detail-value">{{ group.requireAddress }}</text>
						        </view>
						        <view class="detail-row">
						          <text class="detail-label">接收人：</text>
						          <text class="detail-value">{{ group.requireName }}</text>
						        </view>
						        <view class="detail-row">
						          <text class="detail-label">联系电话：</text>
						          <text class="detail-value">{{ group.requirePhone }}</text>
						        </view>
						        <view class="detail-row">
						          <text class="detail-label">部件数量：</text>
						          <text class="detail-value">{{ group.items?group.items.length:0 }}</text>
						        </view>
						        <view class="detail-row">
						          <text class="detail-label">配送时间：</text>
						          <text class="detail-value">{{ group.deliveryDate }}</text>
						        </view>
						        <view class="detail-row">
						          <text class="detail-label">配送车辆：</text>
						          <text class="detail-value">{{ group.deliveryCar }}</text>
						        </view>
								<view class="detail-row">
								  <text class="detail-label">配送数量：</text>
								  <text class="detail-value">{{ group.deliveryNum }}</text>
								</view>
								<view class="detail-row">
								  <text class="detail-label">未配送数量：</text>
								  <text class="detail-value">{{ group.unDeliveryNum }}</text>
								</view>
						        <view class="detail-row">
						          <text class="detail-label">实际接收人：</text>
						          <text class="detail-value">{{ group.receiveName }}</text>
						        </view>
						        <view class="detail-row">
						          <text class="detail-label">实际接收时间：</text>
						          <text class="detail-value">{{ group.receiveDate }}</text>
						        </view>
						      </view>
							  
							  <!-- 状态选项卡 -->
							  <view class="tabs-container">
							    <view class="tabs-scroll">
							      <view class="tabs-wrapper">
							        <view 
							          v-for="(tab, idx) in group.tabs" 
							          :key="idx"
							          class="tab-item"
							          :class="{ active: group.activeTab === idx }"
							          @click="switchTab(index,idx)"
							        >
									<text class="tab-count">{{ tab.count }}</text>
							        <text class="tab-text">{{ tab.name }}</text>
							        </view>
							      </view>
							    </view>
							  </view>
								  
						      <!-- 管件清单明细 -->
						      <view class="item-list">
						        <view class="list-item"
								    v-for="(item,ii) in group.items" :key="ii" 
									v-if="(group.activeTab==0||(group.activeTab==1&&item.receiveDate)||(group.activeTab==2&&item.deliveryDate)
									||(group.activeTab==3&&!item.deliveryDate)||(group.activeTab==4&&item.modifyMark=='Y'))"
								    :class="{ red: item.modifyType === 'Y',blue: item.deliveryDate?true:false,green: item.receiveDate?true:false }">
									<view class="list-cell">
										<view class="item-xuh" >
											{{ group.xh?++group.xh:(group.xh=1,group.xh) }}. 
										</view>
										<view class="item-cell" style="padding-left:4rpx;">
											件号: {{ item.assemcode || '-' }}
										</view>
										<view class="item-cell">
											数量: {{ item.qty?(1.0*item.qty).toFixed(0) : '-' }}
										</view>
									</view>
									<view class="list-cell">
										<view class="item-cell">
											规格: {{ item.spec || '-' }}
										</view>
										<view class="item-cell">
											材质: {{ item.grd || '-' }}
										</view>
									</view>
									<view class="list-cell">
										<view class="item-cell">
											状态: {{ item.status || '-' }}
										</view>
										<view class="item-cell">
											时间: {{ item.statusDate || '-' }}
										</view>
										<view class="item-cell">
											单位: {{ item.statusDept?retType(item.statusDept,2):'-' }}
										</view>
									</view>
									<view class="list-cell">
										<view class="item-cell">
											配送时间: {{ item.deliveryDate || '-' }}
										</view>
										<view class="item-cell">
											工装托盘: {{ item.palletNo || '-' }}
										</view>
									</view>
						            <view class="list-cell" v-if="item.modifyMark=='Y'">
						            	<view class="item-cell">
						            		修改说明: {{ item.modifyType +' ' + item.modifyDwgno }}
						            	</view>
						            </view>
									<view class="list-cell">
										<view class="item-cell">
											备注: {{ item.deliveryRemark || '-' }}
										</view>
									</view>
						        </view>
						      </view>
							  
						    </view>
						  </view>
						</view>
						
						<view class="nodata" v-if="tabItem.slist.length<=0">
							暂无数据
						</view>
						
					</scroll-view>
				</swiper-item>
				
				 
			
			</swiper>
		
		</view>
		
		<u-toast ref="uToast" /> 
		
	</view>
	
</template>

<script>  
	export default { 
		data() {
			return {
				show: false,
				type: '1',// 1，制作图号 2, 安装托盘表号 3, 分段
				page: {
					project: null,
					dwgno: null,
					instno: null
				},
				tabCurrentIndex: 0,
				loadStatus:'loadmore',
				scrollLeft: 0,
				list:[
					{
						id:'tph',
						loadStatus:'loadmore',
						num: 0,
						name:'',
						expanded:false,
						slist:[]
					}
				],
				address:[],
				users:[],
				depts:[],
				dicts:[],
				gcs:[],
				status:[],
			};
		},
		onLoad(option) {
			if(option.type){
				this.type=option.type;
				this.$forceUpdate();
			}
			if(option.project){
				this.page.project=option.project;
				this.$forceUpdate();
			}
			if(option.instno){
				this.page.instno=option.instno;
				this.$forceUpdate();
			}
			if(option.dwgno){
				this.page.dwgno=option.dwgno;
				this.$forceUpdate();
			}
			this.getYpDetail();
			// 先加载分类
			this.getTypes();
		},
		created(){
		},
		methods: {
			toggleGroupAll(index) {
				var that=this;
				if(index==this.tabCurrentIndex){
					this.list[index].expanded = !this.list[index].expanded;
					this.list[index].slist.forEach((item,ii) => {
						this.list[index].slist[ii].expanded=that.list[index].expanded;
					});
					this.$forceUpdate();
				}
			},
			toggleGroup(index) {
			  this.list[this.tabCurrentIndex].slist[index].expanded = !this.list[this.tabCurrentIndex].slist[index].expanded;
			  this.$forceUpdate();
			},
			async getYpDetail() { 
				// 查询托盘明细
				uni.showLoading({
					title: '数据加载中...'
				});
				// 查询 托盘基本信息
				// this.page.project="T300K-106";
				var parms={};
				if(this.page.project){
					parms["project"]=this.page.project;
				}
				if(this.page.section){
					parms["section"]=this.page.section;
				}
				if(this.page.palletNo){
					parms["palletNo"]=this.page.palletNo;
				}
				if(this.page.dwgno){
					parms["dwgno"]=this.page.dwgno;
				}
				if(this.page.instno){
					parms["instno"]=this.page.instno;
				}
				
				const {data: res} = await uni.$http.get('/searchInstdetail',parms);
				if(res.success){
					this.list[0].slist=[];
					if(res.data&&res.data.length>0){
						// 全部数据加载
						this.list[this.tabCurrentIndex].loadStatus="nomore";
						res.data.forEach((cell,idx)=>{
							 
							var findx = -1;
							if(this.type=='1'){
								// 制作图
								findx = this.list[0].slist.findIndex(item => item.dwgno === cell.dwgno);
							}
							else {
								// 托盘表号
								findx = this.list[0].slist.findIndex(item => item.instno === cell.instno);
							}
							if(findx<0){
								var add = {
									expanded:false,
									activeTab:0,
									items:[cell],
									project:cell.project,
									instno:cell.instno,
									dwgno:cell.dwgno,
									requireDepartCode:cell.requireDepartCode,
									requireRate:cell.requireRate,
									requireAddress:cell.requireAddress,
									requireName:cell.requireName,
									requirePhone:cell.requirePhone,
									qty:cell.qty,
									deliveryNum:0,
									unDeliveryNum:0,
									deliveryDate:cell.deliveryDate,
									requireDate:cell.requireDate,
									deliveryCar:cell.deliveryCar,
									receiveName:cell.receiveName,
									receiveDate:cell.receiveDate,
								};
								this.list[0].slist.push(add);
							}
							else {
								this.list[0].slist[findx].items.push(cell);
							}
						});
						this.list[0].slist.forEach((cell,idx)=>{
							this.list[0].slist[idx]["deliveryNum"]=this.getdeliveryNum(cell.items);
							this.list[0].slist[idx]["unDeliveryNum"]=this.getunDeliveryNum(cell.items);
							this.list[0].slist[idx]["deliveryDate"]=this.getdeliveryDate(cell.items);
							this.list[0].slist[idx]["requireDate"]=this.getrequireDate(cell.items);
							this.list[0].slist[idx]["tabs"]=this.gettabs(cell.items);
							this.list[0].slist[idx]["percent"]=(this.getpercent(cell.items)).toFixed(1);
							this.$forceUpdate();
						});
						this.$forceUpdate(); 
					}
					else{
						this.list[this.tabCurrentIndex].loadStatus="nomore";
					}
				}
				else{
					this.list[this.tabCurrentIndex].loadStatus="nomore";
				}
			},
			switchTab(ii,kk){
				this.list[0].slist[ii].activeTab=kk;
				this.list[0].slist[ii].xh=0;
				this.$forceUpdate(); 
			},
			getpercent(items){
				var all=0,ps=0,xg=0,percent=0;
				if (items&&items.length>0) {
				    items.forEach(cell=>{
						all=all+(1.0*cell.qty); 
						// c)	配送：deliveryDate!=’’
						if(cell.deliveryDate){
							ps=ps+(1.0*cell.qty); 
						}
						// e)	修改：modifyMark=’Y’ （modify_mark为新增字段）
						if(cell.modifyMark== 'Y'){
							xg=xg+(1.0*cell.qty); 
						}
					});
					percent=(all-xg)?(ps-xg)*100/(all-xg):0;
				}
				return percent;
			},
			gettabs(items){
				var tabs=[
					{ name: '全部', count: 0 },
					{ name: '接收', count: 0 },
					{ name: '配送', count: 0 },
					{ name: '未配', count: 0 },
					{ name: '修改', count: 0 }
				];
				if (items&&items.length>0) {
					tabs[0].count=items.length;
				    items.forEach(cell=>{
						// b)	接收：receiveDate!=’’
						if(cell.receiveDate){
							tabs[1].count=tabs[1].count+1;
						}
						// c)	配送：deliveryDate!=’’
						if(cell.deliveryDate){
							tabs[2].count=tabs[2].count+1;
						}
						// d)	未配：deliveryDate=’’
						if(!cell.deliveryDate){
							tabs[3].count=tabs[3].count+1;
						}
						// e)	修改：modifyMark=’Y’ （modify_mark为新增字段）
						if(cell.modifyMark== 'Y'){
							tabs[4].count=tabs[4].count+1;
						}
					});
				}
				return tabs;
			},
			getunDeliveryNum(items){
				var num=0
				if (items&&items.length>0) {
				    items.forEach((cell,idx)=>{
						// console.log(cell.deliveryDate)
						if(cell.deliveryDate==''||cell.deliveryDate==null||cell.deliveryDate==undefined){
							num=num+1.0*(cell.qty?cell.qty:0);
						}
					});
					return num.toFixed(2);
				}
				else{
					return 0;
				}
			},
			getdeliveryNum(items){
				var num=0
				if (items&&items.length>0) {
				    items.forEach((cell,idx)=>{
						// console.log(cell.deliveryDate)
						if(cell.deliveryDate){
							num=num+1.0*(cell.qty?cell.qty:0);
						}
					});
					return num.toFixed(2);
				}
				else{
					return 0;
				}
			},
			getdeliveryDate(items){
				var date=''
				if (items&&items.length>0) {
				    items.forEach((cell,idx)=>{
						if(cell.deliveryDate){
							date=this.compareDate(date,cell.deliveryDate);
							if(!date){
								date=cell.deliveryDate;
							}
							else{
								if(this.compareDate(date,cell.deliveryDate)){
									date=cell.deliveryDate;
								}
							}
						}
					});
				}
				return date;
			},
			getrequireDate(items){
				var date=''
				if (items&&items.length>0) {
				    items.forEach((cell,idx)=>{
						if(cell.requireDate){
							date=this.compareDate(date,cell.requireDate);
							if(!date){
								date=cell.requireDate;
							}
							else{
								if(this.compareDate(date,cell.requireDate)){
									date=cell.requireDate;
								}
							}
						}
					});
				}
				return date;
			},
			compareDate(timeStr1,timeStr2){
				let date1 = new Date(timeStr1);
				let date2 = new Date(timeStr2);
				if (date1 < date2) {
				    return true;
				} else if (date1 >= date2) {
				    return false;
				}
			},
			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){
								// 工程
								this.gcs.push(cell);
							}
							if("TPZT"==cell.bmlb){
								// 托盘转运状态
								this.status.push(cell);
							}
						});
						console.log(this.gcs)
						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;
			},
			animationfinish({ detail: { current } }) {
				this.tabCurrentIndex = current;
				this.tabsetDx();
			},
			tabsetDx() {
			  this.scrollLeft = (this.tabCurrentIndex - 1) * 200;
			},
			
		}
		
	}
</script>

<style lang="scss" scoped>
	.u-drawer{
		top:calc(var(--window-top) + 100rpx) !important;
		height: calc(100vh - var(--window-top) - 100rpx) !important;
		z-index: 92 !important;
	}
	
	.popcon1{
		padding: 0 20rpx 10rpx;
	}
	.popcon{
		height: calc(100vh - 100rpx) !important;
		/* #ifdef H5 */
		height: calc(100vh - var(--window-top) - 100rpx) !important;
		/* #endif */
		overflow-y: auto;
	}
	::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;
	}
	.cu-form-group .title {
	  font-size: 26rpx !important;
	}
	.cu-form-group uni-picker .picker {
	  font-size: 26rpx !important;
	}
	.searchbg{
		width: 100%;
		position: relative;
		display: block;
		overflow: hidden;
		padding: 14rpx 20rpx 0 20rpx;
		.detail-item {
		  display: flex; 
		  margin-bottom: 15rpx;
		} 
		.item-label {
		  font-size: 28rpx;
		  color: #666;
		  width: 150rpx;
		}
		.item-value {
		  font-size: 28rpx;
		  color: #333;
		  flex: 1;
		}
	}
	.u-drawer.timetip {
	  height: calc(100vh - var(--window-top) - 100rpx) !important;
	  top: 0 !important;
	  bottom: auto !important;
	}
	.cu-form-group {
	  ::v-deep .u-mask {
	    margin-top: -300rpx !important;
	  }
	}
	.icon-screen{
		position: absolute;
		top: 20rpx;
		right: 0;
		width: 36rpx;
		height:35rpx;
		background: url('../../static/images/shaixuan.png') no-repeat center center;
		background-size: 100% auto;
	} 
	.selnodate{
		width: 400rpx;
		height: 30rpx;
		background: url('@/static/images/xiayiji.png') no-repeat center right;
		background-size:auto 88%;
		padding-right: 50rpx;
		text-align: right;
		color: rgb(192, 196, 204);
	}
	::v-deep .u-form-item {
		color: #000;
		font-size: 28rpx !important;
		padding: 6rpx;
		background-color: #fff;
	}
		
	::v-deep .u-form-item--left {
		margin: 0 0 0 18rpx !important;
		width: 150rpx;
	}
	
	.selarr {
	  height: 100%;
	  line-height: 1;
	  text-align: right;
	  display: flex;
	  flex: 1;
	  flex-direction: row;
	  align-items: center;
	  margin-right: 32rpx;
	  .txt{
		  display: flex;
		  justify-content: flex-end;
		  flex: 1;
	  }
	}
	
	
	.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: 10rpx 20rpx 0;
	}
	.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;
	}
	
	.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;
	  flex-direction: column;
	  padding: 20rpx;
	  background-color: #f5f5f5;
	}
	
	.header-info {
	  display: flex;
	  align-items: center;
	}
	
	.group-title {
	  font-size: 30rpx;
	  font-weight: bold;
	  color: #333;
	  margin-right: 20rpx;
	}
	
	.group-tray {
	  font-size: 26rpx;
	  color: #666;
	  margin-right: 20rpx;
	}
	
	.accordion-content {
	  padding: 30rpx;
	}
	
	.group-details {
	  margin-bottom: 30rpx;
	}
	
	.detail-row {
	  display: flex;
	  margin-bottom: 20rpx;
	}
	
	.detail-row:last-child {
	  margin-bottom: 0;
	}
	
	.detail-label {
	  font-size: 26rpx;
	  color: #666;
	  width: 160rpx;
	}
	
	.detail-value {
	  font-size: 26rpx;
	  color: #333;
	  flex: 1;
	}
	
	.tabs-container {
	  background-color: #ffffff;
	  margin:0 0;
	}
	
	.tabs-scroll {
	  white-space: nowrap;
	  padding: 0 0 20rpx;
	}
	
	.tabs-wrapper {
	  display: inline-flex;
	  width: 100%;
	}
	
	.tab-item {
	  padding: 10rpx 30rpx;
	  margin: 0 10rpx 0 0;
	  border-radius: 20rpx;
	  background-color: #f5f5f5;
	  display: flex;
	  flex-direction: column;
	  align-items: center;
	  width: 20%;
	}
	
	.tab-item.active {
	  background-color: #007aff;
	}
	
	.tab-text {
	  font-size: 28rpx;
	  color: #333;
	  margin-right: 8rpx;
	}
	
	.tab-item.active .tab-text {
	  color: #ffffff;
	}
	
	.tab-count {
	  font-size: 32rpx;
	  font-weight: 600;
	  color: #333;
	}
	
	.tab-item.active .tab-count {
	  color: rgba(255, 255, 255, 0.8);
	}

	
	.item-list {
	  width: 100%;
	  display: flex;
	  flex-direction: column;
	}
	.list-item {
		border: 1rpx solid #e0e0e0;
		box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
		border-radius: 8rpx;
		display: flex; 
		flex-direction: column;
		width: 100%;
		margin-bottom: 20rpx;
		padding: 10rpx;
		background-color: #fafafa;
	}
	.list-item.red{
		color:#de0000;
	}
	.list-item.blue{
		color:#2196f3;
	}
	.list-item.green{
		color:#18b566;
	}
	.list-cell{
		display: flex;
		flex-direction: row;
		width: 100%;
	}
	.item-xuh{
		text-align: center;
		font-size: 28rpx;
		padding: 6rpx 0 6rpx 0;
		word-break: break-all;
	}
	.item-cell {
	  text-align: center;
	  font-size: 28rpx;
	  padding: 6rpx 0 6rpx 30rpx;
	  word-break: break-all;
	} 
	
	.swiper-box {
		flex: 1;
		height: calc(100vh) !important;
		/* #ifdef H5 */
		height: calc(100vh - var(--window-top) ) !important;
		/* #endif */
		margin: 0;
	}
	.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: 20rpx;
		color: #666;
		display: flex;
		align-items: center;
		justify-content: flex-end;
		width: 90%;
		flex-direction: column;
		padding-bottom: 40rpx;
		margin: 20rpx 5%;
	} 
	
</style>