androidCnToWechatGrt/pagesStorage/checkStorage/add.vue

<template>
	<view class="page" :style="{'min-height':h+'px', 'padding-top':mt+'px'}">
		<cus-header title='盘库'></cus-header>
		<div class="box">
			<div class="title">盘库单基本信息</div>
			<div class="form">
				<div class="item">
					<div class="left"><span>*</span>盘库单号</div>
					<div class="right">
						<input type="text" placeholder-class="storage-inp-ph" placeholder="请输入盘库单号" v-model="checkDto.orderNo" @blur="e=>setReceipt(e,'orderNo')">
					</div>
				</div>
				<div class="item">
					<div class="left"><span>*</span>仓库</div>
					<div class="right">
						<text>{{checkDto.warehouseName}} ></text>
					</div>
				</div>
				<div class="item">
					<div class="left">盈亏数</div>
					<div class="right">
						<input type="text" v-model="checkDto.totalQuantity" disabled>
					</div>
				</div>
			</div>
		</div>
		<div class="box" :style="{'padding-bottom':checkDto.details.length?'0':'48rpx'}">
			<div class="title">商品明细</div>
			<div class="btn" @tap="toAddGoods">+ 新增库存</div>
			<div class="goods">
				<template v-if="checkDto.details.length">
					<div class="good" v-for="(good,idx) in checkDto.details" :key="good.skuId">
						<div class="title">
							<text>{{good.item.itemName}}</text>
							<image :src="imgBase+'storage/icon_remove_grey.png'" @tap="deleteGood(idx)" v-if="!good.id"></image>
						</div>
						<div class="info">
							<div>规格信息：<span>{{good.itemSku.skuName||''}} / {{good.itemSku.grossWeight||0}}kg / {{good.itemSku.width||0}}X{{good.itemSku.height||0}}cm</span></div>
						</div>
						<div class="info">
							<div>账面库存：<span>{{good.quantity||0}}</span></div>
						</div>
						<div class="info">
							<div>盈 亏 数：<span>{{good.profitLoss||0}}</span></div>
						</div>
						<div class="num">
							<text>实际库存：</text>
							<u-number-box v-model="good.checkQuantity" button-size="48" :integer="true" inputWidth="102rpx"
							 @change="e=>changeStorageNum(e,idx)" bgColor="#F5F8FA"></u-number-box>
						</div>
					</div>
				</template>
				<div v-if="isLoading" class="loading">
					<u-loading-icon text="数据加载中..." textSize="32"></u-loading-icon>
				</div>
			</div>
		</div>
		<div class="save">
			<div class="btn" @tap="saveReceipt">完成盘库</div>
		</div>
		<u-picker title="仓库" :show="warehouseShow" :columns="warehouseList" keyName="warehouseName" 
			@cancel="warehouseShow=false" @confirm="warehouseConfirm" :immediateChange="true">
		</u-picker>
	</view>
</template>

<script>
	import { generateNo } from '@/utils/common.js'
	export default {
		data(){
			return {
				checkDto:{
					id: '',
					orderNo: '',
					orderStatus: 1,
					warehouseId: '',
					warehouseName: '',
					totalQuantity: 0,
					details: []
				},
				page:1,
				isOver:false,
				goodsList:[],
				isLoading:false
			}
		},
		onLoad(option) {
			this.checkDto.orderNo = generateNo('PK');
			this.checkDto.warehouseId = option.warehouseId;
			this.checkDto.warehouseName = option.warehouseName;
			this.getGoodList();
		},
		// onReachBottom() {
		// 	if(this.isOver) return
		// 	this.getGoodList();	
		// },
		methods:{
			getGoodList(){
				this.isLoading = true;
				this.$api.get('/wms/inventory/boardList/item/?warehouseId='+this.checkDto.warehouseId+'&page='+this.page+'&limit=-1').then(res=>{
					if(res.data.code===0){
						// if(this.checkDto.details.length<res.data.data.total){
							// this.page++;
							this.checkDto.details = [...this.checkDto.details,...res.data.data.list];
							this.checkDto.details.forEach(d=>d.checkQuantity=+d.quantity);
							this.computeNum();
							this.isLoading = false;
						// }else this.isOver = true
					}else this.$showToast(res.data.msg)
				})
			},
			setReceipt(e,name){
				this.checkDto[name] = e.target.value;
			},
			toAddGoods(){
				let ids = this.goodsList.map(d=>d.skuId);
				let exitIds = this.checkDto.details.map(d=>d.skuId);
				uni.navigateTo({
					url:'/pagesStorage/checkStorage/goods?ids='+ids+'&exitIds='+exitIds,
					events:{
						addGoods:list=>{
							this.goodsList = list;
							this.goodsList.forEach((d,i)=>{
								d.quantity = 0;
								d.checkQuantity = d.checknum;
							})
							this.checkDto.details = [...this.checkDto.details,...this.goodsList];
							this.computeNum();
						}
					}
				})
			},
			deleteGood(index){
				this.checkDto.details.splice(index,1);
				this.$nextTick(()=>{
					this.computeNum();
				})
			},
			changeStorageNum(e,index){
				this.$set(this.checkDto.details[index],'checkQuantity',e.value);
				this.$set(this.checkDto.details[index],'profitLoss',+e.value-(+this.checkDto.details[index].quantity));
				this.$nextTick(()=>{
					this.computeNum();
				})
			},
			computeNum(){
				this.checkDto.totalQuantity = this.checkDto.details.reduce((cur,pre)=>cur+(pre.checkQuantity-pre.quantity),0);
			},
			saveReceipt(){
				if(!this.checkDto.orderNo) return this.$showToast('请输入盘库单号');
				if(!this.checkDto.warehouseId) return this.$showToast('请选择仓库');
				
				let temp = JSON.parse(JSON.stringify(this.checkDto.details));
				let details = temp.map(d=>{
					return {
						inventoryId: d?.id||'',
					    skuId: d.itemSku.id,
					    quantity: d.quantity,
						checkQuantity:d.checkQuantity,
					    warehouseId: this.checkDto.warehouseId,
					}
				})
				this.checkDto.details = details;
				
				this.$api.post('/wms/checkOrder/check',this.checkDto).then(res=>{
					if(res.data.code===0){
						this.$showToast('盘库单新增成功');
						setTimeout(()=>{
							uni.redirectTo({
								url:'/pagesStorage/checkStorage/index'
							})
						},1500)
					}else this.$showToast(res.data.msg)
				})
			},
		}
	}
