yangg 5 сар өмнө
parent
commit
f6b899d737

+ 3 - 3
manager-admin/src/views/basicSetting/goods/editForm/Sku.vue

@@ -9,7 +9,7 @@
         <span style="font-size: 12px;color: #606266;margin-left: 30px;"></span>
         <span style="font-size: 12px;color: #606266;margin-left: 30px;"></span>
       </el-form-item>
       </el-form-item>
       <el-form-item label="序列号" >
       <el-form-item label="序列号" >
-        <el-radio-group v-model="formData.haveSn">
+        <el-radio-group v-model="formData.have_sn">
           <el-radio :label="false">无</el-radio>
           <el-radio :label="false">无</el-radio>
           <el-radio :label="true">有</el-radio>
           <el-radio :label="true">有</el-radio>
         </el-radio-group>
         </el-radio-group>
@@ -30,7 +30,7 @@
           :goodsInfo="formData"
           :goodsInfo="formData"
           :categoryId="category_id"
           :categoryId="category_id"
           :have-spec="formData.haveSpec"
           :have-spec="formData.haveSpec"
-          :have-sn="formData.haveSn"
+          :have-sn="formData.have_sn"
           :hireOrSail="hire_or_sail"
           :hireOrSail="hire_or_sail"
           :sku_sn="skuSn"
           :sku_sn="skuSn"
         />
         />
@@ -69,7 +69,7 @@ export default {
       // 表单数据
       // 表单数据
       formData: {
       formData: {
         haveSpec:false,
         haveSpec:false,
-        haveSn:false,
+        have_sn:false,
       },
       },
       formRules: {
       formRules: {
         haveSpec: [this.MixinRequired('请选择规格类型', 'change')],
         haveSpec: [this.MixinRequired('请选择规格类型', 'change')],

+ 2 - 2
manager-admin/src/views/basicSetting/goods/editForm/index.vue

@@ -88,7 +88,7 @@ export default {
       console.log("formData:",this.formData);
       console.log("formData:",this.formData);
       /* this.formData.image_list=this.formData.images.split(',') */
       /* this.formData.image_list=this.formData.images.split(',') */
       this.formData.haveSpec = this.formData.spec;
       this.formData.haveSpec = this.formData.spec;
-      this.formData.haveSn = this.formData.have_sn;
+      this.formData.have_sn = this.formData.have_sn;
     },
     },
     /** 提交表单 */
     /** 提交表单 */
     async submitForm() {
     async submitForm() {
@@ -104,7 +104,7 @@ export default {
         this.formData.sn_code = this.formData.product_list[0].sn_code;
         this.formData.sn_code = this.formData.product_list[0].sn_code;
         const formDataCopy = this.MixinClone(this.formData);
         const formDataCopy = this.MixinClone(this.formData);
         formDataCopy.spec = formDataCopy.haveSpec;
         formDataCopy.spec = formDataCopy.haveSpec;
-        formDataCopy.have_sn = formDataCopy.haveSn;
+        formDataCopy.have_sn = formDataCopy.have_sn;
         formDataCopy.hire_or_sail = this.hire_or_sail;
         formDataCopy.hire_or_sail = this.hire_or_sail;
         if (formDataCopy.haveSpec) {
         if (formDataCopy.haveSpec) {
           formDataCopy.product_list.map((item) => {
           formDataCopy.product_list.map((item) => {

+ 53 - 3
manager-admin/src/views/basicSetting/skuSort.vue

@@ -643,8 +643,15 @@ export default {
             (option) => option.value === this.qrCodeSelectedSize
             (option) => option.value === this.qrCodeSelectedSize
           );
           );
           
           
-          // 使用对应尺寸的 qrSize
-          new QRCode(element, {
+          // 创建一个容器来包裹二维码和文字
+          const container = document.createElement('div');
+          container.style.position = 'relative';
+          container.style.width = `${selectedSize.qrSize}px`;
+          container.style.height = `${selectedSize.qrSize}px`;
+          element.appendChild(container);
+
+          // 生成二维码
+          new QRCode(container, {
             text: code,
             text: code,
             width: selectedSize.qrSize,
             width: selectedSize.qrSize,
             height: selectedSize.qrSize,
             height: selectedSize.qrSize,
@@ -652,6 +659,31 @@ export default {
             colorLight: "#ffffff",
             colorLight: "#ffffff",
             correctLevel: QRCode.CorrectLevel.H
             correctLevel: QRCode.CorrectLevel.H
           });
           });
+
+          // 创建文字层
+          const textOverlay = document.createElement('div');
+          textOverlay.style.position = 'absolute';
+          textOverlay.style.top = '50%';
+          textOverlay.style.left = '50%';
+          textOverlay.style.transform = 'translate(-50%, -50%)';
+          textOverlay.style.backgroundColor = 'white';
+          textOverlay.style.padding = '2px 2px';
+          textOverlay.style.fontSize = `${selectedSize.qrSize * 0.1}px`; // 文字大小随二维码大小变化
+          textOverlay.style.textAlign='center'
+          textOverlay.style.fontWeight = 'bold';
+          textOverlay.textContent = "SKU";
+          container.appendChild(textOverlay);
+
+          // 在二维码图片加载完成后调整文字背景大小
+          const qrImage = container.querySelector('img');
+          if (qrImage) {
+            qrImage.onload = () => {
+              const textWidth = textOverlay.offsetWidth;
+              const textHeight = textOverlay.offsetHeight;
+              /* textOverlay.style.width = `${textWidth + 10}px`; // 添加一些内边距
+              textOverlay.style.height = `${textHeight + 4}px`; */
+            };
+          }
         }
         }
       });
       });
     },
     },
@@ -745,7 +777,7 @@ export default {
       });
       });
     },
     },
 
 
-    // ��改获取条码配置的方法
+    // 改获取条码配置的方法
     getBarcodeOptions() {
     getBarcodeOptions() {
       const sizeConfig = {
       const sizeConfig = {
         large: { width: 1.5, height: 40 },
         large: { width: 1.5, height: 40 },
@@ -1285,4 +1317,22 @@ export default {
     margin-bottom: 0;
     margin-bottom: 0;
   }
   }
 }
 }
+
+.qrcode-container {
+  position: relative;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+@media print {
+  .qrcode-container {
+    page-break-inside: avoid;
+  }
+  
+  /* 确保文字层在打印时也能正确显示 */
+  .qrcode-container > div {
+    position: relative !important;
+  }
+}
 </style>
 </style>