QianNiaoShop/pagesT/Purchase/PurchaseDetail.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.buyerName }}</view>
			</view>
			<view class="info-li clearfix">
				<view class="label">供应商</view>
				<view class="value">{{ order_detail.supplierName }}</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="goods-img float_left"><image src="../../static/img/goods.png" mode="aspectFill"></image></view>
					<view class="float_left info">
						<view class="goods-name ellipsis">{{ item.goodsName }}</view>
						<view class="goods-code clearfix">
							<view class="float_left">{{ item.goodsCode }}</view>
							<text class="float_right">x{{ $utils.formatNub(item.buyerNum) }}</text>
						</view>
						<view class="goods-num clearfix">
							<view class="float_left">{{ item.unitName }};{{ item.skuName }}</view>
							<text class="float_right">其他单位:{{ $utils.formatNub(item.otherNum) }}</text>
						</view>
						<view class="goods-num clearfix">
							<view class="float_left ">
								<text class="price">{{ $utils.formattedNumber(item.buyerUnitPrice) }}</text>
							</view>
							<view class="float_right">
								小计：
								<text class="price">{{ $utils.formattedNumber(item.subtotalPrice) }}</text>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="info-li clearfix">
				<view class="label">其他金额</view>
				<view class="value">{{ $utils.formattedNumber(order_detail.otherAmount) }}</view>
			</view>
			<view class="info-li clearfix">
				<view class="label">优惠金额</view>
				<view class="value">
					<text class="error-color">-</text>
					{{ $utils.formattedNumber(order_detail.couponAmount) }}
				</view>
			</view>

			<view class="info-li clearfix">
				<view class="label money-label">采购金额</view>
				<view class="value money-value">{{ $utils.formattedNumber(order_detail.purchaseAmount) }}</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.PurchaseOrderDelPurchase)" class="handel-btn info-btn" @click="openModel('请确认是否要删除采购订单？', '删除')">删除</view>
			<view v-if="$accessCheck($Access.PurchaseOrderEditPurchase)" class="handel-btn" @click="goPage('/pagesT/Purchase/AddPurchase?id=' + order_id)">编辑</view>
			<view v-if="$accessCheck($Access.PurchaseOrderUpdateAuditStatus)" 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.getPurchaseInfoById();
	},
	computed: {
		userInfo() {
			return this.$store.state.userInfo;
		}
	},
	onLoad(options) {
		this.order_id = options.id;
	},
	onShow() {
		this.getPurchaseInfoById();
	},
	methods: {
		// 详情
		getPurchaseInfoById() {
			this.$u.api
				.getPurchaseInfoById(this.order_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;
				case '删除':
					this.delPurchase();
					break;
			}
		},
		// 审核订单
		updateAuditStatusPurchase() {
			this.$u.api
				.updateAuditStatusPurchase(this.order_id, {
					auditStatus: '2',
					auditName: this.userInfo.name
				})
				.then(res => {
					this.$u.toast('审核成功');
					this.getPurchaseInfoById();
				});
		},
		// 删除采购单
		delPurchase() {
			this.$u.api.delPurchase(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;
					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;
					}
				}
			}
		}
	}
}
</style>