484 lines
15 KiB
Vue
484 lines
15 KiB
Vue
<template>
|
|
<div class="gi_page">
|
|
<div class="container">
|
|
<h2 class="page-title">标签打印</h2>
|
|
|
|
<!-- 标签参数设置 -->
|
|
<div class="form-section">
|
|
<a-form :model="formData" layout="vertical">
|
|
<div class="form-grid">
|
|
<div class="form-grid-item">
|
|
<a-form-item label="物料名称">
|
|
<a-input v-model="formData.materialName" placeholder="未获取到物料名称" :disabled="true" />
|
|
</a-form-item>
|
|
</div>
|
|
<div class="form-grid-item">
|
|
<a-form-item label="物料编码">
|
|
<a-input v-model="formData.encoding" placeholder="未获取到物料编码" :disabled="true" />
|
|
</a-form-item>
|
|
</div>
|
|
<div class="form-grid-item">
|
|
<a-form-item label="工单编号">
|
|
<a-input v-model="formData.orderNo" placeholder="未获取到工单编号" :disabled="true" />
|
|
</a-form-item>
|
|
</div>
|
|
<div class="form-grid-item">
|
|
<a-form-item label="生产批次" required>
|
|
<a-input v-model="formData.productionBatch" placeholder="请输入生产批次" />
|
|
</a-form-item>
|
|
</div>
|
|
</div>
|
|
<div class="form-actions">
|
|
<a-button type="primary" @click="generateLabel" :disabled="!formData.productionBatch">生成标签</a-button>
|
|
</div>
|
|
</a-form>
|
|
</div>
|
|
|
|
<!-- 标签预览 -->
|
|
<div v-if="labelData.partName" class="label-preview-section">
|
|
<!-- <div class="label-preview-section">-->
|
|
<h3>标签预览</h3>
|
|
<div class="label-container" ref="labelContainer">
|
|
<div class="label" v-for="index in 1" :key="index">
|
|
<table class="label-table">
|
|
<tr>
|
|
<td class="label-cell">
|
|
<div class="label-row">
|
|
<div class="label-field">零件名称</div>
|
|
<div class="label-value">{{ labelData.partName }}</div>
|
|
</div>
|
|
</td>
|
|
<td class="label-cell">
|
|
<div class="label-row">
|
|
<div class="label-field">生产日期</div>
|
|
<div class="label-value">{{ labelData.productionDate }}</div>
|
|
</div>
|
|
</td>
|
|
<td class="label-cell qr-cell" rowspan="4">
|
|
<div class="qr-code">
|
|
<img :src="`https://api.qrserver.com/v1/create-qr-code/?size=120x120&data=${encodeURIComponent(labelData.qrCodeData)}`" alt="QR Code" />
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="label-cell">
|
|
<div class="label-row">
|
|
<div class="label-field">零件号</div>
|
|
<div class="label-value">{{ labelData.partNumber }}</div>
|
|
</div>
|
|
</td>
|
|
<td class="label-cell">
|
|
<div class="label-row">
|
|
<div class="label-field">数量</div>
|
|
<div class="label-value">{{ labelData.totalCount }}</div>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="label-cell">
|
|
<div class="label-row">
|
|
<div class="label-field">标重(kg)</div>
|
|
<div class="label-value">{{ labelData.totalCalculatedWeight }}</div>
|
|
</div>
|
|
</td>
|
|
<td class="label-cell">
|
|
<div class="label-row">
|
|
<div class="label-field">包装签字</div>
|
|
<div class="label-value">{{ labelData.packingSignature || '' }}</div>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="label-cell">
|
|
<div class="label-row">
|
|
<div class="label-field">实重(kg)</div>
|
|
<div class="label-value">{{ labelData.totalWeight || '' }}</div>
|
|
</div>
|
|
</td>
|
|
<td class="label-cell">
|
|
<div class="label-row">
|
|
<div class="label-field">检验签字</div>
|
|
<div class="label-value">{{ labelData.inspectionSignature || '' }}</div>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
<div class="label-actions">
|
|
<a-button type="primary" @click="printLabel">打印标签</a-button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { ref, reactive, nextTick, onMounted } from 'vue'
|
|
import { Message } from '@arco-design/web-vue'
|
|
import { useRoute } from 'vue-router'
|
|
import {getWorkOrder} from "@/apis/workOrder/workOrder";
|
|
|
|
const route = useRoute()
|
|
|
|
// 表单数据
|
|
const formData = reactive({
|
|
workerOrderId: '',
|
|
encoding: '',
|
|
materialName: '',
|
|
orderNo: '',
|
|
totalCalculatedWeight: '',
|
|
totalWeight: '',
|
|
totalCount: '',
|
|
productionBatch: '',
|
|
qrCodeData: '',
|
|
})
|
|
|
|
// 标签数据
|
|
const labelData = reactive({
|
|
partName: '',
|
|
partNumber: '',
|
|
totalCalculatedWeight: '',
|
|
totalWeight: '',
|
|
productionDate: '',
|
|
totalCount: '',
|
|
packingSignature: '',
|
|
inspectionSignature: '',
|
|
qrCodeData: '',
|
|
})
|
|
|
|
// 标签数据
|
|
// const labelData = reactive({
|
|
// partName: '物料3',
|
|
// partNumber: '1',
|
|
// totalCalculatedWeight: '100',
|
|
// totalWeight: '100',
|
|
// productionDate: '202401010000',
|
|
// totalCount: '100',
|
|
// packingSignature: '',
|
|
// inspectionSignature: '',
|
|
// qrCodeData: '10#$$DY',
|
|
// })
|
|
|
|
// 标签容器引用
|
|
const labelContainer = ref<HTMLElement | null>(null)
|
|
|
|
// 生成标签
|
|
const generateLabel = async () => {
|
|
if (!formData.productionBatch) {
|
|
Message.error('请输入生产批次')
|
|
return
|
|
}
|
|
if (!formData.materialName) {
|
|
Message.error('未获取到物料信息')
|
|
return
|
|
}
|
|
|
|
try {
|
|
// 格式化生产日期为 yyyyMMddHHmm 格式
|
|
const now = new Date()
|
|
const formattedDate = now.getFullYear().toString() +
|
|
String(now.getMonth() + 1).padStart(2, '0') +
|
|
String(now.getDate()).padStart(2, '0') +
|
|
String(now.getHours()).padStart(2, '0') +
|
|
String(now.getMinutes()).padStart(2, '0')
|
|
|
|
const formattedDate2 = now.getFullYear().toString() +
|
|
String(now.getMonth() + 1).padStart(2, '0') +
|
|
String(now.getDate()).padStart(2, '0');
|
|
|
|
// 直接从 formData 中获取数据
|
|
Object.assign(labelData, {
|
|
partName: formData.materialName || '',
|
|
partNumber: formData.encoding || '',
|
|
totalCalculatedWeight: formData.totalCalculatedWeight || '',
|
|
totalWeight: formData.totalWeight || '',
|
|
productionDate: formattedDate,
|
|
totalCount: formData.totalCount || '',
|
|
packingSignature: '',
|
|
inspectionSignature: '',
|
|
//10#零件号$11#供应商代码$12#生产批次$17#数量$20#包装日期$31#唯一号$DY
|
|
qrCodeData: `10#${formData.materialName}$11#9DP$12#${formData.productionBatch}$17#${formData.totalCount}$20#${formattedDate2}$31#${formData.orderNo}$DY`
|
|
})
|
|
|
|
Message.success('标签生成成功')
|
|
} catch (error) {
|
|
console.error('生成标签失败:', error)
|
|
Message.error('生成标签失败')
|
|
}
|
|
}
|
|
|
|
// 组件挂载时，检查是否有参数传递
|
|
onMounted(() => {
|
|
// 从路由参数中获取数据
|
|
const workerOrderId = route.query.workerOrderId as string
|
|
// 如果有参数传递，设置表单数据并标记为不可修改
|
|
if (workerOrderId) {
|
|
formData.workerOrderId = workerOrderId
|
|
getWorkOrder(workerOrderId).then(res => {
|
|
if (res.code == '0') {
|
|
formData.encoding = res.data.encoding
|
|
formData.materialName = res.data.materialName
|
|
formData.orderNo = res.data.orderNo
|
|
formData.totalCalculatedWeight = res.data.totalCalculatedWeight
|
|
formData.totalWeight = res.data.totalWeight
|
|
formData.totalCount = res.data.totalCount
|
|
} else {
|
|
Message.error('获取详情失败')
|
|
}
|
|
});
|
|
|
|
// 自动生成标签
|
|
generateLabel()
|
|
}
|
|
})
|
|
|
|
// 打印标签
|
|
const printLabel = async () => {
|
|
await nextTick()
|
|
if (labelContainer.value) {
|
|
// 创建打印窗口
|
|
const printWindow = window.open('', '_blank')
|
|
if (printWindow) {
|
|
// 直接构建打印内容，确保二维码图片正确生成
|
|
const printHTML = `
|
|
<html>
|
|
<head>
|
|
<title>标签打印</title>
|
|
<style>
|
|
body { margin: 0; padding: 10mm; font-family: Arial, sans-serif; }
|
|
.label-container { display: flex; flex-wrap: wrap; gap: 10mm; justify-content: center; }
|
|
.label { width: 90mm; height: 38.5mm; border: 1px solid #000; padding: 0; box-sizing: border-box; page-break-inside: avoid; }
|
|
.label-table { width: 100%; height: 100%; border-collapse: collapse; }
|
|
.label-cell { border: 1px solid #000; padding: 1mm; vertical-align: top; }
|
|
.qr-cell { width: 24mm; text-align: center; vertical-align: middle; border: 1px solid #000; }
|
|
.label-row { display: flex; align-items: center; }
|
|
.label-field { font-size: 7pt; font-weight: bold; margin-right: 2mm; min-width: 25pt; }
|
|
.label-value { font-size: 7pt; flex: 1; }
|
|
.qr-code img { width: 20mm; height: 20mm; margin: 1mm 0; }
|
|
.serial-number { font-size: 7pt; margin-top: 1mm; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="label-container">
|
|
<div class="label">
|
|
<table class="label-table">
|
|
<tr>
|
|
<td class="label-cell">
|
|
<div class="label-row">
|
|
<div class="label-field">零件名称</div>
|
|
<div class="label-value">${labelData.partName}</div>
|
|
</div>
|
|
</td>
|
|
<td class="label-cell">
|
|
<div class="label-row">
|
|
<div class="label-field">生产日期</div>
|
|
<div class="label-value">${labelData.productionDate}</div>
|
|
</div>
|
|
</td>
|
|
<td class="label-cell qr-cell" rowspan="4">
|
|
<div class="qr-code">
|
|
<img src="https://api.qrserver.com/v1/create-qr-code/?size=120x120&data=${encodeURIComponent(labelData.qrCodeData)}" alt="QR Code" />
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="label-cell">
|
|
<div class="label-row">
|
|
<div class="label-field">零件号</div>
|
|
<div class="label-value">${labelData.partNumber}</div>
|
|
</div>
|
|
</td>
|
|
<td class="label-cell">
|
|
<div class="label-row">
|
|
<div class="label-field">数量</div>
|
|
<div class="label-value">${labelData.totalCount}</div>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="label-cell">
|
|
<div class="label-row">
|
|
<div class="label-field">标重(kg)</div>
|
|
<div class="label-value">${labelData.totalCalculatedWeight}</div>
|
|
</div>
|
|
</td>
|
|
<td class="label-cell">
|
|
<div class="label-row">
|
|
<div class="label-field">包装签字</div>
|
|
<div class="label-value">${labelData.packingSignature || ''}</div>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="label-cell">
|
|
<div class="label-row">
|
|
<div class="label-field">实重(kg)</div>
|
|
<div class="label-value">${labelData.totalWeight || ''}</div>
|
|
</div>
|
|
</td>
|
|
<td class="label-cell">
|
|
<div class="label-row">
|
|
<div class="label-field">检验签字</div>
|
|
<div class="label-value">${labelData.inspectionSignature || ''}</div>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html>
|
|
`
|
|
|
|
printWindow.document.write(printHTML)
|
|
printWindow.document.close()
|
|
|
|
// 等待图片加载完成后再打印
|
|
printWindow.onload = () => {
|
|
setTimeout(() => {
|
|
printWindow.focus()
|
|
printWindow.print()
|
|
printWindow.close()
|
|
}, 500)
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
defineOptions({ name: 'BarcodePrint' })
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.container {
|
|
max-width: 1200px;
|
|
margin: 0 auto;
|
|
padding: 20px;
|
|
}
|
|
|
|
.page-title {
|
|
margin-bottom: 30px;
|
|
text-align: center;
|
|
color: #333;
|
|
}
|
|
|
|
/* 表单区域 */
|
|
.form-section {
|
|
background-color: var(--color-bg-2);
|
|
padding: 20px;
|
|
border-radius: 4px;
|
|
margin-bottom: 30px;
|
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
|
|
}
|
|
|
|
.form-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
|
gap: 16px;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.form-grid-item {
|
|
width: 100%;
|
|
}
|
|
|
|
.form-actions {
|
|
margin-top: 20px;
|
|
display: flex;
|
|
justify-content: center;
|
|
}
|
|
|
|
/* 标签预览 */
|
|
.label-preview-section {
|
|
margin-top: 30px;
|
|
padding: 20px;
|
|
background-color: var(--color-bg-2);
|
|
border-radius: 4px;
|
|
}
|
|
|
|
.label-preview-section h3 {
|
|
margin: 0 0 20px 0;
|
|
font-size: 16px;
|
|
font-weight: bold;
|
|
text-align: center;
|
|
}
|
|
|
|
.label-container {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 20px;
|
|
justify-content: center;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.label {
|
|
width: 450px;
|
|
height: 180px;
|
|
border: 1px solid #000;
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
font-family: Arial, sans-serif;
|
|
}
|
|
|
|
.label-table {
|
|
width: 100%;
|
|
height: 100%;
|
|
border-collapse: collapse;
|
|
}
|
|
|
|
.label-cell {
|
|
border: 1px solid #000;
|
|
padding: 5px;
|
|
vertical-align: top;
|
|
}
|
|
|
|
.qr-cell {
|
|
width: 120px;
|
|
text-align: center;
|
|
vertical-align: middle;
|
|
}
|
|
|
|
.label-row {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.label-field {
|
|
font-size: 12px;
|
|
font-weight: bold;
|
|
margin-right: 10px;
|
|
min-width: 60px;
|
|
}
|
|
|
|
.label-value {
|
|
font-size: 12px;
|
|
flex: 1;
|
|
}
|
|
|
|
.qr-code img {
|
|
width: 100px;
|
|
height: 100px;
|
|
margin: 5px 0;
|
|
}
|
|
|
|
.serial-number {
|
|
font-size: 12px;
|
|
margin-top: 5px;
|
|
}
|
|
|
|
.label-actions {
|
|
display: flex;
|
|
justify-content: center;
|
|
margin-top: 20px;
|
|
}
|
|
|
|
/* 确保输入框宽度一致 */
|
|
:deep(.arco-input-wrapper) {
|
|
width: 100%;
|
|
height: 35px;
|
|
}
|
|
|
|
:deep(.arco-input) {
|
|
font-size: 16px;
|
|
}
|
|
</style> |