进销存pro 1.设备台账生成二维码加上设备名称

gaoluyang

3 天以前 3dd793c29446482ca8652e4876f759b67432633b

进销存pro
1.设备台账生成二维码加上设备名称

 src/views/equipmentManagement/ledger/index.vue

@@ -298,7 +298,34 @@
const showQRCode = async (row) => {
  // 直接使用URL，不要用JSON.stringify包装
  const qrContent = proxy.javaApi + '/device-info?deviceId=' + row.id;
  qrCodeUrl.value = await QRCode.toDataURL(qrContent);
  const qrDataUrl = await QRCode.toDataURL(qrContent, { width: 200, margin: 2 });
  
  // 创建canvas合成带名称的二维码图片
  const canvas = document.createElement('canvas');
  const ctx = canvas.getContext('2d');
  const qrSize = 200;
  const textHeight = 30;
  const padding = 10;
  canvas.width = qrSize + padding * 2;
  canvas.height = qrSize + textHeight + padding * 2;
  
  // 填充白色背景
  ctx.fillStyle = '#ffffff';
  ctx.fillRect(0, 0, canvas.width, canvas.height);
  
  // 绘制二维码
  const qrImg = new Image();
  qrImg.src = qrDataUrl;
  await new Promise((resolve) => { qrImg.onload = resolve; });
  ctx.drawImage(qrImg, padding, padding, qrSize, qrSize);
  
  // 绘制设备名称
  ctx.fillStyle = '#333333';
  ctx.font = 'bold 14px Arial';
  ctx.textAlign = 'center';
  ctx.fillText(row.deviceName || '', canvas.width / 2, qrSize + padding + 20);
  
  qrCodeUrl.value = canvas.toDataURL('image/png');
  qrRowData.value = row;
  qrDialogVisible.value = true;
};