WMS/wms-ui
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

优化

Browse Source
This commit is contained in:
zc
2026-04-16 00:47:58 +08:00
parent 3c03907e69
commit 4d52bceea5
10 changed files with 1243 additions and 398 deletions
Download Patch File Download Diff File Expand all files Collapse all files

487
src/views/barcodePrint/index.vue
View File

@@ -23,88 +23,160 @@
</a-form-item>
</div>
<div class="form-grid-item">
<a-form-item label="生产批次" required>
<a-input v-model="formData.productionBatch" placeholder="请输入生产批次" />
<a-form-item label="生产批次">
<a-input v-model="formData.batch" placeholder="未获取到生产批次" :disabled="true" />
</a-form-item>
</div>
</div>
<div class="form-actions">
<a-button type="primary" @click="generateLabel" :disabled="!formData.productionBatch">生成标签</a-button>
</div>
</a-form>
<div class="form-actions">
<a-button type="primary" @click="generateDetailLabel">明细标签</a-button>
<a-button type="primary" @click="generateOverallLabel">整体标签</a-button>
</div>
</div>
<!-- 标签预览 -->
<div v-if="labelData.partName" class="label-preview-section">
<!-- <div class="label-preview-section">-->
<div v-if="labelDataList.length > 0 || labelData.partName" 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 v-if="labelData.qrCodeImage" :src="labelData.qrCodeImage" alt="QR Code" />
<div v-else class="loading">生成二维码中...</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 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>
</div>
<div class="label-actions">
<a-button type="primary" @click="printLabel">打印标签</a-button>
@@ -118,7 +190,7 @@
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"
import {getWorkOrder, type WorkOrderInfoResp} from "@/apis/workOrder/workOrder"
import QRCode from 'qrcode';
const route = useRoute()
@@ -132,11 +204,28 @@ const formData = reactive({
totalCalculatedWeight: '',
totalWeight: '',
totalCount: '',
productionBatch: '',
batch: '',
mark: '',
qrCodeData: '',
workOrderInfos: Array<WorkOrderInfoResp>(),
})
// 标签数据
// 标签数据数组
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
}>>([])
// 标签数据（用于整体标签）
const labelData = reactive({
partName: '',
partNumber: '',
@@ -148,6 +237,7 @@ const labelData = reactive({
inspectionSignature: '',
qrCodeData: '',
qrCodeImage: '',
mark: '',
})
// 标签容器引用
@@ -170,10 +260,16 @@ const generateQRCode = async (data: string) => {
}
}
// 生成标签
const generateLabel = async () => {
if (!formData.productionBatch) {
Message.error('请输入生产批次')
// 生成明细标签
const generateDetailLabel = async () => {
if (!formData.workOrderInfos || formData.workOrderInfos.length === 0) {
Message.error('未获取到工单明细信息')
return
}
if (!formData.batch) {
console.log("11111", formData.batch);
Message.error('未获取到批次信息')
return
}
if (!formData.materialName) {
@@ -182,6 +278,9 @@ const generateLabel = async () => {
}
try {
// 清空之前的标签数据
labelDataList.length = 0
// 格式化生产日期为 yyyyMMddHHmm 格式
const now = new Date()
const formattedDate = now.getFullYear().toString() +
@@ -192,10 +291,69 @@ const generateLabel = async () => {
const formattedDate2 = now.getFullYear().toString() +
String(now.getMonth() + 1).padStart(2, '0') +
String(now.getDate()).padStart(2, '0');
String(now.getDate()).padStart(2, '0')
// 为每个工单明细生成一个标签
for (const workOrderInfo of formData.workOrderInfos) {
// 计算二维码数据
const orderNo = formData.orderNo + workOrderInfo.id;
const qrCodeData = `10#${formData.materialName}$11#9DP$12#${formData.batch}$17#${workOrderInfo.quantity}$20#${formattedDate2}$31#${orderNo}$DY`
// 生成二维码图片
const qrCodeImage = await generateQRCode(qrCodeData)
// 添加标签数据
labelDataList.push({
partName: formData.materialName || '',
partNumber: formData.encoding || '',
totalCalculatedWeight: workOrderInfo.calculatedWeight || '',
totalWeight: workOrderInfo.weight || '',
productionDate: formattedDate,
totalCount: workOrderInfo.quantity || '',
packingSignature: '',
inspectionSignature: '',
qrCodeData: qrCodeData,
qrCodeImage: qrCodeImage,
mark: formData.mark || '',
})
}
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')
// 计算二维码数据
const qrCodeData = `10#${formData.materialName}$11#9DP$12#${formData.productionBatch}$17#${formData.totalCount}$20#${formattedDate2}$31#${formData.orderNo}$DY`
const qrCodeData = `10#${formData.materialName}$11#9DP$12#${formData.batch}$17#${formData.totalCount}$20#${formattedDate2}$31#${formData.orderNo}$DY`
// 生成二维码图片
const qrCodeImage = await generateQRCode(qrCodeData)
@@ -211,7 +369,8 @@ const generateLabel = async () => {
packingSignature: '',
inspectionSignature: '',
qrCodeData: qrCodeData,
qrCodeImage: qrCodeImage
qrCodeImage: qrCodeImage,
mark: formData.mark || '',
})
Message.success('标签生成成功')
@@ -233,16 +392,16 @@ onMounted(() => {
formData.encoding = res.data.encoding
formData.materialName = res.data.materialName
formData.orderNo = res.data.orderNo
formData.batch = res.data.batch
formData.totalCalculatedWeight = res.data.totalCalculatedWeight
formData.totalWeight = res.data.totalWeight
formData.totalCount = res.data.totalCount
formData.workOrderInfos = res.data.workOrderInfos
formData.mark = res.data.mark
} else {
Message.error('获取详情失败')
}
});
// 自动生成标签
generateLabel()
}
})
@@ -253,7 +412,81 @@ const printLabel = async () => {
// 创建打印窗口
const printWindow = window.open('', '_blank')
if (printWindow) {
// 直接构建打印内容，确保二维码图片正确生成
// 判断是打印明细标签还是整体标签
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">
<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>
`).join('')
// 构建打印内容
const printHTML = `
<html>
<head>
@@ -269,76 +502,13 @@ const printLabel = async () => {
.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; }
.mark-number { font-size: 7pt; margin-top: 1mm; text-align: center; }
.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="${labelData.qrCodeImage}" 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">标重(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>
${labelsHTML}
</div>
</body>
</html>
@@ -399,6 +569,7 @@ defineOptions({ name: 'print' })
margin-top: 20px;
display: flex;
justify-content: center;
gap: 20px;
}
/* 标签预览 */
@@ -418,9 +589,9 @@ defineOptions({ name: 'print' })
.label-container {
display: flex;
flex-wrap: wrap;
flex-direction: column;
gap: 20px;
justify-content: center;
align-items: center;
margin-bottom: 20px;
}
@@ -465,6 +636,7 @@ defineOptions({ name: 'print' })
.label-value {
font-size: 12px;
font-weight: bold;
flex: 1;
}
@@ -484,6 +656,13 @@ defineOptions({ name: 'print' })
color: #666;
}
.mark-number {
font-size: 10px;
margin-top: 5px;
text-align: center;
font-weight: bold;
}
.serial-number {
font-size: 12px;
margin-top: 5px;