androidCnToWechatGrt/pagesStorage/checkStorage/index.vue

<template>
	<view class="page" :style="{'min-height':h+'px', 'padding-top':mt+'px'}">
		<cus-header title='盘库'></cus-header>
		<status-tab :style="{'position':'fixed','top':mt+'px','left':'0','width':'100%'}" :list="typeList" @changeType="changeType"></status-tab>
		<div class="boxs" v-if="dataList.length">
			<div class="box" v-for="(item,index) in dataList" :key="item.id">
				<div class="top">
					<text>{{ item.orderNo||'' }}</text>
					<div class="status" 
						:class="{'wrk':item.orderStatus==0,'yrk':item.orderStatus==1,'zf':item.orderStatus==-1}"
					>{{ receiptStatus[item.orderStatus]||'' }}</div>
				</div>
				<div class="content">
					<div class="pre">
						<div class="title">仓库</div>
						<div class="nr">{{ item.warehouseName||'' }}</div>
					</div>
					<div class="pre">
						<div class="title">盈亏数</div>
						<div class="nr" :class="{'ks':item.totalQuantity<0}">{{ item.totalQuantity||'' }}</div>
					</div>
					<div class="pre">
						<div class="title">盘库人</div>
						<div class="nr">{{ item.updaterName||'' }}</div>
					</div>
					<div class="pre bfb">
						<div class="title">时间</div>
						<div class="nr">{{ item.updateDate||'' }}</div>
					</div>
				</div>
			</div>
			<page-loading :loading="isLoading"></page-loading>
		</div>
		<template v-else>
			<page-empty :height="'calc(100vh - 200px)'"></page-empty>
		</template>
		<div class="add">
			<div class="btn" @tap="show=true">盘库</div>
		</div>
		<u-popup :show="show" mode="bottom" @close="close">
			<div class="select">
				<div class="title">
					选择仓库
					<span @tap="close">X</span>
				</div>
				<div class="storage">
					<div class="left">仓库</div>
					<div class="right" @tap="selectWarehouse">
						<text v-if="warehouseName">{{warehouseName}} ></text>
						<text class="tip" v-else>请选择仓库 ></text>
					</div>
				</div>
				<div class="storage" style="margin-top: 20rpx;">
					<div class="left">项目</div>
					<div class="right" @tap="selectProject">
						<text v-if="projectName">{{projectName}} ></text>
						<text class="tip" v-else>请选择项目 ></text>
					</div>
				</div>
				<div class="btn" @tap="addCheck">确定</div>
			</div>
		</u-popup>
		<u-picker title="仓库" :show="warehouseShow" :columns="warehouseList" keyName="warehouseName" 
			@cancel="warehouseShow=false" @confirm="warehouseConfirm">
		</u-picker>
		<u-picker title="项目" :show="projectShow" :columns="projectList" keyName="projectName" 
			@cancel="projectShow=false" @confirm="projectConfirm" :immediateChange="true">
		</u-picker>
	</view>
</template>

