zhuangpeimespda/pages/produceManagement/scanLabelReport/scanLabelReport.vue

<template>
	<!--XXX 2025-04-06 工单报工（打印标签后，扫标签报工版本【新】） -->
	<view>
		<uni-card>
			<ScanInput v-if="scanType === 1" @scanConfirm="scanConfirm" placeholder="请扫外箱二维码"></ScanInput>
			<ScanInput v-if="scanType === 2 && partsLabelList.length === 0" @scanConfirm="scanConfirm" placeholder="请扫首标签二维码"></ScanInput>
			<ScanInput v-if="scanType === 2 && partsLabelList.length === 1" @scanConfirm="scanConfirm" placeholder="请扫末标签二维码"></ScanInput>
		</uni-card>

		<uni-card>
			<view class="report-form-item">
				<view class="report-form-label">工单号</view>
				<view class="report-form-value">{{ formData.fkWorkorder }}</view>
			</view>
			<view class="report-form-item">
				<view class="report-form-label">产品编号</view>
				<view class="report-form-value">{{ formData.productionCode }}</view>
			</view>
			<view class="report-form-item">
				<view class="report-form-label">产品名称</view>
				<view class="report-form-value">{{ formData.productionName }}</view>
			</view>
			<view class="report-form-item">
				<view class="report-form-label">规格</view>
				<view class="report-form-value">{{ formData.specification }}</view>
			</view>
			<view class="report-form-item">
				<view class="report-form-label">外箱标签</view>
				<view class="report-form-value">{{ packageLabelInfo.boxLabel }}</view>
			</view>
		</uni-card>
		<uni-card v-if="scanType === 2" class="report-box">
			<view class="report-box-title">首标签和末标签</view>
			<view class="report-box-parts-list">
				<view class="reprot-box-parts-list-item" v-for="(item, index) in partsLabelList" :key="index">
					<view class="reprot-box-parts-list-item-left">
						<view class="reprot-box-parts-list-item-title">{{ item.title }}</view>
						<view class="reprot-box-parts-list-item-content">{{ item.content }}</view>
					</view>

					<view class="reprot-box-parts-list-item-right">
						<view>{{ `${index + 1}/${partsLabelList.length}` }}</view>
						<uni-icons type="trash-filled" color="red" size="30" @click="remove(index)"></uni-icons>
					</view>
				</view>
			</view>
		</uni-card>
		<!-- TODO 暂时报工逻辑 -->
		<uni-card v-if="partsLabelList.length > 0">
			<uni-forms label-width="80px" label-align="right">
				<uni-forms-item label="报工数" name="finishedNum">
					<uni-easyinput type="number" v-model.number="formData.finishedNum" placeholder="请输入报工数" />
				</uni-forms-item>
			</uni-forms>
		</uni-card>
		<view class="bottom-box">
			<button v-if="scanType === 2 && partsLabelList.length === 2" :disabled="loading" type="primary" @click="submit">执行报工</button>
		</view>
		<!-- 初次进入校验 -->
		<view>
			<uni-popup ref="dialogRef" type="dialog">
				<uni-popup-dialog
					:title="dialog.title"
					:content="dialog.content"
					:type="dialog.type"
					cancelText="关闭"
					confirmText="确认"
					@confirm="dialogConfirm"
					@close="dialogClose"
				></uni-popup-dialog>
			</uni-popup>
		</view>
		<!-- 删除确认对话框 -->
		<view>
			<uni-popup ref="deleteDialogRef" type="dialog">
				<uni-popup-dialog
					title="确认删除"
					content="确定要删除该标签吗？"
					cancelText="取消"
					confirmText="删除"
					@confirm="confirmDelete"
					@close="closeDeleteDialog"
				></uni-popup-dialog>
			</uni-popup>
		</view>
	</view>
</template>

