Quellcode durchsuchen

调整赋码打印标签展示

gongwencan vor 4 Monaten
Ursprung
Commit
9eb360e80d
2 geänderte Dateien mit 29 neuen und 4 gelöschten Zeilen
  1. 2 2
      src/assets/main.scss
  2. 27 2
      src/views/TagCode.vue

+ 2 - 2
src/assets/main.scss

@@ -92,7 +92,7 @@
   .tag-materiel-info {
     font-size: calc(10px * var(--scalc));
     height: calc(9mm * var(--scalc));
-    margin-top: calc(3mm * var(--scalc));
+    margin-top: calc(1.5mm * var(--scalc));
 
     &:empty {
       border: 1px dashed var(--border-color);
@@ -105,7 +105,7 @@
 
       &:after {
         content: "(包装数量)";
-        margin-left: calc(2.15mm * var(--scalc));
+        margin-left: calc(5mm * var(--scalc));
         color: var(--empty-color);
       }
     }

+ 27 - 2
src/views/TagCode.vue

@@ -215,13 +215,13 @@
         <div class="flex tag">
           <div class="flex column flex-1 fit-size tag-info">
             <div class="tag-logo"><img src="@/assets/imgs/logo.png" width="100%" height="100%" /></div>
-            <div class="flex column valign-center tag-materiel-info">
+            <div class="flex column valign-center tag-materiel-info" :style="{ fontSize: goodsNameFontSize + 'px' }">
               <template v-if="qrData">
                 <div>{{ qrData.goodsName }},</div>
                 <div>({{ qrData.packageNumber }})</div>
               </template>
             </div>
-            <div class="flex center tag-provider-name">{{ qrData ? qrData.providerName : '' }}</div>
+            <div class="flex center tag-provider-name" :style="{ fontSize: providerNameFontSize + 'px' }">{{ qrData ? qrData.providerName : '' }}</div>
           </div>
           <div class="tag-qr">
             <qr-code-view v-if="qrData" :code="qrData.qrCode"></qr-code-view>
@@ -244,6 +244,14 @@ export default {
   data: () => ({
     qrData: null
   }),
+  computed: {
+    goodsNameFontSize () {
+      return this.qrData && this.qrData.goodsName ? this.calculateFontSize(this.qrData.goodsName) : 20
+    },
+    providerNameFontSize () {
+      return this.qrData && this.qrData.providerName ? this.calculateFontSize(this.qrData.providerName) : 20
+    }
+  },
   methods: {
     onOpenDetailEditorBtnClick (data) {
       this.$$request(TagCode.$$api.getDetail, data, this)
@@ -323,6 +331,23 @@ export default {
     },
     tagSelectAble (row) {
       return row.tagApplyStateId === '2' || row.tagApplyStateId === '3'
+    },
+    calculateFontSize (text) {
+      const chineseCharRegex = /[\u4e00-\u9fa5]/g
+      const chineseChars = text.match(chineseCharRegex) || []
+      const otherChars = text.length - chineseChars.length
+
+      const length = chineseChars.length + otherChars * 0.5
+
+      if (length <= 20) {
+        return 20
+      } else if (length > 20 && length <= 36) {
+        return 16
+      } else if (length > 36 && length <= 80) {
+        return 14
+      } else {
+        return 12
+      }
     }
   }
 }