aiot-app/components/addDetails.vue

<template>
	<view>
		<view class="bgBox" @click="onBlurBg" :style="{height:bgHeight + '%'}"></view>
			 <view class="chooseBox" :style="{bottom:chooseBox +'vh'}">
				 <view class="titBox"> {{title}} <view class="closeBox"><uni-icons type="closeempty" color="#999" size="20" @click="onBlurBg"></uni-icons></view></view>

			 <view class="TabBox">
				 <view :class="tabindex==index?'on':''" v-for="(item,index) in tabList" :key="index" @click="changeTab(index)">{{item.label}}</view>
			 </view>
			
			<view class="treeBox" v-if="tabindex == 0">
				<!--一级循环-->
				<view class="treeItem" v-for="(item,index) in materTree" :key="index">
					<view class="itemBox">
						<view class="selectItem" @click="selectAll(item.code,0,'')">
							<uni-icons :color="firstChoose.code==item.code?'#19be6b':'#ddd'" :type="firstChoose.code==item.code?'circle-filled':'circle'" size="24"></uni-icons> {{item.name}}
						</view> 
						<view class="openItem" @click="openItem(item.code)" v-if="item.children" :class="item.childOpen?'on':''"><uni-icons color="#ddd" type="right" size="18"></uni-icons></view>
					</view>
					
					<view class="itemChild" v-if="item.children" :class="item.childOpen?'onItemChild':''">
						<!--二级循环-->
						<view class="itemBox" v-for="(arrt,idx) in item.children" :key="idx">
							  <view class="selectItem" @click="selectAll(item.code,1,arrt.code)">
								<uni-icons :color="firstChoose.code==arrt.code?'#19be6b':'#ddd'" :type="firstChoose.code==arrt.code?'circle-filled':'circle'" size="24"></uni-icons> {{arrt.name}}
							  </view> 
					   </view>
					   <!--二级循环-->
					</view>
				</view>
				<!--一级循环-->
			</view>		
			
			<!--台账列表-->		 
			<view class="treeBox" v-if="tabindex == 1">	
			    <view class="treeListBox">
				     <view class="treeListInfo"  v-for="(item,index) in secondChoose.items" :key="index" @click="addItems(index)">
						 <view class="flBox">{{item.name}}</view>
						 <view class="frBox">
							 <view class="attr">{{item.manageType.name}} / {{item.unit}}</view>
							 <view class="icoBox" :class="item.checked?'on':''"><uni-icons color="#fff" type="forward" size="16"></uni-icons></view>
						 </view>
					 </view>
					 <!--列表为空-->
					 <u-empty mode="list" icon="../../../static/list.png" v-if="secondChoose.items !== undefined &&secondChoose.items.length < 1"></u-empty>
					 
			    </view>
			</view>	
			
		<!--已选物料-->		 	
		<view class="treeBox" v-if="tabindex == 2">	
		      <view class="titItemBox"><view>名称</view><view>数量</view><view>操作</view> </view>
		      <view class="isChosenBox">
				  <view class="isChosenItem" v-for="(item,index) in isChosen" :key="index">
					  <view>{{item.name}}</view> 
					  <view><uni-number-box @change="changeValue(index)" v-model="item.num" /></view> 
					  <view><view class="icoBox" @click="getDelete(index)"><uni-icons color="#999" type="trash" size="16"></uni-icons></view></view>
				 </view>
			  </view>
		
		</view>			 
					 
					 
		 </view>
 
	</view>
</template>

