zc

package-lock.json

@@ -6584,8 +6584,8 @@
     },
     "file-saver": {
       "version": "2.0.4",
-      "resolved": "https://registry.npm.taobao.org/file-saver/download/file-saver-2.0.4.tgz",
-      "integrity": "sha1-RMQOg1MZyYNqhCIbTiVdS7TLe7U="
+      "resolved": "https://r2.cnpmjs.org/file-saver/-/file-saver-2.0.4.tgz",
+      "integrity": "sha512-QqJr2lQUcwRg9QeCSi1nZFSv4Mx7MYL7oZFFWdjihHfChIC/Qk3PSNCn+pz5OF8fQvmvOPDi+8eN5ienicWXiQ=="
     },
     "filesize": {
       "version": "3.6.1",
@@ -7620,6 +7620,11 @@
       "integrity": "sha1-Cd/Uq50g4p6xw+gLiZA3jfnjy5w=",
       "dev": true
     },
+    "immediate": {
+      "version": "3.0.6",
+      "resolved": "https://r2.cnpmjs.org/immediate/-/immediate-3.0.6.tgz",
+      "integrity": "sha512-XXOFtyqDjNDAQxVfYxuF7g9Il/IbWmmlQg2MYKOH8ExIT1qg6xc4zyS3HaEEATgs1btfzxq15ciUiY7gjSXRGQ=="
+    },
     "import-cwd": {
       "version": "2.1.0",
       "resolved": "https://registry.nlark.com/import-cwd/download/import-cwd-2.1.0.tgz",
@@ -8503,6 +8508,46 @@
         "verror": "1.10.0"
       }
     },
+    "jszip": {
+      "version": "3.10.1",
+      "resolved": "https://r.cnpmjs.org/jszip/-/jszip-3.10.1.tgz",
+      "integrity": "sha512-xXDvecyTpGLrqFrvkrUSoxxfJI5AH7U8zxxtVclpsUtMCq4JQ290LY8AW5c7Ggnr/Y/oK+bQMbqK2qmtk3pN4g==",
+      "requires": {
+        "lie": "~3.3.0",
+        "pako": "~1.0.2",
+        "readable-stream": "~2.3.6",
+        "setimmediate": "^1.0.5"
+      },
+      "dependencies": {
+        "readable-stream": {
+          "version": "2.3.8",
+          "resolved": "https://r.cnpmjs.org/readable-stream/-/readable-stream-2.3.8.tgz",
+          "integrity": "sha512-8p0AUk4XODgIewSi0l8Epjs+EVnWiK7NoDIEGU0HhE7+ZyY8D1IMY7odu5lRrFXGg71L15KG8QrPmum45RTtdA==",
+          "requires": {
+            "core-util-is": "~1.0.0",
+            "inherits": "~2.0.3",
+            "isarray": "~1.0.0",
+            "process-nextick-args": "~2.0.0",
+            "safe-buffer": "~5.1.1",
+            "string_decoder": "~1.1.1",
+            "util-deprecate": "~1.0.1"
+          }
+        },
+        "safe-buffer": {
+          "version": "5.1.2",
+          "resolved": "https://r2.cnpmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
+          "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g=="
+        },
+        "string_decoder": {
+          "version": "1.1.1",
+          "resolved": "https://r2.cnpmjs.org/string_decoder/-/string_decoder-1.1.1.tgz",
+          "integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==",
+          "requires": {
+            "safe-buffer": "~5.1.0"
+          }
+        }
+      }
+    },
     "just-diff": {
       "version": "5.0.1",
       "resolved": "https://registry.npmmirror.com/just-diff/download/just-diff-5.0.1.tgz",
@@ -8950,6 +8995,14 @@
         "stringify-package": "^1.0.1"
       }
     },
