条码优化

src/views/BarCode/SSCC.vue

@@ -31,7 +31,7 @@
                   ></el-option>
                 </el-select>
               </el-form-item>
-
+              <!-- 含有校验码类型 -->
               <template v-if="info.isCheck === 1">
                 <el-form-item>
                   <el-input
@@ -42,6 +42,7 @@
                     class="CT2_form_inline"
                     :type="info.inputType"
                     @input="changeCValue($event, info.maxLength, info.flag, i)"
+                    @blur="handleBlur($event, info, i)"
                     clearable
                   ></el-input>
                 </el-form-item>
@@ -51,6 +52,7 @@
                   </div>
                 </el-form-item>
               </template>
+              <!-- 时间类型 -->
               <template v-else-if="info.isDate === 1">
                 <el-form-item>
                   <el-date-picker
@@ -60,10 +62,12 @@
                     format="yyMMdd"
                     value-format="yyMMdd"
                     clearable
+                    class="DT_form_inline"
                   >
                   </el-date-picker>
                 </el-form-item>
               </template>
+              <!-- 剩余其他类型 -->
               <template v-else>
                 <el-form-item>
                   <el-input
@@ -74,6 +78,7 @@
                     class="CT1_form_inline"
                     :type="info.inputType"
                     clearable
+                    @blur="handleBlur($event, info, i)"
                   ></el-input>
                 </el-form-item>
               </template>
@@ -83,6 +88,7 @@
                   @click="addRow"
                   src="../../assets/image/barcode/add.png"
                   alt=""
+                  class="button_sty"
                 />
               </el-form-item>
               <el-form-item v-else>
@@ -90,6 +96,7 @@
                   @click="deleteRow(i)"
                   src="../../assets/image/barcode/delete.png"
                   alt=""
+                  class="button_sty"
                 />
               </el-form-item>
             </template>
@@ -221,7 +228,7 @@ export default {
       });
     },
     deleteRow(i) {
-      this.writeCodeList.splice(0, i);
+      this.writeCodeList.splice(i, 1);
     },
     changeCValue(val, length, code, i) {
       console.log(val, length, "------7777----");
@@ -231,6 +238,14 @@ export default {
         this.writeCodeList[i].cValue = val.slice(0, length);
       }
     },
+    handleBlur(event, info, index) {
+      if (
+        event.target.value.length < info.minLength ||
+        event.target.value.length > info.maxLength
+      ) {
+        this.$message.error(info.prompt);
+      }
+    },
     async queryCheckCode(code, content, i) {
       const params = {
         code,
@@ -334,12 +349,14 @@ input::-webkit-inner-spin-button {
   height: 40px;
 }
 .CT1_form_inline.el-input,
-.CT2_form_inline.el-input {
+.CT2_form_inline.el-input,
+.DT_form_inline.el-input {
   border-radius: 2px;
   position: relative;
 }
 .CT1_form_inline.el-input .el-input__inner,
-.CT2_form_inline.el-input .el-input__inner {
+.CT2_form_inline.el-input .el-input__inner,
+.DT_form_inline.el-input .el-input__inner {
   height: 40px;
   border-radius: 2px;
   border: 1px solid #cccccc;
@@ -353,6 +370,14 @@ input::-webkit-inner-spin-button {
   top: 0;
   left: 0;
 }
+.DT_form_inline.el-date-editor,
+.DT_form_inline.el-date-editor .el-input__inner {
+  width: 320px;
+  height: 40px;
+}
+.DT_form_inline.el-input .el-input__inner {
+  padding-left: 40px;
+}
 </style>
 <style lang="scss" scoped>
 .corppay {
@@ -385,6 +410,9 @@ input::-webkit-inner-spin-button {
           color: #999999;
           text-align: center;
         }
+        .button_sty {
+          cursor: pointer;
+        }
       }
       .tag_num {
         width: 72px;

src/views/BarCode/generateSuccess.vue

@@ -8,6 +8,7 @@
         <img :src="codePicture" alt="" />
       </div>
       <div class="down_button" @click="downPicture">下载图片</div>
+      <!-- <a :download="codePicture">下载图片</a> -->
     </div>
   </div>
   <!-- 条码生成成功区域end -->
@@ -24,8 +25,8 @@ export default {
   props: {
     codePicture: {
       type: String,
-      default: '',
-    }
+      default: "",
+    },
   },
   data() {
     return {};
@@ -34,9 +35,33 @@ export default {
   mounted() {},
   methods: {
     downPicture() {
-      window.location.href = this.codePicture;
-    }
-  }
+      // window.location.href = this.codePicture;
+      window.open(this.codePicture, "_blank");
+      this.getUrlBase64(this.codePicture).then((base64) => {
+        let link = document.createElement("a");
+        link.href = base64;
+        link.download = "qrCode.png";
+        link.click();
+      });
+    },
+    getUrlBase64(url) {
+      return new Promise((resolve) => {
+        let canvas = document.createElement("canvas");
+        let ctx = canvas.getContext("2d");
+        let img = new Image();
+        img.crossOrigin = "Anonymous"; //允许跨域
+        img.src = url;
+        img.onload = function () {
+          canvas.height = 102;
+          canvas.width = 300;
+          ctx.drawImage(img, 0, 0, 300, 102);
+          let dataURL = canvas.toDataURL("image/png");
+          canvas = null;
+          resolve(dataURL);
+        };
+      });
+    },
+  },
 };
 </script>
 <style lang="scss" scoped>