2026-03-06 18:04:40 +08:00
|
|
|
|
<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="物料名称">
|
2026-03-09 15:24:02 +08:00
|
|
|
|
<a-input v-model="formData.materialName" placeholder="未获取到物料名称" :disabled="true" />
|
2026-03-06 18:04:40 +08:00
|
|
|
|
</a-form-item>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="form-grid-item">
|
2026-06-10 10:36:14 +08:00
|
|
|
|
<a-form-item label="打印编码（国产替代）">
|
|
|
|
|
|
<a-input v-model="formData.encodingPrint" placeholder="未获取到打印编码" :disabled="true" />
|
2026-03-06 18:04:40 +08:00
|
|
|
|
</a-form-item>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="form-grid-item">
|
|
|
|
|
|
<a-form-item label="工单编号">
|
2026-03-09 15:24:02 +08:00
|
|
|
|
<a-input v-model="formData.orderNo" placeholder="未获取到工单编号" :disabled="true" />
|
2026-03-06 18:04:40 +08:00
|
|
|
|
</a-form-item>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="form-grid-item">
|
2026-04-16 00:47:58 +08:00
|
|
|
|
<a-form-item label="生产批次">
|
|
|
|
|
|
<a-input v-model="formData.batch" placeholder="未获取到生产批次" :disabled="true" />
|
2026-03-06 18:04:40 +08:00
|
|
|
|
</a-form-item>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</a-form>
|
2026-04-16 00:47:58 +08:00
|
|
|
|
<div class="form-actions">
|
|
|
|
|
|
<a-button type="primary" @click="generateDetailLabel">明细标签</a-button>
|
|
|
|
|
|
<a-button type="primary" @click="generateOverallLabel">整体标签</a-button>
|
|
|
|
|
|
</div>
|
2026-03-06 18:04:40 +08:00
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<!-- 标签预览 -->
|
2026-04-16 00:47:58 +08:00
|
|
|
|
<div v-if="labelDataList.length > 0 || labelData.partName" class="label-preview-section">
|
2026-03-06 18:04:40 +08:00
|
|
|
|
<h3>标签预览</h3>
|
|
|
|
|
|
<div class="label-container" ref="labelContainer">
|
2026-04-16 00:47:58 +08:00
|
|
|
|
<!-- 明细标签：显示多个标签 -->
|
|
|
|
|
|
<template v-if="labelDataList.length > 0">
|
|
|
|
|
|
<div class="label" v-for="(item, index) in labelDataList" :key="index">
|
|
|
|
|
|
<table class="label-table">
|
|
|
|
|
|
<tr>
|
|
|
|
|
|
<td class="label-cell">
|
|
|
|
|
|
<div class="label-row">
|
|
|
|
|
|
<div class="label-field">零件名称</div>
|
|
|
|
|
|
<div class="label-value">{{ item.partName }}</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</td>
|
|
|
|
|
|
<td class="label-cell">
|
|
|
|
|
|
<div class="label-row">
|
|
|
|
|
|
<div class="label-field">生产日期</div>
|
|
|
|
|
|
<div class="label-value">{{ item.productionDate }}</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</td>
|
|
|
|
|
|
<td class="label-cell qr-cell" rowspan="4">
|
|
|
|
|
|
<div class="qr-code">
|
|
|
|
|
|
<img v-if="item.qrCodeImage" :src="item.qrCodeImage" alt="QR Code" />
|
|
|
|
|
|
<div class="mark-number">{{ item.mark || '' }}</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</td>
|
|
|
|
|
|
</tr>
|
|
|
|
|
|
<tr>
|
|
|
|
|
|
<td class="label-cell">
|
|
|
|
|
|
<div class="label-row">
|
|
|
|
|
|
<div class="label-field">零件号</div>
|
|
|
|
|
|
<div class="label-value">{{ item.partNumber }}</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</td>
|
|
|
|
|
|
<td class="label-cell">
|
|
|
|
|
|
<div class="label-row">
|
|
|
|
|
|
<div class="label-field">数量</div>
|
|
|
|
|
|
<div class="label-value">{{ item.totalCount }}</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</td>
|
|
|
|
|
|
</tr>
|
|
|
|
|
|
<tr>
|
|
|
|
|
|
<td class="label-cell">
|
|
|
|
|
|
<div class="label-row">
|
|
|
|
|
|
<div class="label-field">标重(g)</div>
|
|
|
|
|
|
<div class="label-value">{{ item.totalCalculatedWeight }}</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</td>
|
|
|
|
|
|
<td class="label-cell">
|
|
|
|
|
|
<div class="label-row">
|
|
|
|
|
|
<div class="label-field">包装签字</div>
|
|
|
|
|
|
<div class="label-value">{{ item.packingSignature || '' }}</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</td>
|
|
|
|
|
|
</tr>
|
|
|
|
|
|
<tr>
|
|
|
|
|
|
<td class="label-cell">
|
|
|
|
|
|
<div class="label-row">
|
|
|
|
|
|
<div class="label-field">实重(g)</div>
|
|
|
|
|
|
<div class="label-value">{{ item.totalWeight || '' }}</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</td>
|
|
|
|
|
|
<td class="label-cell">
|
|
|
|
|
|
<div class="label-row">
|
|
|
|
|
|
<div class="label-field">检验签字</div>
|
|
|
|
|
|
<div class="label-value">{{ item.inspectionSignature || '' }}</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</td>
|
|
|
|
|
|
</tr>
|
|
|
|
|
|
</table>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</template>
|
|
|
|
|
|
<!-- 整体标签：显示单个标签 -->
|
|
|
|
|
|
<template v-else>
|
|
|
|
|
|
<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 v-if="labelData.qrCodeImage" :src="labelData.qrCodeImage" alt="QR Code" />
|
|
|
|
|
|
<div class="mark-number">{{ labelData.mark || '' }}</div>
|
|
|
|
|
|
</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">标重(g)</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">实重(g)</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>
|
|
|
|
|
|
</template>
|
2026-03-06 18:04:40 +08:00
|
|
|
|
</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'
|
2026-04-16 00:47:58 +08:00
|
|
|
|
import {getWorkOrder, type WorkOrderInfoResp} from "@/apis/workOrder/workOrder"
|
2026-03-18 17:42:14 +08:00
|
|
|
|
import QRCode from 'qrcode';
|
2026-03-06 18:04:40 +08:00
|
|
|
|
|
|
|
|
|
|
const route = useRoute()
|
|
|
|
|
|
|
|
|
|
|
|
// 表单数据
|
|
|
|
|
|
const formData = reactive({
|
2026-03-09 15:24:02 +08:00
|
|
|
|
workerOrderId: '',
|
2026-03-06 18:04:40 +08:00
|
|
|
|
encoding: '',
|
2026-06-10 10:36:14 +08:00
|
|
|
|
encodingPrint: '',
|
2026-03-06 18:04:40 +08:00
|
|
|
|
materialName: '',
|
|
|
|
|
|
orderNo: '',
|
2026-03-09 15:24:02 +08:00
|
|
|
|
totalCalculatedWeight: '',
|
|
|
|
|
|
totalWeight: '',
|
|
|
|
|
|
totalCount: '',
|
2026-04-16 00:47:58 +08:00
|
|
|
|
batch: '',
|
|
|
|
|
|
mark: '',
|
2026-03-09 20:34:20 +08:00
|
|
|
|
qrCodeData: '',
|
2026-04-16 00:47:58 +08:00
|
|
|
|
workOrderInfos: Array<WorkOrderInfoResp>(),
|
2026-03-06 18:04:40 +08:00
|
|
|
|
})
|
|
|
|
|
|
|
2026-04-16 00:47:58 +08:00
|
|
|
|
// 标签数据数组
|
|
|
|
|
|
const labelDataList = reactive<Array<{
|
|
|
|
|
|
partName: string
|
|
|
|
|
|
partNumber: string
|
|
|
|
|
|
totalCalculatedWeight: string
|
|
|
|
|
|
totalWeight: string
|
|
|
|
|
|
productionDate: string
|
|
|
|
|
|
totalCount: string
|
|
|
|
|
|
packingSignature: string
|
|
|
|
|
|
inspectionSignature: string
|
|
|
|
|
|
qrCodeData: string
|
|
|
|
|
|
qrCodeImage: string
|
|
|
|
|
|
mark: string
|
|
|
|
|
|
}>>([])
|
|
|
|
|
|
|
|
|
|
|
|
// 标签数据（用于整体标签）
|
2026-03-06 18:04:40 +08:00
|
|
|
|
const labelData = reactive({
|
|
|
|
|
|
partName: '',
|
|
|
|
|
|
partNumber: '',
|
2026-03-09 15:24:02 +08:00
|
|
|
|
totalCalculatedWeight: '',
|
|
|
|
|
|
totalWeight: '',
|
2026-03-06 18:04:40 +08:00
|
|
|
|
productionDate: '',
|
2026-03-09 15:24:02 +08:00
|
|
|
|
totalCount: '',
|
2026-03-06 18:04:40 +08:00
|
|
|
|
packingSignature: '',
|
|
|
|
|
|
inspectionSignature: '',
|
|
|
|
|
|
qrCodeData: '',
|
2026-03-18 17:42:14 +08:00
|
|
|
|
qrCodeImage: '',
|
2026-04-16 00:47:58 +08:00
|
|
|
|
mark: '',
|
2026-03-06 18:04:40 +08:00
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
|
|
// 标签容器引用
|
|
|
|
|
|
const labelContainer = ref<HTMLElement | null>(null)
|
|
|
|
|
|
|
2026-03-18 17:42:14 +08:00
|
|
|
|
// 生成二维码
|
|
|
|
|
|
const generateQRCode = async (data: string) => {
|
|
|
|
|
|
try {
|
|
|
|
|
|
return await QRCode.toDataURL(data, {
|
|
|
|
|
|
width: 120,
|
|
|
|
|
|
margin: 1,
|
|
|
|
|
|
color: {
|
|
|
|
|
|
dark: '#000000',
|
|
|
|
|
|
light: '#FFFFFF'
|
|
|
|
|
|
}
|
|
|
|
|
|
})
|
|
|
|
|
|
} catch (error) {
|
|
|
|
|
|
console.error('生成二维码失败:', error)
|
|
|
|
|
|
return ''
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
|
2026-04-16 00:47:58 +08:00
|
|
|
|
// 生成明细标签
|
|
|
|
|
|
const generateDetailLabel = async () => {
|
|
|
|
|
|
if (!formData.workOrderInfos || formData.workOrderInfos.length === 0) {
|
|
|
|
|
|
Message.error('未获取到工单明细信息')
|
|
|
|
|
|
return
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
if (!formData.batch) {
|
|
|
|
|
|
console.log("11111", formData.batch);
|
|
|
|
|
|
Message.error('未获取到批次信息')
|
2026-03-06 18:04:40 +08:00
|
|
|
|
return
|
|
|
|
|
|
}
|
2026-03-09 15:24:02 +08:00
|
|
|
|
if (!formData.materialName) {
|
|
|
|
|
|
Message.error('未获取到物料信息')
|
|
|
|
|
|
return
|
|
|
|
|
|
}
|
2026-03-06 18:04:40 +08:00
|
|
|
|
|
|
|
|
|
|
try {
|
2026-04-16 00:47:58 +08:00
|
|
|
|
// 清空之前的标签数据
|
|
|
|
|
|
labelDataList.length = 0
|
|
|
|
|
|
|
2026-03-09 15:24:02 +08:00
|
|
|
|
// 格式化生产日期为 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')
|
2026-03-09 20:34:20 +08:00
|
|
|
|
|
|
|
|
|
|
const formattedDate2 = now.getFullYear().toString() +
|
|
|
|
|
|
String(now.getMonth() + 1).padStart(2, '0') +
|
2026-04-16 00:47:58 +08:00
|
|
|
|
String(now.getDate()).padStart(2, '0')
|
|
|
|
|
|
|
|
|
|
|
|
// 为每个工单明细生成一个标签
|
|
|
|
|
|
for (const workOrderInfo of formData.workOrderInfos) {
|
|
|
|
|
|
// 计算二维码数据
|
|
|
|
|
|
const orderNo = formData.orderNo + workOrderInfo.id;
|
2026-06-10 10:36:14 +08:00
|
|
|
|
const qrCodeData = `10#${formData.encodingPrint}$11#9DP$12#${formData.batch}$17#${workOrderInfo.quantity}$20#${formattedDate2}$31#${orderNo}$DY`
|
2026-04-16 00:47:58 +08:00
|
|
|
|
|
|
|
|
|
|
// 生成二维码图片
|
|
|
|
|
|
const qrCodeImage = await generateQRCode(qrCodeData)
|
|
|
|
|
|
|
|
|
|
|
|
// 添加标签数据
|
|
|
|
|
|
labelDataList.push({
|
|
|
|
|
|
partName: formData.materialName || '',
|
2026-06-10 10:36:14 +08:00
|
|
|
|
partNumber: formData.encodingPrint || '',
|
2026-04-16 00:47:58 +08:00
|
|
|
|
totalCalculatedWeight: workOrderInfo.calculatedWeight || '',
|
|
|
|
|
|
totalWeight: workOrderInfo.weight || '',
|
|
|
|
|
|
productionDate: formattedDate,
|
|
|
|
|
|
totalCount: workOrderInfo.quantity || '',
|
|
|
|
|
|
packingSignature: '',
|
|
|
|
|
|
inspectionSignature: '',
|
|
|
|
|
|
qrCodeData: qrCodeData,
|
|
|
|
|
|
qrCodeImage: qrCodeImage,
|
2026-04-17 17:04:06 +08:00
|
|
|
|
mark: workOrderInfo.mark || '',
|
2026-04-16 00:47:58 +08:00
|
|
|
|
})
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
Message.success(`成功生成 ${labelDataList.length} 个明细标签`)
|
|
|
|
|
|
} catch (error) {
|
|
|
|
|
|
console.error('生成明细标签失败:', error)
|
|
|
|
|
|
Message.error('生成明细标签失败')
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
// 生成整体标签
|
|
|
|
|
|
const generateOverallLabel = async () => {
|
|
|
|
|
|
if (!formData.batch) {
|
|
|
|
|
|
Message.error('未获取到批次信息')
|
|
|
|
|
|
return
|
|
|
|
|
|
}
|
|
|
|
|
|
if (!formData.materialName) {
|
|
|
|
|
|
Message.error('未获取到物料信息')
|
|
|
|
|
|
return
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
try {
|
|
|
|
|
|
// 清空明细标签数据
|
|
|
|
|
|
labelDataList.length = 0
|
|
|
|
|
|
|
|
|
|
|
|
// 格式化生产日期为 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')
|
2026-03-09 15:24:02 +08:00
|
|
|
|
|
2026-03-18 17:42:14 +08:00
|
|
|
|
// 计算二维码数据
|
2026-06-10 10:36:14 +08:00
|
|
|
|
const qrCodeData = `10#${formData.encodingPrint}$11#9DP$12#${formData.batch}$17#${formData.totalCount}$20#${formattedDate2}$31#${formData.orderNo}$DY`
|
2026-03-18 17:42:14 +08:00
|
|
|
|
|
|
|
|
|
|
// 生成二维码图片
|
|
|
|
|
|
const qrCodeImage = await generateQRCode(qrCodeData)
|
|
|
|
|
|
|
2026-03-09 15:24:02 +08:00
|
|
|
|
// 直接从 formData 中获取数据
|
|
|
|
|
|
Object.assign(labelData, {
|
|
|
|
|
|
partName: formData.materialName || '',
|
2026-06-10 10:36:14 +08:00
|
|
|
|
partNumber: formData.encodingPrint || '',
|
2026-03-09 15:24:02 +08:00
|
|
|
|
totalCalculatedWeight: formData.totalCalculatedWeight || '',
|
|
|
|
|
|
totalWeight: formData.totalWeight || '',
|
|
|
|
|
|
productionDate: formattedDate,
|
|
|
|
|
|
totalCount: formData.totalCount || '',
|
|
|
|
|
|
packingSignature: '',
|
|
|
|
|
|
inspectionSignature: '',
|
2026-03-18 17:42:14 +08:00
|
|
|
|
qrCodeData: qrCodeData,
|
2026-04-16 00:47:58 +08:00
|
|
|
|
qrCodeImage: qrCodeImage,
|
|
|
|
|
|
mark: formData.mark || '',
|
2026-03-09 15:24:02 +08:00
|
|
|
|
})
|
|
|
|
|
|
|
2026-03-06 18:04:40 +08:00
|
|
|
|
Message.success('标签生成成功')
|
|
|
|
|
|
} catch (error) {
|
|
|
|
|
|
console.error('生成标签失败:', error)
|
|
|
|
|
|
Message.error('生成标签失败')
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
// 组件挂载时，检查是否有参数传递
|
|
|
|
|
|
onMounted(() => {
|
|
|
|
|
|
// 从路由参数中获取数据
|
2026-03-09 15:24:02 +08:00
|
|
|
|
const workerOrderId = route.query.workerOrderId as string
|
2026-03-06 18:04:40 +08:00
|
|
|
|
// 如果有参数传递，设置表单数据并标记为不可修改
|
2026-03-09 15:24:02 +08:00
|
|
|
|
if (workerOrderId) {
|
|
|
|
|
|
formData.workerOrderId = workerOrderId
|
|
|
|
|
|
getWorkOrder(workerOrderId).then(res => {
|
|
|
|
|
|
if (res.code == '0') {
|
|
|
|
|
|
formData.encoding = res.data.encoding
|
2026-06-10 10:36:14 +08:00
|
|
|
|
formData.encodingPrint = res.data.encodingPrint
|
2026-03-09 15:24:02 +08:00
|
|
|
|
formData.materialName = res.data.materialName
|
|
|
|
|
|
formData.orderNo = res.data.orderNo
|
2026-04-16 00:47:58 +08:00
|
|
|
|
formData.batch = res.data.batch
|
2026-03-09 15:24:02 +08:00
|
|
|
|
formData.totalCalculatedWeight = res.data.totalCalculatedWeight
|
|
|
|
|
|
formData.totalWeight = res.data.totalWeight
|
|
|
|
|
|
formData.totalCount = res.data.totalCount
|
2026-04-16 00:47:58 +08:00
|
|
|
|
formData.workOrderInfos = res.data.workOrderInfos
|
|
|
|
|
|
formData.mark = res.data.mark
|
2026-03-09 15:24:02 +08:00
|
|
|
|
} else {
|
|
|
|
|
|
Message.error('获取详情失败')
|
|
|
|
|
|
}
|
|
|
|
|
|
});
|
2026-03-06 18:04:40 +08:00
|
|
|
|
}
|
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
|
|
// 打印标签
|
|
|
|
|
|
const printLabel = async () => {
|
|
|
|
|
|
await nextTick()
|
|
|
|
|
|
if (labelContainer.value) {
|
|
|
|
|
|
// 创建打印窗口
|
|
|
|
|
|
const printWindow = window.open('', '_blank')
|
|
|
|
|
|
if (printWindow) {
|
2026-04-16 00:47:58 +08:00
|
|
|
|
// 判断是打印明细标签还是整体标签
|
|
|
|
|
|
const isDetailLabels = labelDataList.length > 0
|
|
|
|
|
|
const labelsToPrint = isDetailLabels ? labelDataList : [labelData]
|
|
|
|
|
|
|
|
|
|
|
|
// 生成标签HTML
|
|
|
|
|
|
const labelsHTML = labelsToPrint.map(item => `
|
|
|
|
|
|
<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">${item.partName}</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</td>
|
|
|
|
|
|
<td class="label-cell">
|
|
|
|
|
|
<div class="label-row">
|
|
|
|
|
|
<div class="label-field">生产日期</div>
|
|
|
|
|
|
<div class="label-value">${item.productionDate}</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</td>
|
|
|
|
|
|
<td class="label-cell qr-cell" rowspan="4">
|
|
|
|
|
|
<div class="qr-code">
|
|
|
|
|
|
<img src="${item.qrCodeImage}" alt="QR Code" />
|
|
|
|
|
|
<div class="mark-number">${item.mark || ''}</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</td>
|
|
|
|
|
|
</tr>
|
|
|
|
|
|
<tr>
|
|
|
|
|
|
<td class="label-cell">
|
|
|
|
|
|
<div class="label-row">
|
|
|
|
|
|
<div class="label-field">零件号</div>
|
|
|
|
|
|
<div class="label-value">${item.partNumber}</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</td>
|
|
|
|
|
|
<td class="label-cell">
|
|
|
|
|
|
<div class="label-row">
|
|
|
|
|
|
<div class="label-field">数量</div>
|
|
|
|
|
|
<div class="label-value">${item.totalCount}</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</td>
|
|
|
|
|
|
</tr>
|
|
|
|
|
|
<tr>
|
|
|
|
|
|
<td class="label-cell">
|
|
|
|
|
|
<div class="label-row">
|
|
|
|
|
|
<div class="label-field">标重(g)</div>
|
|
|
|
|
|
<div class="label-value">${item.totalCalculatedWeight}</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</td>
|
|
|
|
|
|
<td class="label-cell">
|
|
|
|
|
|
<div class="label-row">
|
|
|
|
|
|
<div class="label-field">包装签字</div>
|
|
|
|
|
|
<div class="label-value">${item.packingSignature || ''}</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</td>
|
|
|
|
|
|
</tr>
|
|
|
|
|
|
<tr>
|
|
|
|
|
|
<td class="label-cell">
|
|
|
|
|
|
<div class="label-row">
|
2026-04-27 16:14:26 +08:00
|
|
|
|
<div class="label-field">实重(g)</div>
|
2026-04-16 00:47:58 +08:00
|
|
|
|
<div class="label-value">${item.totalWeight || ''}</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</td>
|
|
|
|
|
|
<td class="label-cell">
|
|
|
|
|
|
<div class="label-row">
|
|
|
|
|
|
<div class="label-field">检验签字</div>
|
|
|
|
|
|
<div class="label-value">${item.inspectionSignature || ''}</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</td>
|
|
|
|
|
|
</tr>
|
|
|
|
|
|
</table>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
`).join('')
|
|
|
|
|
|
|
|
|
|
|
|
// 构建打印内容
|
2026-03-09 20:34:20 +08:00
|
|
|
|
const printHTML = `
|
2026-03-06 18:04:40 +08:00
|
|
|
|
<html>
|
|
|
|
|
|
<head>
|
|
|
|
|
|
<title>标签打印</title>
|
|
|
|
|
|
<style>
|
2026-06-10 17:34:09 +08:00
|
|
|
|
@page { size: 80mm 50mm; margin: 0; }
|
|
|
|
|
|
body { margin: 0; padding: 1mm; font-family: Arial, sans-serif; }
|
2026-06-10 18:25:14 +08:00
|
|
|
|
.label-container { display: flex; flex-wrap: wrap; gap: 1mm; justify-content: center; align-items: center; transform-origin: center; }
|
|
|
|
|
|
.label { width: 75mm; height: 45mm; border: 1px solid #000; padding: 0; box-sizing: border-box; page-break-inside: avoid; overflow: hidden; margin: 0 auto; }
|
2026-06-10 17:34:09 +08:00
|
|
|
|
.label-table { width: 100%; height: 100%; border-collapse: collapse; table-layout: fixed; }
|
|
|
|
|
|
.label-cell { border: 1px solid #000; padding: 0.8mm; vertical-align: top; }
|
|
|
|
|
|
.qr-cell { width: 22mm; text-align: center; vertical-align: middle; border: 1px solid #000; }
|
2026-03-09 20:34:20 +08:00
|
|
|
|
.label-row { display: flex; align-items: center; }
|
2026-06-10 17:34:09 +08:00
|
|
|
|
.label-field { font-size: 7.5pt; font-weight: bold; margin-right: 1mm; min-width: 22pt; white-space: nowrap; }
|
|
|
|
|
|
.label-value { font-size: 7.5pt; font-weight: bold; flex: 1; overflow-wrap: break-word; word-break: break-word; }
|
2026-06-10 18:25:14 +08:00
|
|
|
|
.qr-code img { width: 22mm; height: 22mm; margin: 0.5mm 0; }
|
2026-06-10 17:34:09 +08:00
|
|
|
|
.mark-number { font-size: 7pt; font-weight: bold; margin-top: 0.5mm; text-align: center; }
|
|
|
|
|
|
.serial-number { font-size: 7.5pt; font-weight: bold; margin-top: 0.5mm; }
|
2026-03-06 18:04:40 +08:00
|
|
|
|
</style>
|
|
|
|
|
|
</head>
|
|
|
|
|
|
<body>
|
2026-03-09 20:34:20 +08:00
|
|
|
|
<div class="label-container">
|
2026-04-16 00:47:58 +08:00
|
|
|
|
${labelsHTML}
|
2026-03-09 20:34:20 +08:00
|
|
|
|
</div>
|
2026-03-06 18:04:40 +08:00
|
|
|
|
</body>
|
|
|
|
|
|
</html>
|
2026-03-09 20:34:20 +08:00
|
|
|
|
`
|
|
|
|
|
|
|
|
|
|
|
|
printWindow.document.write(printHTML)
|
2026-03-06 18:04:40 +08:00
|
|
|
|
printWindow.document.close()
|
2026-03-09 20:34:20 +08:00
|
|
|
|
|
|
|
|
|
|
// 等待图片加载完成后再打印
|
|
|
|
|
|
printWindow.onload = () => {
|
|
|
|
|
|
setTimeout(() => {
|
|
|
|
|
|
printWindow.focus()
|
|
|
|
|
|
printWindow.print()
|
|
|
|
|
|
printWindow.close()
|
|
|
|
|
|
}, 500)
|
|
|
|
|
|
}
|
2026-03-06 18:04:40 +08:00
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
|
2026-04-11 23:42:28 +08:00
|
|
|
|
defineOptions({ name: 'print' })
|
2026-03-06 18:04:40 +08:00
|
|
|
|
</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;
|
2026-04-16 00:47:58 +08:00
|
|
|
|
gap: 20px;
|
2026-03-06 18:04:40 +08:00
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
/* 标签预览 */
|
|
|
|
|
|
.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;
|
2026-04-16 00:47:58 +08:00
|
|
|
|
flex-direction: column;
|
2026-03-06 18:04:40 +08:00
|
|
|
|
gap: 20px;
|
2026-04-16 00:47:58 +08:00
|
|
|
|
align-items: center;
|
2026-03-06 18:04:40 +08:00
|
|
|
|
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;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
2026-03-09 20:34:20 +08:00
|
|
|
|
.label-row {
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
align-items: center;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
2026-03-06 18:04:40 +08:00
|
|
|
|
.label-field {
|
|
|
|
|
|
font-size: 12px;
|
|
|
|
|
|
font-weight: bold;
|
2026-03-09 20:34:20 +08:00
|
|
|
|
margin-right: 10px;
|
|
|
|
|
|
min-width: 60px;
|
2026-03-06 18:04:40 +08:00
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.label-value {
|
|
|
|
|
|
font-size: 12px;
|
2026-04-16 00:47:58 +08:00
|
|
|
|
font-weight: bold;
|
2026-03-09 20:34:20 +08:00
|
|
|
|
flex: 1;
|
2026-06-10 17:34:09 +08:00
|
|
|
|
word-break: break-word;
|
2026-03-06 18:04:40 +08:00
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.qr-code img {
|
2026-06-10 10:36:14 +08:00
|
|
|
|
width: 115px;
|
|
|
|
|
|
height: 120px;
|
|
|
|
|
|
margin: 0 0;
|
2026-03-06 18:04:40 +08:00
|
|
|
|
}
|
|
|
|
|
|
|
2026-03-18 17:42:14 +08:00
|
|
|
|
.qr-code .loading {
|
|
|
|
|
|
width: 100px;
|
|
|
|
|
|
height: 100px;
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
align-items: center;
|
|
|
|
|
|
justify-content: center;
|
|
|
|
|
|
font-size: 10px;
|
|
|
|
|
|
color: #666;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
2026-04-16 00:47:58 +08:00
|
|
|
|
.mark-number {
|
|
|
|
|
|
font-size: 10px;
|
|
|
|
|
|
margin-top: 5px;
|
|
|
|
|
|
text-align: center;
|
|
|
|
|
|
font-weight: bold;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
2026-03-06 18:04:40 +08:00
|
|
|
|
.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>
|
