QianNiaoShop/pagesT/stock/SweepCodeOutbound.vue

<template>
	<view>
		<view class="sweep_code_top">
			<view class="sweep_code_top_cont">
				<view class="clearfix">
					<view class="input-view float_left"><input type="number" placeholder="请输入商品条形码" placeholder-class="input-pl" v-model="bar_code" /></view>
					<view class="btn float_left" @click="getDetailByGoodsCode(bar_code)">确定</view>
					<view @click="scanCode" class="btn float_left"><text class="custom-icon custom-icon-scan"></text></view>
				</view>
			</view>
		</view>
		<view class="inventory">
			<view class="float_left">商品清单（{{ out_detail.materielNum || 0 }}）</view>
		</view>
		<view class="sweep_code-ul">
			<view class="sweep_code-li clearfix" v-for="(item, index) in goods_list" :key="index">
				<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" v-if="item.skuName">{{ item.skuName }}</view>
						<view class="goods-sku clearfix" @click="openwarehouse(index, item)">
							<text class="float_left">仓库</text>
							<view class="float_right ellipsis">
								<text style="margin-right: 20rpx;">{{ item.warehouseName || '请选择' }}</text>
								<u-icon name="arrow-down" size="24" color="#879BBA"></u-icon>
							</view>
						</view>
						<view class="goods-sku" v-if="enableLocationManagement === 5">
							<text class="float_left">库区库位</text>
							<view class="float_right" @click="openLocation(index, item, 'tip')">
								<text style="margin-right: 20rpx;" v-if="item.storageLocationName">{{ item.areaName }}-{{ item.storageLocationName }}</text>
								<text style="margin-right: 20rpx;" v-else>请选择</text>
								<u-icon name="arrow-down" size="24" color="#879BBA"></u-icon>
							</view>
						</view>
					</view>
				</view>
				<view class="bottom clearfix">
					<view class="float_left" :style="{ lineHeight: item.isPreSale === 5 ? '80rpx' : '36rpx' }">
						待出库：
						<text class="num">{{ $utils.formatNub(item.total) }}</text>
						{{ item.unitName }}
						<view v-if="item.isPreSale !== 5" style="padding-top: 8rpx;">可售：{{ item.warehouseName ? $utils.formatNub(item.locationNum) : '请选择仓库' }}</view>
					</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>
						<!-- <u-number-box v-else :index="index" :min="0" :max="Number(item.total)" :value="item.num" @change="numchange"></u-number-box> -->
					</view>
				</view>
			</view>
		</view>
		<view class="submit-btn clearfix">
			<view class="submit-btn-left float_left" v-if="outMaterielNum > 0">
				<view class="other-info">商品：{{ outMaterielNum }}</view>
				<view class="other-info">数量：{{ outGoodsTotal }}</view>
			</view>
			<view class="submit-btn-left float_left" style="line-height: 98rpx;" v-else>出库商品为0</view>
			<view class="btn-right float_right" :class="[outMaterielNum < 1 ? 'btn-min-no' : '']" @click="nextPage">下一步</view>
		</view>
		<u-popup mode="center" width="680" border-radius="16" :height="popheight" v-model="warehouse_show">
			<view class="pop-view">
				<view class="title">选择仓库</view>
				<view class="goods-name">{{ goods_name }}</view>
				<scroll-view scroll-y class="warehouse-ul" :style="{ height: popheight - 230 + 'rpx' }">
					<view class="warehouse-li" v-for="(item, index) in warehouse_list" :key="index" @click="selWarehouse(item)">
						<view class="name">{{ item.warehouseName }}</view>
						<view class="num" v-if="item.unitName">可售库存：{{ $utils.formatNub(item.inventoryNum) }}{{ item.unitName }}</view>
						<view class="sel-icon" v-if="Number(item.inventoryNum) > 0 || !item.unitName">
							<u-icon
								:name="warehouse_arr.find(ware => ware.warehouseId === item.warehouseId) ? 'checkmark-circle-fill' : 'checkmark-circle'"
								:color="warehouse_arr.find(ware => ware.warehouseId === item.warehouseId) ? '#4076D6' : '#879bba'"
								size="38"
							></u-icon>
						</view>
					</view>
					<u-empty v-if="!warehouse_list.length" text="暂无可选仓库" mode="list"></u-empty>
				</scroll-view>
				<view class="submit-btn"><u-button size="medium" type="primary" @click="selWarehouseConfirm">确定</u-button></view>
			</view>
		</u-popup>
		<u-popup mode="center" width="680" border-radius="16" :height="popheight" v-model="location_show">
			<view class="pop-view">
				<view class="pop-title">选择库区库位</view>
				<scroll-view scroll-y class="warehouse-ul" :style="{ height: popheight - 80 + 'rpx' }">
					<view class="warehouse-li" v-for="(item, index) in location_list" :key="index" @click="selLocation(item)">
						<view class="name">
							<text class="label">库区</text>
							{{ item.areaName }}
						</view>
						<view class="name">
							<text class="label">库位</text>
							{{ item.storageLocationName }}
						</view>
						<view class="num">可售库存：{{ $utils.formatNub(item.num) }}{{ item.unitName }}</view>
						<view class="sel-icon"><u-icon name="arrow-down" color="#879bba" size="28"></u-icon></view>
					</view>
				</scroll-view>
				<!-- <view class="submit-btn"><u-button size="medium" type="primary">确定</u-button></view> -->
			</view>
		</u-popup>
		<u-popup mode="center" width="680" border-radius="16" :height="popheight" v-model="goods_show">
			<view class="pop-view">
				<view class="pop-title">选择出库商品</view>
				<scroll-view scroll-y class="goods-ul" :style="{ height: popheight - 80 + 'rpx' }">
					<view class="goods-li clearfix" v-for="(item, index) in scan_goods_list" :key="index" @click="selGoods(item)">
						<view class="float_left goods-img"><image :src="item.images[0]" mode="aspectFill"></image></view>
						<view class="float_right goods-info">
							<view class="name-view ellipsis">{{ item.materielName }}</view>
							<view class="goods-sku">{{ item.unitName }};{{ item.skuName }}</view>
						</view>
						<view class="sel-icon"><u-icon name="checkmark-circle" color="#4076D6" size="38"></u-icon></view>
					</view>
					<u-empty v-if="!scan_goods_list.length" text="暂无可选仓库" mode="list"></u-empty>
				</scroll-view>
				<!-- <view class="submit-btn"><u-button size="medium" type="primary">确定</u-button></view> -->
			</view>
		</u-popup>
	</view>