<script>
	import statusTab from '../components/statusTab/index.vue'
	import pageLoading from '../components/pageLoading/index.vue'
	import pageEmpty from '../components/pageEmpty/index.vue'
	export default {
		components:{
			statusTab,
			pageLoading,
			pageEmpty
		},
		data(){
			return {
				typeList:[],
				receiptStatus:{},
				receiptType:{},
				isOver:false,
				isLoading:false,
				params:{
					page:1,
					limit:10,
					orderStatus:''
				},
				dataList:[],
				show:false,
				warehouseId:'',
				warehouseName:'',
				warehouseShow:false,
				warehouseList:[],
				projectId:'',
				projectName:'',
				projectShow:false,
				projectList:[]
			}
		},
		async onLoad() {
			await this.getSeceiptStatus();
			this.getDataList();
		},
		onReachBottom() {
			if(this.isOver) return
			this.getDataList();
		},
		methods:{
			changeType(status){
				this.dataList = [];
				this.params.orderStatus = status;
				this.params.page = 1;
				this.isOver = false;
				this.isLoading = false;
				this.getDataList();
			},
			async getSeceiptStatus(){
				let res = await this.$api.get('/sys/dict/data/getListByType/wms_check_status');
				if(res.data.code===0){
					this.typeList = res.data.data;
					res.data.data.forEach(d=>{
						this.receiptStatus[d.dictValue] = d.dictLabel;
					})
					this.typeList.unshift({dictValue:'',dictLabel:'全部'})
				}else this.$showToast(res.data.msg)
			},
			getDataList(){
				this.isLoading = true;
				this.$api.get('/wms/checkOrder/page',this.params).then(res=>{
					if(res.data.code===0){
						if(this.dataList.length<res.data.data.total){
							this.params.page++;
							this.dataList = [...this.dataList,...res.data.data.list];
							this.dataList.forEach((d,i)=>{
								d.totalQuantity = parseInt(d.totalQuantity)||0
							})
						}else this.isOver = true
					}else this.$showModal(res.data.msg)
					this.isLoading = false;
				});
			},
			addCheck(){
				if(!this.warehouseId) return this.$showToast('请先选择仓库')
				uni.navigateTo({
					url:'/pagesStorage/checkStorage/add?warehouseId='+this.warehouseId+'&warehouseName='+this.warehouseName+'&projectId='+this.projectId+'&projectName='+this.projectName
				})
			},
			close(){
				this.warehouseId = '';
				this.warehouseName = '';
				this.show = false;
			},
			selectWarehouse(e){
				this.warehouseShow = true;
				this.$nextTick(()=>{
					this.$api.get('/wms/warehouse/page').then(res=>{
						if(res.data.code===0){
							this.warehouseList = [res.data.data.list];
						}else this.$showToast(res.data.msg)
					})
				})
			},
			warehouseConfirm(e){
				this.warehouseId = e.value[0].id;
				this.warehouseName = e.value[0].warehouseName;
				this.warehouseShow = false;
			},
			selectProject(){
				this.projectShow = true;
				this.$nextTick(()=>{
					this.$api.get('/wms/project/page',{page:1,limit:-1}).then(res=>{
						if(res.data.code===0){
							this.projectList = [res.data.data.list];
						}else this.$showToast(res.data.msg)
					})
				})
			},
			projectConfirm(e){
				this.projectId = e.value[0].id;
				this.projectName = e.value[0].projectName;
				this.projectShow = false;
			}
		}
	}
</script>