+    "lie": {
+      "version": "3.3.0",
+      "resolved": "https://r2.cnpmjs.org/lie/-/lie-3.3.0.tgz",
+      "integrity": "sha512-UaiMJzeWRlEujzAuw5LokY1L5ecNQYZKfmyZ9L7wDHb/p5etKaxXhohBcrw0EYby+G/NA52vRSN4N39dxHAIwQ==",
+      "requires": {
+        "immediate": "~3.0.5"
+      }
+    },
     "lines-and-columns": {
       "version": "1.2.4",
       "resolved": "https://registry.npmmirror.com/lines-and-columns/download/lines-and-columns-1.2.4.tgz",
@@ -11271,8 +11324,7 @@
     "pako": {
       "version": "1.0.11",
       "resolved": "https://registry.nlark.com/pako/download/pako-1.0.11.tgz?cache=0&sync_timestamp=1627560187062&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fpako%2Fdownload%2Fpako-1.0.11.tgz",
-      "integrity": "sha1-bJWZ00DVTf05RjgCUqNXBaa5kr8=",
-      "dev": true
+      "integrity": "sha1-bJWZ00DVTf05RjgCUqNXBaa5kr8="
     },
     "parallel-transform": {
       "version": "1.2.0",
@@ -13454,8 +13506,7 @@
     "setimmediate": {
       "version": "1.0.5",
       "resolved": "https://registry.nlark.com/setimmediate/download/setimmediate-1.0.5.tgz",
-      "integrity": "sha1-KQy7Iy4waULX1+qbg3Mqt4VvgoU=",
-      "dev": true
+      "integrity": "sha1-KQy7Iy4waULX1+qbg3Mqt4VvgoU="
     },
     "setprototypeof": {
       "version": "1.1.1",

package.json

@@ -48,7 +48,7 @@
     "core-js": "3.8.1",
     "echarts": "^4.9.0",
     "element-ui": "2.15.5",
-    "file-saver": "2.0.4",
+    "file-saver": "^2.0.4",
     "flv.js": "^1.6.2",
     "fuse.js": "6.4.3",
     "highlight.js": "9.18.5",
@@ -58,6 +58,7 @@
     "js-cookie": "2.2.1",
     "js-md5": "^0.7.3",
     "jsencrypt": "3.0.0-rc.1",
+    "jszip": "^3.10.1",
     "mpegts.js": "^1.7.3",
     "mqtt": "^4.2.8",
     "npm": "^8.3.0",

src/components/batchQrCodeDialog/batchQrCodeDialog.vue

@@ -11,16 +11,16 @@
   },
 
 2.必要参数
-
+  codeList:[],
   batchQrCodeDialogData:{},
 
 3.必要方法
 
   //二维码组件开关
   open(type,id,name){
-    if(this.checkSubList.length>0){
+    if(this.codeList.length>0){
       let list = [];
-      this.checkSubList.forEach((item)=>{
+      this.codeList.forEach((item)=>{
         list.push({
           code:item.subId,              //参数
           name:item.subName             //名称
@@ -44,11 +44,10 @@
 <template>
   <div>
     <!--添加/编辑弹窗-->
-    <el-dialog class="batch-qr-code-dialog" title=' '
+    <el-dialog class="batch-qr-code-dialog" :title="batchQrCodeDialogData.title?batchQrCodeDialogData.title:'二维码批量下载'"
                :modal-append-to-body="false"
                :show-close="false" :close-on-click-modal="false" :close-on-press-escape="false"
                :visible.sync="dialogType" v-if="dialogType" width="1210px">
-      <p class="title-p">{{batchQrCodeDialogData.title?batchQrCodeDialogData.title:'二维码'}}</p>
       <div class="for-code-max-box scrollbar-box">
         <div class="for-code-box" v-for="(item,index) in codeList" :key="item.code">
           <vue-qr v-if="dialogType" :ref="'qr'+item.code" class="batch-qr-code-dialog-vue-qr" :text="item.parameter"
@@ -57,11 +56,11 @@
                   :height="item.codeName?240:200"></canvas>
         </div>
       </div>
-      <div class="button-bottom-box">
-        <p class="null-p"></p>
-        <p class="out-p" @click="buttonClick(2)">取消</p>
-        <p class="batch-qr-code-dialog-button-p" @click="buttonClick(1)">批量下载</p>
-        <p class="null-p"></p>
+      <div slot="footer" class="dialog-footer dialog-footer-box">
+        <p class="dialog-footer-button-null"></p>
+        <p class="dialog-footer-button-info" @click="buttonClick(2)">取消</p>
+        <p class="dialog-footer-button-primary" @click="buttonClick(1)">批量下载</p>
+        <p class="dialog-footer-button-null"></p>
       </div>
     </el-dialog>
   </div>
@@ -69,6 +68,8 @@
 
 <script>
   import vueQr from 'vue-qr'
+  import saveAs from 'file-saver'
+  import JSZip from 'jszip'
 
   export default {
     name: 'batchQrCodeDialog',
@@ -135,16 +136,32 @@
       },
       buttonClick(type) {
         if (type == 1) {
-          this.codeList.forEach((item) => {
-            let canvas = this.$refs['canvas'+item.code]
+          // 初始化一个zip打包对象
+          let zip = new JSZip()
+          this.codeList.forEach((item,index) => {
+            let canvas = this.$refs['canvas' + item.code][0];
             const base64Img = canvas.toDataURL('image/png')
-            console.log('base64Img',base64Img)
-            var a = document.createElement('a') // 生成一个a元素
-            var event = new MouseEvent('click') // 创建一个单击事件
-            a.download = this.batchQrCodeDialogData.codeName // 设置图片名称
-            a.href = base64Img // 将生成的URL设置为a.href属性
-            a.dispatchEvent(event)
+            // 这个images文件目录中创建一个base64数据为imgData的图像，图像名是index序号 + item.codeName实验室名称 + '.gif'
+            zip.file((index+1)+'_'+item.codeName+'.gif', base64Img.replace(/^data:image\/(png|jpg);base64,/, ""), { base64: true })
+          })
+          // 把打包内容异步转成blob二进制格式
+          zip.generateAsync({ type: 'blob' }).then(function(content) {
+            // content就是blob数据，这里以 实验室二维码.zip 名称下载
+            // 使用了FileSaver.js
+            saveAs(content, '实验室二维码.zip')
           })
+          this.msgSuccess('操作成功')
+          this.$set(this, 'dialogType', false)
+          if(this.$parent.$refs['table-box']){
+            this.$parent.$refs['table-box'].clearSelection();
+            this.$parent.codeList = [];
+          }else if(this.$parent.$parent.$refs['table-box']){
+            this.$parent.$parent.$refs['table-box'].clearSelection();
+            this.$parent.$parent.codeList = [];
+          }else if(this.$parent.$parent.$parent.$refs['table-box']){
+            this.$parent.$parent.$parent.$refs['table-box'].clearSelection();
+            this.$parent.$parent.$parent.codeList = [];
+          }
         } else {
           this.$set(this, 'dialogType', false)
         }
@@ -157,27 +174,6 @@
   .batch-qr-code-dialog {
     z-index: 10000;
     font-weight: 500;
-    .batch-qr-code-dialog-title-box {
-      display: flex;
-      p:nth-child(1) {
-        flex: 1;
-      }
-      p:nth-child(2) {
-        font-size: 18px;
-        width: 60px;
-        height: 60px;
-        text-align: center;
-        line-height: 60px;
-        color: #999;
-        cursor: pointer;
-      }
-    }
-    .title-p {
-      text-align: center;
-      margin-top: 40px;
-      font-size: 16px;
-      font-weight: 700;
-    }
     .for-code-max-box {
       max-height: 500px;
       .for-code-box {
@@ -196,38 +192,6 @@
         }
       }
     }
-    .button-bottom-box {
-      display: flex;
-      margin: 0 auto 30px;
-      .null-p {
-        flex: 1;
-      }
-      .out-p {
-        width: 100px;
-        height: 40px;
-        line-height: 40px;
-        color: #A9A9A9;
-        background: #fff;
-        border: 1px solid #A9A9A9;
-        border-radius: 4px;
-        text-align: center;
-        cursor: pointer;
-      }
-      .batch-qr-code-dialog-button-p {
-        margin-left: 20px;
-        width: 100px;
-        height: 40px;
-        line-height: 40px;
-        color: #fff;
-        background: #0045AF;
-        border-radius: 4px;
-        text-align: center;
-        cursor: pointer;
-      }
-    }
-    ::v-deep .el-dialog__header {
-      display: none;
-    }
     ::v-deep .el-dialog__body {
       padding: 0;
     }

src/components/qrCodeDialog/index.vue

@@ -34,18 +34,17 @@
 <template>
   <div>
     <!--添加/编辑弹窗-->
-    <el-dialog class="qrCodeDialog" title=' '
+    <el-dialog class="qrCodeDialog" :title="qrCodeDialogData.title?qrCodeDialogData.title:'二维码'"
                :modal-append-to-body="false"
                :show-close="false" :close-on-click-modal="false" :close-on-press-escape="false"
                :visible.sync="dialogType" v-if="dialogType" width="394px">
-      <p class="title-p">{{qrCodeDialogData.title?qrCodeDialogData.title:'二维码'}}</p>
       <vue-qr v-if="dialogType" ref="vueQr" class="qrCodeDialog-vue-qr" :text="vueQrCodeData" :size="200"></vue-qr>
       <canvas class="qrCodeDialog-vue-qr-canvas" id="myCanvas" ref="myCanvas" width="300" :height="qrCodeDialogData.codeName?240:200"></canvas>
-      <div class="button-bottom-box">
-        <p class="null-p"></p>
-        <p class="out-p" @click="buttonClick(2)">取消</p>
-        <p v-if="qrCodeDialogData.download" class="qrCodeDialog-button-p" @click="buttonClick(1)">下载</p>
-        <p class="null-p"></p>
+      <div slot="footer" class="dialog-footer dialog-footer-box">
+        <p class="dialog-footer-button-null"></p>
+        <p class="dialog-footer-button-info" @click="buttonClick(2)">取消</p>
+        <p class="dialog-footer-button-primary" @click="buttonClick(1)">下载</p>
+        <p class="dialog-footer-button-null"></p>
       </div>
     </el-dialog>
   </div>
@@ -127,27 +126,6 @@
   .qrCodeDialog{
     z-index: 10000;
     font-weight:500;
-    .qrCodeDialog-title-box{
-      display: flex;
-      p:nth-child(1){
-        flex:1;
-      }
-      p:nth-child(2){
-        font-size:18px;
-        width:60px;
-        height:60px;
-        text-align: center;
-        line-height:60px;
-        color:#999;
-        cursor: pointer;
-      }
-    }
-    .title-p{
-      text-align: center;
-      margin-top:40px;
-      font-size:16px;
-      font-weight:700;
-    }
     .qrCodeDialog-vue-qr{
       position: absolute;
       z-index:-10;
@@ -161,38 +139,6 @@
       display: block!important;
       margin:20px auto 27px;
     }
-    .button-bottom-box{
-      display: flex;
-      margin:0 auto 30px;
-      .null-p{
-        flex:1;
-      }
-      .out-p{
-        width:100px;
-        height:40px;
-        line-height:40px;
-        color:#A9A9A9;
-        background:#fff;
-        border:1px solid #A9A9A9;
-        border-radius:4px;
-        text-align: center;
-        cursor: pointer;
-      }
-      .qrCodeDialog-button-p{
-        margin-left:20px;
-        width:100px;
-        height:40px;
-        line-height:40px;
-        color:#fff;
-        background:#0045AF;
-        border-radius:4px;
-        text-align: center;
-        cursor: pointer;
-      }
-    }
-    ::v-deep .el-dialog__header{
-      display: none;
-    }
     ::v-deep .el-dialog__body{
       padding:0;
     }

src/views/integratedManagement/laboratoryManagement/subject/index.vue

@@ -226,7 +226,7 @@
         //分级数据
         levelList: [],
         //二维码勾选数据
-        checkSubList:'',
+        codeList:'',
       }
     },
     created() {
@@ -253,16 +253,16 @@
         }else if(item.command == 3){
 
         }else if(item.command == 4){
-          if(this.checkSubList.length>0){
+          if(this.codeList.length>0){
             let list = [];
-            this.checkSubList.forEach((item)=>{
+            this.codeList.forEach((item)=>{
               list.push({
                 code:item.subId,
                 name:item.subName
               })
             })
             this.$set(this,'batchQrCodeDialogData',{
-              title:'二维码批量下载',                                               //弹窗名称(非必传)
+              title:'实验室二维码批量下载',                                               //弹窗名称(非必传)
               type:'1',                                                     //二维码类型 用于区分二维码功能类型
               codeList:list
             });
@@ -390,7 +390,7 @@
       /** 搜索按钮操作 */
       handleQuery() {
         this.$set(this.queryParams,'page',1);
-        this.$set(this,'checkSubList','');
+        this.$set(this,'codeList','');
         this.$refs['table-box'].clearSelection();
         this.getList()
       },
@@ -405,7 +405,7 @@
           typeId: '',
           levelId: ''
         })
-        this.$set(this,'checkSubList','');
+        this.$set(this,'codeList','');
         this.$refs['table-box'].clearSelection();
         this.getList()
       },
@@ -490,11 +490,11 @@
                 self.$refs['table-box'].toggleRowSelection(selection[i],true);
               }
             }
-            self.$set(self,'checkSubList',ids);
+            self.$set(self,'codeList',ids);
           })
           this.msgError('最多勾选40条')
         }else{
-          this.$set(this,'checkSubList',selection.map(item => item));
+          this.$set(this,'codeList',selection.map(item => item));
         }
       },
       /*===记录勾选数据===