QianNiaoShop/pagesT/stock/InventoryDetails.vue

<template>
	<view class="detail-view">
		<view class="top-view clearfix">
			<view class="float_left">
				<text v-if="order_detail.auditStatus === 2" class="status-text">已审核</text>
				<text v-else class="status-text">待审核</text>
			</view>
		</view>
		<view class="detail-cont">
			<view class="info-li clearfix">
				<view class="label">单号</view>
				<view class="value" @click="copy(order_detail.no)">
					<u-icon margin-right="20" label-pos="left" :label="order_detail.no" name="copy" custom-prefix="custom-icon" size="24"></u-icon>
				</view>
			</view>
			<view class="info-li clearfix">
				<view class="label">仓库</view>
				<view class="value">{{ order_detail.warehouseName }}</view>
			</view>
			<view class="info-li clearfix">
				<view class="label">制单人</view>
				<view class="value">{{ order_detail.operatorName }}</view>
			</view>
			<view class="info-li clearfix">
				<view class="label">制单时间</view>
				<view class="value">{{ $u.timeFormat(order_detail.createTime, 'yyyy-mm-dd hh:MM:ss') }}</view>
			</view>
			<block v-if="order_detail.auditStatus === 2">
				<view class="info-li clearfix">
					<view class="label">审核人</view>
					<view class="value">{{ order_detail.auditName }}</view>
				</view>
				<view class="info-li clearfix">
					<view class="label">审核时间</view>
					<view class="value">{{ $u.timeFormat(order_detail.auditTime, 'yyyy-mm-dd hh:MM:ss') }}</view>
				</view>
			</block>
			<view class="goods-title">商品清单</view>
			<view class="goods-ul">
				<view class="goods-li clearfix" v-for="(item, index) in order_detail.details" :key="index">
					<view class="info">
						<view class="goods-name ellipsis">{{ item.materielName }}</view>
						<view class="goods-code">{{ item.materielCode }}</view>
						<view class="goods-num clearfix">
							<view class="float_left">{{ item.unitName }};{{ item.skuName }}</view>
							<text class="float_right">账面库存：{{ $utils.formatNub(item.documentInventoryNum) }}</text>
						</view>
						<view class="num-ul">
							<view class="num-li">
								<text>{{ $utils.formatNub(item.currentInventoryNum) }}</text>
								<view class="label">实盘库存</view>
							</view>
							<view v-if="item.isEq === 5" class="num-li">
								<text>{{ $utils.formatNub(item.otherNum) }}</text>
								<view class="label">其他单位</view>
							</view>
							<view class="num-li">
								<text style="color: #F67778; font-size: 28rpx;" v-if="item.differenceNum <= 0">{{ $utils.formatNub(item.differenceNum) }}</text>
								<text style="color: #00C395; font-size: 28rpx;" v-else>+{{ $utils.formatNub(item.differenceNum) }}</text>
								<view class="label">盈亏数量</view>
							</view>
							<view class="num-li" v-if="item.storageLocationName">
								<text>{{ item.areaName + '-' + item.storageLocationName }}</text>
								<view class="label">库区库位</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="remark-li">
				<view class="label">备注</view>
				<view class="remark">
					<text>{{ order_detail.remark || '无' }}</text>
				</view>
			</view>
		</view>
		<view class="detail-bottom" v-if="order_detail.auditStatus === 1">
			<view class="handel-btn" @click="goPage('/pagesT/stock/AddInventory?id=' + invenrory_id)">编辑</view>
			<view class="handel-btn" @click="openModel('确定要审核通过该盘点单吗？', '审核')">审核</view>
		</view>
		<u-modal v-model="model_show" :show-cancel-button="true" :content="model_content" @confirm="modelConfirm"></u-modal>
	</view>
</template>

