src/views/basicData/product/index.vue
@@ -171,7 +171,7 @@
      </template>
    </el-dialog>
    <!-- 二维码对话框 -->
    <el-dialog v-model="qrCodeDialog"
    <!-- <el-dialog v-model="qrCodeDialog"
               title="产品二维码"
               width="400px">
      <div class="qrcode-container">
@@ -192,15 +192,16 @@
                     :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,
@@ -217,9 +218,10 @@
  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("");
@@ -255,13 +257,14 @@
            openModelDia("edit", row);
          },
        },
        {
          name: "生成二维码",
          type: "text",
          clickFun: row => {
            generateQrcode(row);
          },
        },
        // 产品二维码
        // {
        //   name: "生成二维码",
        //   type: "text",
        //   clickFun: row => {
        //     generateQrcode(row);
        //   },
        // },
      ],
    },
  ]);
@@ -520,56 +523,62 @@
    // 没匹配到返回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 = row.id.toString();
      // 生成二维码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>
@@ -640,7 +649,7 @@
    background: #909399;
  }
  /* 二维码样式 */
  /* 产品二维码
  .qrcode-container {
    display: flex;
    justify-content: center;
@@ -658,4 +667,5 @@
    font-size: 16px;
    color: #606266;
  }
  */
</style>