wms / wms-cloud-ui · Files

<template>
	<view>
		<view class="content">
			<view class="top">
				<view class="common u-f u-f-jcsb plr-10">
					<view>
						单据编号
					</view>
					<view>
						{{detailInfo.code}}
					</view>
				</view>
				<view class="common u-f u-f-jcsb plr-10">
					<view>
						当前状态
					</view>
					<view>
						<text class="already" v-if="detailInfo.statusCyc >= 100">已完成</text>
						<text class="not" v-else>未完成</text>
					</view>
				</view>
				<view class="common u-f u-f-jcsb plr-10">
					<view>
						盘点仓库
					</view>
					<view>
						{{warehouseCodeFormat(detailInfo.warehouseCode)}}
					</view>
				</view>
				<view class="common u-f u-f-jcsb plr-10">
					<view>
						所属货主
					</view>
					<view>
						{{companyCodeFormat(detailInfo.companyCode)}}
					</view>
				</view>
			</view>
			<view class="center">
				<view class="common u-f u-f-jcsb plr-10">
					<view>
						货位
					</view>
					<view class="num">
						合计货位数：{{trayTotal?trayTotal:''}}
					</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" @tap="showPop(item)">
						<view class="left-content">
							<view class="name">
								{{item.materialName}}
							</view>
							<view class="code">
								库位号：{{item.locationCode}}
							</view>
							<!-- <view class="total">
								库存：{{item.systemQty}}，实盘：{{item.countedQty}}，差异：{{item.gapQty}}
							</view> -->
						</view>
						<view class="spec u-f u-f-aic">
							<text class="model">容器号：{{item.containerCode}}</text>
							<uni-icons type="arrowright" size="18" color="gray"></uni-icons>
						</view>
					</view>
				</view>
			</view>
			<view class="bottom">
				<view class="common u-f u-f-jcsb plr-10">
					<view>
						创建人
					</view>
					<view>
						{{detailInfo.createdBy}}
					</view>
				</view>
				<view class="common u-f u-f-jcsb plr-10">
					<view>
						创建时间
					</view>
					<view>
						{{formatTime(detailInfo.created)}}
					</view>
				</view>
			</view>

		</view>

		<view class="mask" @tap="maskClick" @touchmove.stop.prevent v-show="flag == true">
			<view class="operate">
				<view class="register" @tap="registerCycle(detailInfo.id,detailInfo.code)"
					v-if="detailInfo.statusCyc >= 5&&detailInfo.statusCyc <= 15">
					实盘登记
				</view>
				<view class="delete" @tap="delCycle(detailInfo.id,index)">
					删除
				</view>
			</view>
			<view class="cancel">
				取消
			</view>

		</view>
		<uni-popup ref="popup" type="bottom">
			<view class="pop-box">
				<view class="pop-title u-f u-f-jcsb u-f-aic plr-10">
					<view>
						查看明细
					</view>
					<view @tap="clearCart" class="u-f u-f-aic">
						<uni-icons type="close" size="17"></uni-icons>
						<text class="clear" @tap="popClose">关闭</text>
					</view>
				</view>
				<view class="pop-content" @touchmove.stop.prevent>
					<view class="content-top plr-10">
						<view class="u-f u-f-jcsb">
							<view class="name">
								{{materialInfo.materialName}}
							</view>

						</view>

						<view class="u-f u-f-jcsb c-s">
							<view>
								库位号：{{materialInfo.locationCode}}
							</view>
							<view>
								容器号：{{materialInfo.containerCode}}
							</view>
						</view>
					</view>
				</view>
				<view class="pop-footer u-f u-f-aic">
					<button type="default" plain class="closeBtn" @tap="popClose">关闭</button>
				</view>
			</view>
		</uni-popup>
	</view>

</template>

