From e611254efd3cea20853ceca9c445cdb332e1bf63 Mon Sep 17 00:00:00 2001
From: gaoluyang <2820782392@qq.com>
Date: 星期二, 18 十一月 2025 15:19:56 +0800
Subject: [PATCH] 1.设备台帐二维码上加上设备名称
---
src/views/equipmentManagement/ledger/index.vue | 87 +++++++++++++++++++++++++++++++++----------
1 files changed, 66 insertions(+), 21 deletions(-)
diff --git a/src/views/equipmentManagement/ledger/index.vue b/src/views/equipmentManagement/ledger/index.vue
index 428a6d9..6af5543 100644
--- a/src/views/equipmentManagement/ledger/index.vue
+++ b/src/views/equipmentManagement/ledger/index.vue
@@ -82,14 +82,15 @@
</PIMTable>
</div>
<Modal ref="modalRef" @success="getTableData"></Modal>
- <el-dialog v-model="qrDialogVisible" title="浜岀淮鐮�" width="300px">
- <div style="text-align:center;">
- <img :src="qrCodeUrl" alt="浜岀淮鐮�" style="width:200px;height:200px;" />
- <div style="margin:10px 0;">
- <el-button type="primary" @click="downloadQRCode">涓嬭浇浜岀淮鐮佸浘鐗�</el-button>
- </div>
- </div>
- </el-dialog>
+ <el-dialog v-model="qrDialogVisible" title="浜岀淮鐮�" width="300px">
+ <div style="text-align:center;">
+ <img :src="qrCodeUrl" alt="浜岀淮鐮�" style="width:200px;height:200px;" />
+ <div style="margin-top:6px;font-size:14px;color:#333;">{{ qrRowData?.deviceName }}</div>
+ <div style="margin:10px 0;">
+ <el-button type="primary" @click="downloadQRCode">涓嬭浇浜岀淮鐮佸浘鐗�</el-button>
+ </div>
+ </div>
+ </el-dialog>
</div>
</template>
@@ -146,6 +147,11 @@
prop: "deviceModel",
},
{
+ label: "璁惧鍝佺墝",
+ align: "center",
+ prop: "deviceBrand",
+ },
+ {
label: "渚涘簲鍟�",
align: "center",
prop: "supplierName",
@@ -154,6 +160,11 @@
label: "鍗曚綅",
align: "center",
prop: "unit",
+ },
+ {
+ label: "瀛樻斁浣嶇疆",
+ align: "center",
+ prop: "storageLocation",
},
{
label: "鏁伴噺",
@@ -181,6 +192,12 @@
prop: "unTaxIncludingPriceTotal",
},
{
+ label: "鍚敤鎶樻棫",
+ align: "center",
+ prop: "enableDepreciation",
+ formatData: (v) => (v ? "鏄�" : "鍚�"),
+ },
+ {
label: "褰曞叆浜�",
align: "center",
prop: "createUser",
@@ -195,7 +212,7 @@
label: "鎿嶄綔",
align: "center",
fixed: 'right',
- width: 140,
+ width: 150,
operation: [
{
name: "缂栬緫",
@@ -275,27 +292,55 @@
};
const showQRCode = async (row) => {
- // 浣犲彲浠ヨ嚜瀹氫箟浜岀淮鐮佸唴瀹癸紝姣斿 row.id 鎴� row.deviceName
- const qrContent = JSON.stringify(row); // 鎴� `${row.id}`
+ // 鐩存帴浣跨敤URL锛屼笉瑕佺敤JSON.stringify鍖呰
+ const qrContent = proxy.javaApi + '/device-info?deviceId=' + row.id;
qrCodeUrl.value = await QRCode.toDataURL(qrContent);
qrRowData.value = row;
qrDialogVisible.value = true;
};
const downloadQRCode = () => {
- const a = document.createElement("a");
- a.href = qrCodeUrl.value;
- a.download = `${qrRowData.value.deviceName || "浜岀淮鐮�"}.png`;
- a.click();
+ const name = qrRowData.value?.deviceName || "浜岀淮鐮�";
+ const img = new Image();
+ img.src = qrCodeUrl.value;
+ img.onload = () => {
+ const padding = 10;
+ const qrSize = 200;
+ const textHeight = 24; // space for text
+ const width = qrSize + padding * 2;
+ const height = qrSize + padding * 2 + textHeight;
+ const canvas = document.createElement("canvas");
+ canvas.width = width;
+ canvas.height = height;
+ const ctx = canvas.getContext("2d");
+ // background
+ ctx.fillStyle = "#ffffff";
+ ctx.fillRect(0, 0, width, height);
+ // draw QR centered
+ ctx.drawImage(img, padding, padding, qrSize, qrSize);
+ // draw name centered below
+ ctx.fillStyle = "#333";
+ ctx.font = "14px Arial";
+ ctx.textAlign = "center";
+ ctx.textBaseline = "middle";
+ const maxTextWidth = width - padding * 2;
+ let displayName = name;
+ // ellipsis if too long
+ while (ctx.measureText(displayName).width > maxTextWidth && displayName.length > 0) {
+ displayName = displayName.slice(0, -1);
+ }
+ if (displayName !== name) displayName = displayName + "鈥�";
+ ctx.fillText(displayName, width / 2, qrSize + padding + textHeight / 2);
+
+ const dataUrl = canvas.toDataURL("image/png");
+ const a = document.createElement("a");
+ a.href = dataUrl;
+ a.download = `${name}.png`;
+ a.click();
+ };
};
onMounted(() => {
- filters.entryDate = [
- dayjs().format("YYYY-MM-DD"),
- dayjs().add(1, "day").format("YYYY-MM-DD"),
- ]
- filters.entryDateStart = dayjs().format("YYYY-MM-DD")
- filters.entryDateEnd = dayjs().add(1, "day").format("YYYY-MM-DD")
getTableData();
});
</script>
--
Gitblit v1.9.3