Storage-Integrated-Web/src/views/store-out.vue

<template>
	<div class="container">
		<my-nav
			@listener-out="outHandle"
			@listener-helper="helperHandle"
		></my-nav>
		<div class="content">
			<div class="reading" v-if="reading">
				出库扫描中<br />
				请下架所需要的物料<br />
				并将物料推出感应门
			</div>
			<div v-else style="height: 100%">
				<div
					style="
						display: flex;
						justify-content: space-between;
						align-items: center;
					"
				>
					<div style="width: 108px"></div>
					<div class="title">出库扫描</div>
					<div style="padding: 0 10px">
						<Button type="primary" @click="scanShow = true"
							>辅助扫描</Button
						>
					</div>
				</div>
				<div class="main">
					<div class="list-wrap">
						<div class="list" style="margin-right: 20px">
							<div class="sub-title">领料信息</div>
							<div
								style="
									height: calc(100% - 46px);
									overflow: auto;
								"
							>
								<div
									class="row"
									v-for="(item, index) in data"
									:key="index"
								>
									<div
										class="col"
										style="width: 50px; align-items: center"
									>
										<Icon
											type="ios-checkmark-circle"
											color="red"
											size="18"
											v-if="item.checked"
										/>
									</div>
									<div class="col" style="flex: 1">
										<div>{{ item.materialName }}</div>
										<div>
											物料长度：{{ item.quantity }}米
										</div>
									</div>
								</div>
								<!-- <div
									class="row"
									v-for="(item) in newData"
									:key="item.id"
								>
									<div
										class="col"
										style="width: 50px; align-items: center"
									>
										<Icon
											type="ios-checkmark-circle"
											color="red"
											size="18"
											v-if="item.checked"
										/>
									</div>
									<div class="col" style="flex: 1">
										<div>{{ item.materialName }}</div>
										<div>
											物料长度：{{ item.quantity }}米
										</div>
									</div>
								</div> -->
							</div>
						</div>
						<div class="list">
							<div class="sub-title">本次出库</div>
							<div
								style="
									height: calc(100% - 46px);
									overflow: auto;
								"
							>
								<div
									class="row"
									v-for="(
										item, index
									) in scanData.rfidTagItems"
									:key="index"
								>
									<div
										class="col"
										style="width: 50px; align-items: center"
									></div>
									<div
										class="col"
										style="flex: 1; overflow: hidden"
									>
										标签值：{{
											'**************' +
											item.rfidCode.substr(-6, 6)
										}}
									</div>
									<div
										class="col"
										style="flex: 1; overflow: hidden"
										:style="{
											color:
												item.scanRfidStatus === 1
													? 'orange'
													: item.scanRfidStatus === 2
													? 'red'
													: '#fff',
										}"
									>
										<div>{{ item.materialName }}</div>
										<div>
											物料长度：{{ item.quantity || 0 }}米
										</div>
									</div>
									<div class="col" style="width: 50px">
										<Icon
											type="ios-trash"
											size="20"
											color="red"
											@click="del(item, index)"
											style="cursor: pointer"
										/>
									</div>
								</div>
							</div>
						</div>
					</div>
					<div class="list-wrap bottom">
						<div class="list">
							<div class="sub-title">
								本次统计
								<a
									class="remark"
									href="#"
									@click="remarkShow = true"
									>填写备注</a
								>
							</div>
							<div
								style="
									height: calc(100% - 46px);
									overflow: auto;
								"
							>
								<div
									class="row"
									v-for="(
										item, index
									) in scanData.materialItems"
									:key="index"
								>
									<div
										class="col"
										style="flex: 3"
										:style="{
											color:
												item.scanRfidStatus === 1
													? 'orange'
													: item.scanRfidStatus === 2
													? 'red'
													: '#fff',
										}"
									>
										<div>{{ item.materialName }}</div>
									</div>
									<div
										class="col"
										style="flex: 2"
										:style="{
											color:
												item.scanRfidStatus === 1
													? 'orange'
													: item.scanRfidStatus === 2
													? 'red'
													: '#fff',
										}"
									>
										<div>
											出库件数：{{ item.tagCount || 1 }}
										</div>
									</div>
									<div
										class="col"
										style="flex: 2"
										:style="{
											color:
												item.scanRfidStatus === 1
													? 'orange'
													: item.scanRfidStatus === 2
													? 'red'
													: '#fff',
										}"
									>
										<div>
											出库数量：{{ item.totalQuantity }}米
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
				<div class="footer">
					<Button
						type="error"
						size="large"
						style="margin-right: 20px"
						@click="pass(0)"
						>重新扫描</Button
					>
					<Button type="success" size="large" @click.native="copyData()"
						>仓管校验</Button
					>
				</div>
			</div>
		</div>
		<Modal
			v-model="modal"
			:mask-closable="false"
			:closable="false"
			:fullscreen="true"
			:footer-hide="true"
		>
			<Progress
				:percent="percent"
				:stroke-color="['#108ee9', '#87d068']"
				:hide-info="true"
				style="width: 400px"
			/>
		</Modal>
		<Modal
			v-model="remarkShow"
			:closable="false"
			:footer-hide="true"
			class-name="vertical-center-modal"
			@on-cancel="cancel"
		>
			<div class="remark-content">
				<div class="title">填写备注</div>
				<Input v-model="remark" type="textarea" :rows="10" />
				<div class="btn">
					<Button @click="cfm" type="success" style="width: 120px"
						>确定</Button
					>
				</div>
			</div>
		</Modal>
		<!-- 辅助扫描 -->
		<Modal
			v-model="scanShow"
			class-name="vertical-center-modal"
			@on-cancel="cancel"
		>
			<div class="scan-title" slot="header">辅助扫描</div>
			<div class="scan-btn" slot="footer">
				<Button
					type="primary"
					style="width: 80px"
					@click="scanShow = false"
					>关闭</Button
				>
			</div>
			<div class="scan-content" v-if="otherData.length > 0">
				<div
					class="item"
					v-for="(item, index) in otherData"
					:key="index"
				>
					<div class="left">
						<div class="row">RFID标签：{{ item.rfidCode }}</div>
						<div class="row">物料编码：{{ item.materialCode }}</div>
						<div class="row">物料名称：{{ item.materialName }}</div>
						<div class="row">最近操作：{{ item.lastOpera }}</div>
					</div>
					<div class="right">
						<Button
							type="primary"
							ghost
							@click="add(item)"
							v-if="item.lastOpera.indexOf('入库') !== -1"
							>出库</Button
						>
					</div>
				</div>
			</div>
			<div v-else style="padding: 10px 0; color: #ffffff">暂无数据</div>
		</Modal>
		<!-- 仓管人脸校验 -->
		<Modal
			v-model="show"
			width="80%"
			class-name="vertical-center-modal"
			:footer-hide="true"
		>
			<check-modal  @face-check="faceCheck"></check-modal>
		</Modal>
		
	</div>
