cy_pda/pages/cargoLocation/index.vue

<template>
	<view class="im-container">
		<view class="im-up">

			<view class="im-column">
				<u-input class="im-pan" border placeholder="请扫描移出货位" border-color="black" @input="searchData" />
			</view>
			<view class="im-column">
				<u-input class="im-pan" border placeholder="请扫描移入货位" border-color="black" @input="moveDate" />
			</view>
			<view class="im-column">
				<span class="im-name">货 位：</span>{{this.data.locationName || '-'}}
				<span class="ku-bie">库别：{{this.data.storageName || '-'}}</span>
			</view>
			<view class="im-column">
				<span class="im-name">货 主：</span>{{this.data.consignorName || '-'}}
			</view>
			<view class="im-column">
				<span>商品编号：</span><text>{{this.data.goodNo || '-'}}</text>
			</view>
			<view class="im-column">
				<span>商品名称：</span><text>{{this.data.goodName || '-'}}</text>
			</view>
			<view class="im-column">
				<span class="im-name">规 格：</span>{{this.data.specifications || '-'}}
			</view>
			<view class="im-column">
				<span class="im-name">厂 家：</span>{{this.data.factory || '-'}}
			</view>
			<view class="im-column">
				<span class="im-name">产 地：</span>{{this.data.waster || '-'}}
			</view>
			<view class="im-column">
				<span class="im-name">批 号：</span>{{this.data.batchNo || '-'}}
			</view>
			<view class="im-column">
				<span>显示效期：</span><text>{{this.expireDate}}</text>
			</view>
			<view class="im-down">
				<view class="im-down-title">
					<span>件装/单位</span>
					<span>件数</span>
					<span>零散数</span>
					<span>数量</span>
				</view>
				<view class="im-down-title">
					<span>{{this.data.packageQty}}/{{transUnit(this.data.unit)}}</span>
					<span>
						<u-input style="margin-left: 30rpx;" border v-model="query.caseQty" border-color="black"
							placeholder="" :trim="false" :clearable="false" @input="changeCase"></u-input>
					</span>
					<span>
						<u-input border v-model="query.pieceQty" border-color="black" placeholder="" :trim="false"
							:clearable="false" @input="changePiece"></u-input>
					</span>
					<span>{{this.data.qty}}</span>
				</view>

				<view class="im-down-title">
					<span>入库预分配</span>
					<span>出库预分配</span>
					<span>补货预分配</span>
				</view>
				<view class="im-down-title">
					<span>{{this.data.onlockInQuantity}}</span>
					<span>{{this.data.onlockOutQuantity}}</span>
					<span>{{this.data.onlockReplenishQuantity}}</span>
				</view>
			</view>
			<view class="confirm-button">
				<u-button size="medium" class="custom-style" @click="confirm()" :disabled="isShowConfirm">确认调整
				</u-button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				startShow: false,
				isShowConfirm: true,
				data: {},
				expireDate: "",
				query: {
					caseQty: null, //件数
					pieceQty: null, //零散量
					targetLocationCode: "", //目标货位
				},
				dicOptions: []
			};
		},
		onLoad() {
			this.getDic(); //获取字典
		},
		methods: {
			// 改变件数
			changeCase(e) {
				console.log(e)
				console.log(this.data.packageQty * e + this.query.pieceQty)
				this.data.qty = this.data.packageQty * e  + Number(this.query.pieceQty)
			},
			// 改变零散数
			changePiece(e){
				console.log(e)
					this.data.qty = this.data.packageQty * this.query.caseQty  + Number(e)
			},
			loadList(val) {
				this.$u.api.queryGoodsStock({
					content: val,
				}).then(res => {
					this.data = res.data;
					this.query.caseQty = res.data.caseQty;
					this.query.pieceQty = res.data.pieceQty;
					this.expireDate = res.data.productionDate.substr(0, 10) + '  ——  ' + this.data.expiredDate
						.substr(0, 10);
				});
			},
			confirm() {
				this.$u.api.pdaAdjustConfirm({
					id: this.data.id,
					targetLocationCode: this.query.targetLocationCode, //目标货位
					moveQty: this.data.qty, //数量
					moveCase: this.query.caseQty, //件数
					movePiece: this.query.pieceQty //零散数
				}).then(res => {
					if (res.code === 200) {
						this.$u.toast("货位调整成功！");
						setTimeout(() => {
							uni.reLaunch({
								url: "/pages/index/index",
							});
						}, 500);
					} else {
						this.$u.toast(res.msg);
					}
				});
			},
			searchData(val) {
				if (val !== null && val !== '') {
					this.loadList(val);
				}
			},
			moveDate(val) {
				this.query.targetLocationCode = val;
				if (this.query.targetLocationCode !== null && this.query.targetLocationCode !== '') {
					this.isShowConfirm = false;
				}
			},
			getDic() {
				this.$u.api.getByDicType().then(res => {
					this.dicOptions = res.data;
				});
			},
			transUnit(unit) {
				for (let dic in this.dicOptions) {
					if (this.dicOptions[dic].dictValue === unit) {
						return this.dicOptions[dic].dictLabel;
					}
				}
			}
		}
	}
</script>
<style>
	page {
		height: 100%
	}
</style>
<style scoped>
	.custom-style {
		color: black;
		width: 400rpx;
		letter-spacing: 1rpx;
	}
</style>
<style lang="scss">
	.im-container {
		background-color: rgba(242, 242, 242, 1);
		height: 100%;

		.im-up {
			background-color: #fff;
			margin: 20rpx 40rpx;
			border: 0.5px solid black;
			height: 95%;

			.im-column {
				display: flex;
				flex-direction: row;
				padding: 20rpx 30rpx 0 30rpx;

				.im-pan {
					margin-right: 40rpx;
				}

				.ku-bie {
					flex: 1;
					text-align: center;
				}

				.im-text {
					padding: 12rpx 20rpx 12rpx 0;
				}

				.im-name {
					word-spacing: 46rpx;
				}
			}


			.im-down-title {
				margin-top: 50prx;
				display: flex;
				justify-content: space-between;
				padding: 20rpx 30rpx 0 30rpx;

				.down-span {
					border: 0.5rpx black solid;
				}
			}

			.im-down-title .u-input {
				width: 90rpx;
				height: 50rpx;
				display: flex;
				justify-content: center;
				align-items: center;
			}

			.confirm-button {
				display: flex;
				padding-top: 130rpx;
			}
		}

		.im-button {
			display: contents;
		}

		.u-input {
			width: 150rpx;
		}
	}
</style>