</template>

<script>
export default {
	data() {
		return {
			goods_show: false,
			warehouse_show: false,
			warehouse_list: [],
			location_list: [],
			location_show: false,
			bar_code: '',
			out_detail: {},
			bill_id: '',
			goods_list: [],
			popheight: '',
			skuId: '',
			goods_index: 0,
			warehouse_arr: [],
			goods_name: '',
			scan_goods_list: [],
			shop_warehouse_list: []
		};
	},
	computed: {
		enableLocationManagement() {
			return parseInt(this.$store.state.basicSet.enableLocationManagement);
		},
		// 出库商品种类
		outMaterielNum() {
			const list = this.goods_list.filter(item => item.num > 0).map(item => item.skuId);
			// [...new Set(list)] 用来去重
			return [...new Set(list)].length;
		},
		// 出库合计数量
		outGoodsTotal() {
			let num = 0;
			this.goods_list.forEach(item => {
				num = this.$NP.plus(Number(item.num), num);
			});
			return num;
		}
	},
	async onLoad(options) {
		// 设置弹窗的高度
		const systemInfo = uni.getSystemInfoSync();
		this.popheight = (systemInfo.screenHeight - systemInfo.statusBarHeight - 344) * systemInfo.pixelRatio + '';
		this.bill_id = options.id;
		await this.getInventoryOutInfo();
		await this.getShopBindWarehouse();
	},
	methods: {
		numchange(e) {
			const target = this.$u.deepClone(this.goods_list);
			target[e.index].num = e.value;
			// 统计当前已经出库的数量
			let otherOutnum = 0;
			let outnum = 0;
			target.forEach(item => {
				if (item.skuId === target[e.index].skuId) {
					outnum += item.num;
					if (item.warehouseId !== target[e.index].warehouseId) {
						otherOutnum += item.num;
					}
				}
			});
			if (target[e.index].isPreSale !== 5) {
				// 设置最大值
				let maxOutNum = 0;
				if (Number(target[e.index].locationNum) && Number(target[e.index].locationNum) > Number(target[e.index].total)) {
					maxOutNum = this.$NP.minus(target[e.index].total, otherOutnum);
				} else {
					// 如果剩余数量小于可售数量，则最大值为剩余数量
					if (this.$NP.minus(target[e.index].total, otherOutnum) <= target[e.index].locationNum) {
						maxOutNum = this.$NP.minus(target[e.index].total, otherOutnum);
					} else {
						maxOutNum = target[e.index].locationNum;
					}
				}
				target[e.index].maxOutNum = maxOutNum;
			} else {
				target[e.index].maxOutNum = this.$NP.minus(target[e.index].total, otherOutnum);
			}
			// 设置未出库数量
			target.forEach(item => {
				if (item.skuId === target[e.index].skuId) {
					item.notOutNum = this.$NP.minus(item.total, outnum) <= 0 ? 0 : this.$NP.minus(item.total, outnum);
				}
			});

			this.goods_list = target;
		},
		// 仓库确认按钮
		selWarehouseConfirm() {
			if (!this.warehouse_arr.length) {
				this.warehouse_show = false;
				return;
			}
			const arr = this.$u.deepClone(this.warehouse_arr).map(item => {
				let obj = {
					...this.$u.deepClone(this.goods_list[this.goods_index]),
					warehouseName: item.warehouseName,
					warehouseId: item.warehouseId
				};
				if (this.goods_list[this.goods_index].isPreSale !== 5) {
					obj.locationNum = item.inventoryNum;
					obj.maxOutNum = item.inventoryNum;
					obj.notOutNum = item.inventoryNum;
				}
				return obj;
			});
			this.goods_list.splice(this.goods_index, 1, ...arr);
			this.warehouse_arr = [];
			this.warehouse_show = false;
			// 如果只选择了一个仓库，直接打开库区库位
			if (arr.length === 1) {
				this.getAreaDateBySkuId(arr[0].warehouseId);
			}
		},
		// 库存分布
		openwarehouse(index, item) {
			if (item.isPreSale === 5 || item.isDistribution === 5) {
				this.warehouse_list = this.$u.deepClone(this.shop_warehouse_list);
				this.warehouse_show = true;
			} else {
				this.goods_index = index;
				this.goods_name = item.materielName;
				this.skuId = item.skuId;
				this.$u.api.getWarehouseInventory(item.skuId).then(res => {
					this.warehouse_list = res.data;
					this.warehouse_show = true;
				});
			}
		},
		// 获取指定店铺绑定的所有仓库数据
		async getShopBindWarehouse() {
			await this.$u.api.getShopBindWarehouse(this.out_detail.shopId).then(res => {
				this.shop_warehouse_list = Object.values(res.data.warehouseData).map(item => {
					return {
						...item,
						warehouseId: item.id
					};
				});
				// this.warehouse_show = true;
			});
		},
		// 仓库点击
		selWarehouse(item) {
			if (item.unitName && item.inventoryNum <= 0) {
				this.$u.toast('抱歉，当前仓库可售库存为0');
				return;
			}
			const index = this.warehouse_arr.findIndex(ware => ware.warehouseId === item.warehouseId);
			if (index > -1) {
				this.warehouse_arr.splice(index, 1);
			} else {
				this.warehouse_arr.push(item);
			}
		},
		// 打开库区库位弹窗
		openLocation(index, item, istip) {
			this.goods_index = index;
			this.skuId = item.skuId;
			this.getAreaDateBySkuId(item.warehouseId, istip);
		},
		// 可选的库位
		getAreaDateBySkuId(warehouseId, istip) {
			if (this.enableLocationManagement !== 5) {
				return;
			}
			this.$u.api
				.getAreaDateBySkuId({
					skuId: this.skuId,
					warehouseId: warehouseId
				})
				.then(res => {
					if (res.data.length) {
						this.location_list = res.data[0].areaDate;
						this.location_show = true;
					} else {
						if (istip) {
							this.$u.toast('该商品没有可选择的库位');
						}
					}
				});
		},
		// 选择库区库位
		selLocation(item) {
			this.location_show = false;
			const target = this.$u.deepClone(this.goods_list);
			let obj = {
				...target[this.goods_index],
				areaCode: item.areaCode,
				areaId: item.areaId,
				areaName: item.areaName,
				storageLocationCode: item.storageLocationCode,
				storageLocationId: item.storageLocationId,
				storageLocationName: item.storageLocationName
			};
			if (target[this.goods_index].isPreSale !== 5) {
				obj.locationNum = item.num;
				obj.maxOutNum = item.num;
				obj.notOutNum = item.num;
			}
			this.goods_list[this.goods_index] = obj;
		},
		// 扫码
		scanCode() {
			uni.showLoading();
			uni.scanCode({
				success: res => {
					uni.hideLoading();
					console.log('条码内容：' + res.result);
					this.getDetailByGoodsCode(res.result);
				},
				fail: () => {
					uni.hideLoading();
				}
			});
		},
		getDetailByGoodsCode(barCode) {
			this.$u.api
				.getDetailByGoodsCode({
					id: this.bill_id,
					barCode: barCode
				})
				.then(res => {
					if (!Array.isArray(res.data) || !res.data.length) {
						this.$u.toast('此条码无对应商品或非本次出库商品');
						return;
					}
					if (res.data.length === 1) {
						const row = res.data[0];
						const index = this.goods_list.findIndex(item => item.skuId === row.skuId);
						this.openwarehouse(index, row);
					} else {
						this.scan_goods_list = res.data;
						// 打开选择商品弹窗
						this.goods_show = true;
					}
				});
		},
		// 选择商品
		selGoods(row) {
			const index = this.goods_list.findIndex(item => item.skuId === row.skuId);
			this.openwarehouse(index, row);
			this.goods_show = false;
		},
		// 出库单详情
		async getInventoryOutInfo() {
			await this.$u.api.getInventoryOutInfo(this.bill_id).then(res => {
				this.out_detail = res.data;
				this.goods_list = res.data.details.map(item => {
					return {
						...item,
						num: 0,
						maxOutNum: item.total, //最大出库量
						notOutNum: item.total
					};
				});
			});
		},
		// 下一步
		nextPage() {
			// d当前出库数量为0，不允许点击下一步
			if (this.outMaterielNum < 1) {
				return;
			}
			const isNum = this.goods_list.some(item => {
				return item.warehouseId && !item.num;
			});
			if (isNum) {
				this.$u.toast('选择仓库后请输入本次出库数量');
				return;
			}
			// 存储数据跳到下一个页面
			this.out_detail.details = this.goods_list;
			uni.setStorageSync('outDetail', this.out_detail);
			this.goPage('/pagesT/stock/OutgoingGoodsInventory');
		}
	}
};
</script>

