From e3179b9da9ed718bb8240ee8a45b3f8c2ad479cb Mon Sep 17 00:00:00 2001
From: gaoluyang <2820782392@qq.com>
Date: 星期二, 18 十一月 2025 14:48:29 +0800
Subject: [PATCH] 1.设备台帐二维码上加上设备名称 2.设备保养和保修加上每次的保养保修金额 3.加一个汇总页面，可以看到每个设备的每个月的金额，也可以选择看每年的金额
---
src/views/equipmentManagement/ledger/index.vue | 150 ++++++++++++++++++++++++++++++++++++++++++-------
1 files changed, 127 insertions(+), 23 deletions(-)
diff --git a/src/views/equipmentManagement/ledger/index.vue b/src/views/equipmentManagement/ledger/index.vue
index 7fa970b..1119f60 100644
--- a/src/views/equipmentManagement/ledger/index.vue
+++ b/src/views/equipmentManagement/ledger/index.vue
@@ -41,6 +41,10 @@
@change="getTableData"
/>
</el-form-item>
+ <el-form-item label="褰曞叆鏃ユ湡:">
+ <el-date-picker v-model="filters.entryDate" value-format="YYYY-MM-DD" format="YYYY-MM-DD" type="daterange"
+ placeholder="璇烽�夋嫨" clearable @change="changeDaterange" />
+ </el-form-item>
<el-form-item>
<el-button type="primary" @click="getTableData">鎼滅储</el-button>
<el-button @click="resetFilters">閲嶇疆</el-button>
@@ -75,22 +79,18 @@
@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-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>
@@ -101,6 +101,9 @@
import { onMounted, getCurrentInstance } from "vue";
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: "璁惧鍙拌处",
@@ -110,6 +113,10 @@
const multipleList = ref([]);
const { proxy } = getCurrentInstance();
const modalRef = ref();
+const qrDialogVisible = ref(false);
+const qrCodeUrl = ref("");
+const qrRowData = ref(null);
+
const {
filters,
columns,
@@ -121,7 +128,12 @@
} = usePaginationApi(
getLedgerPage,
{
- searchText: undefined,
+ deviceName: undefined,
+ deviceModel: undefined,
+ supplierName: undefined,
+ unit: undefined,
+ entryDateStart: undefined,
+ entryDateEnd: undefined,
},
[
{
@@ -135,6 +147,11 @@
prop: "deviceModel",
},
{
+ label: "璁惧鍝佺墝",
+ align: "center",
+ prop: "deviceBrand",
+ },
+ {
label: "渚涘簲鍟�",
align: "center",
prop: "supplierName",
@@ -143,6 +160,11 @@
label: "鍗曚綅",
align: "center",
prop: "unit",
+ },
+ {
+ label: "瀛樻斁浣嶇疆",
+ align: "center",
+ prop: "storageLocation",
},
{
label: "鏁伴噺",
@@ -170,6 +192,12 @@
prop: "unTaxIncludingPriceTotal",
},
{
+ label: "鍚敤鎶樻棫",
+ align: "center",
+ prop: "enableDepreciation",
+ formatData: (v) => (v ? "鏄�" : "鍚�"),
+ },
+ {
label: "褰曞叆浜�",
align: "center",
prop: "createUser",
@@ -179,14 +207,29 @@
align: "center",
prop: "createTime",
},
- {
- fixed: "right",
- label: "鎿嶄綔",
- dataType: "slot",
- slot: "operation",
- align: "center",
- width: "200px",
- },
+ {
+ dataType: "action",
+ label: "鎿嶄綔",
+ align: "center",
+ fixed: 'right',
+ width: 150,
+ operation: [
+ {
+ name: "缂栬緫",
+ type: "text",
+ clickFun: (row) => {
+ edit(row.id)
+ },
+ },
+ {
+ name: "鐢熸垚浜岀淮鐮�",
+ type: "text",
+ clickFun: (row) => {
+ showQRCode(row)
+ },
+ },
+ ],
+ },
]
);
@@ -201,8 +244,9 @@
const edit = (id) => {
modalRef.value.loadForm(id);
};
-const changePage = ({ page }) => {
+const changePage = ({ page, limit }) => {
pagination.currentPage = page;
+ pagination.pageSize = limit;
onCurrentChange(page);
};
const deleteRow = (id) => {
@@ -222,6 +266,17 @@
});
};
+const changeDaterange = (value) => {
+ if (value) {
+ filters.entryDateStart = dayjs(value[0]).format("YYYY-MM-DD");
+ filters.entryDateEnd = dayjs(value[1]).format("YYYY-MM-DD");
+ } else {
+ filters.entryDateStart = undefined;
+ filters.entryDateEnd = undefined;
+ }
+ getTableData();
+};
+
const handleOut = () => {
ElMessageBox.confirm("閫変腑鐨勫唴瀹瑰皢琚鍑猴紝鏄惁纭瀵煎嚭锛�", "瀵煎嚭", {
confirmButtonText: "纭",
@@ -236,6 +291,55 @@
});
};
+const showQRCode = async (row) => {
+ // 鐩存帴浣跨敤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 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(() => {
getTableData();
});
--
Gitblit v1.9.3