byte-sailing-storage-android/pages/store-in-manage/quality/quality-detail.vue

<!-- 订单详情 -->
<template>
	<view class="container-wrap">
		<uni-nav-bar title="订单详情" :status-bar="true" background-color="#3F92F9" color="#FFF">
			<view slot="left">
				<u-icon name="account-fill" color="#FFF" size="35"></u-icon>
				<span style="padding: 0 5rpx;color: #FFFFFF;">{{ userInfo.name }}</span>
			</view>
			<view slot="right" @tap="$utils.back()">
				<span style="color: #FFFFFF;">返回</span>
			</view>
		</uni-nav-bar>
		<view class="container">
			<div class="top">
				<view class="info">
					<view class="row">
						<view class="col">
							<view class="label">合同号：</view>
							<view class="value">{{ option.purchaseBillNo }}</view>
						</view>
					</view>
					<view class="row">
						<view class="col">
							<view class="label">批次号：</view>
							<view class="value">{{ option.batchNo }}</view>
						</view>
					</view>
					<view class="row">
						<view class="col">
							<view class="label">供应商：</view>
							<view class="value">{{ option.supplier }}</view>
						</view>
					</view>
					<view class="row">
						<view class="col">
							<view class="label">物料名称：</view>
							<view class="value">{{ option.materialName }}</view>
						</view>
					</view>
					<view class="row">
						<view class="col">
							<view class="label">物料规格：</view>
							<view class="value">{{ option.spec }}</view>
						</view>
					</view>
					<view class="row">
						<view class="col">
							<view class="label">到货时间：</view>
							<view class="value">{{ option.arriveTime }}</view>
						</view>
					</view>
					<view class="row">
						<view class="col">
							<view class="label">申购数量：</view>
							<view class="value">{{ option.purchaseCount }}</view>
						</view>
						<view class="col">
							<view class="label">到货数量：</view>
							<view class="value">{{ option.inStockQty }}</view>
						</view>
					</view>
				</view>
				<view class="title">质检记录</view>
				<view class="sub-title">共有{{ option.checkNum }}个物料待质检</view>
			</div>
			<view class="list">
				<view class="item" v-for="(item, index) in list" :key="item.checkDetailId">
					<view class="row"> 
						<view class="col">
							<view class="label">标签值：</view>
							<view class="value">{{ item.rfidCode }}</view>
						</view>
					</view>
					<view class="row">
						<view class="col">
							<view class="label">物料名称：</view>
							<view class="value">{{ item.materialName }}</view>
						</view>
					</view>
					<view class="row border">
						<view class="col">
							<view class="label">物料数量：</view>
							<view class="value">{{ item.quantity }}</view>
						</view>
					</view>
					<view class="row border" style="justify-content: center;padding-bottom: 20rpx;">
						<span>质检结论：</span>
						<span 
							:class="item.checkJudgment === 0 ? 'orange' : item.checkJudgment === 1 ? 'blue' : 'red'"
						>
							{{ item.checkJudgment === 0 ? '目测合格' : item.checkJudgment === 1 ? '合格' : '不合格' }}
						</span>
					</view>
					<view class="row" style="justify-content: center;">
						<span style="color: red;font-weight: bold;" @tap="del(index)">删除</span>
					</view>
				</view>
			</view>
			<view class="btn" v-if="option.stockBatchNum === 0">
				<u-button v-if="option.hasExemptInspec" disabled throttleTime="300" type="primary" style="width: 100%;">免检审批中</u-button>
				<u-button v-else throttleTime="300" type="primary" plain style="width: 100%;" @click="toNoChack">申请免检</u-button>
			</view>
			<view class="btn" v-else-if="option.stockBatchNum >= option.checkNum">
				<u-button v-if="option.checkNum === list.length" throttleTime="300" type="primary" style="width: 100%;" @click="(cfmShow = true) && (isNoCheck = false)">结束质检</u-button>
				<u-button v-else throttleTime="300" type="primary" style="width: 100%;" @click="bind">开始质检</u-button>
			</view>
			<view class="btn" v-else>
				<u-button v-if="(option.stockBatchNum === list.length) && (option.hasExemptInspec)" disabled type="primary" style="width: 100%;">免检审批中</u-button>
				<u-button v-if="(option.stockBatchNum === list.length) && (!option.hasExemptInspec)" throttleTime="300" type="primary" style="width: 100%;" @click="(cfmShow = true) && (isNoCheck = true)">结束质检</u-button>
				<u-button v-if="option.stockBatchNum !== list.length" throttleTime="300" type="primary" style="width: 100%;" @click="bind">开始质检</u-button>
			</view>
			<!-- 物料修正 -->
			<u-modal
				v-model="show" 
				:show-title="false"
				:show-confirm-button="false"
				:show-cancel-button="false"
			>
				<view class="modal">
					<view class="img">
						<image :src="error" mode="widthFix"></image>
					</view>
					<view class="content">
						质检出现布料短少记录<br/>
						将自动发起数量修正
					</view>
					<view class="btn">
						<u-button throttleTime="300" type="primary" size="medium" style="width: 250rpx;" @click="toChange">确认</u-button>
					</view>
				</view>
			</u-modal>
			<u-modal
				v-model="delShow" 
				:show-confirm-button="true"
				:show-cancel-button="true"
				@confirm="delCfm"
			>
				<view class="modal">
					<view class="content">
						是否删除？
					</view>
				</view>
			</u-modal>
			<my-dialog v-model="cfmShow" title="本次质检结果为:" :closeOnClickOverlay="true"
				@cancelClick="cfmShow = false" @cfmClick="over">
				<view slot="content" style="width: 100%;padding: 0 20rpx;">
					<view class="row">
						<view class="col" style="justify-content: center;">
							<view class="label" style="width: 160rpx;font-size: 32rpx;font-weight: bold;color: #19BE6B;">合格：</view>
							<view class="value" style="flex: 0;font-size: 32rpx;font-weight: bold;color: #19BE6B;">
								{{ list.filter(item => item.checkJudgment === 1).length }}
							</view>
						</view>
					</view>
					<view class="row">
						<view class="col" style="justify-content: center;">
							<view class="label" style="width: 160rpx;font-size: 32rpx;font-weight: bold;color: #834100;">目测合格：</view>
							<view class="value" style="flex: 0;font-size: 32rpx;font-weight: bold;color: #834100;">
								{{ list.filter(item => item.checkJudgment === 0).length }}
							</view>
						</view>
					</view>
					<view class="row">
						<view class="col" style="justify-content: center;">
							<view class="label" style="width: 160rpx;font-size: 32rpx;font-weight: bold;color: #d50000;">不合格：</view>
							<view class="value" style="flex: 0;font-size: 32rpx;font-weight: bold;color: #d50000;">
								{{ list.filter(item => item.checkJudgment === 2).length }}
							</view>
						</view>
					</view>
				</view>
			</my-dialog>
		</view>
	</view>
