出场二维码控制显示

resources/views/personnel/checking-in/importAndExportQRCode.blade.php

@@ -18,11 +18,17 @@
                     <h3 class="text-center text-dark">首次扫描后将与设备绑定，之后扫描需使用原设备与原软件！</h3><br>
                     <h4 class="text-center text-danger">如更换设备请联系管理人员解除设备绑定！</h4>
                 </div>
+                <div class="text-center">
+                    <button class="btn btn-secondary" v-if="is_show_export" @click="showExportQrcode()">显示出场码</button>
+                    <button class="btn btn-secondary" v-else @click="hiddenExportQrcode()">隐藏出场码</button>
+                </div>
 
                 <div class="row">
-                    <div class="col-6 text-center" v-for="importAndExportQRCode in importAndExportQRCodes" >
-                            <img id="img" class="img-thumbnail img-fluid"  :src="'data:image/png;base64,'+importAndExportQRCode.src" width="75%"/>
+                    <div class="col-6 text-center" v-for="(importAndExportQRCode,i) in importAndExportQRCodes" >
+                        <div :id="'hiddenCode-'+importAndExportQRCode.source">
+                        <img id="img" class="img-thumbnail img-fluid"  :src="'data:image/png;base64,'+importAndExportQRCode.src" width="75%"/>
                         <p class="font-weight-bold m-2 h1 text-center" style="color: red">@{{ importAndExportQRCode.source }}</p>
+                        </div>
                     </div>
                 </div>
             </div>
@@ -51,6 +57,7 @@
                     @endforeach
                 ],
                 next_refresh_time:'{{$next_refresh_time}}',
+                is_show_export:false,
             },
             mounted(){
                 let _this=this;
@@ -68,6 +75,18 @@
                     });
                 };
                 refreshQRCode();
+            },
+            methods:{
+                hiddenExportQrcode(){
+                    let div = document.getElementById('hiddenCode-出场');
+                    div.setAttribute("style","display:none");
+                    this.is_show_export=true;
+                },
+                showExportQrcode(){
+                    let div = document.getElementById('hiddenCode-出场');
+                    div.setAttribute("style","display");
+                    this.is_show_export=false;
+                },
             }
         });
     </script>