feat: 添加采购台账二维码功能及相关样式，更新操作列宽度

yyb

20 小时以前 88566a9843fd0e1f4c98d696446f2ff27234ad72

feat: 添加采购台账二维码功能及相关样式，更新操作列宽度

 src/views/procurementManagement/procurementLedger/index.vue

@@ -168,7 +168,7 @@
                         show-overflow-tooltip />
        <el-table-column fixed="right"
                         label="操作"
                         width="120"
                         width="200"
                         align="center">
          <template #default="scope">
            <el-button link
@@ -178,6 +178,9 @@
            <el-button link
                       type="primary"
                       @click="downLoadFile(scope.row)">附件</el-button>
            <el-button link
                       type="primary"
                       @click="openProcurementQrDialog(scope.row)">二维码</el-button>
          </template>
        </el-table-column>
      </el-table>
@@ -689,6 +692,24 @@
    <FileListDialog ref="fileListRef"
                    v-model="fileListDialogVisible"
                    title="附件列表" />
    <el-dialog v-model="procurementQrDialogVisible"
               title="采购台账二维码"
               width="360px"
               draggable
               :close-on-click-modal="false">
      <div class="procurement-qr-dialog">
        <img v-if="procurementQrCompositeUrl"
             :src="procurementQrCompositeUrl"
             alt="采购台账二维码"
             class="procurement-qr-composite-img" />
        <el-button type="primary"
                   class="procurement-qr-save-btn"
                   :disabled="!procurementQrCompositeUrl"
                   @click="downloadProcurementQrCode">
          保存图片
        </el-button>
      </div>
    </el-dialog>
  </div>
</template>

@@ -732,6 +753,7 @@
    delPurchaseTemplate,
  } from "@/api/procurementManagement/procurementLedger.js";
  import useFormData from "@/hooks/useFormData.js";
  import QRCode from "qrcode";

  const { proxy } = getCurrentInstance();
  const tableData = ref([]);
@@ -1871,6 +1893,117 @@
    }
  };

  const procurementQrDialogVisible = ref(false);
  const procurementQrCompositeUrl = ref("");
  const procurementQrDownloadBaseName = ref("");

  const sanitizeProcurementQrFilename = s =>
    String(s)
      .replace(/[\\/:*?"<>|]/g, "_")
      .trim()
      .slice(0, 80) || "ledger";

  const wrapProcurementQrTextLines = (ctx, text, maxWidth) => {
    const chars = [...text];
    const lines = [];
    let line = "";
    for (const ch of chars) {
      const test = line + ch;
      if (ctx.measureText(test).width > maxWidth && line.length) {
        lines.push(line);
        line = ch;
      } else {
        line = test;
      }
    }
    if (line) lines.push(line);
    return lines;
  };

  const buildProcurementQrCompositeDataUrl = row =>
    new Promise((resolve, reject) => {
      const payload = JSON.stringify({
        id: row.id,
        purchaseContractNumber: (row.purchaseContractNumber ?? "").trim(),
        type: "CG",
      });
      QRCode.toDataURL(payload, { width: 220, margin: 2 })
        .then(qrDataUrl => {
          const contract = (row.purchaseContractNumber ?? "").trim() || "—";
          const img = new Image();
          img.onload = () => {
            const QR_SIZE = 220;
            const padTop = 16;
            const gapAfterQr = 14;
            const bottomPad = 48;
            const horizontalPad = 20;
            const lineHeight = 20;
            const fontSize = 14;
            const label = `采购合同号：${contract}`;

            const canvas = document.createElement("canvas");
            const ctx = canvas.getContext("2d");
            canvas.width = Math.max(QR_SIZE + horizontalPad * 2, 280);
            ctx.font = `${fontSize}px "Microsoft YaHei", "PingFang SC", sans-serif`;
            const lines = wrapProcurementQrTextLines(
              ctx,
              label,
              canvas.width - horizontalPad * 2
            );
            const textBlockHeight = lines.length * lineHeight;
            canvas.height = padTop + QR_SIZE + gapAfterQr + textBlockHeight + bottomPad;

            ctx.fillStyle = "#ffffff";
            ctx.fillRect(0, 0, canvas.width, canvas.height);

            const qrX = (canvas.width - QR_SIZE) / 2;
            ctx.drawImage(img, qrX, padTop, QR_SIZE, QR_SIZE);

            ctx.fillStyle = "#606266";
            ctx.font = `${fontSize}px "Microsoft YaHei", "PingFang SC", sans-serif`;
            ctx.textAlign = "center";
            ctx.textBaseline = "top";
            const textY0 = padTop + QR_SIZE + gapAfterQr;
            lines.forEach((ln, i) => {
              ctx.fillText(ln, canvas.width / 2, textY0 + i * lineHeight);
            });

            const baseName = sanitizeProcurementQrFilename(
              contract !== "—" ? contract : String(row.id)
            );
            resolve({ dataUrl: canvas.toDataURL("image/png"), baseName });
          };
          img.onerror = () => reject(new Error("二维码图片加载失败"));
          img.src = qrDataUrl;
        })
        .catch(reject);
    });

  const openProcurementQrDialog = async row => {
    if (row?.id === undefined || row?.id === null || row?.id === "") {
      ElMessage.warning("无法生成二维码：缺少台账 ID");
      return;
    }
    procurementQrCompositeUrl.value = "";
    procurementQrDownloadBaseName.value = "";
    try {
      const { dataUrl, baseName } = await buildProcurementQrCompositeDataUrl(row);
      procurementQrCompositeUrl.value = dataUrl;
      procurementQrDownloadBaseName.value = baseName;
      procurementQrDialogVisible.value = true;
    } catch {
      ElMessage.error("二维码生成失败");
    }
  };

  const downloadProcurementQrCode = () => {
    if (!procurementQrCompositeUrl.value) return;
    const a = document.createElement("a");
    a.href = procurementQrCompositeUrl.value;
    a.download = `采购台账二维码-${procurementQrDownloadBaseName.value}.png`;
    a.click();
  };

  // 获取模板信息
  const getTemplateList = async () => {
    let res = await getPurchaseTemplateList();
@@ -2009,4 +2142,20 @@
      transform: scale(1.2);
    }
  }

  .procurement-qr-dialog {
    text-align: center;
    padding-bottom: 8px;
  }

  .procurement-qr-composite-img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto 28px;
  }

  .procurement-qr-save-btn {
    margin-bottom: 12px;
  }
</style>

 src/views/salesManagement/salesLedger/index.vue

@@ -1815,7 +1815,11 @@

  const buildLedgerQrCompositeDataUrl = row =>
    new Promise((resolve, reject) => {
      const payload = JSON.stringify({ id: row.id });
      const payload = JSON.stringify({
        id: row.id,
        salesContractNo: (row.salesContractNo ?? "").trim(),
        type: "XS",
      });
      QRCode.toDataURL(payload, { width: 220, margin: 2 })
        .then(qrDataUrl => {
          const contract = (row.salesContractNo ?? "").trim() || "—";
@@ -1885,7 +1889,7 @@
    if (!ledgerQrCompositeUrl.value) return;
    const a = document.createElement("a");
    a.href = ledgerQrCompositeUrl.value;
    a.download = `销售销售订单二维码-${ledgerQrDownloadBaseName.value}.png`;
    a.download = `销售台账二维码-${ledgerQrDownloadBaseName.value}.png`;
    a.click();
  };