</template>

<script>
	import error from '../../../static/images/error.png'
	export default {
		data() {
			return {
				index: '',
				error,
				cfmShow: false,
				delShow: false,
				show: false,
				option: {},
				list: [],
				changeData: {},
				isNoCheck: false, // 是否免检
				isCfm: false, // 是否已结束质检
			};
		},
		methods: {
			/* 申请免检 */
			toNoChack () {
				this.$utils.open(`/pages/store-in-manage/quality/quality-no-check?data=${this.$utils.object2Code(this.option)}`)
			},
			delCfm() {
				this.list.splice(this.index, 1)
				this.$storage.setStorage(this.option.stockQuantityCheckId, this.list)
				this.index = ''
			},
			/* 删除质检记录 */
			del(index) {
				this.index = index
				this.delShow = true
			},
			/* 跳转数量修正 */
			toChange() {
				let data = {
					...this.changeData,
					...this.option
				}
				this.$utils.open(`/pages/store-in-manage/quality/quality-update?data=${this.$utils.object2Code(data)}`)
			},
			/* 结束质检 跳转数量修正 */
			over() {
				if(this.isNoCheck && this.option.hasQtyAdjust) {
					/* 如果结束质检需要免检 且已数量修正 */
					return this.$utils.open(`/pages/store-in-manage/quality/quality-no-check?data=${this.$utils.object2Code(this.option)}`)
				} else if(this.isNoCheck && this.isCfm) {
					/* 如果结束质检需要免检 且已结束质检 */
					if(this.option.hasQtyAdjust) {
						/* 已提交且已数量修正 */
						return this.$utils.open(`/pages/store-in-manage/quality/quality-no-check?data=${this.$utils.object2Code(this.option)}`)
					} else {
						this.$http.GetQuantityCheckLake({
							stockQuantityCheckId: this.option.stockQuantityCheckId
						}).then(res => {
							if(res.code === 0) {
								this.changeData = {
									...res.result,
									isNoCheck: true
								}
								this.cfmShow = false
								this.show = true
							}
						})
						return
					}
				}
				console.log('over')
				console.log(this.list)
				this.$http.SubmitStockCheck({
					dataItems: this.list,
					uniqueCode: this.option.stockQuantityCheckId
				}).then(res => {
					console.log(res)
					if(res.code === 0) {
						this.cfmShow = false
						this.$http.GetQuantityCheckLake({
							stockQuantityCheckId: this.option.stockQuantityCheckId
						}).then(res => {
							console.log(res)
							if(res.code === 0) {
								if(this.isNoCheck) {
									/* 需要数量修正 且需要免检 */
									this.changeData = {
										...res.result,
										isNoCheck: true
									}
								} else {
									this.changeData = {
										...res.result
									}
								}
								this.show = true
							} else {
								/* 如果结束质检 不需要数量修正 */
								if(this.isNoCheck) {
									/* 需要免检 */
									return this.$utils.open(`/pages/store-in-manage/quality/quality-no-check?data=${this.$utils.object2Code(this.option)}`)
								} else {
									this.$storage.removeStorageSync(this.option.stockQuantityCheckId)
									this.$utils.back()
								}
							}
						})
					}
				})
			},
			/* 绑定标签 */
			bind() {
				this.$utils.open(`/pages/store-in-manage/quality/quality-scan?id=${this.option.stockQuantityCheckId}`)
			},
			/* 获取质检列表 */
			getList() {
				this.$http.GetStockCheckRecord({
					stockQuantityCheckId: this.option.stockQuantityCheckId
				}).then(res => {
					console.log(res)
					if(res.code === 0) {
						this.list = res.result
						if (this.list.length === 0) {
							this.list = this.$storage.getStorageSync(this.option.stockQuantityCheckId) || []
							console.log('?????list')
							console.log(this.list)
						} else {
							/* 如果接口列表有数据则代表该质检单已提交过 */
							this.isCfm = true
						}
					}
				})
			}
		},
		onLoad(option) {
			this.option = this.$utils.code2Object(option.data)
			this.getList()
			uni.$on('getScanData', res => {
				let data = this.$utils.code2Object(res)
				console.log(data)
				let findObj = this.list.find(item => item.rfidCode === data.rfidCode)
				if (findObj) {
					this.$msg.showToast('物料已质检！')
				} else {
					this.list.push(this.$utils.code2Object(res))
					this.$storage.setStorage(this.option.stockQuantityCheckId, this.list)
				}
			})
		},
		onShow() {
			// this.getList()
		},
		onUnload() {
			uni.$off('getScanData')
		}
	}