</template>

<script>
import MyNav from '@/components/my-nav'
import * as signalR from '@microsoft/signalr'
import withUrl from '@/config/withUrl'
import { MessagePackHubProtocol } from '@microsoft/signalr-protocol-msgpack'
import axios from 'axios'
import {
	PlcStorageOut,
	ReScan,
	GetApplyTakeStockOut,
	GetScanRfidStocInOut,
	DelScanRfid,
} from '@/api/integrated'
import { logOut } from '@/libs/util'
import CheckModal from './check-modal'

export default {
	name: 'store-in',
	data() {
		return {
			scanShow: false,
			show: false,
			modal: false,
			percent: 0,
			addTimer: null,
			overTimer: null,
			data: [], // 左侧数据列表
			scanData: {}, // 扫描数据
			otherData: [], // 扫描辅助数据
			tempDelData: [], // 临时删除列表
			connection: null,
			reading: false,
			remarkShow: false,
			remark: '',
			rfidTagItemsCopy:[],
			newData:[],
		}
	},
	components: {
		MyNav,
		CheckModal,
	},
	methods: {
		copyData(){
			this.show = true
			this.rfidTagItemsCopy = JSON.parse(JSON.stringify(this.scanData.rfidTagItems))
		},
		add(item) {
			item.totalQuantity = item.qty
			item.quantity = item.qty
			// 辅助扫描的添加一个isTemp 标识以供删除区分
			if (
				this.scanData.rfidTagItems.find(
					(scan) => scan.materialCode === item.materialCode
				)
			) {
				this.$Message.error('物料已添加')
			} else {
				this.scanData.rfidTagItems.push({ ...item, isTemp: true })
				this.scanData.materialItems.push({ ...item, isTemp: true })
				this.$Message.info('添加成功')
			}
		},
		cancel() {
			this.remark = ''
		},
		cfm() {
			this.remarkShow = false
		}, 
		faceCheck(val) {
			const v = this
			PlcStorageOut({
				inOutStorageNo: '',
				storageDoor: sessionStorage.getItem('door'),
				plcStationCode: sessionStorage.getItem('plcCode'),
				rfidList: this.rfidTagItemsCopy.map(
					(item) => item.rfidCode
				),
				remark: this.remark,
			}).then((res) => {
				if (res.code === 0) {
					this.$Message.info('出库成功！')
					const actual = []
					for (let i = 0; i < v.scanData.rfidTagItems.length; i++) {
						const element = v.scanData.rfidTagItems[i];
						actual.push({
							materialCode:element.materialCode,
							materialRfid:element.rfidCode,
							quantity:element.quantity
						})
					}
					axios.post('/cloudApi/stockDetail/submitRestrictedPicking',{
						appointInfo:v.newData,
						actual:actual,
						jobNo:window.localStorage.getItem('jobNo')
					}).then(res=>{
						
					})
					logOut()
				}
			})
			
		},
		/* 临时删除 */
		del(item, index) {
			if (item.isTemp) {
				this.scanData.rfidTagItems.splice(index, 1)
				this.scanData.materialItems.splice(index, 1)
				/* 添加一个临时删除数据 用于再次扫描数据时过滤已临时删除的数据 */
				this.tempDelData.push(item)
			} else {
				DelScanRfid({
					rfid: item.rfidCode,
					plcStationCode: sessionStorage.getItem('plcCode'),
				}).then((res) => {
					if (res.code === 0) {
						this.$Message.info('删除成功！')
						this.tempDelData.push(item)
						this.getList()
					}
				})
			}
		},
		/* 辅助扫描通知 */
		helperHandle(data) {
			this.otherData = data
		},
		/* 出库通知 */
		outHandle() {
			this.getList()
			clearTimeout(this.overTimer)
			this.overTimer = setTimeout(() => {
				clearInterval(this.addTimer)
				this.percent = 100
				setTimeout(() => {
					this.modal = false
				}, 500)
			}, 3000)
		},
		/* 是否通过 0否 1是 */
		pass(type) {
			if (type === 0) {
				this.$Message.info('请重新扫描出库！')
				this.scanData.rfidTagItems = []
				this.scanData.materialItems = []
				ReScan({
					reScanType: 1,
					storageType: sessionStorage.getItem('plcCode'),
					storageDoor: sessionStorage.getItem('door'),
				})
			} else if (type === 1) {
				// 出库
				console.log('pass口子')
				PlcStorageOut({
					inOutStorageNo: '',
					storageDoor: sessionStorage.getItem('door'),
					plcStationCode: sessionStorage.getItem('plcCode'),
					rfidList: this.scanData.rfidTagItems.map(
						(item) => item.rfidCode
					),
					remark: this.remark,
				}).then((res) => {
					if (res.code === 0) {
						this.$Message.info('出库成功！')
						logOut()
					}
				})
			}
		},
		getList() {
			GetScanRfidStocInOut({
				storagePlcCode: sessionStorage.getItem('plcCode'),
				stockInOutScanType: 1,
			}).then((scanRes) => {
				if (scanRes.code === 0) {
					this.reading = false
					this.scanData = { ...scanRes.result }
					/* 临时删除的数据不可再添加到出入库列表中 */
					this.tempDelData.forEach((temp) => {
						for (const index in this.scanData.rfidTagItems) {
							if (
								temp.rfidCode ===
								this.scanData.rfidTagItems[index].rfidCode
							) {
								this.scanData.rfidTagItems.splice(index, 1)
							}
						}
						for (const index in this.scanData.materialItems) {
							if (
								temp.rfidCode ===
								this.scanData.materialItems[index].rfidCode
							) {
								this.scanData.materialItems.splice(index, 1)
							}
						}
					})
					/* 勾选左侧列表通过扫描到的数据 */
					this.data.forEach((item) => {
						this.scanData.rfidTagItems.forEach((scan) => {
							if (item.materialCode === scan.materialCode) {
								item.checked = true
							}
						})
					})
				}
				
			})
		},
		/* 左侧列表 */
		getApplyTakeStockOut() {
			GetApplyTakeStockOut().then((res) => {
				if (res.code === 0) {
					this.data = res.result
				}
			})
		},
	},
	mounted() {
		this.otherData = JSON.parse(this.$route.query.otherData)
		this.newData = JSON.parse(this.$route.query.newData)
		console.log(JSON.parse(this.$route.query.newData))
		this.tempDelData = []
		this.getApplyTakeStockOut()
		this.getList()
		this.time = this.$dayjs().format('YYYY年MM月DD日 HH:mm')
		this.timer = setInterval(() => {
			this.time = this.$dayjs().format('YYYY年MM月DD日 HH:mm')
		}, 1000)
		this.addTimer = setInterval(() => {
			this.percent += 1
			if (this.percent === 100) {
				clearInterval(this.addTimer)
				clearTimeout(this.overTimer)
				this.modal = false
			}
		}, 100)
		this.overTimer = setTimeout(() => {
			clearInterval(this.addTimer)
			this.percent = 100
			setTimeout(() => {
				this.modal = false
			}, 500)
		}, 3000)
	},
	destroyed() {
		clearInterval(this.timer)
	},
}
</script>

