|
|
@@ -93,14 +93,29 @@
|
|
|
:key="'bar-' + index"
|
|
|
class="barcode-card"
|
|
|
>
|
|
|
- <div class="barcode-info">
|
|
|
- <p>型号：{{ item.model }}</p>
|
|
|
- <p>规格：{{ item.specification }}</p>
|
|
|
+ <div class="barcode-card-header">
|
|
|
+ <span class="barcode-card-title">
|
|
|
+ {{ item.partName || item.productName || '产品标识' }}
|
|
|
+ </span>
|
|
|
+ <!-- <span class="barcode-card-tag">BARCODE</span> -->
|
|
|
+ </div>
|
|
|
+ <div class="barcode-meta">
|
|
|
+ <div class="meta-item">
|
|
|
+ <span class="meta-label">型号：</span>
|
|
|
+ <span class="meta-value">{{ item.model || '-' }}</span>
|
|
|
+ </div>
|
|
|
+ <div class="meta-item">
|
|
|
+ <span class="meta-label">规格：</span>
|
|
|
+ <span class="meta-value">{{ item.specification || '-' }}</span>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
<div class="barcode-wrap">
|
|
|
<canvas :ref="'barcode_' + index"></canvas>
|
|
|
</div>
|
|
|
- <div class="barcode-text">{{ item.codeStr }}</div>
|
|
|
+ <!-- <div class="barcode-text">{{ item.barcodeValue }}</div> -->
|
|
|
+ <div class="barcode-raw" v-if="item.codeStr !== item.barcodeValue">
|
|
|
+ {{ item.codeStr }}
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
@@ -178,6 +193,17 @@
|
|
|
]
|
|
|
.map(sanitize)
|
|
|
.join(';');
|
|
|
+ const barcodeValue = isJobBom
|
|
|
+ ? codeStr
|
|
|
+ : [productCode, partCode, batchNo, certificateNo]
|
|
|
+ .map((v) =>
|
|
|
+ String(v == null ? '' : v).replace(/[^\x20-\x7E]/g, '')
|
|
|
+ )
|
|
|
+ .filter(Boolean)
|
|
|
+ .join('-') ||
|
|
|
+ productCode ||
|
|
|
+ partCode ||
|
|
|
+ 'NA';
|
|
|
return {
|
|
|
productCode,
|
|
|
productName: item.topCategoryName || '',
|
|
|
@@ -186,6 +212,7 @@
|
|
|
batchNo,
|
|
|
feedQuantity,
|
|
|
codeStr,
|
|
|
+ barcodeValue,
|
|
|
qrCodeUrl: '',
|
|
|
model: isJobBom
|
|
|
? item.modelType || item.model || ''
|
|
|
@@ -225,14 +252,20 @@
|
|
|
const refKey = 'barcode_' + index;
|
|
|
const canvasArr = this.$refs[refKey];
|
|
|
if (canvasArr && canvasArr[0]) {
|
|
|
- const content = item.codeStr || item.productCode || String(index);
|
|
|
- JsBarcode(canvasArr[0], content, {
|
|
|
- format: 'CODE128',
|
|
|
- width: 5,
|
|
|
- height: 120,
|
|
|
- displayValue: false,
|
|
|
- margin: 10
|
|
|
- });
|
|
|
+ const content = item.barcodeValue || item.productCode || 'NA';
|
|
|
+ try {
|
|
|
+ JsBarcode(canvasArr[0], content, {
|
|
|
+ format: 'CODE128',
|
|
|
+ width: 2,
|
|
|
+ height: 70,
|
|
|
+ displayValue: false,
|
|
|
+ margin: 6,
|
|
|
+ background: '#ffffff',
|
|
|
+ lineColor: '#1f2329'
|
|
|
+ });
|
|
|
+ } catch (err) {
|
|
|
+ console.error('Barcode生成失败:', err, content);
|
|
|
+ }
|
|
|
}
|
|
|
});
|
|
|
},
|
|
|
@@ -441,20 +474,73 @@
|
|
|
.barcode-card {
|
|
|
width: 100mm;
|
|
|
height: 80mm;
|
|
|
- padding: 3mm 4mm;
|
|
|
+ padding: 0;
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
- justify-content: center;
|
|
|
- align-items: center;
|
|
|
page-break-after: always;
|
|
|
overflow: hidden;
|
|
|
+ border: 1px solid #000;
|
|
|
+ border-radius: 1mm;
|
|
|
}
|
|
|
.barcode-card:last-child { page-break-after: avoid; }
|
|
|
- .barcode-info { text-align: center; margin-bottom: 2mm; }
|
|
|
- .barcode-info p { margin: 1mm 0; font-size: 12pt; color: #333; font-weight: 500; }
|
|
|
- .barcode-wrap { margin: 0 auto; text-align: center; }
|
|
|
- .barcode-wrap img { width: 92mm; height: 38mm; image-rendering: pixelated; }
|
|
|
- .barcode-text { font-size: 11pt; color: #333; text-align: center; margin-top: 1mm; }
|
|
|
+ .barcode-card-header {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ padding: 1.5mm 3mm;
|
|
|
+ background: #1f2329;
|
|
|
+ color: #fff;
|
|
|
+ }
|
|
|
+ .barcode-card-title {
|
|
|
+ flex: 1;
|
|
|
+ font-size: 9pt;
|
|
|
+ font-weight: 700;
|
|
|
+ letter-spacing: 0.3mm;
|
|
|
+ text-align: left;
|
|
|
+ word-break: break-all;
|
|
|
+ }
|
|
|
+ .barcode-card-tag {
|
|
|
+ flex-shrink: 0;
|
|
|
+ margin-left: 2mm;
|
|
|
+ padding: 0.3mm 1.5mm;
|
|
|
+ font-size: 7pt;
|
|
|
+ letter-spacing: 0.4mm;
|
|
|
+ color: #1f2329;
|
|
|
+ background: #f5c243;
|
|
|
+ border-radius: 0.5mm;
|
|
|
+ font-weight: 700;
|
|
|
+ }
|
|
|
+ .barcode-meta {
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ gap: 6mm;
|
|
|
+ padding: 2mm 3mm 1mm;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ font-size: 9pt;
|
|
|
+ }
|
|
|
+ .barcode-meta .meta-item { display: inline-flex; align-items: center; }
|
|
|
+ .barcode-meta .meta-label { color: #606266; margin-right: 1mm; }
|
|
|
+ .barcode-meta .meta-value { color: #1f2329; font-weight: 600; }
|
|
|
+ .barcode-wrap { margin: 0 auto; text-align: center; padding: 1mm; }
|
|
|
+ .barcode-wrap img { width: 92mm; height: 28mm; image-rendering: pixelated; }
|
|
|
+ .barcode-text {
|
|
|
+ font-size: 10pt;
|
|
|
+ color: #1f2329;
|
|
|
+ text-align: center;
|
|
|
+ margin-top: 1mm;
|
|
|
+ font-family: 'Consolas', 'Courier New', monospace;
|
|
|
+ letter-spacing: 0.6mm;
|
|
|
+ font-weight: 600;
|
|
|
+ }
|
|
|
+ .barcode-raw {
|
|
|
+ margin-top: 1mm;
|
|
|
+ padding: 0 3mm;
|
|
|
+ font-size: 7pt;
|
|
|
+ color: #606266;
|
|
|
+ text-align: center;
|
|
|
+ word-break: break-all;
|
|
|
+ line-height: 1.3;
|
|
|
+ }
|
|
|
</style>
|
|
|
</head>
|
|
|
<body>${html}</body>
|
|
|
@@ -596,25 +682,76 @@
|
|
|
}
|
|
|
|
|
|
.barcode-card {
|
|
|
- border: 1px solid #dcdfe6;
|
|
|
- border-radius: 4px;
|
|
|
- padding: 24px;
|
|
|
+ position: relative;
|
|
|
+ border: 1px solid #ebeef5;
|
|
|
+ border-radius: 8px;
|
|
|
+ padding: 0 0 20px;
|
|
|
margin-bottom: 16px;
|
|
|
text-align: center;
|
|
|
background: #fff;
|
|
|
+ box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
|
|
|
+ overflow: hidden;
|
|
|
|
|
|
- .barcode-info {
|
|
|
- p {
|
|
|
- margin: 6px 0;
|
|
|
+ .barcode-card-header {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ padding: 10px 18px;
|
|
|
+ background: linear-gradient(90deg, #1f2329 0%, #2c3138 100%);
|
|
|
+ color: #fff;
|
|
|
+
|
|
|
+ .barcode-card-title {
|
|
|
font-size: 15px;
|
|
|
- color: #606266;
|
|
|
+ font-weight: 600;
|
|
|
+ letter-spacing: 1px;
|
|
|
+ text-align: left;
|
|
|
+ flex: 1;
|
|
|
+ word-break: break-all;
|
|
|
+ }
|
|
|
+
|
|
|
+ .barcode-card-tag {
|
|
|
+ flex-shrink: 0;
|
|
|
+ margin-left: 12px;
|
|
|
+ padding: 2px 8px;
|
|
|
+ font-size: 11px;
|
|
|
+ letter-spacing: 1.5px;
|
|
|
+ color: #1f2329;
|
|
|
+ background: #f5c243;
|
|
|
+ border-radius: 3px;
|
|
|
+ font-weight: 700;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .barcode-meta {
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ gap: 24px;
|
|
|
+ padding: 14px 18px 6px;
|
|
|
+ flex-wrap: wrap;
|
|
|
+
|
|
|
+ .meta-item {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ font-size: 13px;
|
|
|
+
|
|
|
+ .meta-label {
|
|
|
+ color: #909399;
|
|
|
+ margin-right: 6px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .meta-value {
|
|
|
+ color: #1f2329;
|
|
|
+ font-weight: 600;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.barcode-wrap {
|
|
|
- margin: 20px auto;
|
|
|
+ margin: 8px auto 4px;
|
|
|
display: flex;
|
|
|
justify-content: center;
|
|
|
+ padding: 8px 16px;
|
|
|
+ background: #fff;
|
|
|
|
|
|
canvas {
|
|
|
max-width: 100%;
|
|
|
@@ -623,8 +760,20 @@
|
|
|
|
|
|
.barcode-text {
|
|
|
font-size: 14px;
|
|
|
- color: #606266;
|
|
|
- margin-top: 8px;
|
|
|
+ color: #1f2329;
|
|
|
+ font-family: 'Consolas', 'Courier New', monospace;
|
|
|
+ letter-spacing: 2px;
|
|
|
+ font-weight: 600;
|
|
|
+ margin-top: 4px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .barcode-raw {
|
|
|
+ margin-top: 6px;
|
|
|
+ padding: 0 18px;
|
|
|
+ font-size: 11px;
|
|
|
+ color: #909399;
|
|
|
+ word-break: break-all;
|
|
|
+ line-height: 1.5;
|
|
|
}
|
|
|
}
|
|
|
}
|
695593266@qq.com