QianNiaoShop/pagesT/stock/GodownEntryDetail.vue

<template>
	<view class="detail-view">
		<view class="top-view clearfix">
			<view class="float_left">
				<text v-if="bill_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(bill_detail.no)">
					<u-icon margin-right="20" label-pos="left" :label="bill_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">{{ bill_detail.typeName }}</view>
			</view>
			<view class="info-li clearfix">
				<view class="label">仓库</view>
				<view class="value">{{ bill_detail.warehouseName }}</view>
			</view>
			<view class="info-li clearfix">
				<view class="label">制单人</view>
				<view class="value">{{ bill_detail.operatorName }}</view>
			</view>
			<view class="info-li clearfix">
				<view class="label">制单时间</view>
				<view class="value">{{ $u.timeFormat(bill_detail.createTime, 'yyyy-mm-dd hh:MM:ss') }}</view>
			</view>
			<view class="info-li clearfix" v-if="bill_detail.auditStatus === 2">
				<view class="label">审核人</view>
				<view class="value">{{ bill_detail.auditName }}</view>
			</view>
			<view class="info-li clearfix" v-if="bill_detail.auditStatus === 2">
				<view class="label">入库时间</view>
				<view class="value">{{ $u.timeFormat(bill_detail.auditTime, 'yyyy-mm-dd hh:MM:ss') }}</view>
			</view>
			<view class="goods-title">商品清单</view>
			<view class="goods-ul">
				<view class="goods-li" v-for="(item, index) in bill_detail.details" :key="index">
					<view class="clearfix">
						<view class="goods-img float_left">
							<image :src="item.images && item.images.length ? item.images[0] : '../../static/img/goods.png'" mode="aspectFill"></image>
						</view>
						<view class="float_left 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">x{{ $utils.formatNub(item.num) }}{{ item.unitName }}</text>
							</view>
						</view>
					</view>
					<view class="num-ul">
						<view class="num-li">
							<view class="label">入库</view>
							<view class="value">
								<input v-if="bill_detail.auditStatus === 1" type="digit" v-model="item.inNum" />
								<text v-else>{{ $utils.formatNub(item.inNum) }}</text>
							</view>
						</view>
						<view v-if="item.isEq === 5" class="num-li">
							<view class="label">其他单位</view>
							<view class="value">
								<input v-if="bill_detail.auditStatus === 1" type="digit" v-model="item.otherNum" />
								<text v-else>{{ $utils.formatNub(item.otherNum) }}</text>
							</view>
						</view>
						<view v-if="shelfLifeSetUp === 5" class="num-li">
							<view class="label">生产日期</view>
							<view class="value"><input disabled @click="openTime(index)" :value="$u.timeFormat(item.productionData)" /></view>
						</view>
						<view v-if="enableLocationManagement === 5" class="num-li">
							<view class="label">库位</view>
							<view class="value">
								<input
									@click="selLocation(index)"
									disabled
									:placeholder="bill_detail.auditStatus === 2 ? '未设置' : '请选择'"
									placeholder-class="input-pl"
									v-model="item.storageLocationName"
								/>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="remark-li">
				<view class="label">备注</view>
				<view class="remark">
					<u-input v-if="bill_detail.auditStatus === 1" v-model="bill_detail.remark" type="textarea" border />
					<text v-else>{{ bill_detail.remark || '无' }}</text>
				</view>
			</view>
		</view>
		<u-picker v-model="time_show" @confirm="timeConfirm" mode="time"></u-picker>
		<view v-if="$accessCheck($Access.InventoryInUpdateInventoryInStatus) && bill_detail.auditStatus !== 2" class="detail-bottom">
			<view class="handel-btn" @click="openModel('确定要审核通过该订单吗？', '审核')">审核</view>
		</view>
		<u-modal v-model="model_show" :show-cancel-button="true" :content="model_content" @confirm="modelConfirm" @cancel="modelCancel"></u-modal>
	</view>
</template>