<script>
export default {
	data() {
		return {
			model_tag: '',
			model_show: false,
			model_content: '',
			invenrory_id: 0,
			order_detail: {}
		};
	},
	onPullDownRefresh() {
		this.getStocktakingInfo();
	},
	computed: {
		userInfo() {
			return this.$store.state.userInfo;
		}
	},
	onLoad(options) {
		this.invenrory_id = options.id;
	},
	onShow() {
		this.getStocktakingInfo();
	},
	methods: {
		// 详情
		getStocktakingInfo() {
			this.$u.api
				.getStocktakingInfo(this.invenrory_id)
				.then(res => {
					uni.stopPullDownRefresh();
					this.order_detail = res.data;
				})
				.catch(err => {
					uni.stopPullDownRefresh();
				});
		},
		// 打开提示框
		openModel(content, tag) {
			this.model_content = content;
			this.model_show = true;
			this.model_tag = tag;
		},
		// 审核
		modelConfirm() {
			switch (this.model_tag) {
				case '审核':
					this.updateAuditStatusPurchase();
					break;
			}
		},
		// 审核订单
		updateAuditStatusPurchase() {
			this.$u.api
				.auditStocktaking(this.invenrory_id, {
					auditName: this.userInfo.name
				})
				.then(res => {
					this.$u.toast('审核成功');
					this.getStocktakingInfo();
				});
		}
	}
};
</script>

<style lang="scss" scoped>
.detail-view {
	padding-bottom: 100rpx;
}

.top-view {
	background-color: $uni-color-primary;
	height: 200rpx;
	padding: 0 30rpx;
	color: #ffffff;
	font-size: 40rpx;
	line-height: 100rpx;

	.status-text {
		margin-right: 10rpx;
	}

	.float_right {
		font-size: 28rpx;
	}
}

.detail-cont {
	width: 710rpx;
	margin: 0 auto;
	background-color: #ffffff;
	border-radius: 20rpx;
	padding: 20rpx 0;
	overflow: hidden;
	transform: translateY(-80rpx);

	.info-li {
		padding: 0 30rpx;
		line-height: 80rpx;

		.label {
			float: left;
			color: #6c6c6c;
		}

		.value {
			float: right;
		}

		.money-label {
			font-weight: bold;
		}

		.money-value {
			font-weight: bold;
			font-size: 30rpx;
		}
	}

	.remark-li {
		padding: 0 30rpx;

		.label {
			color: #6c6c6c;
			line-height: 60rpx;
		}
	}

	.b-b {
		border-bottom: 1px solid #eeeeee;
	}

	.goods-title {
		background-color: #5e6a84;
		line-height: 72rpx;
		width: 644rpx;
		margin: 30rpx auto 0;
		color: #ffffff;
		border-top-left-radius: 20rpx;
		border-top-right-radius: 20rpx;
		padding: 0 24rpx;
		position: relative;
		z-index: 1;
	}

	.goods-ul {
		padding: 0 30rpx 30rpx;
		box-shadow: 0px -3px 12rpx 0px #e4eaf5;
		border-bottom: 1px solid #eeeeee;

		.goods-li {
			padding: 24rpx 0;
			border-bottom: 1px solid #eeeeee;
			&:last-child {
				border-bottom: 0 none;
				padding-bottom: 0;
			}
			.info {
				.goods-name {
					width: 470rpx;
					height: 34rpx;
					line-height: 34rpx;
					font-weight: 700;
				}

				.goods-code {
					font-size: 24rpx;
					padding-top: 10rpx;
				}

				.goods-num {
					padding-top: 10rpx;
					font-size: 24rpx;
				}
			}
		}
	}
}
.num-ul {
	display: flex;
	font-size: 24rpx;
	padding-top: 20rpx;
	.num-li {
		flex: 3;
		border-right: 1px solid #ecf0f7;
		text-align: center;
		.label{
			color: #879BBA;
			padding-top: 6rpx;
		}
		&:last-child {
			border-right: 0 none;
		}
	}
}
</style>