call.vue 6.27 KB
<template>
	<view>
		<view class="header">
			<view class="content-top">
				<view class="content-item u-f u-f-aic plr-10">
					<view class="title require u-f1">
						库位号
					</view>
					<view class="inp u-f3">
						<picker @change="locationPickerChange" :value="locationIndex" :range-key="'code'" :range="locationArr">
							<view class="u-f u-f-aic fr">
								<view class="uni-input"><text class="placeholder-color" v-if="locationIndex == -1">请选择</text><text v-else>{{locationArr[locationIndex].code}}</text></view>
							</view>
						</picker>
					</view>
				</view>
				<view class="content-item u-f u-f-aic plr-10">
					<view class="title u-f1">
						容器号
					</view>
					<view class="inp u-f3">
						<input v-model="containerCode" :disabled="true" />
					</view>
				</view>
			</view>
			<view class="center">
				<view class="common u-f u-f-jcsb plr-10">
					<view>
						物料
					</view>
					<view class="num">
						合计数量:{{materialTotal}}
					</view>
				</view>
				<view class="select-content">
					<view class="select-list u-f u-f-jcsb u-f-aic plr-10" v-for="(item,index) in materialArr" :key="index">
						<view class="left-content">
							<view class="name">
								{{item.materialName}}
							</view>
							<view class="code">
								编号:{{item.materialCode}}
							</view>
							<view class="total">
								<text class="mr">数量:{{item.qty}},</text><text class="mr">重量:{{item.weight}},</text>单位:{{item.materialUnit}}
							</view>
						</view>
						<view class="spec u-f u-f-aic">
							<text class="model">型号:{{item.materialSpec}}</text>
							<uni-icons type="arrowright" size="18" color="gray"></uni-icons>
						</view>
					</view>
				</view>
			</view>
		</view>

		<view class="footer u-f u-f-aic">
			<button class="btn" :loading="loading" type="warn" @tap="save" :disabled="disabled">保存</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				loading: false,
				disabled: false,
				containerCode: '',
				destinationLocation: '',
				locationIndex: -1,
				locationArr: [],
				materialArr: [],
				materialTotal: null,
				companyCode: '',
				timer: null
			}
		},
		onLoad() {
			this.$http.inventory.pickLocation().then(res => {
				console.log(res)
				this.locationArr = res.data.data
			});
			try {
				const value = uni.getStorageSync('userData').companies;
				if (value) {
					this.companyCode = value.toString()
				}
			} catch (e) {
				// error
			}
		},
		onUnload() {
			if (this.timer) {
				clearTimeout(this.timer);
				this.timer = null;
			}
		},
		methods: {
			// 库位号选择点击
			locationPickerChange(e) {
				this.locationIndex = e.target.value;
				this.destinationLocation = this.locationArr[this.locationIndex].code;
				this.containerCode = this.locationArr[this.locationIndex].containerCode;
				this.materialTotal = null;
				this.$http.inventory.inventoryDetailList({containerCode:this.containerCode}).then(res => {
					console.log(res)
					this.materialArr = res.data.rows;
					this.materialArr.forEach(item => {
						this.materialTotal += item.qty;
					});

				})
			},
			// 保存按钮操作
			save() {
				if (this.loading) {
					return false;
				}
				if (!this.destinationLocation) {
					uni.showModal({
						title: '提示',
						content: '库位号不能为空!',
						showCancel: false
					});
					return
				}

				let params = {
					containerCode: this.containerCode,
					destinationLocation: this.destinationLocation,
					type: 200,
					companyCode: this.companyCode,
				};
				
				this.loading = true;
				this.disabled = true;
				this.$http.task.callBox(params).then(res => {
					console.log(res);
					if (res.data.code == 200) {
						this.loading = false;
						this.disabled = false;
						this.$msg('保存成功!');
						this.timer = setTimeout(() => {
							uni.redirectTo({
								url: 'fast?empty'
							});
						},400);
					} else {
						uni.showModal({
							title: '提示',
							content: res.data.msg
						});
						this.loading = false;
						this.disabled = false;
					}

				}).catch(err => {
					this.loading = false;
					this.disabled = false;
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.header {
		overflow-y: auto;
		padding-bottom: 140rpx;

		.content-top {
			background-color: $uni-bg-color;

			.content-item {
				height: 90rpx;
				line-height: 90rpx;
				border-bottom: 2rpx solid $uni-border-color;

				.title {
					font-size: $uni-font-size-lg;
				}

				.inp {
					text-align: right;
					font-size: $uni-font-size-lg;

					/deep/ uni-radio .uni-radio-input {
						margin-right: 0;
					}

					.picker {
						justify-content: flex-end;
					}
				}

				.require {
					position: relative;

					// padding-left: 10rpx;
					&::after {
						position: absolute;
						content: '*';
						color: red;
						font-size: 48rpx;
						top: 6rpx;
						left: -20rpx;
					}
				}
			}
		}

		.center {
			margin: $uni-spacing-col-base 0;
			background-color: $uni-bg-color;

			.common {
				height: 90rpx;
				line-height: 90rpx;
				font-size: $uni-font-size-lg;
				border-bottom: 2rpx solid $uni-border-color;

				.num {
					color: $uni-color-primary;
					font-size: $uni-font-size-base;
				}
			}

			.select-content {
				.select-list {
					height: 170rpx;
					background-color: $uni-bg-color;
					border-bottom: 2rpx solid $uni-border-color;

					.left-content {
						.name {
							font-size: $uni-font-size-lg;
							font-weight: bold;
						}

						.code,
						.total {
							margin-top: $uni-spacing-col-sm;

						}

						.code {

							color: $uni-text-color-gray;
						}

						.total {
							color: $uni-color-primary;

							.mr {
								margin-right: $uni-spacing-row-sm;
							}

						}
					}

					.spec {
						color: $uni-text-color-gray;

						.model {
							margin-right: $uni-spacing-row-sm;
						}

						.uni-icons {
							margin-right: -5px;
						}
					}
				}
			}
		}
	}

	.footer {
		position: fixed;
		bottom: 0;
		width: 100%;
		height: 140rpx;
		background-color: #fff;
		border-top: 2rpx solid #E1F3D8;

		.btn {
			width: 100%;
			height: 80rpx;
			line-height: 80rpx;
			color: #fff;
			text-align: center;
			font-size: $uni-font-size-lg;
			border-radius: 50rpx;
			margin: 0 30rpx;
			background-color: $uni-color-primary;

		}
	}
</style>