QianNiaoShop/pagesT/stock/AddLoss.vue

<template>
	<view class="detail-view">
		<u-form label-width="160" :model="add_form" ref="uForm">
			<view class="form-model-view">
				<u-form-item required label="报损仓库" prop="warehouseName">
					<u-input @click="goPage('/pagesT/werahouse/selWerahouse')" class="dis-input" disabled v-model="add_form.warehouseName" placeholder="请选择" />
					<u-icon name="arrow-right" size="24" color="#6c6c6c"></u-icon>
				</u-form-item>
			</view>
			<view class="form-model-view">
				<u-form-item required label="商品清单">
					<view @click="selGoodsPage" class="form-value add-btn-go">
						<u-icon name="plus" size="24"></u-icon>
						<text>选择商品</text>
					</view>
				</u-form-item>
				<view class="goods-ul" v-if="goods_list.length">
					<block v-for="(item, index) in goods_list" :key="index">
						<view class="goods-li clearfix">
							<view class="goods-img float_left" @click="delGoods(item, index)"><u-icon size="40" name="minus-circle-fill" color="#fa3534"></u-icon></view>
							<view class="float_left info">
								<view class="goods-name ellipsis">{{ item.materielName }}</view>
								<view class="goods-code">{{ item.materielCode }}</view>
								<view class="goods-num clearfix">
									<view class="float_left">{{ item.unitName }};{{ item.skuName }}</view>
									<view class="float_right">账目库存: {{ $utils.formatNub(item.inventoryNum) }}</view>
								</view>
								<view class="num-ul">
									<view class="num-li">
										<view class="label">当前成本</view>
										<input type="digit" disabled v-model="item.lossAmount" />
									</view>
									<view class="num-li">
										<view class="label">报损数量</view>
										<input type="digit" placeholder="请输入" v-model="item.num" />
									</view>
									<view class="num-li" v-if="item.isEq === 5">
										<view class="label">其他单位</view>
										<input type="digit" placeholder="请输入" v-model="item.otherNum" />
									</view>
									<view class="num-li">
										<view class="label">报损金额</view>
										<input type="digit" disabled :value="$utils.formatNub($NP.times(item.lossAmount, item.num))" />
									</view>
									<view class="num-li" v-if="enableLocationManagement === 5">
										<view class="label">库区库位</view>
										<input
											@click="openLocation(index, item)"
											disabled
											type="text"
											placeholder="请选择"
											:value="item.storageLocationName ? item.areaName + '-' + item.storageLocationName : ''"
										/>
									</view>
								</view>
							</view>
						</view>
					</block>
				</view>
			</view>
			<view class="form-model-view">
				<u-form-item label="备注" label-position="top"><u-input type="textarea" v-model="add_form.remark" /></u-form-item>
			</view>
		</u-form>
		<view class="detail-bottom"><u-button class="handel-btn" @click="submit" :loading="sub_load" :ripple="true" type="primary">提交</u-button></view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			rules: {
				warehouseName: [
					{
						required: true,
						message: '请选择所属仓库',
						trigger: ['change', 'blur']
					}
				]
			},
			werahouseData: '',
			warehouseGoods: '',
			add_form: {
				warehouseName: '',
				warehouseId: '',
				operatorName: '',
				remark: ''
			},
			goods_list: [],
			sub_load: false,
			goods_index: 0,
			areaBysku: ''
		};
	},
	computed: {
		userName() {
			return this.$store.state.userInfo.name;
		},
		enableLocationManagement() {
			return parseInt(this.$store.state.basicSet.enableLocationManagement);
		}
	},
	watch: {
		werahouseData(val) {
			if (val) {
				this.add_form.warehouseId = val.id;
				this.add_form.warehouseName = val.warehouseName;
				this.goods_list = [];
			}
		},
		// 选择商品页面返回
		warehouseGoods(list) {
			if (list) {
				this.selGoods(list);
			}
		},
		areaBysku(val) {
			if (val) {
				const target = this.$u.deepClone(this.goods_list);
				target[this.goods_index] = {
					...target[this.goods_index],
					areaId: val.areaId,
					areaName: val.areaName,
					areaCode: val.areaCode,
					storageLocationId: val.storageLocationId,
					storageLocationName: val.storageLocationName,
					storageLocationCode: val.storageLocationCode
				};
				this.goods_list = target;
			}
		}
	},
	// 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
	onReady() {
		this.$refs.uForm.setRules(this.rules);
	},
	onLoad(options) {},
	methods: {
		// 去选择库区库位页面
		openLocation(index, row) {
			this.goods_index = index;
			this.goPage(`/pagesT/stock/WarehouseRegionBySku?basicGoodsId=${row.materielId}&skuId=${row.skuId}&warehouseId=${this.add_form.warehouseId}`);
		},
		delGoods(row, index) {
			this.goods_list.splice(index, 1);
		},
		selGoodsPage() {
			if (!this.add_form.warehouseId) {
				this.$u.toast('请选择仓库');
				return;
			}
			uni.setStorageSync('warehouseGoods', this.goods_list);
			this.goPage('/pagesT/goods/GoodsbyWarehouse?id=' + this.add_form.warehouseId);
		},

		// 多选商品确定
		selGoods(list) {
			this.goods_list = list.map(item => {
				return {
					isEq: item.isEq,
					otherNum: '',
					materielId: item.materielId,
					materielCode: item.materielCode,
					materielName: item.materielName,
					warehouseName: this.add_form.warehouseName,
					skuName: item.skuName,
					skuId: item.skuId,
					unitName: item.unitName,
					inventoryNum: Number(item.inventoryNum),
					lossAmount: Number(item.costPrice),
					num: item.buyNum,
					areaId: '',
					areaName: '',
					areaCode: '',
					storageLocationName: '',
					storageLocationId: '',
					storageLocationCode: ''
				};
			});
		},
		submit() {
			this.$refs.uForm.validate(valid => {
				if (valid) {
					if (!this.goods_list.length) {
						this.$u.toast('请选择商品');
						return;
					}
					const isbuyerNum = this.goods_list.every(item => item.num > 0);
					if (!isbuyerNum) {
						this.$u.toast('报损数量必须大于0');
						return;
					}
					let goodsData = this.goods_list.map(item => {
						let goods = {
							materielId: item.materielId,
							materielName: item.materielName,
							materielCode: item.materielCode,
							skuId: item.skuId,
							unitName: item.unitName,
							skuName: item.skuName,
							num: item.num,
							inventoryNum: item.inventoryNum,
							lossAmount: item.lossAmount,
							otherNum: item.otherNum,
							areaId: item.areaId,
							areaName: item.areaName,
							areaCode: item.areaCode,
							storageLocationName: item.storageLocationName,
							storageLocationId: item.storageLocationId,
							storageLocationCode: item.storageLocationCode
						};
						return goods;
					});
					const params = {
						warehouseId: this.add_form.warehouseId,
						warehouseName: this.add_form.warehouseName,
						remark: this.add_form.remark,
						operatorName: this.userName,
						details: goodsData
					};
					this.sub_load = true;
					this.$u.api
						.addReportLoss(params)
						.then(res => {
							this.sub_load = false;
							this.$u.toast('新建成功');
							setTimeout(() => {
								uni.navigateBack();
							}, 2000);
						})
						.catch(err => {
							this.sub_load = false;
						});
				}
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.goods-ul {
	padding-bottom: 20rpx;
	.goods-title {
		margin-bottom: 20rpx;
		line-height: 80rpx;
		font-size: 24rpx;
		border-bottom: 1px solid #eeeeee;

		.float_right {
			color: $uni-color-primary;
		}
	}

	.goods-li {
		line-height: 32rpx;
		margin-top: 20rpx;

		.goods-img {
			margin-right: 20rpx;
			image {
				width: 150rpx;
				height: 150rpx;
				border-radius: 8rpx;
				display: block;
			}
		}

		.info {
			width: 640rpx;
			.num-ul {
				display: flex;
				padding-top: 20rpx;
				.num-li {
					font-size: 24rpx;
					line-height: 36rpx;
					flex: 3;
					text-align: center;
					position: relative;
					font-weight: bold;
					padding: 0 16rpx;
					.label {
						font-weight: 400;
						color: #999999;
					}
					input {
						text-align: center;
						border-bottom: 1px solid $uni-color-primary;
						&.input-dis {
							border-bottom: 1px solid #eeeeee;
						}
					}
					&::after {
						display: block;
						content: '';
						position: absolute;
						width: 1px;
						height: 60rpx;
						top: 50%;
						transform: translateY(-50%);
						right: 0;
						background-color: #eeeeee;
					}
					&:last-child {
						&::after {
							display: block;
							content: '';
							position: absolute;
							width: 1px;
							height: 50rpx;
							top: 50%;
							transform: translateY(-50%);
							right: 0;
							background-color: transparent;
						}
					}
				}
			}
			.goods-name {
				width: 640rpx;
				height: 34rpx;
				line-height: 34rpx;
			}

			.goods-code {
				font-size: 24rpx;
				padding-top: 10rpx;
			}

			.goods-num {
				padding-top: 10rpx;
				font-size: 24rpx;

				.price {
					font-size: 28rpx;
					font-weight: bold;
					color: $uni-color-error;
				}
			}
		}
	}
}
</style>