标准箱

src/views/material/ma/device/index.vue

@@ -865,8 +865,9 @@ export default {
 
         // 创建设备编号容器
         const boxCodeContainer = document.createElement('div')
+        boxCodeContainer.style.fontSize = '35px'
         boxCodeContainer.className = 'boxCode'
-        boxCodeContainer.innerText = `设备编号：${row.maCode || '未知'}`
+        boxCodeContainer.innerText = `${row.maCode || '未知'}`
         codeQrContainer.appendChild(boxCodeContainer)
 
         // 为了保证页面不被遮挡，可以通过一些 CSS 来调整布局

src/views/material/standardBox/index.vue

@@ -56,12 +56,12 @@
                     <el-button size="mini" @click="handleView(row)">
                         查看
                     </el-button>
+                    <el-button size="mini" type="primary" @click="downloadQrCode(row)">
+                        下载
+                    </el-button>
                     <el-button size="mini" type="primary" @click="handleDetail(row)">
                         设备明细
                     </el-button>
-                    <!-- <el-button size="mini" type="primary" @click="handleDownload(row)">
-                        下载
-                    </el-button> -->
                     <el-button size="mini" type="danger" @click="handleNotice(row)">
                         删除
                     </el-button>
@@ -122,7 +122,7 @@
                 <div class="uploadImg">
                     <div id="qrcode" class="qrcode" ref="codeItem"></div>
                 </div>
-                <div class="boxCode">编号：{{ rowObj.boxCode }}</div>
+                <div class="boxCode">{{ rowObj.boxCode }}</div>
             </div>
             <div slot="footer" class="dialog-footer" style="text-align: center">
                 <el-button type="primary" @click="downloadCode">下 载</el-button>
@@ -235,6 +235,64 @@ export default {
                 })
             }, 500)
         },
+        downloadQrCode(row) {
+            console.log('🚀 ~ downloadQrCode ~ row:', row)
+            try {
+                // 创建外层容器
+                const codeQrContainer = document.createElement('div')
+                codeQrContainer.style.textAlign = 'center'
+                document.body.appendChild(codeQrContainer)
+
+                // 创建二维码容器
+                const uploadImgContainer = document.createElement('div')
+                uploadImgContainer.className = 'uploadImg'
+                codeQrContainer.appendChild(uploadImgContainer)
+
+                // 创建二维码显示容器
+                const qrcodeContainer = document.createElement('div')
+                qrcodeContainer.className = 'qrcode'
+                uploadImgContainer.appendChild(qrcodeContainer)
+
+                // 使用 qrcodejs2 生成二维码
+                new QRCode(qrcodeContainer, {
+                    text: row.boxCode,
+                    width: 256,
+                    height: 256,
+                    colorDark: '#000000',
+                    colorLight: '#ffffff',
+                    correctLevel: QRCode.CorrectLevel.H
+                })
+
+                // 创建设备编号容器
+                const boxCodeContainer = document.createElement('div')
+                boxCodeContainer.style.fontSize = '30px'
+                boxCodeContainer.className = 'boxCode'
+                boxCodeContainer.innerText = `${row.boxCode || '未知'}`
+                codeQrContainer.appendChild(boxCodeContainer)
+
+                // 为了保证页面不被遮挡，可以通过一些 CSS 来调整布局
+                codeQrContainer.style.display = 'flex'
+                codeQrContainer.style.flexDirection = 'column'
+                codeQrContainer.style.alignItems = 'center'
+                codeQrContainer.style.justifyContent = 'center'
+                codeQrContainer.style.width = '400px'
+                codeQrContainer.style.height = '400px'
+                console.log(codeQrContainer)
+                html2canvas(codeQrContainer).then((canvas) => {
+                    // 将canvas转换为图片URL
+                    const image = canvas.toDataURL('image/png')
+                    const alink = document.createElement('a')
+                    alink.href = image
+                    alink.download = row.boxCode
+                    alink.click()
+                })
+
+                this.$message.success('二维码下载成功')
+            } catch (error) {
+                console.error('二维码生成失败:', error)
+                this.$message.error('二维码下载失败，请重试')
+            }
+        },
         //二维码下载
         downloadCode(e) {
             if (document.getElementById('qrcode').childNodes[0]) {
@@ -258,10 +316,10 @@ export default {
         // 获取列表数据
         async getDialogList() {
             const res = await getBoxDetailListApi(this.queryDialogForm)
+            console.log('🚀 ~ getDialogList ~ res:', res)
             this.tableListDialog = res.rows
             // this.tableListDialog = [{maType:"抱杆",typeName:"10t",maCode:"bg121334343",updateBy:"张三"},{maType:"抱杆",typeName:"10t",maCode:"bg121334343",updateBy:"张三"},{maType:"抱杆",typeName:"10t",maCode:"bg121334343",updateBy:"张三"},{maType:"抱杆",typeName:"10t",maCode:"bg121334343",updateBy:"张三"}]
             this.totalDialog = res.total
-            this.totalDialog = 3
         },
         //弹窗搜索
         handleQueryDialog() {
@@ -321,7 +379,7 @@ export default {
 .boxCode {
     margin-top: 10px;
     padding-bottom: 20px;
-    font-size: 25px;
+    font-size: 35px;
 }
 ::v-deep.el-table .fixed-width .el-button--mini {
     width: 60px !important;