jhlapp/pagesT/stock/Allocationedit.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="fromWarehouse">
					<u-input @click="goWarehouse(1)" class="dis-input" disabled v-model="add_form.fromWarehouse" placeholder="请选择" />
					<u-icon name="arrow-right" size="24" color="#6c6c6c"></u-icon>
				</u-form-item>
				<u-form-item required label="调入仓库" prop="targetWarehouse">
					<u-input @click="goWarehouse(2)" class="dis-input" disabled v-model="add_form.targetWarehouse" 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">{{ item.unitName }};{{ item.skuName }}</view>
								<view class="num-ul">
									<view class="num-li">
										<view class="label">可售库存</view>
										<input type="digit" class="input-dis" disabled v-model="item.inventoryNum" />
									</view>
									<view class="num-li">
										<view class="label">调拨数量</view>
										<input type="digit" @blur="numChange(index)" 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>
								<view class="num-ul" v-if="enableLocationManagement === 5">
									<view class="num-li">
										<view class="label">调出库区库位</view>
										<input
											@click="openLocation(1, index, item)"
											disabled
											type="text"
											placeholder="请选择"
											:value="item.outStorageLocationName ? item.outAreaName + '-' + item.outStorageLocationName : ''"
										/>
									</view>
									<view class="num-li">
										<view class="label">调入库区库位</view>
										<input
											@click="openLocation(2, index, item)"
											disabled
											type="text"
											placeholder="请选择"
											:value="item.inStorageLocationName ? item.inAreaName + '-' + item.inStorageLocationName : ''"
										/>
									</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 {
			sub_load: false,
			werahouseData: '',
			warehouseGoods: '',
			add_form: {
				fromWarehouse: '', // 仓库名称
				targetWarehouse: '',
				fromWarehouseId: '', // 所属仓库id
				targetWarehouseId: '',
				operatorName: '',
				couponAmount: '',
				otherAmount: '',
				remark: ''
			},
			goods_list: [],
			del_goods_id: [],
			tag: '',
			no: '',
			goods_index: 0,
			areaBysku: ''
		};
	},
	computed: {
		userName() {
			return this.$store.state.userInfo.name;
		},
		enableLocationManagement() {
			return parseInt(this.$store.state.basicSet.enableLocationManagement);
		}
	},
	watch: {
		werahouseData(val) {
			if (this.tag === 1) {
				if (val) {
					this.add_form.fromWarehouseId = val.id;
					this.add_form.fromWarehouse = val.warehouseName;
					this.goods_list = [];
				}
			} else if (this.tag === 2) {
				if (val) {
					this.add_form.targetWarehouseId = val.id;
					this.add_form.targetWarehouse = val.warehouseName;
				}
			}
		},
		// 选择商品资料页面返回
		warehouseGoods(list) {
			if (list) {
				this.selGoods(list);
			}
		},
		areaBysku(val) {
			if (val) {
				const target = this.$u.deepClone(this.goods_list);
				if (this.tag === 1) {
					target[this.goods_index] = {
						...target[this.goods_index],
						outAreaId: val.areaId,
						outAreaName: val.areaName,
						outAreaCode: val.areaCode,
						outStorageLocationId: val.storageLocationId,
						outStorageLocationName: val.storageLocationName,
						outStorageLocationCode: val.storageLocationCode
					};
				} else if (this.tag === 2) {
					if (val) {
						target[this.goods_index] = {
							...target[this.goods_index],
							inAreaId: val.areaId,
							inAreaName: val.areaName,
							inAreaCode: val.areaCode,
							inStorageLocationId: val.storageLocationId,
							inStorageLocationName: val.storageLocationName,
							inStorageLocationCode: val.storageLocationCode
						};
					}
				}
				this.goods_list = target;
			}
		}
	},
	// 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
	onReady() {
		this.$refs.uForm.setRules(this.rules);
	},
	onLoad(options) {
		if (options.id) {
			this.Allocat_id = options.id;
			uni.setNavigationBarTitle({
				title: '编辑调拨单'
			});
			this.getAllocateInfo();
		}
	},
	methods: {
		// 去选择库区库位页面
		openLocation(tag, index, row) {
			this.tag = tag;
			this.goods_index = index;
			const warehouseId = tag === 1 ? this.add_form.fromWarehouseId : this.add_form.targetWarehouseId;
			this.goPage(`/pagesT/stock/WarehouseRegionBySku?basicGoodsId=${row.materielId}&skuId=${row.skuId}&warehouseId=${warehouseId}`);
		},
		delGoods(row, index) {
			if (row.id) {
				this.del_goods_id.push(row.id);
			}
			this.goods_list.splice(index, 1);
		},
		numChange(index) {
			const target = this.$u.deepClone(this.goods_list);
			if (target[index].num > target[index].inventoryNum) {
				target[index].num = target[index].inventoryNum;
			} else if (target[index].num < 0) {
				target[index].num = 0;
			}
			this.goods_list = target;
		},
		goWarehouse(tag) {
			this.tag = tag;
			this.goPage('/pagesT/werahouse/selWerahouse');
		},
		selGoodsPage() {
			if (!this.add_form.fromWarehouseId) {
				this.$u.toast('请选择仓库');
				return;
			}
			uni.setStorageSync('warehouseGoods', this.goods_list);
			this.goPage('/pagesT/goods/GoodsbyWarehouse?id=' + this.add_form.fromWarehouseId);
		},
		// 详情
		getAllocateInfo() {
			this.$u.api.getAllocateInfo(this.Allocat_id).then(({ data }) => {
				this.no = data.no;
				this.add_form.fromWarehouse = data.warehouseName;
				this.add_form.fromWarehouseId = data.warehouseId;
				this.add_form.targetWarehouse = data.inWarehouseName;
				this.add_form.targetWarehouseId = data.inWarehouseId;
				this.add_form.operatorName = data.operatorName;
				this.add_form.remark = data.remark;
				this.goods_list = data.details.map(item => {
					return {
						...item,
						inventoryNum: Number(item.inventoryNum),
						num: Number(item.num),
						otherNum: item.isEq === 5 ? Number(item.otherNum) : '',
						warehouseName: this.add_form.fromWarehouse,
						inwarehouseName: this.add_form.targetWarehouse,
						inAreaId: item.inAreaId,
						inAreaName: item.inAreaName,
						inAreaCode: item.inAreaCode,
						inStorageLocationId: item.inStorageLocationId,
						inStorageLocationName: item.inStorageLocationName,
						inStorageLocationCode: item.inStorageLocationCode,
						outAreaId: item.outAreaId,
						outAreaName: item.outAreaName,
						outAreaCode: item.outAreaCode,
						outStorageLocationId: item.outStorageLocationId,
						outStorageLocationName: item.outStorageLocationName,
						outStorageLocationCode: item.outStorageLocationCode
					};
				});
			});
		},
		// 多选商品确定
		selGoods(list) {
			this.goods_list = list.map(item => {
				return {
					isEq: item.isEq,
					otherNum: Number(item.otherNum),
					materielId: item.materielId,
					materielCode: item.materielCode,
					materielName: item.materielName,
					warehouseName: item.warehouseName,
					inwarehouseName: this.targetWarehouse,
					skuName: item.skuName,
					skuId: item.skuId,
					unitName: item.unitName,
					inventoryNum: Number(item.allNum),
					num: Number(item.buyNum),
					categoryTitle: item.categoryTitle,
					costUnitPrice: item.costPrice,
					inAreaId: '',
					inAreaName: '',
					inAreaCode: '',
					inStorageLocationId: '',
					inStorageLocationName: '',
					inStorageLocationCode: '',
					outAreaId: '',
					outAreaName: '',
					outAreaCode: '',
					outStorageLocationId: '',
					outStorageLocationName: '',
					outStorageLocationCode: ''
				};
			});
		},
		submit() {
			this.$refs.uForm.validate(valid => {
				if (valid) {
					if (!this.goods_list.length) {
						this.$u.toast('请选择商品');
						return;
					}
					let flag = false;
					this.goods_list.forEach(item => {
						if (Number(item.inventoryNum) === 0) {
							flag = true;
						}
					});
					if (flag) {
						this.$u.toast('可售库存为空，无法调拨');
						return;
					}
					const params = {
						no: this.no || '',
						warehouseId: this.add_form.fromWarehouseId,
						inWarehouseId: this.add_form.targetWarehouseId,
						warehouseName: this.add_form.fromWarehouse,
						inWarehouseName: this.add_form.targetWarehouse,
						operatorName: this.userName,
						remark: this.add_form.remark,
						details: this.goods_list.map(item => {
							return {
								isEq: item.isEq,
								id: item.id,
								materielId: item.materielId,
								materielName: item.materielName,
								materielCode: item.materielCode,
								skuId: item.skuId,
								unitName: item.unitName,
								skuName: item.skuName,
								num: item.num,
								costUnitPrice: item.costUnitPrice,
								otherNum: item.otherNum,
								inAreaId: item.inAreaId,
								inAreaName: item.inAreaName,
								inAreaCode: item.inAreaCode,
								inStorageLocationId: item.inStorageLocationId,
								inStorageLocationName: item.inStorageLocationName,
								inStorageLocationCode: item.inStorageLocationCode,
								outAreaId: item.outAreaId,
								outAreaName: item.outAreaName,
								outAreaCode: item.outAreaCode,
								outStorageLocationId: item.outStorageLocationId,
								outStorageLocationName: item.outStorageLocationName,
								outStorageLocationCode: item.outStorageLocationCode
							};
						})
					};
					this.sub_load = true;
					if (this.Allocat_id) {
						this.$u.api
							.updateAllocate(this.Allocat_id, { ...params, deleteArray: this.del_goods_id })
							.then(res => {
								this.sub_load = false;
								this.$u.toast('修改成功');
								setTimeout(() => {
									uni.navigateBack();
								}, 2000);
							})
							.catch(err => {
								this.sub_load = false;
							});
					} else {
						this.$u.api
							.addAllocate(params)
							.then(res => {
								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>