手环管理二维码，人员管理

src/api/base/staff.js

@@ -69,7 +69,7 @@ export function updateCertificate(data) {
         'Content-Type': 'multipart/form-data'
       },
       url: '/bracelet/person/updateCertificate',
-      method: 'put',
+      method: 'post',
       data: data
     })
   }

src/views/base/bracelet/index.vue

@@ -326,20 +326,15 @@
           >新增手环箱</el-button>
         </el-col>
         <el-col :span="1.5">
-          <el-button
+          <!-- 二维码导出组件按钮在内部传选中数组 currentSelection:选中数组 clearCheck:清空选中状态-->
-            type="warning"
+          <qrCodeUpload :checkboxModel.sync="currentSelection" @clearCheck="clearCheck"/>
-            plain
-            icon="el-icon-download"
-            size="mini"
-            @click="handleExportTemp"
-            v-hasPermi="['basic:bracelet:export']"
-          >导出二维码</el-button>
         </el-col>
         
         <right-toolbar :showSearch.sync="showSearch" @queryTable="getboxList"></right-toolbar>
       </el-row>
   
-      <el-table v-loading="loadingFive" :data="shboxallList">
+      <el-table v-loading="loadingFive" :data="shboxallList" ref="multipleTable" row-key="shboxCode" @selection-change="handleSelectionChangeImag" @select="handlerSelect" @select-all="handlerSelectAll">
+        <el-table-column type="selection" width="55" align="center" :reserve-selection="true" />
         <el-table-column label="手环箱id" align="center" prop="shboxId" v-if="false" />
         <el-table-column label="手环箱名称" align="center" prop="shboxName" />
         <el-table-column label="手环箱编码" align="center" prop="shboxCode" />
@@ -363,7 +358,7 @@
               size="mini"
               type="text"
               icon="el-icon-edit"
-              @click="handleQuertPage(scope.row)"
+              @click="labelUploadCode(scope.row)"
               v-hasPermi="['basic:bracelet:query']"
             >查看</el-button>
           </template>
@@ -487,7 +482,7 @@
       <!-- 手环绑定选择弹窗 -->
       <el-dialog :title="title" :visible.sync="openSh" width="600px" height="600px" append-to-body>
          <div> 当前手环箱还可以绑定{{ this.numers }}个手环</div>
-      <el-table v-loading="loadingSeven" :data="shListNoBind" width="600px" height = "400px"  @selection-change="handleSelectionChange" >
+      <el-table v-loading="loadingSeven" :data="shListNoBind" width="600px" height = "400px" class="order" @selection-change="handleSelectionChange" >
         <el-table-column type="selection" width="55" align="center" label="选择" :selectable="selectable" />
 
         <el-table-column label="手环id" align="center" prop="shId" v-if="false" />
@@ -586,6 +581,27 @@
         </div>
       </el-dialog>
 
+      <!-- 标签下载对话框 -->
+              <el-dialog
+            :title="title"
+            :visible.sync="uploadOpen"
+            width="450px"
+            append-to-body
+            :close-on-click-modal="false"
+        >
+            <div style="text-align: center" ref="codeBox">
+                <div class="uploadImg">
+                    <div id="qrcode" class="qrcode" ref="codeItem"></div>
+                    <!--        <img src="" alt="">-->
+                </div>
+                <div class="shboxCodeTemp">手环箱编号：{{ rowObj.shboxCode }}</div>
+            </div>
+            <div slot="footer" class="dialog-footer" style="text-align: center">
+                <el-button type="primary" @click="downloadCode"
+                    >下 载</el-button
+                >
+            </div>
+        </el-dialog>
     </div>
     </el-tab-pane>
   </el-tabs>
@@ -597,12 +613,18 @@
 
   import { downloadFile } from '@/utils/download'
   import { getToken } from '@/utils/auth'
+  import qrCodeUpload from '../../components/qrCodeUpload.vue'
+  import html2canvas from 'html2canvas'
+  import QRCode from 'qrcodejs2'
   import uploadFile from '../../components/uploadFile.vue'
