| | |
| | | </template> |
| | | </el-dialog> |
| | | <!-- 二维码对话框 --> |
| | | <el-dialog v-model="qrCodeDialog" |
| | | <!-- <el-dialog v-model="qrCodeDialog" |
| | | title="产品二维码" |
| | | width="400px"> |
| | | <div class="qrcode-container"> |
| | |
| | | :disabled="!qrCodeUrl">保存为图片</el-button> |
| | | </div> |
| | | </template> |
| | | </el-dialog> |
| | | </el-dialog> --> |
| | | </div> |
| | | </template> |
| | | |
| | | <script setup> |
| | | import { ref, getCurrentInstance, toRefs, reactive } from "vue"; |
| | | import { ElMessageBox } from "element-plus"; |
| | | import QRCode from "qrcode"; |
| | | import { saveAs } from "file-saver"; |
| | | // 产品二维码 |
| | | // import QRCode from "qrcode"; |
| | | // import { saveAs } from "file-saver"; |
| | | import { |
| | | addOrEditProduct, |
| | | addOrEditProductModel, |
| | |
| | | |
| | | const productDia = ref(false); |
| | | const modelDia = ref(false); |
| | | const qrCodeDialog = ref(false); |
| | | const qrCodeUrl = ref(""); |
| | | const currentProductId = ref(""); |
| | | // 产品二维码 |
| | | // const qrCodeDialog = ref(false); |
| | | // const qrCodeUrl = ref(""); |
| | | // const currentProductId = ref(""); |
| | | const modelOperationType = ref(""); |
| | | const search = ref(""); |
| | | const currentId = ref(""); |
| | |
| | | openModelDia("edit", row); |
| | | }, |
| | | }, |
| | | { |
| | | name: "生成二维码", |
| | | type: "text", |
| | | clickFun: row => { |
| | | generateQrcode(row); |
| | | }, |
| | | }, |
| | | // 产品二维码 |
| | | // { |
| | | // name: "生成二维码", |
| | | // type: "text", |
| | | // clickFun: row => { |
| | | // generateQrcode(row); |
| | | // }, |
| | | // }, |
| | | ], |
| | | }, |
| | | ]); |
| | |
| | | // 没匹配到返回false |
| | | return false; |
| | | }; |
| | | const qrCodeName = ref(""); |
| | | // 产品二维码 |
| | | // const qrCodeName = ref(""); |
| | | |
| | | // 生成二维码 |
| | | const generateQrcode = async row => { |
| | | try { |
| | | currentProductId.value = row.id; |
| | | qrCodeName.value = fatherName.value + "-" + row.model; |
| | | // 使用row.id生成二维码 |
| | | const qrCodeData = JSON.stringify({ |
| | | id: row.id, |
| | | productName: fatherName.value, |
| | | model: row.model, |
| | | unit: row.unit, |
| | | }); |
| | | // 生成二维码URL |
| | | qrCodeUrl.value = await QRCode.toDataURL(qrCodeData, { |
| | | width: 300, |
| | | margin: 1, |
| | | }); |
| | | // 打开二维码对话框 |
| | | qrCodeDialog.value = true; |
| | | } catch (error) { |
| | | console.error("生成二维码失败:", error); |
| | | proxy.$modal.msgError("生成二维码失败"); |
| | | } |
| | | }; |
| | | // // 生成二维码 |
| | | // const generateQrcode = async row => { |
| | | // try { |
| | | // currentProductId.value = row.id; |
| | | // qrCodeName.value = fatherName.value + "-" + row.model; |
| | | // // 使用row.id生成二维码 |
| | | // const qrCodeData = JSON.stringify({ |
| | | // id: row.id, |
| | | // productName: fatherName.value, |
| | | // model: row.model, |
| | | // unit: row.unit, |
| | | // }); |
| | | // // 生成二维码URL |
| | | // qrCodeUrl.value = await QRCode.toDataURL(qrCodeData, { |
| | | // width: 300, |
| | | // margin: 1, |
| | | // }); |
| | | // // 打开二维码对话框 |
| | | // qrCodeDialog.value = true; |
| | | // } catch (error) { |
| | | // console.error("生成二维码失败:", error); |
| | | // proxy.$modal.msgError("生成二维码失败"); |
| | | // } |
| | | // }; |
| | | |
| | | // 保存二维码为图片 |
| | | const saveQrCodeAsImage = () => { |
| | | if (!qrCodeUrl.value) return; |
| | | // // 保存二维码为图片 |
| | | // const saveQrCodeAsImage = () => { |
| | | // if (!qrCodeUrl.value) return; |
| | | |
| | | try { |
| | | // 从Data URL创建Blob |
| | | const blob = dataURLToBlob(qrCodeUrl.value); |
| | | // 使用file-saver保存图片 |
| | | saveAs(blob, `${qrCodeName.value}.png`); |
| | | proxy.$modal.msgSuccess("保存成功"); |
| | | } catch (error) { |
| | | console.error("保存图片失败:", error); |
| | | proxy.$modal.msgError("保存图片失败"); |
| | | } |
| | | }; |
| | | // try { |
| | | // // 从Data URL创建Blob |
| | | // const blob = dataURLToBlob(qrCodeUrl.value); |
| | | // // 使用file-saver保存图片 |
| | | // saveAs(blob, `${qrCodeName.value}.png`); |
| | | // proxy.$modal.msgSuccess("保存成功"); |
| | | // } catch (error) { |
| | | // console.error("保存图片失败:", error); |
| | | // proxy.$modal.msgError("保存图片失败"); |
| | | // } |
| | | // }; |
| | | |
| | | // 将Data URL转换为Blob |
| | | const dataURLToBlob = dataURL => { |
| | | const arr = dataURL.split(","); |
| | | const mime = arr[0].match(/:(.*?);/)[1]; |
| | | const bstr = atob(arr[1]); |
| | | let n = bstr.length; |
| | | const u8arr = new Uint8Array(n); |
| | | while (n--) { |
| | | u8arr[n] = bstr.charCodeAt(n); |
| | | } |
| | | return new Blob([u8arr], { type: mime }); |
| | | }; |
| | | // // 将Data URL转换为Blob |
| | | // const dataURLToBlob = dataURL => { |
| | | // const arr = dataURL.split(","); |
| | | // const mime = arr[0].match(/:(.*?);/)[1]; |
| | | // const bstr = atob(arr[1]); |
| | | // let n = bstr.length; |
| | | // const u8arr = new Uint8Array(n); |
| | | // while (n--) { |
| | | // u8arr[n] = bstr.charCodeAt(n); |
| | | // } |
| | | // return new Blob([u8arr], { type: mime }); |
| | | // }; |
| | | |
| | | getProductTreeList(); |
| | | </script> |
| | |
| | | background: #909399; |
| | | } |
| | | |
| | | /* 二维码样式 */ |
| | | /* 产品二维码 |
| | | .qrcode-container { |
| | | display: flex; |
| | | justify-content: center; |
| | |
| | | font-size: 16px; |
| | | color: #606266; |
| | | } |
| | | */ |
| | | </style> |