修改条形码的样式

src/views/produce/components/encodingDialog/index.vue

@@ -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;
       }
     }
   }

src/views/produce/components/encodingDialog/index80x40.vue

@@ -92,14 +92,27 @@
           :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>
+          </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-raw" v-if="item.codeStr !== item.barcodeValue">
+            {{ item.codeStr }}
+          </div>
         </div>
       </div>
     </div>
@@ -177,6 +190,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 || '',
@@ -185,6 +209,7 @@
             batchNo,
             feedQuantity,
             codeStr,
+            barcodeValue,
             qrCodeUrl: '',
             model: isJobBom
               ? item.modelType || item.model || ''
@@ -224,14 +249,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: 4,
-              height: 80,
-              displayValue: false,
-              margin: 6
-            });
+            const content = item.barcodeValue || item.productCode || 'NA';
+            try {
+              JsBarcode(canvasArr[0], content, {
+                format: 'CODE128',
+                width: 2,
+                height: 50,
+                displayValue: false,
+                margin: 4,
+                background: '#ffffff',
+                lineColor: '#1f2329'
+              });
+            } catch (err) {
+              console.error('Barcode生成失败:', err, content);
+            }
           }
         });
       },
@@ -430,20 +461,56 @@
                 .barcode-card {
                   width: 80mm;
                   height: 40mm;
-                  padding: 1.5mm 2mm;
+                  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: 0.8mm;
                 }
                 .barcode-card:last-child { page-break-after: avoid; }
-                .barcode-info { text-align: center; margin-bottom: 1mm; }
-                .barcode-info p { margin: 0.3mm 0; font-size: 7pt; color: #333; font-weight: 500; }
-                .barcode-wrap { margin: 0 auto; text-align: center; }
+                .barcode-card-header {
+                  display: flex;
+                  align-items: center;
+                  justify-content: space-between;
+                  padding: 0.8mm 2mm;
+                  background: #1f2329;
+                  color: #fff;
+                }
+                .barcode-card-title {
+                  flex: 1;
+                  font-size: 7pt;
+                  font-weight: 700;
+                  letter-spacing: 0.2mm;
+                  text-align: left;
+                  word-break: break-all;
+                  white-space: nowrap;
+                  overflow: hidden;
+                  text-overflow: ellipsis;
+                }
+                .barcode-meta {
+                  display: flex;
+                  justify-content: center;
+                  gap: 4mm;
+                  padding: 1mm 2mm 0.5mm;
+                  flex-wrap: wrap;
+                  font-size: 6.5pt;
+                }
+                .barcode-meta .meta-item { display: inline-flex; align-items: center; }
+                .barcode-meta .meta-label { color: #606266; margin-right: 0.6mm; }
+                .barcode-meta .meta-value { color: #1f2329; font-weight: 600; }
+                .barcode-wrap { margin: 0 auto; text-align: center; padding: 0.5mm; }
                 .barcode-wrap img { width: 72mm; height: 14mm; image-rendering: pixelated; }
-                .barcode-text { font-size: 6.5pt; color: #333; text-align: center; margin-top: 0.5mm; }
+                .barcode-raw {
+                  margin-top: 0.5mm;
+                  padding: 0 2mm;
+                  font-size: 5.5pt;
+                  color: #606266;
+                  text-align: center;
+                  word-break: break-all;
+                  line-height: 1.2;
+                }
               </style>
             </head>
             <body>${html}</body>
@@ -570,35 +637,77 @@
     }
 
     .barcode-card {
-      border: 1px solid #dcdfe6;
-      border-radius: 4px;
-      padding: 16px;
+      position: relative;
+      border: 1px solid #ebeef5;
+      border-radius: 8px;
+      padding: 0 0 16px;
       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: 4px 0;
-          font-size: 13px;
-          color: #606266;
+      .barcode-card-header {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        padding: 8px 14px;
+        background: linear-gradient(90deg, #1f2329 0%, #2c3138 100%);
+        color: #fff;
+
+        .barcode-card-title {
+          font-size: 14px;
+          font-weight: 600;
+          letter-spacing: 1px;
+          text-align: left;
+          flex: 1;
+          word-break: break-all;
+        }
+      }
+
+      .barcode-meta {
+        display: flex;
+        justify-content: center;
+        gap: 20px;
+        padding: 10px 14px 4px;
+        flex-wrap: wrap;
+
+        .meta-item {
+          display: flex;
+          align-items: center;
+          font-size: 12px;
+
+          .meta-label {
+            color: #909399;
+            margin-right: 6px;
+          }
+
+          .meta-value {
+            color: #1f2329;
+            font-weight: 600;
+          }
         }
       }
 
       .barcode-wrap {
-        margin: 12px auto;
+        margin: 6px auto 4px;
         display: flex;
         justify-content: center;
+        padding: 4px 12px;
+        background: #fff;
 
         canvas {
           max-width: 100%;
         }
       }
 
-      .barcode-text {
-        font-size: 12px;
-        color: #606266;
-        margin-top: 6px;
+      .barcode-raw {
+        margin-top: 4px;
+        padding: 0 14px;
+        font-size: 11px;
+        color: #909399;
+        word-break: break-all;
+        line-height: 1.5;
       }
     }
   }