jhlapp/pagesT/stock/OutgoingGoodsInventory.vue

<template>
	<view>
		<view class="sweep_code-ul">
			<block v-for="(item, index) in out_detail.details" :key="index">
				<view class="sweep_code-li clearfix" v-if="item.num > 0">
					<view class="clearfix logs-goods">
						<view class="float_left goods-img">
							<image :src="item.images[0]" mode="aspectFill"></image>
							<view class="all-tag" v-if="Number(item.notOutNum) === 0">全部出库</view>
						</view>
						<view class="float_left goods-info">
							<view class="goods-name ellipsis">{{ item.materielName }}</view>
							<view class="goods-sku">{{ item.unitName }};{{ item.skuName }}</view>
							<view class="stock-region clearfix">
								<text class="label">仓库：</text>
								{{ item.warehouseName }}
							</view>
							<view class="stock-region clearfix" v-if="item.storageLocationName">
								<text class="label">库区库位：</text>
								{{ item.areaName }}-{{ item.storageLocationName }}
							</view>
						</view>
					</view>
					<view class="bottom clearfix">
						<view class="float_left">
							<text>待出库：</text>
							<text class="num">{{ $utils.formatNub(item.total) }}</text>
							<block v-if="Number(item.total) !== Number(item.num)">
								<text style="margin-left: 10rpx;">未出库：</text>
								<text class="num" style="color: #FA6400;">{{ Number(item.notOutNum) }}</text>
							</block>
						</view>
						<view class="float_right">
							<text style="margin-right: 24rpx;">实出</text>
							<u-number-box :index="index" :min="0" :max="Number(item.maxOutNum)" :value="item.num" @change="numChange"></u-number-box>
						</view>
					</view>
				</view>
			</block>
		</view>
		<view class="inform" @click="lookpop">
			未出库商品清单：商品{{ notMaterielNum }} 数量{{ notGoodsTotal }}
			<view class="float_right"><u-icon name="arrow-right" size="30" color="#FA6400"></u-icon></view>
		</view>
		<view class="submit-btn clearfix">
			<view class="submit-btn-left float_left">本次出库：商品{{ outMaterielNum }} 数量{{ outGoodsTotal }}</view>
			<view class="btn-right float_right" :class="[outMaterielNum < 1 ? 'btn-min-no' : '']" @click="tipshow = true">确认</view>
		</view>
		<u-modal
			v-model="tipshow"
			@cancel="modalCancel"
			@confirm="modalConfirm"
			:show-cancel-button="true"
			:content="`本次出库：商品${outMaterielNum} 数量${outGoodsTotal}`"
		></u-modal>
		<u-popup v-model="no_out_show" mode="bottom">
			<view class="poptitle">未出库商品清单：商品{{ notMaterielNum }} 数量{{ notGoodsTotal }}</view>
			<view class="sweep_code-ul" style="padding-bottom: 20rpx;">
				<block v-for="(item, index) in notOutMateriels" :key="index">
					<view class="sweep_code-li clearfix" style="padding-top:0">
						<view class="clearfix logs-goods">
							<view class="float_left goods-img"><image :src="item.images[0]" mode="aspectFill"></image></view>
							<view class="float_left goods-info">
								<view class="goods-name ellipsis">{{ item.materielName }}</view>
								<view class="goods-sku">{{ item.unitName }};{{ item.skuName }}</view>
								<view class="goods-sku">
									待出库：
									<text class="num">{{ item.notOutNum }}</text>
								</view>
							</view>
						</view>
					</view>
				</block>
			</view>
		</u-popup>
	</view>
</template>

