From 1932a62477dfc3a7e604918c29d0d0d3bfa9c9d8 Mon Sep 17 00:00:00 2001
From: 张诺 <zhang_12370@163.com>
Date: 星期六, 25 四月 2026 15:07:19 +0800
Subject: [PATCH] 阳光印刷web 销售订单查询 客户往来调整间距
---
src/views/equipmentManagement/ledger/index.vue | 213 +++++++++++++++++++++++++++-------------------------
1 files changed, 110 insertions(+), 103 deletions(-)
diff --git a/src/views/equipmentManagement/ledger/index.vue b/src/views/equipmentManagement/ledger/index.vue
index 6af5543..45ec363 100644
--- a/src/views/equipmentManagement/ledger/index.vue
+++ b/src/views/equipmentManagement/ledger/index.vue
@@ -7,7 +7,6 @@
style="width: 240px"
placeholder="璇疯緭鍏ヨ澶囧悕绉�"
clearable
- :prefix-icon="Search"
@change="getTableData"
/>
</el-form-item>
@@ -17,7 +16,6 @@
style="width: 240px"
placeholder="璇疯緭鍏ヨ鏍煎瀷鍙�"
clearable
- :prefix-icon="Search"
@change="getTableData"
/>
</el-form-item>
@@ -27,17 +25,6 @@
style="width: 240px"
placeholder="璇疯緭鍏ヤ緵搴斿晢"
clearable
- :prefix-icon="Search"
- @change="getTableData"
- />
- </el-form-item>
- <el-form-item label="鍗曚綅">
- <el-input
- v-model="filters.unit"
- style="width: 240px"
- placeholder="璇疯緭鍏ュ崟浣�"
- clearable
- :prefix-icon="Search"
@change="getTableData"
/>
</el-form-item>
@@ -82,15 +69,14 @@
</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-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>
+ <el-dialog v-model="qrDialogVisible" title="浜岀淮鐮�" width="300px" draggable>
+ <div class="qr-dialog-content">
+ <img :src="qrCodeUrl" alt="浜岀淮鐮�" style="width:220px;height:auto;" />
+ <div style="margin:10px 0;">
+ <el-button type="primary" @click="downloadQRCode">涓嬭浇浜岀淮鐮佸浘鐗�</el-button>
+ </div>
+ </div>
+ </el-dialog>
</div>
</template>
@@ -131,81 +117,53 @@
deviceName: undefined,
deviceModel: undefined,
supplierName: undefined,
- unit: undefined,
entryDateStart: undefined,
entryDateEnd: undefined,
},
[
{
label: "璁惧鍚嶇О",
- align: "center",
prop: "deviceName",
},
{
label: "瑙勬牸鍨嬪彿",
- align: "center",
prop: "deviceModel",
},
{
label: "璁惧鍝佺墝",
- align: "center",
prop: "deviceBrand",
},
{
+ label: "璁惧绫诲瀷",
+ prop: "type",
+ },
+ {
label: "渚涘簲鍟�",
- align: "center",
prop: "supplierName",
},
{
- label: "鍗曚綅",
- align: "center",
- prop: "unit",
- },
- {
label: "瀛樻斁浣嶇疆",
- align: "center",
prop: "storageLocation",
},
{
label: "鏁伴噺",
- align: "center",
prop: "number",
},
{
- label: "鍚◣鍗曚环",
- align: "center",
- prop: "taxIncludingPriceUnit",
- },
- {
- label: "鍚◣鎬讳环",
- align: "center",
- prop: "taxIncludingPriceTotal",
- },
- {
- label: "绋庣巼",
- align: "center",
- prop: "taxRate",
- },
- {
- label: "涓嶅惈绋庢�讳环",
- align: "center",
- prop: "unTaxIncludingPriceTotal",
- },
- {
- label: "鍚敤鎶樻棫",
- align: "center",
- prop: "enableDepreciation",
- formatData: (v) => (v ? "鏄�" : "鍚�"),
- },
- {
label: "褰曞叆浜�",
- align: "center",
prop: "createUser",
},
{
label: "褰曞叆鏃ユ湡",
- align: "center",
prop: "createTime",
+ formatData: (v) => {
+ if (!v) return '';
+ // 濡傛灉鍖呭惈鏃跺垎绉掞紝鍙彇鏃ユ湡閮ㄥ垎
+ if (v.includes(' ')) {
+ return v.split(' ')[0];
+ }
+ return v;
+ },
},
{
dataType: "action",
@@ -216,14 +174,12 @@
operation: [
{
name: "缂栬緫",
- type: "text",
clickFun: (row) => {
edit(row.id)
},
},
{
name: "鐢熸垚浜岀淮鐮�",
- type: "text",
clickFun: (row) => {
showQRCode(row)
},
@@ -291,53 +247,92 @@
});
};
+const loadImage = (src) =>
+ new Promise((resolve, reject) => {
+ const img = new Image();
+ img.onload = () => resolve(img);
+ img.onerror = (err) => reject(err);
+ img.src = src;
+ });
+
+const wrapTextLines = (ctx, text, maxWidth) => {
+ const safeText = String(text || "").trim();
+ if (!safeText) return [];
+ const lines = [];
+ let currentLine = "";
+ for (const char of safeText) {
+ const nextLine = currentLine + char;
+ if (ctx.measureText(nextLine).width > maxWidth && currentLine) {
+ lines.push(currentLine);
+ currentLine = char;
+ } else {
+ currentLine = nextLine;
+ }
+ }
+ if (currentLine) {
+ lines.push(currentLine);
+ }
+ return lines;
+};
+
+const buildQrImageWithTitle = async (qrContent, deviceName) => {
+ const baseQrDataUrl = await QRCode.toDataURL(qrContent, {
+ width: 220,
+ margin: 2,
+ });
+ const qrImage = await loadImage(baseQrDataUrl);
+
+ const canvas = document.createElement("canvas");
+ const ctx = canvas.getContext("2d");
+ if (!ctx) return baseQrDataUrl;
+ const titleText = deviceName || "鏈懡鍚嶈澶�";
+ const fontSize = 30;
+ const sidePadding = 16;
+ const topPadding = 14;
+ const titleBottomGap = 10;
+ const bottomPadding = 14;
+
+ ctx.font = `${fontSize}px sans-serif`;
+ const textMaxWidth = qrImage.width + 40;
+ const titleLines = wrapTextLines(ctx, titleText, textMaxWidth);
+ const lineHeight = 22;
+ const titleHeight = titleLines.length * lineHeight;
+
+ canvas.width = Math.max(qrImage.width + sidePadding * 2, textMaxWidth + sidePadding * 2);
+ canvas.height = topPadding + titleHeight + titleBottomGap + qrImage.height + bottomPadding;
+
+ ctx.fillStyle = "#ffffff";
+ ctx.fillRect(0, 0, canvas.width, canvas.height);
+
+ ctx.font = `${fontSize}px sans-serif`;
+ ctx.fillStyle = "#303133";
+ ctx.textAlign = "center";
+ ctx.textBaseline = "middle";
+ titleLines.forEach((line, index) => {
+ const y = topPadding + lineHeight * index + lineHeight / 2;
+ ctx.fillText(line, canvas.width / 2, y);
+ });
+
+ const qrX = (canvas.width - qrImage.width) / 2;
+ const qrY = topPadding + titleHeight + titleBottomGap;
+ ctx.drawImage(qrImage, qrX, qrY, qrImage.width, qrImage.height);
+
+ return canvas.toDataURL("image/png");
+};
+
const showQRCode = async (row) => {
// 鐩存帴浣跨敤URL锛屼笉瑕佺敤JSON.stringify鍖呰
const qrContent = proxy.javaApi + '/device-info?deviceId=' + row.id;
- qrCodeUrl.value = await QRCode.toDataURL(qrContent);
+ qrCodeUrl.value = await buildQrImageWithTitle(qrContent, row.deviceName);
qrRowData.value = row;
qrDialogVisible.value = true;
};
const downloadQRCode = () => {
- 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();
- };
+ const a = document.createElement("a");
+ a.href = qrCodeUrl.value;
+ a.download = `${qrRowData.value.deviceName || "浜岀淮鐮�"}.png`;
+ a.click();
};
onMounted(() => {
@@ -354,4 +349,16 @@
justify-content: space-between;
margin-bottom: 10px;
}
+
+.qr-dialog-content {
+ text-align: center;
+}
+
+.qr-device-name {
+ margin-bottom: 8px;
+ font-size: 14px;
+ font-weight: 600;
+ line-height: 1.4;
+ word-break: break-all;
+}
</style>
--
Gitblit v1.9.3