<script>
	export default {
		data() {
			return {
				flag: false,
				detailInfo: {},
				materialInfo: {},
				companyArr: [],
				warehouseArr: [],
				materialArr: [],
				trayTotal: null,
				timer: null,
				timer2: null,
				index: null
			}
		},
		onNavigationBarButtonTap() {
			this.flag = !this.flag
		},
		onBackPress() {
			this.$prePage().handleRegister(this.index, this.detailInfo)
		},
		onLoad(option) {
			this.index = option.index;
			this.getCycleCountHeader(option.id);
			this.getCycleCountDetail(option.code);
			this.$api.dict.getCompaniesByToken().then(res => {

				this.companyArr = res.data
			});
			this.$api.dict.getWarehouseByUserCode(uni.getStorageSync('historyUser').username).then(res => {
				this.warehouseArr = res.data.data
			});
		},

		onUnload() {
			if (this.timer) {
				clearTimeout(this.timer);
				this.timer = null;
			}
			if (this.timer2) {
				clearTimeout(this.timer2);
				this.timer2 = null;
			}
		},
		methods: {
			// 查询盘点主单
			getCycleCountHeader(id) {
				this.$api.cycle.listCycleCountHeader({
					id: id
				}).then(res => {

					if (res.data.code == 200) {
						this.detailInfo = res.data.rows[0];
					}

				})
			},
			// 获取盘点单明细列表
			getCycleCountDetail(code) {
				this.$api.cycle.listCycleCountDetail({
					cycleCountHeadCode: code
				}).then(res => {

					this.materialArr = res.data.rows;
					this.trayTotal = res.data.rows.length;
				});
			},
			// 货主字典翻译
			companyCodeFormat(companyCode) {
				return this.selectCommonLabel(this.companyArr, companyCode);
			},
			// 仓库字典翻译
			warehouseCodeFormat(warehouseCode) {
				return this.selectCommonLabel(this.warehouseArr, warehouseCode);
			},
			// 物料列表点击
			showPop(item) {

				this.materialInfo = item;
				this.$refs.popup.open();
			},
			// 操作遮罩层点击
			maskClick() {
				this.flag = false
			},
			// 关闭按钮操作
			popClose() {
				this.$refs.popup.close();
			},
			// 实盘登记操作
			registerCycle(id, code) {
				uni.navigateTo({
					url: 'register?code=' + code + '&id=' + id
				})
			},
			// 删除操作
			delCycle(id, index) {
				uni.showModal({
					title: '提示',
					content: '确定要删除该盘点单吗？',
					success: (res) => {
						if (res.confirm) {
							this.flag = false
							this.$api.cycle.delCycleCountHeader(id).then(res => {
								if (res.data.code == 200) {
									this.$prePage().handleDel(index);
									this.$wx.showToast({
										title: '删除成功！'
									});
									this.timer = setTimeout(() => {
										uni.navigateBack()
									}, 400)
								} else {
									uni.showModal({
										title: '提示',
										content: res.data.msg
									});
								}
							})
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});

			},




		}

	}
</script>

<style lang="scss" scoped>
	.content {
		overflow-y: auto;

		.top,
		.center,
		.bottom {
			background-color: $uni-bg-color;

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

				.already {
					color: $uni-color-success;
				}

				.not {
					color: $uni-color-warning;
				}

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

		}

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

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

						}
					}

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

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

						.uni-icons {
							margin-right: -10rpx;
						}
					}
				}
			}
		}


	}

	.mask {
		position: fixed;
		top: 0;
		width: 100%;
		height: 100%;
		z-index: 999;
		inset: 0;
		background-color: rgba(0, 0, 0, 0.4);
		transition-duration: 0.3s;

		.operate {
			position: absolute;
			left: $uni-spacing-row-base;
			right: $uni-spacing-row-base;
			bottom: 130rpx;
			color: $uni-color-primary;
			background-color: $uni-bg-color;
			font-size: $uni-font-size-lg;

			.register,
			.delete {
				height: 90rpx;
				line-height: 90rpx;
				text-align: center;
				border-bottom: 2rpx solid $uni-border-color;
			}

			.delete {
				border: none;
			}

		}

		.cancel {
			position: absolute;
			left: $uni-spacing-row-base;
			right: $uni-spacing-row-base;
			bottom: $uni-spacing-col-base;
			height: 90rpx;
			line-height: 90rpx;
			text-align: center;
			color: $uni-color-primary;
			background-color: $uni-bg-color;
			font-size: $uni-font-size-lg;
			font-weight: bold;



		}

	}

	.footer {
		position: fixed;
		width: 100%;
		bottom: 0;
		height: 100rpx;
		border-top: 2rpx solid $uni-border-color;
		border-bottom: 2rpx solid $uni-border-color;
		background-color: $uni-bg-color;

		.del,
		.save,
		.rece {
			width: 220rpx;
			// width: 50%;
			height: 60rpx;
			line-height: 60rpx;
			margin: 0 $uni-spacing-row-base;
			border: 2rpx solid $uni-border-color;
			border-radius: 80rpx !important;
			text-align: center;
			border-color: $uni-border-color;
		}

		.btn {
			width: 50%;
		}

		.btn2 {
			width: 100%;
		}

	}

	.pop-box {
		position: relative;
		background-color: $uni-bg-color-grey;
		height: 800rpx;

		.pop-title {
			height: 80rpx;

			.clear {
				margin-left: 4rpx;
			}
		}

		.pop-content {
			.content-top {
				height: 130rpx;
				background-color: $uni-bg-color;
				border-bottom: 2rpx solid $uni-border-color;

				.c-s {
					margin-top: $uni-spacing-col-sm;
					color: $uni-text-color-gray;
				}

				.name {
					margin-top: $uni-spacing-col-base;
					font-size: $uni-font-size-lg;
					font-weight: bold;
				}



			}

			.content-center {
				margin-top: $uni-spacing-row-base;
				font-size: $uni-font-size-lg;

				.qty,
				.unit {
					height: 90rpx;
					line-height: 90rpx;
					background-color: $uni-bg-color;
					border-bottom: 2rpx solid $uni-border-color;
				}
			}
		}

		.pop-footer {
			position: absolute;
			width: 100%;
			bottom: 0;
			height: 130rpx;
			border-top: 2rpx solid $uni-border-color;
			border-bottom: 2rpx solid $uni-border-color;
			background-color: $uni-bg-color;

			.closeBtn {
				width: 100%;
				margin: 0 $uni-spacing-row-base;
				border-color: $uni-border-color;
				border-radius: 90rpx;
			}
		}
	}
</style>