+  import JSZip from 'jszip'
+  import FileSaver from 'file-saver'
+  import C from "highlight.js/lib/languages/1c";
   export default {
     name: "Post",
     dicts: ['sys_normal_disable','sys_sh_status'],
     components: {
-			uploadFile
+			uploadFile,qrCodeUpload
 		},
     data() {
       return {
@@ -623,6 +645,7 @@
         loadingSeven:true,
         // 选中数组
         ids: [],
+        idsbox: [],
         // 非单个禁用
         single: true,
         // 非多个禁用
@@ -663,6 +686,12 @@
         zero:0,
         shboxbindId:0,
         Qrcode:"",
+
+        //二维码
+        rowObj:{},
+        uploadOpen:false,
+        shboxCodeTemp:'',
+
         // 查询参数
         queryParams: {
           pageNum: 1,
@@ -761,6 +790,8 @@
         //图片查看弹窗
         dialogImageUrl: '',
         dialogVisible: false,
+        maxLength:100,//已选列表上限，防止数据过多请求报错
+        currentSelection:[],//已选列表
         // 用户导入参数
         upload: {
           // 是否显示弹出层（用户导入）
@@ -937,6 +968,96 @@
             this.single = selection.length!=1
             this.multiple = !selection.length
         },
+
+        // 多选框选中数据二维码导出
+        handleSelectionChangeImag(selection) {
+            this.ids = selection.map(item => item.shboxCode);
+            this.single = selection.length!=1
+            this.multiple = !selection.length
+        },
+
+        //单选操作-跨页
+        handlerSelect(val, row) {
+          this.currentSelection.indexOf(row.shboxCode) === -1
+            ? this.currentSelection.push(row.shboxCode)
+            : this.currentSelection.splice(this.currentSelection.indexOf(row.shboxCode), 1)
+        },
+        //全选操作-跨页
+        handlerSelectAll(val) {
+          if (val.length) {
+            // 进来此处说明:
+            // 1 当前页的全选 2 其他页有数据然后当前页的取消全选
+            // 比较全选或者取消全选与当前页的数据，得到差集
+            // 如果tableData中的数据在val中不存在，则说明是取消全选，需要从currentSelection中移除
+            // 如果tableData中所有的数据都在val中存在，则说明是全选，需要将差集添加到currentSelection中
+            const isAllSelect = this.tableData.every(item =>
+            val.some(valItem => valItem.shboxCode === item.shboxCode)
+            )
+            if (isAllSelect) {
+              // 全选中新增的差集
+              const diff = val.filter(
+              item => !this.currentSelection.some(shboxCode => shboxCode === item.shboxCode)
+            )
+            if (this.currentSelection.length + diff.length > this.maxLength) {
+                this.currentSelection = this.currentSelection.concat(
+                  diff.splice(0, this.maxLength - this.currentSelection.length)
+                      .map(item => item.shboxCode))
+                diff.forEach(item => this.$refs.multipleTable.toggleRowSelection(item, false))
+            } else {
+                this.currentSelection = this.currentSelection.concat(diff.map(item => item.shboxCode))
+            }
+            } else {
+                this.currentSelection = this.currentSelection.filter(
+                  shboxCode => !this.tableData.some(item => item.shboxCode === shboxCode)
+                )
+              }
+          } else {
+            // 进来此处说明:
+            // 其他页并无勾选数据，且当前页取消勾选
+            this.currentSelection = []
+          }
+        },
+        clearCheck(){
+          console.log("clearCheck")
+          this.currentSelection = []
+          this.getboxList()
+        },
+        //二维码查看
+        labelUploadCode(row) {
+            this.rowObj = row
+            this.uploadOpen = true
+            this.title = '二维码查看'
+            this.shboxCodeTemp = row.shboxCode
+            let str = row.shboxCode
+            this.$nextTick(() => {
+                // this.selectionList.forEach((item, index) => {
+                this.$refs.codeItem.innerHTML = ''
+                var qrcode = new QRCode(this.$refs.codeItem, {
+                    text: str, //二维码内容
+                    width: 256,
+                    height: 256,
+                    colorDark: '#000000',
+                    colorLight: '#ffffff',
+                    correctLevel: QRCode.CorrectLevel.H,
+                })
+
+                // });
+            }, 500)
+        },
+
+        downloadCode(e) {
+            if (document.getElementById('qrcode').childNodes[0]) {
+                let element = this.$refs.codeBox
+                html2canvas(element).then((canvas) => {
+                    // 将canvas转换为图片URL
+                    const image = canvas.toDataURL('image/png')
+                    const alink = document.createElement('a')
+                    alink.href = image
+                    alink.download = this.shboxCodeTemp
+                    alink.click()
+                })
+            }
+        },
         /** 解除绑定操作 */
         handleDelSh(row) {
             console.log(row)
@@ -969,21 +1090,6 @@
             }).catch(() => {});
         },
 
-        handleQuertPage(row){
-          const qrCodeData = {
-        "设备类型": row.deviceType,
-        "设备名称": row.deviceName,
-        "设备编号": row.deviceCode,
-        "设备状态": row.deviceStatus,
-    };
-        const qrCodeString = JSON.stringify(qrCodeData, null, 2);
-        console.log(qrCodeString);
-        //清空二维码容器
-        // Qrcode = "";
-        // // 生成二维码
-        //  Qrcode.qrcode(utf16to8(qrCodeString));
-        this.open = true;
-        },
         /** 新增按钮操作 */
         handleAdd() {
             this.reset();
@@ -1288,6 +1394,19 @@
               console.log(this.shboxallList)
               this.total = response.total;
               this.loadingFive = false;
+              if (this.currentSelection.length) {
+                this.$nextTick(() => {
+                  this.currentSelection.forEach(row => {
+                    this.tableData.forEach(item => {
+                      if (item.shboxCode === row) {
+                        this.$refs.multipleTable?.toggleRowSelection(item, true)
+                      }
+                    })
+                  })
+                })
+              } else {
+                this.$refs.multipleTable?.clearSelection()
+              }
             });
         },
 