<style lang="scss" scoped>
.sweep_code_top {
	width: 100%;
	height: 400rpx;
	background-color: rgb(50, 57, 63);
	color: #fff;
	position: relative;

	.sweep_code_top_cont {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		text-align: center;
		width: 600rpx;
		.input-view {
			padding-left: 20rpx;
			width: 340rpx;
			height: 60rpx;
			background-color: rgb(106, 111, 115);
			input {
				color: #ffffff;
				height: 60rpx;
				line-height: 60rpx;
				text-align: left;
			}
		}

		.btn {
			border-right: 1px solid #cccccc;
			width: 130rpx;
			height: 60rpx;
			line-height: 60rpx;
			text-align: center;
			background-color: rgb(64, 118, 214);
			&:last-child {
				border-right: 0 none;
			}
			.custom-icon-scan {
				font-size: 40rpx;
				color: #ffffff;
			}
		}
	}
}

.inventory {
	width: 100%;
	height: 80rpx;
	line-height: 80rpx;
	background-color: #fff;
	padding: 0 30rpx;
}

.sweep_code-ul {
	padding-bottom: 130rpx;
	.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;
				.float_right {
					text-align: right;
					width: 400rpx;
					border-bottom: 1px solid $uni-color-primary;
				}
			}
		}
	}

	.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-btn {
	padding: 0;
	.submit-btn-left {
		padding-left: 24rpx;
		color: #879bba;
		.other-info {
			font-size: 24rpx;
			line-height: 46rpx;
		}
	}

	.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;
		}
	}
}
.pop-view {
	position: relative;
	height: 100%;
	.pop-title {
		text-align: center;
		line-height: 80rpx;
		border-bottom: 1px solid #ecf0f7;
	}
	.title {
		text-align: center;
		line-height: 36rpx;
		padding-top: 20rpx;
	}
	.goods-name {
		font-size: 22rpx;
		color: #879bba;
		line-height: 36rpx;
		text-align: center;
		padding-bottom: 20rpx;
		border-bottom: 1px solid #ecf0f7;
	}
	.warehouse-ul {
		.warehouse-li {
			padding: 20rpx;
			border-bottom: 1px solid #ecf0f7;
			line-height: 40rpx;
			position: relative;
			.name {
				.label {
					color: #879bba;
					margin-right: 20rpx;
				}
			}
			.num {
				color: #879bba;
			}
			.sel-icon {
				position: absolute;
				top: 50%;
				right: 20rpx;
				transform: translateY(-50%);
			}
		}
	}
	.submit-btn {
		position: absolute;
		width: 100%;
		bottom: 0;
		left: 0;
		text-align: center;
		padding: 20rpx 0;
	}
	.goods-ul {
		.goods-li {
			border-bottom: 1px solid #ecf0f7;
			padding: 20rpx;
			position: relative;
			.goods-img {
				margin-right: 20rpx;
				image {
					width: 120rpx;
					height: 120rpx;
					border-radius: 10rpx;
					background-color: #f5f5f5;
				}
			}
			.goods-info {
				width: 490rpx;
				.name-view {
					margin-bottom: 10rpx;
				}
				.goods-sku {
					color: #879bba;
				}
			}
			.sel-icon {
				position: absolute;
				top: 50%;
				right: 20rpx;
				transform: translateY(-50%);
			}
		}
	}
}
</style>