jhlapp/pagesT/stock/LossDetails.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>
							<view class="float_right">账目库存：{{ $utils.formatNub(item.inventoryNum) }}</view>
						</view>
						<view class="num-ul">
							<view class="num-li">
								<text>{{ $utils.formatNub(item.lossAmount) }}</text>
								<view class="label">当前成本</view>
							</view>
							<view class="num-li">
								<text>{{ $utils.formatNub(item.num) }}</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>{{ $utils.formatNub($NP.times(item.lossAmount, item.num)) }}</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 v-if="$accessCheck($Access.LossReportDeleteLossReport)" class="handel-btn info-btn" @click="openModel('请确认是否要删除报损订单？', '删除')">删除</view>
			<view v-if="$accessCheck($Access.LossReportAuditLossReport)" 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: '',
			order_id: 0,
			order_detail: {}
		};
	},
	onPullDownRefresh() {
		this.getReportLossInfo();
	},
	computed: {
		userInfo() {
			return this.$store.state.userInfo;
		}
	},
	onLoad(options) {
		this.order_id = options.id;
	},
	onShow() {
		this.getReportLossInfo();
	},
	methods: {
		// 详情
		getReportLossInfo() {
			this.$u.api
				.getReportLossInfo(this.order_id)
				.then(res => {
					uni.stopPullDownRefresh();
					this.order_detail = res.data;
					console.log(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;
				case '删除':
					this.delPurchase();
					break;
			}
		},
		// 审核订单
		updateAuditStatusPurchase() {
			this.$u.api
				.auditReportLoss(this.order_id, {
					auditName: this.userInfo.name
				})
				.then(res => {
					this.$u.toast('审核成功');
					setTimeout(() => {
						uni.navigateBack();
					}, 2000);
					this.getPurchaseInfoById();
				});
		},
		// 删除报损单
		delPurchase() {
			this.$u.api.deleteReportLoss(this.order_id).then(res => {
				this.$u.toast('已删除');
				setTimeout(() => {
					uni.navigateBack();
				}, 2000);
			});
		}
	}
};
</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-top: 24rpx;
			.goods-img {
				margin-right: 20rpx;
				image {
					width: 150rpx;
					height: 150rpx;
					border-radius: 8rpx;
					display: block;
				}
			}
			.info {
				.goods-name {
					width: 470rpx;
					height: 34rpx;
					font-weight: 30rpx;
					font-weight: bold;
					line-height: 34rpx;
				}
				.goods-code {
					font-size: 24rpx;
					padding-top: 10rpx;
				}
				.goods-num {
					padding-top: 10rpx;
					font-size: 24rpx;
					.price {
						font-size: 28rpx;
						font-weight: bold;
						color: $uni-color-error;
					}
				}
			}
		}
	}
}
.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>