cy_pda/pages/replenishment/putOn.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="replenishDetail" />
			</view>
			<view class="im-column">
				<u-input class="im-pan" border placeholder="请扫描上架货位" border-color="black" @input="replenishLocation" />
			</view>
			<view class="im-column">
				<span>分配货位：</span><text class="blod-text">{{replenishData.inLocationName || '-'}}</text>
			</view>
			<view class="im-column">
				<span>商品编号：</span><text>{{replenishData.goodNo || '-'}}</text>
			</view>
			<view class="im-column">
				<span>商品名称：</span><text>{{replenishData.goodName || '-'}}</text>
			</view>
			<view class="im-column">
				<span class="im-name">规 格：</span>{{replenishData.specifications || '-'}}
			</view>
			<view class="im-column">
				<span class="im-name">厂 家：</span>{{replenishData.factory || '-'}}
			</view>
			<view class="im-column">
				<span class="im-name">产 地：</span>{{replenishData.waster || '-'}}
			</view>
			<view class="im-column">
				<span class="jianzhuang">件 装 量：</span>{{replenishData.packageQty || '-'}}
				<span class="unit">单位：{{ transUnit(replenishData.unit) || '-'}}</span>
			</view>
			<view class="im-column">
				<span class="im-name">件 数：</span>{{replenishData.actualCaseQty || '-'}}
				<span class="unit">数量：{{replenishData.actualQty || '-'}}</span>
			</view>
			<view class="im-column">
				<span class="im-name">批 号：</span>{{replenishData.batchNo || '-'}}
			</view>
			<view class="im-column">
				<span>显示效期：</span><text>{{expiredDate || '-'}}</text>
			</view>
			<view class="im-column">
				<span class="im-name">货 主：</span>{{replenishData.consignorName || '-'}}
			</view>
			<view class="confirm-button">
				<u-button size="medium" class="custom-style" :disabled="isShowPut" type="primary" @click="putOnConfirm">上架确认</u-button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				startShow: false,
				xiangStart: "",
				replenishData: "",
				expiredDate: "",
				isShowPut: true,
				locationCode: "",
				dicOptions: []
			};
		},
		onLoad() {
			this.getDic(); //获取字典
		},
		methods: {
			replenishDetail(val) {
				if (val !== '') {
					this.$u.api.replenishment.queryReplenishTaskByBarCode({
						barcodeCode: val
					}).then(res => {
						if (res.code === 200) {
							if (res.data !== null) {
								this.isShowPut = false;
								this.replenishData = res.data;
								this.expireDate = res.data.productionDate.substr(0, 10) + '  ——  ' + this.data
									.expiredDate
									.substr(0, 10);
								
							}
						} else {
							this.$u.toast(res.msg);
						}

					});
				}
			},
			//上架确认
			putOnConfirm() {
				if (this.locationCode !== null && this.locationCode !== '') {
					this.$u.api.replenishment.replenishShelfConfirm({
						id: this.replenishData.id,
						inLocationCode: this.locationCode
					}).then(res => {
						if (res.code === 200) {
							this.$u.toast("上架成功");
							this.$u.route({
								url: '/pages/replenishment/index',
								type: 'navigateTo',
							})
						} else {
							this.$u.toast(res.msg);
						}
						this.isShowPut = false;
					}).catch((e)=>{
						console.log(e)
						this.isShowPut = false;
					})
				} else {
					this.$u.toast("请扫描上架货位");
				}
			},
			replenishLocation(val) {
				this.locationCode = val;
			},
			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;
					}
				}
			},
			confirmStart(e) {
				this.xiangStart = e[0].value;
			},
		}
	}
</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: 160rpx;
				}

				.blod-text {
					font-weight: bold;
					font-size: 35rpx;
					margin-top: -5rpx;
				}

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

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

				.jianzhuang {
					word-spacing: 6rpx;
				}

				.unit {
					flex: 1;
					text-align: center;
				}
			}

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

		.im-button {
			display: contents;
		}

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