<style scoped lang="less">
	.page{
		padding: 0 0 186rpx;
		background: #F4F8FB;
		box-sizing: border-box;
		
		.boxs{
			width: 100%;
			padding: 20rpx 24rpx 0;
			margin-top: 102rpx;
			box-sizing: border-box;
			.box{
				width: 100%;
				margin-top: 20rpx;
				background: #FFFFFF;
				border-radius: 16rpx;
				&:first-child{
					margin-top: 0;
				}
				.top{
					width: 100%;
					height: 90rpx;
					padding: 0 24rpx;
					box-sizing: border-box;
					display: flex;
					align-items: center;
					justify-content: space-between;
					border-bottom: 1rpx dotted #ECECEC;
					text{
						font-family: PingFang-SC, PingFang-SC;
						font-weight: bold;
						font-size: 30rpx;
						color: #1D2129;
						line-height: 30rpx;
						text-align: left;
					}
					.status{
						font-family: PingFang-SC, PingFang-SC;
						font-weight: bold;
						font-size: 26rpx;
						line-height: 30rpx;
						text-align: right;
						&.wrk{
							color: #FEB000;
						}
						&.yrk{
							color: #14CC8C;
						}
						&.zf{
							color: #FF4141;
						}
					}
				}
				.content{
					width: 100%;
					padding: 0 24rpx 40rpx;
					box-sizing: border-box;
					display: flex;
					flex-wrap: wrap;
					.pre{
						width: 50%;
						margin-top: 36rpx;
						display: flex;
						.title{
							width: 116rpx;
							font-family: PingFangSC, PingFang SC;
							font-weight: 400;
							font-size: 24rpx;
							color: #86909C;
							text-align: left;
						}
						.nr{
							width: calc(100% - 116rpx);
							font-family: PingFangSC, PingFang SC;
							font-weight: bold;
							font-size: 26rpx;
							color: #1D2129;
							text-align: left;
						    white-space: nowrap;
						    text-overflow: ellipsis;
						    overflow: hidden;
							&.money{
								color: #F95050;
							}
							&.ks{
								color: #FF4141;
							}
						}
						&.bfb{
							width: 100%;
						}
					}
				}
				.goods{
					width: calc(100% - 20rpx);
					margin: 0 auto 40rpx;
					.good{
						width: 100%;
						padding: 36rpx 16rpx;
						box-sizing: border-box;
						background: #F0F8FE;
						box-shadow: inset 0rpx -1rpx 0rpx 0rpx #ECECEC;
						&>div{
							display: flex;
							align-items: center;
							justify-content: space-between;
						}
						.name_price{
							text{
								font-family: PingFangSC, PingFang SC;
								font-weight: 400;
								font-size: 28rpx;
								color: #1D2129;
								line-height: 30rpx;
								text-align: left;
							}
							span{
								font-family: PingFang-SC, PingFang-SC;
								font-weight: bold;
								font-size: 26rpx;
								color: #F95050;
								line-height: 26rpx;
								text-align: right;
							}
						}
						.info_num{
							margin-top: 24rpx;
							.info{
								font-family: PingFangSC, PingFang SC;
								font-weight: 400;
								font-size: 24rpx;
								color: #86909C;
								line-height: 24rpx;
								text-align: left;
								span{
									color: #4E5969;
								}
							}
							.num{
								font-family: PingFangSC, PingFang SC;
								font-weight: 400;
								font-size: 24rpx;
								color: #86909C;
								line-height: 24rpx;
								span{
									font-weight: bold;
									font-size: 26rpx;
									color: #4E5969;
								}
							}
						}
					}
				}
				.more{
					display: flex;
					align-items: center;
					justify-content: center;
					text{
						font-family: PingFangSC, PingFang SC;
						font-weight: 400;
						font-size: 28rpx;
						color: #198CFF;
						line-height: 28rpx;
					}
					image{
						width: 24rpx;
						height: 24rpx;
						margin-left: 10rpx;
						&.sq{
							transform: rotate(180deg);
						}
					}
				}
			}
		}
	
		.add{
			width: 100%;
			height: 148rpx;
			padding: 20rpx 48rpx 0;
			box-sizing: border-box;
			background: #FFFFFF;
			position: fixed;
			left: 0;
			bottom: 0;
			.btn{
				width: 100%;
				height: 88rpx;
				background: #198CFF;
				border-radius: 16rpx;
				font-family: PingFang-SC, PingFang-SC;
				font-weight: bold;
				font-size: 32rpx;
				color: #FFFFFF;
				line-height: 88rpx;
				text-align: center;
				letter-spacing: 2rpx;
			}
		}
		
		.select{
			width: 100%;
			padding: 48rpx 24rpx 40rpx;
			box-sizing: border-box;
			background: #FFFFFF;
			.title{
				font-family: PingFang-SC, PingFang-SC;
				font-weight: bold;
				font-size: 36rpx;
				color: #1D2129;
				line-height: 36rpx;
				text-align: center;
				position: relative;
				span{
					font-size: 36rpx;
					color: #999999;
					position: absolute;
					right: 24rpx;
				}
			}
			.storage{
				width: 100%;
				height: 90rpx;
				background: #FFFFFF;
				box-shadow: inset 0rpx -1rpx 0rpx 0rpx #ECECEC;
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-top: 127rpx;
				.left{
					font-family: PingFang-SC, PingFang-SC;
					font-weight: bold;
					font-size: 30rpx;
					color: #1D2129;
					line-height: 42rpx;
					text-align: left;
				}
				.right{
					input{
						font-family: PingFangSC, PingFang SC;
						font-weight: 400;
						font-size: 30rpx;
						color: #4E5969;
						line-height: 42rpx;
						text-align: right;
					}
					text{
						font-family: PingFangSC, PingFang SC;
						font-weight: 400;
						font-size: 30rpx;
						color: #4E5969;
						line-height: 42rpx;
						text-align: right;
						&.tip{
							color: #B9C0C8;
						}
					}
				}
			}
			.btn{
				width: 100%;
				height: 88rpx;
				background: #198CFF;
				border-radius: 16rpx;
				font-family: PingFang-SC, PingFang-SC;
				font-weight: bold;
				font-size: 32rpx;
				color: #FFFFFF;
				line-height: 88rpx;
				text-align: center;
				letter-spacing: 2rpx;
				margin-top: 356rpx;
			}
		}
	}
</style>