</script>

<style lang="scss" scoped>
.container-wrap {
	overflow: hidden;
	.container {
		padding: 10rpx;
		height: calc(100vh - var(--status-bar-height) - 44px);
		overflow: hidden;
		display: flex;
		flex-direction: column;
		.top {
			.info {
				padding: 10rpx 20rpx;
				font-size: 32rpx;
			}
			.title {
				margin-top: 20rpx;
				font-size: 36rpx;
				font-weight: bold;
				text-align: center;
			}
			.sub-title {
				padding: 10rpx 0;
				font-size: 24rpx;
				text-align: center;
				color: #7f7f7f;
			}
		}
		.list {
			padding: 10rpx 0;
			margin-bottom: 10rpx;
			flex: 1;
			overflow: auto;
			background-color: #FFFFFF;
			.item {
				padding: 20rpx;
				margin-bottom: 10rpx;
				background-color: #FFFFFF;
				border: 1rpx solid rgba(215, 215, 215, 1);
				border-radius: 10rpx;
				.row {
					&.border {
						border-bottom: 1px solid rgba(215, 215, 215, 1);
					}
					.orange {
						color: rgb(245, 154, 35);
					}
					.blue {
						color: #02A7F0;
					}
					.red {
						color: red;
					}
				}
			}
		}
	}
}
.modal {
	padding: 40rpx 0;
	text-align: center;
	.img {
		margin: auto;
		width: 200rpx;
	}
	.content {
		padding: 30rpx 0;
		font-size: 36rpx;
		font-weight: bold;
	}
}
</style>