jhlapp/pagesT/Purchase/AddPurchaseReturn.vue

<template>
	<view class="detail-view">
		<u-form label-width="150" :model="add_form" ref="uForm">
			<view class="form-model-view">
				<u-form-item required label="关联采购单" prop="warehouseName">
					<u-input @click="goPage('/pagesT/order/selPurchase')" class="dis-input" disabled
						v-model="add_form.originNo" placeholder="请选择" />
					<u-icon name="arrow-right" size="24" color="#6c6c6c"></u-icon>
				</u-form-item>
				<block v-if="!!add_form.originNo">
					<u-form-item label="退货仓库">
						<view class="form-value">{{ add_form.warehouseName }}</view>
					</u-form-item>
					<u-form-item label="供应商">
						<view class="form-value">{{ add_form.supplierName }}</view>
					</u-form-item>
					<u-form-item label="采购员">
						<view class="form-value">{{ add_form.buyerName }}</view>
					</u-form-item>
				</block>
			</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">
								<u-icon size="40" name="shangpin" custom-prefix="custom-icon" color="#cccccc"></u-icon>
							</view>
							<view class="del-icon" @click="delGoods(index, item)">
								<u-icon size="40" name="minus-circle-fill" color="#fa3534"></u-icon>
							</view>
							<view class="float_left info">
								<view class="goods-name ellipsis">{{ item.goodsName }}</view>
								<view class="goods-code">{{ item.goodsCode }}</view>
								<view class="goods-num clearfix">
									<view class="float_left">{{ item.unitName }};{{ item.skuName }}</view>
									<text
										class="float_right">可退：{{ $utils.formatNub(item.returnOnNum) }}{{ item.unitName }}</text>
								</view>
								<view class="goods-num clearfix">
									<view class="float_left ">
										<text class="price">{{ $utils.formattedNumber(item.buyerUnitPrice) }}</text>
										<text style="margin: 0 10rpx;">x</text>
										<input type="digit" @blur="buyerNumChange(index)" placeholder="退货数量"
											v-model="item.buyerNum" />
									</view>
									<view class="float_right">
										小计：
										<text class="price">{{ $utils.formattedNumber(item.subtotalPrice) }}</text>
									</view>
								</view>
								<view class="goods-num clearfix" v-if="item.isEq === 5">
									<view class="float_left ">
										<input type="digit" @blur="buyerNumChange(index)" placeholder="其他单位"
											v-model="item.otherNum" />
									</view>
								</view>
							</view>
						</view>
					</block>
				</view>
			</view>
			<view class="form-model-view">
				<u-form-item label="其他金额"><input type="digit" v-model="add_form.otherAmount" placeholder="请输入" />
				</u-form-item>
				<u-form-item label="退货金额"><input type="digit" v-model="purchaseAmount" placeholder="请输入" />
				</u-form-item>
			</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">
			<view class="handel-btn" @click="submit">提交</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				purchaseData: '',
				pusrchaseOut_id: '',
				goods_list: [],
				goodsArrData: [],
				deleteArray: [],
				purchaseGoodsData: [],
				add_form: {
					originId: '',
					originNo: '',
					supplierId: '',
					supplierName: '',
					warehouseId: '',
					warehouseName: '',
					buyerId: '',
					buyerName: '',
					operatorName: '',
					couponAmount: '',
					otherAmount: '',
					remark: '',
					goodsData: [],
					shopId: '',
					shopName: ''
				}
			};
		},
		watch: {
			purchaseData(val) {
				if (val) {
					this.selpurchase(val);
				}
			},
			purchaseGoodsData(val) {
				if (val) {
					this.goods_list = val;
				}
			}
		},
		computed: {
			userName() {
				return this.$store.state.userInfo.name;
			},
			purchaseAmount() {
				let sum = 0;
				if (this.goods_list.length > 1) {
					this.goods_list.forEach(item => {
						sum = this.$NP.plus(sum, Number(item.subtotalPrice));
					});
				} else if (this.goods_list.length === 1) {
					sum = Number(this.goods_list[0].subtotalPrice);
				} else {
					sum = 0;
				}
				return this.$NP.plus(sum, this.add_form.otherAmount);
			}
		},
		onLoad(options) {
			if (options.id) {
				this.pusrchaseOut_id = options.id;
				uni.setNavigationBarTitle({
					title: '编辑采购退货单'
				});
				this.getPurchaseOutInfoById();
			}
		},
		methods: {
			// 详情
			getPurchaseOutInfoById() {
				this.$u.api.getPurchaseOutInfoById(this.pusrchaseOut_id).then(({
					data
				}) => {
					this.add_form.warehouseName = data.warehouseName;
					this.add_form.warehouseId = data.warehouseId;
					this.add_form.originId = data.originId;
					this.add_form.originNo = data.originNo;
					this.add_form.shopId = data.shopId;
					this.add_form.shopName = data.shopName;
					this.add_form.supplierId = data.supplierId;
					this.add_form.supplierName = data.supplierName;
					this.add_form.buyerId = data.buyerId;
					this.add_form.buyerName = data.buyerName;
					this.add_form.operatorName = data.operatorName;
					this.add_form.couponAmount = data.couponAmount;
					this.add_form.otherAmount = data.otherAmount;
					this.add_form.remark = data.remark;
					this.goods_list = data.details.map(item => {
						return {
							...item,
							buyerNum: Number(item.buyerNum)
						};
					});
					this.getPurchaseInfoById(data.originId, data.warehouseId, 'detail');
				});
			},
			selGoodsPage() {
				const obj = {
					goodsArrData: this.goodsArrData,
					goods_list: this.goods_list
				};
				uni.setStorageSync('purchaseGoods', obj);
				this.goPage('/pagesT/order/purchaseGoods');
			},
			buyerNumChange(index) {
				const target = this.$u.deepClone(this.goods_list);
				if (Number(target[index].buyerNum) > Number(target[index].returnOnNum)) {
					target[index].buyerNum = this.$utils.formatNub(target[index].returnOnNum);
				}
				target[index].subtotalPrice = this.$NP.times(target[index].buyerNum, target[index].buyerUnitPrice);
				this.goods_list = target;
			},
			submit() {
				if (!this.add_form.originNo) {
					this.$u.toast('请选择关联的采购单');
					return;
				}
				if (!this.goods_list) {
					this.$u.toast('请选择退货商品');
					return;
				}
				const params = {
					...this.add_form,
					deleteArray: this.deleteArray,
					goodsData: this.$u.deepClone(this.goods_list).map(item => {
						delete item.num;
						if (!this.pusrchaseOut_id) {
							delete item.id;
						}
						return item;
					})
				};

				if (this.pusrchaseOut_id) {
					this.$u.api.editPurchaseOut(this.pusrchaseOut_id, params).then(res => {
						this.$u.toast('编辑成功');
						uni.navigateBack();
					});
				} else {
					(params.operatorName = this.userName),
					this.$u.api.addPurchaseOut(params).then(res => {
						this.$u.toast('提交成功');
						uni.navigateBack();
					});
				}
			},
			// 选择采购单 selpurchase
			selpurchase(val) {
				const id = val.id;
				const warehouseId = val.warehouseId;
				this.getPurchaseInfoById(id, warehouseId);
				this.add_form.originId = val.id;
				this.add_form.originNo = val.no;
				this.add_form.shopId = val.shopId;
				this.add_form.shopName = val.shopName;
				this.add_form.buyerId = val.buyerId;
				this.add_form.buyerName = val.buyerName;
				this.add_form.remark = val.remark;
				this.add_form.supplierId = val.supplierId;
				this.add_form.supplierName = val.supplierName;
				this.add_form.warehouseName = val.warehouseName;
				this.add_form.warehouseId = val.warehouseId;
			},
			//  获取采购单详情
			async getPurchaseInfoById(id, warehouseId, isdetail) {
				this.$u.api
					.getPurchaseAndBatchInfoById({
						id: id,
						warehouseId: warehouseId
					})
					.then(({
						data
					}) => {
						if (!isdetail) {
							this.goods_list = data.map(item => {
								return {
									id: item.id,
									goodsId: item.basicGoodsId,
									goodsCode: item.goodsCode,
									goodsName: item.goodsName,
									unitName: item.unitName,
									skuName: item.skuName,
									skuId: item.skuId,
									purchaseNum: this.$utils.formatNub(item.buyerNum),
									buyerNum: this.$utils.formatNub(item.returnOnNum),
									inNum: item.inNum,
									inOfNum: item.inOfNum,
									returnOnNum: item.returnOnNum,
									returnNum: item.returnNum,
									inventoryNum: this.$utils.formatNub(item.num),
									buyerUnitPrice: this.$utils.formatNub(item.buyerUnitPrice),
									subtotalPrice: this.$utils.formatNub(item.subtotalPrice),
									couponAmount: this.$utils.formatNub(item.couponAmount),
									otherAmount: this.$utils.formatNub(item.otherAmount),
									isEq: item.isEq,
									otherNum: item.otherNum,
								};
							});
						}
						console.log(this.goods_list);
						this.goodsArrData = data;
					});
			},
			delGoods(index, row) {
				if (this.goods_list.length === 1) {
					this.$u.toast('至少保留一条数据');
					return;
				}
				if (row.id) {
					this.deleteArray.push(row.id);
				}
				this.goods_list.splice(index, 1);
			}
		}
	};
</script>

<style lang="scss" scoped>
	.goods-ul {
		padding-top: 10rpx;

		.more-goods {
			line-height: 80rpx;
			border-top: 1px solid #eeeeee;
			text-align: center;
			font-size: 24rpx;
		}

		.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;
			padding-bottom: 24rpx;
			position: relative;

			.del-icon {
				position: absolute;
				top: 50%;
				left: 0;
				transform: translateY(-50%);
			}

			.goods-img {
				margin-right: 20rpx;

				image {
					width: 150rpx;
					height: 150rpx;
					border-radius: 8rpx;
					display: block;
				}
			}

			.info {
				width: 640rpx;

				.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;

					.float_left {
						input {
							display: inline-block;
							border: 1px solid #eeeeee;
							border-radius: 10rpx;
							padding: 0 10rpx;
							vertical-align: middle;
							text-align: center;
						}
					}

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