@@ -1413,13 +1532,24 @@
       width: 60px !important;
       margin-bottom: 10px;
   }
+  .uploadImg {
+    padding-top: 20px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  .shboxCodeTemp {
+      margin-top: 10px;
+      padding-bottom: 20px;
+      font-size: 18px;
+  }
   //隐藏图片上传框的css
   ::v-deep.disabled {
       .el-upload--picture-card {
           display: none;
       }
   }
-  ::v-deep .el-table__header-wrapper .el-checkbox {
+  ::v-deep.order .el-table__header-wrapper .el-checkbox {
     display: none;
   }
   </style>

src/views/base/device/index.vue

@@ -74,7 +74,7 @@
         <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
       </el-row>
   
-      <el-table v-loading="loading" :data="tableData" ref="multipleTable" row-key="deviceId" @selection-change="handleSelectionChange" @select="handlerSelect" @select-all="handlerSelectAll">
+      <el-table v-loading="loading" :data="tableData" ref="multipleTable" row-key="deviceCode" @selection-change="handleSelectionChange" @select="handlerSelect" @select-all="handlerSelectAll">
         <el-table-column type="selection" width="55" align="center" :reserve-selection="true" />
         <el-table-column label="设备id" align="center" prop="deviceId" v-if="false" />
         <el-table-column label="设备类型" align="center" prop="deviceType">
@@ -279,7 +279,7 @@
                 this.$nextTick(() => {
                   this.currentSelection.forEach(row => {
                     this.tableData.forEach(item => {
-                      if (item.deviceId === row) {
+                      if (item.deviceCode === row) {
                         this.$refs.multipleTable?.toggleRowSelection(item, true)
                       }
                     })
@@ -315,15 +315,15 @@
 
         // 多选框选中数据
         handleSelectionChange(selection) {
-            this.ids = selection.map(item => item.deviceId)
+            this.ids = selection.map(item => item.deviceCode)
             this.single = selection.length!=1
             this.multiple = !selection.length
         },
         //单选操作-跨页
         handlerSelect(val, row) {
-          this.currentSelection.indexOf(row.deviceId) === -1
+          this.currentSelection.indexOf(row.deviceCode) === -1
-            ? this.currentSelection.push(row.deviceId)
+            ? this.currentSelection.push(row.deviceCode)
-            : this.currentSelection.splice(this.currentSelection.indexOf(row.deviceId), 1)
+            : this.currentSelection.splice(this.currentSelection.indexOf(row.deviceCode), 1)
         },
         //全选操作-跨页
         handlerSelectAll(val) {
@@ -334,24 +334,24 @@
             // 如果tableData中的数据在val中不存在，则说明是取消全选，需要从currentSelection中移除
             // 如果tableData中所有的数据都在val中存在，则说明是全选，需要将差集添加到currentSelection中
             const isAllSelect = this.tableData.every(item =>
-            val.some(valItem => valItem.deviceId === item.deviceId)
+            val.some(valItem => valItem.deviceCode === item.deviceCode)
             )
             if (isAllSelect) {
               // 全选中新增的差集
               const diff = val.filter(
-              item => !this.currentSelection.some(deviceId => deviceId === item.deviceId)
+              item => !this.currentSelection.some(deviceCode => deviceCode === item.deviceCode)
             )
             if (this.currentSelection.length + diff.length > this.maxLength) {
                 this.currentSelection = this.currentSelection.concat(
                   diff.splice(0, this.maxLength - this.currentSelection.length)
-                      .map(item => item.deviceId))
+                      .map(item => item.deviceCode))
                 diff.forEach(item => this.$refs.multipleTable.toggleRowSelection(item, false))
             } else {
-                this.currentSelection = this.currentSelection.concat(diff.map(item => item.deviceId))
+                this.currentSelection = this.currentSelection.concat(diff.map(item => item.deviceCode))
             }
             } else {
                 this.currentSelection = this.currentSelection.filter(
-                  deviceId => !this.tableData.some(item => item.deviceId === deviceId)
+                  deviceCode => !this.tableData.some(item => item.deviceCode === deviceCode)
                 )
               }
           } else {
@@ -455,6 +455,13 @@
             const  param = {
               deviceId:row.deviceId
             }
+            if (row.lyName!=null && row.lyName!='') {
+              this.$alert('存在领用人，无法删除', '提示', {
+                type: 'warning',
+                confirmButtonText: '确定',
+              });
+              return;
+            }
             this.$modal.confirm('是否确认删除设备名称为"' + row.deviceName + '"的数据项？').then(function() {
               return delDevice(param);
             }).then(() => {

src/views/base/staff/index.vue

@@ -183,7 +183,7 @@
                 :on-change="handleChangeElectricianImgList"
                 :class="{ disabled: uploadDisabled }"
                 :on-preview="picturePreview"
-                :on-remove="handleRemoveHighImgList"
+                :on-remove="handleRemoveElectricianImgList"
             >
                 <i
                     class="el-icon-plus avatar-uploader-icon"
@@ -354,10 +354,6 @@
         //证书上传
         certificateForm: {}, 
 
-        highImgList: [],
-        electricianImgList: [],
-        elseImgList: [],
-
         delHighFileIdList: [],
         delElectFileIdList: [],
         delElseFileIdList: [],
@@ -610,6 +606,7 @@
             }
             });
         },
+
         //提交时循环fileList 获取raw文件
         getFileData() {
           const file = []
@@ -704,40 +701,42 @@
           this.$refs.upload.submit();
         },
         //打开证书上传
-
         openCertificate(row){
           this.memberId = row.id;
           this.highImgList = [];
           this.electricianImgList = [];
           this.elseImgList = [];
+          // this.showCertificate = true;
           getCertificate(this.memberId).then(response => {
+
             response.data.highImgList.forEach(item => {
                 this.highImgList.push({
                   fileId: item.filePath,
+                  raw:item.bast64Image,
                   url: item.bast64Image
                 })
               });
             response.data.electricianImgList.forEach(item => {
                 this.electricianImgList.push({
                   fileId: item.filePath,
+                  raw:item.bast64Image,
                   url: item.bast64Image
                 })
               });
             response.data.elseImgList.forEach(item => {
                 this.elseImgList.push({
                   fileId: item.filePath,
+                  raw:item.bast64Image,
                   url: item.bast64Image
                 })
               });
-              response.data.highImgList = [];
-              response.data.electricianImgList = [];
-              response.data.elseImgList = [];
               // console.log(this.highImgList)
               // console.log(this.electricianImgList)
               // console.log(this.elseImgList)
               setTimeout(()=>{
-                this.showCertificate = "证书";
+                this.showCertificate = true;
               },100)
+
           });
         },
 
@@ -757,12 +756,24 @@
         if (valid) {
             const reqData = new FormData();
             this.certificateForm.delHighFileIdList = this.delHighFileIdList;
+            console.log(this.delHighFileIdList);
             this.certificateForm.delElectFileIdList = this.delElectFileIdList;
             this.certificateForm.delElseFileIdList = this.delElseFileIdList;
-            response.append('delHighFileIdList', this.delHighFileIdList);
+            // reqData.append('delHighFileIdList', JSON.stringify(this.delHighFileIdList));
-            response.append('delElectFileIdList', this.delElectFileIdList);
+            // reqData.append('delElectFileIdList', JSON.stringify(this.delElectFileIdList));
-            response.append('delElseFileIdList', this.delElseFileIdList);
+            // reqData.append('delElseFileIdList', JSON.stringify(this.delElseFileIdList));
+
+            this.delHighFileIdList.forEach(item => {
+              reqData.append('delHighFileIdList', item)
+            });
+            this.delElectFileIdList.forEach(item => {
+              reqData.append('delElectFileIdList', item)
+            });
+            this.delElseFileIdList.forEach(item => {
+              reqData.append('delElseFileIdList', item)
+            });
             const { highfile } = this.getHighImgListFileData();
+            // console.log(highfile);
             const { electfile } = this.getElectricianImgListFileData();
             const { elsefile } = this.getElseImgListFileData();
             reqData.append('id', this.memberId);
@@ -781,6 +792,9 @@
               this.highImgList=[];
               this.electricianImgList=[];
               this.elseImgList=[];
+              this.delHighFileIdList=[];
+              this.delElectFileIdList=[];
+              this.delElseFileIdList=[];
               this.getList();
             });
         }

src/views/components/qrCodeUpload.vue

@@ -74,7 +74,7 @@ export default {
                         width = shareContent.offsetWidth,
                         height = shareContent.offsetHeight
                     const maCodeText = document.createElement('div')
-                    maCodeText.innerHTML = '设备编码:' + element
+                    maCodeText.innerHTML = '编码:' + element
                     maCodeText.style =
                         'font-size=18px; width:100%;text-align:center;margin:10px;'
                     shareContent.appendChild(maCodeText)