From ba65f3383951a27ee44163aea36d48f5c22b8fff Mon Sep 17 00:00:00 2001
From: 张诺 <zhang_12370@163.com>
Date: 星期五, 24 四月 2026 15:37:43 +0800
Subject: [PATCH] feat(PIMTable): 支持列动态显示控制
---
src/views/equipmentManagement/ledger/index.vue | 169 +++++++++++++++++++++++++++++++++++++------------------
1 files changed, 113 insertions(+), 56 deletions(-)
diff --git a/src/views/equipmentManagement/ledger/index.vue b/src/views/equipmentManagement/ledger/index.vue
index 9b4f8026..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,9 +69,9 @@
</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;" />
+ <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>
@@ -127,81 +114,72 @@
} = usePaginationApi(
getLedgerPage,
{
- searchText: undefined,
+ deviceName: undefined,
+ deviceModel: undefined,
+ supplierName: undefined,
+ entryDateStart: undefined,
+ entryDateEnd: undefined,
},
[
{
label: "璁惧鍚嶇О",
- align: "center",
prop: "deviceName",
},
{
label: "瑙勬牸鍨嬪彿",
- align: "center",
prop: "deviceModel",
},
{
+ label: "璁惧鍝佺墝",
+ prop: "deviceBrand",
+ },
+ {
+ label: "璁惧绫诲瀷",
+ prop: "type",
+ },
+ {
label: "渚涘簲鍟�",
- align: "center",
prop: "supplierName",
},
{
- label: "鍗曚綅",
- align: "center",
- prop: "unit",
+ label: "瀛樻斁浣嶇疆",
+ 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: "createUser",
},
{
label: "褰曞叆鏃ユ湡",
- align: "center",
prop: "createTime",
+ formatData: (v) => {
+ if (!v) return '';
+ // 濡傛灉鍖呭惈鏃跺垎绉掞紝鍙彇鏃ユ湡閮ㄥ垎
+ if (v.includes(' ')) {
+ return v.split(' ')[0];
+ }
+ return v;
+ },
},
{
dataType: "action",
label: "鎿嶄綔",
align: "center",
fixed: 'right',
- width: 140,
+ width: 150,
operation: [
{
name: "缂栬緫",
- type: "text",
clickFun: (row) => {
edit(row.id)
},
},
{
name: "鐢熸垚浜岀淮鐮�",
- type: "text",
clickFun: (row) => {
showQRCode(row)
},
@@ -269,10 +247,83 @@
});
};
+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;
};
@@ -285,12 +336,6 @@
};
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>
@@ -304,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