</script>

<style>
	.storage-inp-ph{
		color: #B9C0C8 !important;
	}
</style>
<style scoped lang="less">
	.page{
		padding: 0 24rpx 186rpx;
		background: #F4F8FB;
		box-sizing: border-box;
		
		.box{
			width: 100%;
			padding: 36rpx 24rpx;
			box-sizing: border-box;
			background: #FFFFFF;
			border-radius: 16rpx;
			margin-top: 20rpx;
			
			.title{
				font-family: PingFang-SC, PingFang-SC;
				font-weight: bold;
				font-size: 36rpx;
				color: #1D2129;
				line-height: 36rpx;
				text-align: left;
			}
			
			.form{
				width: 100%;
				margin-top: 36rpx;
				.item{
					width: 100%;
					height: 90rpx;
					background: #FFFFFF;
					box-shadow: inset 0rpx -1rpx 0rpx 0rpx #ECECEC;
					display: flex;
					align-items: center;
					justify-content: space-between;
					.left{
						display: flex;
						align-items: center;
						font-family: PingFangSC, PingFang SC;
						font-weight: 400;
						font-size: 30rpx;
						color: #1D2129;
						line-height: 42rpx;
						text-align: left;
						span{
							color: #F95050;
						}
					}
					.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;
							}
						}
					}
				}
				.zdjs{
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					font-size: 26rpx;
					color: #198CFF;
					line-height: 37rpx;
					text-align: right;
					margin-top: 9rpx;
				}
			}
		
			.btn{
				width: 100%;
				height: 64rpx;
				border-radius: 16rpx;
				border: 1rpx solid #198CFF;
				margin-top: 26rpx;
				font-family: PingFang-SC, PingFang-SC;
				font-weight: bold;
				font-size: 26rpx;
				color: #198CFF;
				line-height: 64rpx;
				text-align: center;
				letter-spacing: 2rpx;
			}
		
			.goods{
				width: 100%;
				margin-top: 10rpx;
				.good{
					width: 100%;
					padding: 36rpx 0;
					box-sizing: border-box;
					background: #FFFFFF;
					box-shadow: inset 0rpx -1rpx 0rpx 0rpx #ECECEC;
					&>div{
						display: flex;
						align-items: center;
						justify-content: space-between;
					}
					.title{
						text{
							font-family: PingFang-SC, PingFang-SC;
							font-weight: bold;
							font-size: 30rpx;
							color: #1D2129;
							line-height: 30rpx;
							text-align: left;
						}
						image{
							width: 28rpx;
							height: 28rpx;
						}
					}
					.info{
						margin-top: 24rpx;
						font-family: PingFangSC, PingFang SC;
						font-weight: 400;
						font-size: 24rpx;
						color: #86909C;
						line-height: 24rpx;
						span{
							color: #4E5969;
						}
					}
					.num,.money{
						margin-top: 24rpx;
						text{
							font-family: PingFangSC, PingFang SC;
							font-weight: 400;
							font-size: 24rpx;
							color: #86909C;
							line-height: 24rpx;
							text-align: left;
						}
					}
				}
			
				.loading{
					width: 100%;
					padding: 70rpx 0 30rpx;
					display: flex;
					align-items: center;
					justify-content: center;
				}
			}
		}
		
		.save{
			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;
			}
		}
	}
</style>