From c6c16e7a5c287c09148755e54e74b2e56ffc9423 Mon Sep 17 00:00:00 2001
From: gaoluyang <2820782392@qq.com>
Date: 星期四, 07 八月 2025 17:26:15 +0800
Subject: [PATCH] 设备台账-生成二维码
---
package.json | 1
src/views/equipmentManagement/ledger/index.vue | 73 ++++++++++++++++++++++++++----------
2 files changed, 53 insertions(+), 21 deletions(-)
diff --git a/package.json b/package.json
index 15334fa..ef18970 100644
--- a/package.json
+++ b/package.json
@@ -33,6 +33,7 @@
"jsencrypt": "3.3.2",
"nprogress": "0.2.0",
"pinia": "2.1.7",
+ "qrcode": "^1.5.4",
"sortablejs": "^1.15.6",
"splitpanes": "3.1.5",
"vue": "3.4.31",
diff --git a/src/views/equipmentManagement/ledger/index.vue b/src/views/equipmentManagement/ledger/index.vue
index ba17f7e..16fbbc6 100644
--- a/src/views/equipmentManagement/ledger/index.vue
+++ b/src/views/equipmentManagement/ledger/index.vue
@@ -79,22 +79,17 @@
@selection-change="handleSelectionChange"
@pagination="changePage"
>
- <template #operation="{ row }">
- <el-button type="primary" text @click="edit(row.id)" icon="editPen">
- 缂栬緫
- </el-button>
- <el-button
- type="danger"
- text
- icon="delete"
- @click="deleteRow(row.id)"
- >
- 鍒犻櫎
- </el-button>
- </template>
</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>
</div>
</template>
@@ -106,6 +101,8 @@
import Modal from "./Modal.vue";
import { ElMessageBox, ElMessage } from "element-plus";
import dayjs from "dayjs";
+import QRCode from "qrcode";
+import { ref } from "vue";
defineOptions({
name: "璁惧鍙拌处",
@@ -115,6 +112,10 @@
const multipleList = ref([]);
const { proxy } = getCurrentInstance();
const modalRef = ref();
+const qrDialogVisible = ref(false);
+const qrCodeUrl = ref("");
+const qrRowData = ref(null);
+
const {
filters,
columns,
@@ -184,14 +185,29 @@
align: "center",
prop: "createTime",
},
- {
- fixed: "right",
- label: "鎿嶄綔",
- dataType: "slot",
- slot: "operation",
- align: "center",
- width: "200px",
- },
+ {
+ dataType: "action",
+ label: "鎿嶄綔",
+ align: "center",
+ fixed: 'right',
+ width: 140,
+ operation: [
+ {
+ name: "缂栬緫",
+ type: "text",
+ clickFun: (row) => {
+ edit(row.id)
+ },
+ },
+ {
+ name: "鐢熸垚浜岀淮鐮�",
+ type: "text",
+ clickFun: (row) => {
+ showQRCode(row)
+ },
+ },
+ ],
+ },
]
);
@@ -253,6 +269,21 @@
});
};
+const showQRCode = async (row) => {
+ // 浣犲彲浠ヨ嚜瀹氫箟浜岀淮鐮佸唴瀹癸紝姣斿 row.id 鎴� row.deviceName
+ const qrContent = JSON.stringify(row); // 鎴� `${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();
+};
+
onMounted(() => {
filters.entryDate = [
dayjs().format("YYYY-MM-DD"),
--
Gitblit v1.9.3