detail.vue 9.08 KB
<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.lastStatus >= 800">已完成</text>
						<text class="not" v-else>未完成</text>
					</view>
				</view>
				<view class="common u-f u-f-jcsb plr-10">
					<view>
						入库类型
					</view>
					<view>
						{{receiptTypeFormat(detailInfo.receiptType)}}
					</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>
						{{formatDate(detailInfo.created)}}
					</view>
				</view>
			</view>
			<view class="center">
				<view class="common u-f u-f-jcsb plr-10">
					<view>
						物料
					</view>
					<view class="num">
						物料种数:{{materialArr.length}}
					</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">
								总数量:{{item.totalQty}}
							</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 class="bottom">
				<view class="common u-f u-f-jcsb plr-10">
					<view>
						货主
					</view>
					<view>
						{{companyCodeFormat(detailInfo.companyCode)}}
					</view>
				</view>
			    <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="footer u-f u-f-aic">
			<button type="default" size="mini" plain class="del" @tap="delReceipt(detailInfo.id,params.index)" v-if="firstStatus < 100">
				<uni-icons type="trash" size="14"></uni-icons>删除
			</button>
			<button type="default" size="mini" plain class="save" @tap="goEdit" v-if="firstStatus < 100">
				<uni-icons type="compose" size="14"></uni-icons>修改
			</button>
			<button type="default" size="mini" plain :class="[len > 0?'rece':'rece btn']" @tap="cancelReceipt" v-if="len>0">
				<uni-icons type="close" size="14"></uni-icons>取消收货
			</button>
			<button type="default" size="mini" plain :class="[firstStatus < 100?'rece':'rece btn']" @tap="receive(materialArr)" v-if="lastStatus < 800">
				<uni-icons type="plus" size="14"></uni-icons>收货
			</button>
		</view>
	</view>

</template>

<script>
	export default {
		data() {
			return {
				detailInfo: {},
				companyArr: [],
				warehouseArr: [],
				receiptTypeArr: [],
				materialArr: [],
				receiptInfoArr: [],
				materialTotal: null,
				timer: null,
				firstStatus: null,
				lastStatus: null,
				receiptId: null,
				params: {},
				len: null
				
			}
		},
		onLoad(option) {
			this.params = option;
			this.getReceiptHeader(option.id);
			this.getScanBill(option.code);
			this.getReceiptInfoByBill(option.code);
			uni.$on('updateReceiptDetail',() => {
				this.getReceiptHeader(option.id);
				this.getScanBill(option.code);
				this.getReceiptInfoByBill(option.code);
				this.$msg("保存成功!");
			});
			this.$http.dict.getCompaniesByToken().then(res => {
				console.log(res);
				this.companyArr = res.data
			});
			this.$http.dict.getReceiptType().then(res => {
				this.receiptTypeArr = res.data.data
			});
			this.$http.dict.getWarehouseByUserCode(uni.getStorageSync('historyUser').username).then(res => {
				this.warehouseArr = res.data.data
			});
			this.$http.receipt.listReceiptDetail(option.code).then(res => {
				console.log(res)
				if(res.data.code == 200) {
					this.len = res.data.rows.length;
				
				}
				
			})
		},

		onUnload() {
			
			if(this.timer) {
				clearTimeout(this.timer);  
				this.timer = null;  
			}  
		},
		methods: {
			// 获取入库信息
			getReceiptHeader(id) {
				this.$http.receipt.getReceiptHeader(id).then(res => {
					console.log(res)
					this.detailInfo = res.data.data;
					this.firstStatus = res.data.data.firstStatus;
					console.log(this.firstStatus)
					this.lastStatus = res.data.data.lastStatus
				});
			},
			// 获取入库订单明细
			getScanBill(code) {
				this.$http.receipt.listScanBill(code).then(res => {
					console.log(res)
					this.materialArr = res.data.data;
					let total = null;
					this.materialArr.forEach(item => {
						total += item.totalQty;	
					});
					this.materialTotal =total
				});
			},
			// 获取收货信息
			getReceiptInfoByBill(code) {
				this.$http.receipt.getReceiptInfoByBill(code).then(res => {
					console.log(res)
					this.receiptInfoArr = res.data.data;
					 this.containerIds = this.receiptInfoArr.map((item) => item.id);
				});
			},
			// 货主字典翻译
			companyCodeFormat(companyCode) {
				return this.selectCommonLabel(this.companyArr, companyCode);
			},
			// 仓库字典翻译
			warehouseCodeFormat(warehouseCode) {
				return this.selectCommonLabel(this.warehouseArr, warehouseCode);
			},
			// 入库类型字典翻译
			receiptTypeFormat(receiptType) {
				return this.selectCommonLabel(this.receiptTypeArr, receiptType);
			},
			// 删除按钮操作
			delReceipt(id,index) {
				console.log(id)
				uni.showModal({
					title: '提示',
					content: '确定要删除该入库单吗?',
					success: (res) => {
						 if (res.confirm) {
							 this.$http.receipt.delReceiptHeader(id).then(res => {
								if(res.data.code == 200){
									uni.$emit('detailReceiptDel',{index:index});
									this.timer = setTimeout(() => {
										uni.navigateBack()
									}, 500)
								} else {
									uni.showModal({
									    title: '提示',
									    content: res.data.msg
									});
								}
							 })
					      } else if (res.cancel) {
							  console.log('用户点击取消');
						  }
					}
				});
				
			},
			// 取消收货
			cancelReceipt() {
				this.$http.receipt.delReceiptContainer(this.containerIds.toString()).then(res => {
					if(res.data.code == 200) {
						this.getReceiptHeader(this.params.id);
						this.getScanBill(this.params.code);
						this.getReceiptInfoByBill(this.params.code);
						this.$msg('取消成功!')
					}else {
						uni.showModal({
							title: '提示',
							content: res.data.msg
						});
					}
				
				})
			},
			// 点击修改按钮
			goEdit() {
				uni.navigateTo({
					url: "edit"
				})
			},
			//点击收货按钮
			receive(data) {
				console.log(data)
				
				try {
				   uni.setStorageSync('receiptDetailMaterial', data);
				} catch (e) {
				    // error
				}
				uni.navigateTo({
					url: "receive?receiptCode="+ this.detailInfo.code
				})
			}
			
		}

	}
</script>

<style lang="scss" scoped>
		.content {
			overflow-y: auto;
			padding-bottom: 100rpx;
			
			.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: -5px;
                            }
						}
					}
				}
			}
			.bottom {
				margin-bottom: 20rpx;
			}
		
		}
		
		.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;
				margin: 0 $uni-spacing-row-base;
				border-radius: 90rpx !important;
				border-color: $uni-border-color;
			}
			
			.btn {
				width: 100%;
			}
		
		}
</style>