<script>
	import { post,postJ,get } from "@/utils/api.js";
	export default {
		name:"addDetails",
		props: {
			show:{
				 type: Boolean,
				 default: false
			},
			 tabList:{
				 type: Array
			 },
			 materTree:{
				 type: Array
			 },
			 title:{
				 type: String,
				 default:''
			 }
		},
		data() {
			return {
				bgHeight:0,              //底层背景高度
				chooseBox:-100,          //选择框
				tabindex:0,
				firstChoose:'',          //第一列
				secondChoose:[],         //第二列
				isChosen:[]             //第三列-已选择
			};
		},
		watch: {
			show(res){
			   if(res){
				   this.chooseBox = 0;
				   this.bgHeight = 100;
			   }else{
				   this.chooseBox = -100;
				   this.bgHeight = 0;
			   }
			}		
		},
		mounted(){
		
		},
		methods:{
			//关闭弹层
			onBlurBg(){
				this.$emit("openChoose");
				this.$emit("getChooseInfo",this.isChosen);
			},
			//切换Tab
			changeTab(index){
				this.tabindex = index;
			},
			//选择项
			selectAll(code,pid,childCode){
				let that = this;
					//遍历数组
					that.materTree.forEach(function(res, key) {
						if(res.code == code && pid == 0){
							that.firstChoose = that.materTree[key];
						}else if(res.code == code && pid == 1){
							let childData = that.materTree[key].children;
							childData.forEach(function(vo, k) {
								if(vo.code == childCode){
									that.firstChoose = childData[k];
								}
							})
						}
					});
				//请求二级Tab数据
				if(that.firstChoose){
					let data = {
						typeCode:that.firstChoose.code
					};
					//获取物料列表
					post(this.apiWebUrl + "/wms/enter/material/numList",data).then((res)=>{
						this.secondChoose = res.data;
						//console.log(this.secondChoose);
						
						//给列表项添加已选状态
						let isChosen = this.isChosen;
						let secondChoose = this.secondChoose.items;
						for (let i = 0; i < isChosen.length; i++) {
						   for (let j = 0; j < secondChoose.length; j++) {
						      if (secondChoose[j].batchNo == isChosen[i].batchNo) {
						         this.secondChoose.items[j].checked = true;
						       }
						    }
						 }
					}); 
				};
				
				//Tab索引
				this.tabindex = 1;
			},
			//点击展示下级
			openItem(code){
				let that = this;
				//遍历数组
				that.materTree.forEach(function(res, key) {
					if(res.code == code){
						that.materTree[key].childOpen = !that.materTree[key].childOpen;
					}
				});
			},	
			//已选项
			addItems(index){
				if(!this.secondChoose.items[index].checked){
					//添加新的属性
					this.$set(this.secondChoose.items[index], 'checked', true);
					this.$set(this.secondChoose.items[index], 'num', 1);
					this.$set(this.secondChoose.items[index], 'material', {
						id:this.secondChoose.items[index].code,
						name:this.secondChoose.items[index].name
					});
					this.$set(this.secondChoose.items[index], 'manageType', this.secondChoose.items[index].manageType.id);
					this.$set(this.secondChoose.items[index], 'pkgUnit', this.secondChoose.items[index].pkgUnit.name);
					this.isChosen.push(this.secondChoose.items[index]);
				}
			   //console.log(this.isChosen);
			},	
		   //更新数量
		   changeValue(index){
			  // console.log(this.isChosen);
		   },
		  //删除
		  getDelete(index){
			  this.isChosen.splice(index,1);  
		  },

			  
	   }
	}
</script>