<script>
export default {
	data() {
		return {
			time_show: false,
			model_tag: '',
			model_show: false,
			model_content: '',
			bill_id: 0,
			bill_detail: {},
			goods_index: 0,
			warehouseLocation: ''
		};
	},
	onPullDownRefresh() {
		this.getInventoryInInfo();
	},
	computed: {
		userInfo() {
			return this.$store.state.userInfo;
		},
		shelfLifeSetUp() {
			return parseInt(this.$store.state.basicSet.shelfLifeSetUp);
		},
		enableLocationManagement() {
			return parseInt(this.$store.state.basicSet.enableLocationManagement);
		}
	},
	watch: {
		warehouseLocation(val) {
			if (val) {
				const target = this.$u.deepClone(this.bill_detail);
				target.details[this.goods_index] = {
					...target.details[this.goods_index],
					areaId: val.areaId,
					areaName: val.areaName,
					areaCode: val.areaCode,
					storageLocationId: val.id,
					storageLocationName: val.name,
					storageLocationCode: val.code
				};
				this.bill_detail = target;
			}
		}
	},
	onLoad(options) {
		this.bill_id = options.id;
		this.getInventoryInInfo();
	},
	methods: {
		// 去选择库区库位页面
		selLocation(index) {
			if (this.bill_detail.auditStatus === 2) {
				return;
			}
			this.goods_index = index;
			this.goPage('/pagesT/stock/WarehouseRegion');
		},
		// 详情
		getInventoryInInfo() {
			this.$u.api
				.getInventoryInInfo(this.bill_id)
				.then(res => {
					uni.stopPullDownRefresh();
					this.bill_detail = {
						...res.data,
						details: res.data.details.map(item => {
							return {
								...item,
								inNum: item.inNum ? Number(item.inNum) : Number(item.num),
								otherNum: Number(item.otherNum) || 0,
								productionData: item.productionData || parseInt(new Date().getTime() / 1000),
								areaId: item.areaId || '',
								areaName: item.areaName || '',
								areaCode: item.areaCode || '',
								storageLocationId: item.storageLocationId || '',
								storageLocationName: item.storageLocationName || '',
								storageLocationCode: item.storageLocationCode || ''
							};
						})
					};
				})
				.catch(err => {
					uni.stopPullDownRefresh();
				});
		},
		openTime(index) {
			this.time_show = true;
			this.goods_index = index;
		},
		timeConfirm(obj) {
			const target = this.$u.deepClone(this.bill_detail);
			target.details[this.goods_index].productionData = obj.timestamp;
			this.bill_detail = target;
		},
		// 打开提示框
		openModel(content, tag) {
			this.model_content = content;
			this.model_show = true;
			this.model_tag = tag;
		},
		// 审核
		modelConfirm() {
			switch (this.model_tag) {
				case '审核':
					this.updateInventoryInStatus();
					break;
			}
		},
		modelCancel() {},

		// 审核订单
		updateInventoryInStatus() {
			// 开启保质期设置，进行保质期验证
			if (this.shelfLifeSetUp === 5) {
				let gindex = 0;
				let gdate = false;
				for (let i in this.bill_detail.details) {
					let item = this.bill_detail.details[i];
					if (!item.productionData) {
						gindex = i;
						gdate = true;
						break;
					}
				}
				if (gdate) {
					this.$u.toast(`请选择第${Number(gindex) + 1}行的生产日期`);
					return;
				}
			}
			let details = this.bill_detail.details.map(item => {
				let obj = {
					...item,
					inNum: Number(item.inNum),
					otherNum: Number(item.otherNum),
					inCost: item.unitPrice,
					inCostTotal: item.totalPrice
				};
				// // 开启保质期设置，进行保质期验证
				// if (this.shelfLifeSetUp === 5) {
				// 	obj.productionData = parseInt(item.productionData / 1000);
				// }
				return obj;
			});
			let params = {
				id: this.bill_id,
				auditName: this.userInfo.name,
				remark: this.bill_detail.remark,
				details: details,
				costAllocation: 0,
				costAllocationType: ''
			};
			this.$u.api.updateInventoryInStatus(params).then(res => {
				this.$u.toast('审核成功');
				this.getInventoryInInfo();
			});
		}
	}
};
</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;
					background-color: #f5f5f5;
				}
			}
			.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;
					}
				}
			}
			.num-ul {
				display: flex;
				font-size: 24rpx;
				padding-top: 10rpx;
				.num-li {
					flex: 4;
					border-right: 1px solid #ecf0f7;
					text-align: center;
					padding: 0 10rpx;
					&:last-child {
						border-right: 0 none;
					}
					.label {
						color: #879bba;
					}
					.value {
						height: 40rpx;
						line-height: 40rpx;
						border-bottom: 1px solid $uni-color-primary;
						input {
							font-size: 24rpx;
							height: 40rpx;
							line-height: 40rpx;
						}
					}
				}
			}
		}
	}
}
</style>