<style lang="scss" scoped>
.container {
	width: 100vw;
	height: 100vh;
	overflow: auto;
	//background: rgba(2, 125, 180, 1);
	background-image: linear-gradient(
		270deg,
		#2c3034 0%,
		#50575e 49%,
		#2c3034 100%
	);
	.content {
		margin: 10px;
		height: calc(100% - 121.6px);
		overflow: hidden;
		box-sizing: border-box;
		//background: rgba(1, 84, 120, 1);
		border-radius: 10px;
		.reading {
			height: 100%;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 36px;
			font-weight: bold;
			color: #00ffff;
		}
		.title {
			padding-bottom: 10px;
			text-align: center;
			font-size: 36px;
			font-weight: bold;
			color: #2dc57c;
		}
		.main {
			height: calc(100% - 113.6px);
			display: flex;
			flex-direction: column;
			.list-wrap {
				flex: 2;
				overflow: hidden;
				padding: 0 10px;
				width: 100%;
				display: flex;
				justify-content: space-between;
				align-items: center;
				.list {
					position: relative;
					//padding: 0 10px;
					flex: 1;
					height: 100%;
					overflow: hidden;
					//background: rgba(2, 125, 180, 0.486274509803922);
					background: #2c3034;
					border-radius: 4px;
					border: solid 1px #3879e7;
					.sub-title {
						position: relative;
						padding: 5px 0;
						font-size: 24px;
						color: #0077ff;
						font-weight: bold;
						.remark {
							position: absolute;
							right: 10px;
							top: 50%;
							transform: translateY(-50%);
							font-size: 16px;
							font-weight: normal;
							color: #0077ff;
						}
					}
					.row {
						padding: 5px 0;
						display: flex;
						justify-content: space-between;
						align-items: center;
						//background: rgba(2, 167, 240, 1);
						border-top: 1px solid #2655ad;
						//border-radius: 5px;
						&:last-child {
							border-bottom: 1px solid #2655ad;
						}
						.col {
							padding: 0 5px;
							display: flex;
							flex-direction: column;
							align-items: flex-start;
							justify-content: center;
							text-align: left;
							color: #ffffff;
						}
					}
					.total {
						padding: 5px 10px;
						//position: absolute;
						left: 0;
						bottom: 0;
						text-align: left;
						font-size: 20px;
						font-weight: bold;
						color: #f59a23;
						.top {
							font-size: 24px;
						}
						.label {
							margin-left: 40px;
							display: inline-block;
							width: 100px;
						}
					}
				}
			}
			.bottom {
				margin-top: 20px;
				flex: 1;
				.row {
					border: none !important;
				}
				.col {
					padding: 0 20px !important;
				}
			}
		}
		.footer {
			padding: 10px 0;
			padding-bottom: 0;
			/deep/ .ivu-btn-large {
				border-radius: 20px;
				font-weight: bold;
				width: 150px;
			}
		}
	}
}
/deep/.ivu-modal-content {
	background: #2c3034;
}
/deep/.ivu-modal-body {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
}
/deep/.remark-content {
	padding: 16px;
	width: 100%;
	.title {
		font-size: 24px;
		font-weight: bold;
		text-align: center;
		color: #ffffff;
		padding-bottom: 10px;
	}
	.btn {
		text-align: center;
		padding-top: 10px;
	}
}
/deep/ .ivu-modal-header {
	border-bottom: none;
}
/deep/ .ivu-modal-footer {
	border-top: none;
}
.scan-title {
	font-size: 18px;
	font-weight: bold;
	color: #ffffff;
}
.scan-btn {
	text-align: center;
}
.scan-content {
	padding: 10px 16px;
	width: 100%;
	max-height: 40vh;
	overflow: auto;
	background-color: #3d3d3d;
	color: #ffffff;
	.item {
		margin-bottom: 5px;
		border-bottom: 1px solid #ffffff;
		display: flex;
		justify-content: space-between;
		align-items: center;
		&:last-child {
			margin-bottom: 0;
			border-bottom: none;
		}
		.left {
			flex: 1;
			overflow: hidden;
		}
		.right {
			width: 60px;
			/deep/ .ivu-btn-primary {
				background-color: rgb(204, 228, 255);
			}
		}
		.row {
			margin-bottom: 5px;
			word-break: break-all;
		}
	}
}
</style>