打印条码页面完善

src/views/components/QrCodeDemo.vue

@@ -25,17 +25,48 @@
       </el-select>
     </div>
     <div class="body-container">
-      <div class="cardOne" style="margin-top:30px; margin-left:-10px ">
+      <el-row :gutter="32">
+        <el-col :span="12">
+          <div class="cardOne" style="">
             <el-card class="box-card">
               <div slot="header" class="clearfix">
                 <el-button
                   type="primary"
                   @click="firstButton"
                 >点击生成二维码</el-button>
+                <!-- <el-button style="float: right; padding: 3px 0" type="text"
+                  >打印二维码</el-button
+                > -->
                 <el-button
-              style="float: right; padding: 3px 0"
                   type="text"
-            >导出二维码</el-button>
+                  style="float: right; padding: 3px 0"
+                  @click="dialogTableVisibleOne = true"
+                >打印二维码</el-button>
+
+                <el-dialog
+                  title=""
+                  :visible.sync="dialogTableVisibleOne"
+                  width="50%"
+                >
+                  <div style="margin-left:180px">
+                    <qrcode-vue :value="qrCode" :size="size" level="H" />
+                  </div>
+                  <span slot="footer" class="dialog-footer">
+                    <el-button
+                      @click="dialogTableVisibleOne = false"
+                    >取 消</el-button>
+                    <el-button type="danger">打印二维码</el-button>
+                    <el-button
+                      type="primary"
+                      @click="dialodialogTableVisibleOnegVisible = false"
+                    >确 定</el-button>
+                  </span>
+                </el-dialog>
+
+                <!--
+                <el-dialog :visible.sync="dialogTableVisibleOne" width="500px">
+                  <qrcode-vue :value="qrCode" :size="size" level="H" />
+                </el-dialog> -->
               </div>
               <div class="item1">
                 <div>
@@ -44,25 +75,54 @@
               </div>
             </el-card>
           </div>
-      <div class="cardTwo" style="margin-left:52%; margin-top:-38%">
-        <el-card class="box-card">
+        </el-col>
+        <el-col :span="12" />
+      </el-row>
+      <el-row :gutter="32" style="margin-top:40px">
+        <el-col :span="24">
+          <div class="cardTwo" style="with:100% margin-top:60px">
+            <el-card class=".box-cardFirst">
               <div slot="header" class="clearfix">
                 <el-button
                   type="primary"
                   @click="SecButton"
                 >点击生成条形码</el-button>
+
                 <el-button
-              style="float: right; padding: 3px 0"
                   type="text"
-            >导出条形码</el-button>
+                  style="float: right; padding: 3px 0"
+                  @click="dialogTableVisibleTwo = true"
+                >打印条形码</el-button>
+
+                <el-dialog
+                  title=""
+                  :visible.sync="dialogTableVisibleTwo"
+                  width="60%"
+                >
+                  <div style="margin-left:100px">
+                    <barcode :value="maBarCode" :format="barcodeFormat" />
+                  </div>
+                  <span slot="footer" class="dialog-footer">
+                    <el-button
+                      @click="dialogTableVisibleTwo = false"
+                    >取 消</el-button>
+                    <el-button type="danger">打印条形码</el-button>
+                    <el-button
+                      type="primary"
+                      @click="dialogTableVisibleTwo = false"
+                    >确 定</el-button>
+                  </span>
+                </el-dialog>
               </div>
               <div class="item2">
                 <div>
-              <barcode :value="qrCode" :format="barcodeFormat" />
+                  <barcode :value="maBarCode" :format="barcodeFormat" />
                 </div>
               </div>
             </el-card>
           </div>
+        </el-col>
+      </el-row>
     </div>
   </div>
 </template>
@@ -76,11 +136,14 @@ export default {
   },
   data() {
     return {
+      dialogTableVisibleOne: false,
+      dialogTableVisibleTwo: false,
       nowBarCode: '',
       size: 300,
       barcodeValue: 'test',
       barcodeFormat: '',
       qrCode: '',
+      maBarCode: '',
       materialCode: '',
       options: [
         {
@@ -138,6 +201,13 @@ export default {
   mounted() {},
   methods: {
     firstButton() {
+      if (this.materialCode === '') {
+        this.$message({
+          message: '请先输入物料编码',
+          type: 'warning'
+        })
+        return
+      }
       this.qrCode = this.materialCode
       console.log(this.materialCode)
       this.$message({
@@ -146,6 +216,13 @@ export default {
       })
     },
     SecButton() {
+      if (this.materialCode === '') {
+        this.$message({
+          message: '请先输入物料编码',
+          type: 'warning'
+        })
+        return
+      }
       if (this.nowBarCode === '') {
         this.$message({
           message: '请先选择条形码类型',
@@ -153,7 +230,7 @@ export default {
         })
         return
       }
-      this.qrCode = this.materialCode
+      this.maBarCode = this.materialCode
       console.log('nowBarCode', this.nowBarCode)
       this.barcodeFormat = this.nowBarCode.value
     }
@@ -163,7 +240,7 @@ export default {
 
 <style scoped>
 .app-container .body-container {
-  padding: 20px 20px 20px 20px;
+  padding: 40px 20px 20px 20px;
 }
 .head-container {
   margin-top: 0px;
@@ -194,4 +271,8 @@ export default {
 .box-card {
   width: 480px;
 }
+.box-cardFirst {
+  margin-top: 100px;
+  width: 100%;
+}
 </style>