<script>
export default {
	data() {
		return {
			no_out_show: false,
			tipshow: false,
			out_detail: {
				details: []
			},
			goods_list: [],
			no_goods_list: []
		};
	},
	watch: {},
	computed: {
		userInfo() {
			return this.$store.state.userInfo;
		},
		// 出库商品种类
		outMaterielNum() {
			const list = this.out_detail.details.filter(item => item.num > 0).map(item => item.skuId);
			return [...new Set(list)].length;
		},
		// 出库合计数量
		outGoodsTotal() {
			let num = 0;
			this.out_detail.details.forEach(item => {
				num = this.$NP.plus(Number(item.num), num);
			});
			return num;
		},
		// 未出库 合计数量
		notGoodsTotal() {
			let num = 0;
			this.out_detail.details.forEach(item => {
				if (item.notOutNum > 0) {
					num = this.$NP.plus(item.notOutNum, num);
				}
			});
			return num;
		},
		// 未出库 合计数量
		notMaterielNum() {
			const list = this.out_detail.details.filter(item => item.notOutNum > 0).map(item => item.skuId);
			return [...new Set(list)].length;
		},
		notOutMateriels() {
			const list = this.out_detail.details.filter(item => item.notOutNum > 0);
			return this.$utils.unique(list, ['materielId', 'skuId']);
		}
	},
	onLoad() {},
	onShow() {
		this.isFirst = true;
		this.out_detail = uni.getStorageSync('outDetail');
		setTimeout(() => {
			this.isFirst = false;
		}, 2000);
	},
	methods: {
		// 因为步进器组件 v-model 动态渲染失效，所以使用 v-bind:value
		// 但是 v-bind:value 首次会触发 change 事件
		// 所以加了个首次渲染标示 isFirst
		numChange({ value, index }) {
			if (this.isFirst) {
				return;
			}
			const detailObj = this.$u.deepClone(this.out_detail);
			const target = detailObj.details;
			target[index].num = value;
			// 统计当前已经出库的数量
			let outnum = 0;
			let otherOutnum = 0;
			target.forEach(item => {
				if (item.skuId === target[index].skuId) {
					outnum += item.num;
					if (item.warehouseId !== target[index].warehouseId) {
						otherOutnum += item.num;
					}
				}
			});
			// 设置最大值
			if (Number(target[index].locationNum) && Number(target[index].locationNum) > Number(target[index].total)) {
				target[index].maxOutNum = this.$NP.minus(target[index].total, otherOutnum);
			} else {
				target[index].maxOutNum = this.$NP.minus(target[index].locationNum || target[index].total, otherOutnum);
			}
			// 设置未出库数量
			target.forEach(item => {
				if (item.skuId === target[index].skuId) {
					item.notOutNum = this.$NP.minus(item.total, outnum) <= 0 ? 0 : this.$NP.minus(item.total, outnum);
				}
			});
			detailObj.details = target;
			this.out_detail = detailObj;
			// this.$set(this.out_detail.details[index], 'num', value);
		},
		lookpop() {
			this.no_out_show = true;
		},
		modalCancel() {
			this.tipshow = false;
		},
		modalConfirm() {
			// 未出库商品
			const UnassignedSkuData = this.out_detail.details.filter(item => item.num < item.total);
			// 出库商品
			const outData = this.out_detail.details.filter(item => item.num > 0);
			let outobj = {};
			outData.forEach(item => {
				if (outobj[item.warehouseId]) {
					outobj[item.warehouseId].details.push(item);
				} else {
					outobj[item.warehouseId] = {
						details: [item],
						warehouseId: item.warehouseId,
						warehouseName: item.warehouseName
					};
				}
			});
			const outWarehouseData = Object.values(outobj);
			this.$u.api
				.updateSaleOutStatus({
					id: this.out_detail.id,
					auditName: this.userInfo.name,
					UnassignedSkuData: UnassignedSkuData,
					outWarehouseData: outWarehouseData
				})
				.then(res => {
					this.$u.toast('出库成功!');
					this.modalCancel();
					this.goPage('/pagesT/stock/SalesOrder', 'redirectTo');
				});
		}
	}
};
</script>

<style lang="scss" scoped>
.sweep_code-ul {
	padding-bottom: 200rpx;
	.sweep_code-li {
		margin-top: 20rpx;
		width: 100%;
		background-color: #ffffff;
		padding-top: 24rpx;

		.logs-goods {
			position: relative;
		}

		.goods-img {
			position: relative;
			width: 150rpx;
			height: 150rpx;
			margin-right: 20rpx;
			margin-left: 24rpx;
			border-radius: 10rpx;
			overflow: hidden;
			.all-tag {
				line-height: 36rpx;
				height: 36rpx;
				background-color: #2dc584;
				text-align: center;
				width: 100%;
				color: #ffffff;
				font-size: 22rpx;
				position: absolute;
				left: 0;
				bottom: 0;
			}
			image {
				width: 100%;
				height: 100%;
				display: block;
			}
		}

		.goods-info {
			width: 520rpx;
			.goods-name {
				height: 40rpx;
				line-height: 40rpx;
			}
			.goods-sku {
				padding-top: 10rpx;
				color: #879bba;
				font-size: 24rpx;
			}
			.stock-region {
				padding-top: 10rpx;
				color: #879bba;
				font-size: 24rpx;
				line-height: 40rpx;
				border-bottom: 1px solid $uni-color-primary;
				.label {
					display: inline-block;
					vertical-align: middle;
					width: 120rpx;
					margin-right: 10rpx;
				}
			}
		}
	}

	.bottom {
		margin-top: 20rpx;
		border-top: 1px solid #eeeeee;
		height: 80rpx;
		line-height: 80rpx;
		padding: 0 24rpx;

		.float_left {
			color: #879bba;
			width: 320rpx;
			font-size: 22rpx;
			.num {
				font-size: 26rpx;
				color: #2d405e;
			}
		}

		.float_right {
			font-size: 26rpx;
		}
	}
}
.submit_cont {
	position: absolute;
	top: 40%;
	left: 50%;
	font-size: 30rpx;
	transform: translate(-50%, -50%);
}
.submit-btn {
	padding: 0;
	.submit-btn-left {
		padding-left: 24rpx;
		font-size: 24rpx;
		color: #879bba;
		line-height: 98rpx;
	}

	.btn-right {
		text-align: center;
		width: 300rpx;
		color: #ffffff;
		background-color: $uni-color-primary;
		line-height: 98rpx;
		border-radius: 0;
		&.btn-min-no {
			background-color: #879bba;
		}
	}
}
.inform {
	z-index: 9;
	padding: 0 24rpx;
	position: fixed;
	left: 0;
	bottom: 98rpx;
	width: 100%;
	height: 80rpx;
	line-height: 80rpx;
	font-size: 24rpx;
	color: #fa6400;
	background: #fdecee;
}
.poptitle {
	padding: 0 24rpx;
	height: 80rpx;
	line-height: 80rpx;
}
.submit {
	width: 100%;
	position: absolute;
	bottom: 0;
	left: 0;
	height: 80rpx;
	font-size: 30rpx;
	text-align: center;
	line-height: 80rpx;
	border-top: 2rpx solid rgb(241, 243, 247);
	.submit_left {
		width: 50%;
	}
	.submit_right {
		width: 50%;
	}
}
</style>