<style lang="scss" scoped>
	.bgBox{
	   position: fixed;
	   bottom: 0px;
	   left: 0px;
	   right: 0px;
	   width: 100%;
	   background: rgba(0,0,0,0.2);
	}
	.chooseBox{
		position: fixed;
		left: 0;
		width: 100%;
		height:80vh;
		background: #fff;
		box-shadow: 0px 10px 20px rgba(0,0,0,1);
		border-top-left-radius: 20px;
		border-top-right-radius: 20px;
		z-index: 9;
		transition: all 0.3s;
	}
	.titBox{
		margin: 20rpx 0;
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
		position: relative;
		color: #999;
		.closeBox{
			height: 20px;
			line-height: 20px;
			position: absolute;
			right:15px;
			top:5px;
		}
	}
	.TabBox{
		display: flex;
		align-items: center;
		justify-content: space-between;
		border-bottom: 1px #f2f2f2 solid;
		height: 80rpx;
		line-height: 80rpx;
		padding: 0px 40rpx;
		> view{
			text-align: center;
			padding: 0px 20rpx;
			font-size: $uni-font-size-lg;
			position: relative;
		}
		> view.on{
			color: #19be6b;
			font-weight: bold;
		}
		> view.on::after{
			content: '';
			position: absolute;
			left: 0px;
			bottom: -1px;
			width: 100%;
			height: 2px;
			background: #19be6b;
		}
	}
	.treeBox{
		margin: 40rpx auto;
		line-height:60rpx;
		color: #666;
		height: calc(80vh - 280rpx);
		overflow-y: auto;
		.treeItem{
			width: 85%;
			margin: 0px auto;
			padding: 4rpx 0;
			.itemBox{
				display: flex;
				align-items: center;
			}
			.uni-icons{
				margin-right: 10rpx;
			}
			.selectItem{
				display: flex;
			}
			.openItem{
				margin-left: auto;
			}
			.openItem.on{
				-webkit-transform: rotate(90deg);
			}
			.itemChild{
				margin: 0px auto;
				padding-left: 60rpx;
				max-height: 0px;
				overflow: hidden;
				transition: all 0.3s;
			}
			.itemChild.onItemChild{
				max-height: 60vh;
			}
		}
	}
	.treeListInfo{
		 display: flex;
		 align-items: center;
         justify-content: space-between;
		 width: 85%;
		 margin: 0px auto;
		 padding: 20rpx 0;
		 border-bottom: 1px #f2f2f2 solid;
		 .flBox{
			 width: 60%;
			 overflow: hidden;
			 white-space:nowrap;
			 -o-text-overflow:ellipsis;
			 text-overflow:ellipsis;
			 font-size: $uni-font-size-base;
		 }
		 .frBox{
			 display: flex;
			 align-items: center;
			 .attr{
				 font-size: $uni-font-size-base;
				 line-height: 32rpx;
				 margin-right: 20rpx;
				 color: #999;
				 text{
					 display: block;
				 }
			 }
			 .icoBox{
				 display: flex;
				 align-items: center;
				 justify-content: center;
				 background: #19be6b;
				 border-radius: 100%;
				 width:42rpx;
				 height: 42rpx;
			 }
			.icoBox.on{
				background: #ccc;
			}
		 }
	}
	.titItemBox{
		padding: 0px 10rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		background: #f2f2f2;
	    font-size: $uni-font-size-base;
		> view{
			padding:10rpx;
		}
		> view:nth-child(1){
			width: 50%;
			overflow: hidden;
		}
		> view:nth-child(2){
			width: 30%;
			text-align: center;
			overflow: hidden;
		}
		> view:nth-child(3){
			width: 80rpx;
			overflow: hidden;
			display: flex;
			align-items: center;
			justify-content: center;
		}
	}
	.isChosenItem{
		display: flex;
		align-items: center;
		justify-content: space-between;
		font-size: $uni-font-size-sm;
		border-bottom: 1px #f2f2f2 solid;
	    > view{
	    	padding:10rpx 20rpx;
	    }
	    > view:nth-child(1){
	    	width: 50%;
			overflow: hidden;
			white-space:nowrap;
			-o-text-overflow:ellipsis;
			text-overflow:ellipsis;
	    	overflow: hidden;
	    }
	   > view:nth-child(2){
	    	width: 30%;
	    	overflow: hidden;
	    }
	   > view:nth-child(3){
			width: 80rpx;
			overflow: hidden;
			display: flex;
			align-items: center;
			justify-content: center;
		}
		.icoBox{
			width: 50rpx;
			height: 50rpx;
			border: 1px #ddd solid;
			border-radius: 100%;
			display: flex;
			align-items: center;
			justify-content: center;
		}
	}
</style>