<script>
// 工单相关报工基础Api
import { InspectionBoxLabel, InspectionProductLabel, BoxLabelAndProductLabel } from '@/api/workorder/index.js';
export default {
	onLoad: function (option) {
		this.$nextTick(() => {
			this.formData = JSON.parse(JSON.stringify(option));
		});
	},
	data() {
		return {
			loading: false,
			dialogRef: null,
			dialog: {
				title: '操作提醒',
				content: '',
				type: 'warning'
			},
			deleteIndex: null,
			deleteDialogRef: null,
			// 工单信息
			formData: {
				id: null,
				finishNum: 0
			},
			// 扫码类型 1-外箱标签 2-内标签
			scanType: 1,
			// 外箱标签信息
			packageLabelInfo: {
				boxLabel: '',
				productionCode: ''
			},
			// 产品标签清单
			partsLabelList: []
		};
	},
	methods: {
		// 标签扫码
		async scanConfirm(val) {
			try {
				this.loading = true;
				const _value = val;
				const _type = this.scanType;

				if (_value === '' || _value === null) {
					this.loading = false;
					this.dialog.content = '扫码结果为空！';
					this.dialog.type = 'warn';
					this.$refs.dialogRef.open();
					return;
				}
				let parmas = {
					workorder: this.formData.fkWorkorder,
					box_label: '',
					product_label: ''
				};
				// 外箱标签
				if (_type === 1) {
					parmas.box_label = _value;
					const res = await InspectionBoxLabel(parmas);
					console.log(res);
					if (res.code === 200 && res.data) {
						this.packageLabelInfo.boxLabel = val;
						this.scanType = 2;
					} else {
						this.dialog.content = '外箱标签异常！';
						this.dialog.type = 'warn';
						this.$refs.dialogRef.open();
					}
				}
				// 产品标签
				if (_type === 2) {
					parmas.product_label = _value;
					const res = await InspectionProductLabel(parmas);
					if (res.code === 200 && res.data) {
						const options = {
							title: '20250406_2_001',
							content: '零件号:2150004'
						};
						this.partsLabelList.push(options);
					} else {
						this.dialog.content = '产品标签异常！';
						this.dialog.type = 'warn';
						this.$refs.dialogRef.open();
					}
				}
				this.loading = false;
			} catch (e) {
				this.loading = false;
				console.log(e);
			}
		},
		remove(index) {
			this.deleteIndex = index;
			this.$refs.deleteDialogRef.open();
		},
		confirmDelete() {
			if (this.deleteIndex !== null) {
				this.partsLabelList.splice(this.deleteIndex, 1);
				this.deleteIndex = null;
			}
			this.$refs.deleteDialogRef.close();
		},
		closeDeleteDialog() {
			this.deleteIndex = null;
		},
		submit() {
			const _workorder = this.formData.fkWorkorder;
			const _boxLabel = this.packageLabelInfo.boxLabel;
			if (!_workorder) {
				this.dialog.content = '工单号异常，请检查！';
				this.dialog.type = 'warn';
				this.$refs.dialogRef.open();
				return;
			}
			if (!_boxLabel) {
				this.dialog.content = '未扫描外箱标签,请扫码！';
				this.dialog.type = 'warn';
				this.$refs.dialogRef.open();
				return;
			}
			if (this.partsLabelList.length === 0) {
				this.dialog.content = '未扫描产品标签，产品清单为空！';
				this.dialog.type = 'warn';
				this.$refs.dialogRef.open();
				return;
			}
			this.loading = true;
			const _productLabelArray = this.partsLabelList.map((item) => {
				return item.title;
			});
			const params = {
				workorder: _workorder,
				boxLabel: _boxLabel,
				productLabelArray: _productLabelArray
			};
			BoxLabelAndProductLabel(params).then((res) => {
				if (res.code === 200) {
					this.scanType = 1;
					this.packageLabelInfo = {};
					this.loading = false;
					this.dialog.content = '执行报工成功！';
					this.dialog.type = 'success';
					this.$refs.dialogRef.open();
				} else {
					this.loading = false;
				}
			});
			this.loading = false;
		},
		dialogConfirm() {
			this.dialogClose();
		},
		dialogClose() {
			this.$refs.dialogRef.close();
		}
	}
};
</script>

<style scoped>
.report-form-item {
	display: flex;
}
.report-form-label {
	width: 80px;
	font-size: 14px;
}
.report-form-value {
	font-size: 16px;
}
.report-box {
	height: 30vh;
	display: flex;
	flex-direction: column;
	align-items: center;
}
.report-box-title {
	font-size: 18px;
	font-weight: 700;
	text-align: center;
}
.report-box-parts-list {
	width: 86vw;
	height: 48vh;
	display: flex;
	flex-direction: column;
	align-items: center;
	overflow-y: auto;
	will-change: scroll-position;
}
.reprot-box-parts-list-item {
	padding: 5px;
	margin: 0px; /* 添加外边距 */
	width: calc(100% - 10px); /* 调整宽度以适应内边距 */
	height: 50px;
	border: 1px solid #c1c1c1; /* 调整边框颜色为更柔和的灰色 */
	display: flex;
	flex-direction: row;
	transition: background-color 0.3s ease; /* 添加过渡效果 */
}
.reprot-box-parts-list-item:hover {
	background-color: #f5f5f5; /* 添加悬停效果 */
}
.reprot-box-parts-list-item-left {
	width: 75%;
	height: 100%;
	display: flex;
	flex-direction: column;
}
.reprot-box-parts-list-item-title {
	font-size: 18px;
	font-weight: 600;
}
.reprot-box-parts-list-item-content {
	font-size: 14px;
}
.reprot-box-parts-list-item-right {
	width: 25%;
	height: 100%;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
}
</style>