From 54a96b9f4eb652e3588640e60d3ce71c32a56a79 Mon Sep 17 00:00:00 2001
From: gongchunyi <deslre0381@gmail.com>
Date: 星期四, 02 四月 2026 15:02:56 +0800
Subject: [PATCH] Merge branch 'dev_HYSN' of http://114.132.189.42:9002/r/product-inventory-management into dev_HYSN
---
src/views/equipmentManagement/ledger/index.vue | 728 ++++++++++++++++++++++++++++++++-----------------------
1 files changed, 417 insertions(+), 311 deletions(-)
diff --git a/src/views/equipmentManagement/ledger/index.vue b/src/views/equipmentManagement/ledger/index.vue
index 6af5543..c8a3acc 100644
--- a/src/views/equipmentManagement/ledger/index.vue
+++ b/src/views/equipmentManagement/ledger/index.vue
@@ -1,52 +1,51 @@
<template>
<div class="app-container">
- <el-form :model="filters" :inline="true">
+ <el-form :model="filters"
+ :inline="true">
<el-form-item label="璁惧鍚嶇О">
- <el-input
- v-model="filters.deviceName"
- style="width: 240px"
- placeholder="璇疯緭鍏ヨ澶囧悕绉�"
- clearable
- :prefix-icon="Search"
- @change="getTableData"
- />
+ <el-input v-model="filters.deviceName"
+ style="width: 240px"
+ placeholder="璇疯緭鍏ヨ澶囧悕绉�"
+ clearable
+ :prefix-icon="Search"
+ @change="getTableData" />
</el-form-item>
<el-form-item label="瑙勬牸鍨嬪彿">
- <el-input
- v-model="filters.deviceModel"
- style="width: 240px"
- placeholder="璇疯緭鍏ヨ鏍煎瀷鍙�"
- clearable
- :prefix-icon="Search"
- @change="getTableData"
- />
+ <el-input v-model="filters.deviceModel"
+ style="width: 240px"
+ placeholder="璇疯緭鍏ヨ鏍煎瀷鍙�"
+ clearable
+ :prefix-icon="Search"
+ @change="getTableData" />
</el-form-item>
<el-form-item label="渚涘簲鍟�">
- <el-input
- v-model="filters.supplierName"
- style="width: 240px"
- placeholder="璇疯緭鍏ヤ緵搴斿晢"
- clearable
- :prefix-icon="Search"
- @change="getTableData"
- />
+ <el-input v-model="filters.supplierName"
+ 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-input v-model="filters.unit"
+ style="width: 240px"
+ placeholder="璇疯緭鍏ュ崟浣�"
+ clearable
+ :prefix-icon="Search"
+ @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-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 type="primary"
+ @click="getTableData">鎼滅储</el-button>
<el-button @click="resetFilters">閲嶇疆</el-button>
</el-form-item>
</el-form>
@@ -54,304 +53,411 @@
<div class="actions">
<div></div>
<div>
- <el-button type="primary" @click="add" icon="Plus"> 鏂板 </el-button>
- <el-button @click="handleOut" icon="download">瀵煎嚭</el-button>
- <el-button
- type="danger"
- icon="Delete"
- :disabled="multipleList.length <= 0"
- @click="deleteRow(multipleList.map((item) => item.id))"
- >
+ <el-button type="primary"
+ @click="add"
+ icon="Plus"> 鏂板 </el-button>
+ <el-button plain
+ icon="Upload"
+ @click="handleImport">瀵煎叆</el-button>
+ <el-button @click="handleOut"
+ icon="download">瀵煎嚭</el-button>
+ <el-button type="danger"
+ icon="Delete"
+ :disabled="multipleList.length <= 0"
+ @click="deleteRow(multipleList.map((item) => item.id))">
鎵归噺鍒犻櫎
</el-button>
</div>
</div>
- <PIMTable
- rowKey="id"
- isSelection
- :column="columns"
- :tableData="dataList"
- :page="{
+ <PIMTable rowKey="id"
+ isSelection
+ :column="columns"
+ :tableData="dataList"
+ :page="{
current: pagination.currentPage,
size: pagination.pageSize,
total: pagination.total,
}"
- @selection-change="handleSelectionChange"
- @pagination="changePage"
- >
+ @selection-change="handleSelectionChange"
+ @pagination="changePage">
</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>
+ <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 :title="upload.title"
+ v-model="upload.open"
+ width="400px"
+ append-to-body>
+ <el-upload ref="uploadRef"
+ :limit="1"
+ accept=".xlsx, .xls"
+ :headers="upload.headers"
+ :action="upload.url + '?updateSupport=' + upload.updateSupport"
+ :disabled="upload.isUploading"
+ :before-upload="upload.beforeUpload"
+ :on-progress="upload.onProgress"
+ :on-success="upload.onSuccess"
+ :on-error="upload.onError"
+ :on-change="upload.onChange"
+ :auto-upload="false"
+ drag>
+ <el-icon class="el-icon--upload"><upload-filled /></el-icon>
+ <div class="el-upload__text">灏嗘枃浠舵嫋鍒版澶勶紝鎴�<em>鐐瑰嚮涓婁紶</em></div>
+ <template #tip>
+ <div class="el-upload__tip text-center">
+ <span>浠呭厑璁稿鍏ls銆亁lsx鏍煎紡鏂囦欢銆�</span>
+ <el-link type="primary"
+ :underline="false"
+ style="font-size: 12px; vertical-align: baseline"
+ @click="importTemplate">涓嬭浇妯℃澘</el-link>
+ </div>
+ </template>
+ </el-upload>
+ <template #footer>
+ <div class="dialog-footer">
+ <el-button type="primary"
+ @click="submitFileForm">纭� 瀹�</el-button>
+ <el-button @click="upload.open = false">鍙� 娑�</el-button>
+ </div>
+ </template>
+ </el-dialog>
</div>
</template>
<script setup>
-import { usePaginationApi } from "@/hooks/usePaginationApi";
-// import { Search } from "@element-plus/icons-vue";
-import { getLedgerPage, delLedger } from "@/api/equipmentManagement/ledger";
-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";
+ import { usePaginationApi } from "@/hooks/usePaginationApi";
+ // import { Search } from "@element-plus/icons-vue";
+ import { getLedgerPage, delLedger } from "@/api/equipmentManagement/ledger";
+ 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";
+ import { getToken } from "@/utils/auth.js";
-defineOptions({
- name: "璁惧鍙拌处",
-});
-
-// 琛ㄦ牸澶氶�夋閫変腑椤�
-const multipleList = ref([]);
-const { proxy } = getCurrentInstance();
-const modalRef = ref();
-const qrDialogVisible = ref(false);
-const qrCodeUrl = ref("");
-const qrRowData = ref(null);
-
-const {
- filters,
- columns,
- dataList,
- pagination,
- getTableData,
- resetFilters,
- onCurrentChange,
-} = usePaginationApi(
- getLedgerPage,
- {
- 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: "渚涘簲鍟�",
- 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",
- },
- {
- 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)
- },
- },
- ],
- },
- ]
-);
-
-// 澶氶�夊悗鍋氫粈涔�
-const handleSelectionChange = (selectionList) => {
- multipleList.value = selectionList;
-};
-
-const add = () => {
- modalRef.value.openModal();
-};
-const edit = (id) => {
- modalRef.value.loadForm(id);
-};
-const changePage = ({ page, limit }) => {
- pagination.currentPage = page;
- pagination.pageSize = limit;
- onCurrentChange(page);
-};
-const deleteRow = (id) => {
- ElMessageBox.confirm("姝ゆ搷浣滃皢姘镐箙鍒犻櫎璇ユ枃浠�, 鏄惁缁х画?", "鎻愮ず", {
- confirmButtonText: "纭畾",
- cancelButtonText: "鍙栨秷",
- type: "warning",
- }).then(async () => {
- const { code } = await delLedger(id);
- if (code == 200) {
- ElMessage({
- type: "success",
- message: "鍒犻櫎鎴愬姛",
- });
- getTableData();
- }
+ defineOptions({
+ name: "璁惧鍙拌处",
});
-};
-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 multipleList = ref([]);
+ const { proxy } = getCurrentInstance();
+ const modalRef = ref();
+ const qrDialogVisible = ref(false);
+ const qrCodeUrl = ref("");
+ const qrRowData = ref(null);
-const handleOut = () => {
- ElMessageBox.confirm("閫変腑鐨勫唴瀹瑰皢琚鍑猴紝鏄惁纭瀵煎嚭锛�", "瀵煎嚭", {
- confirmButtonText: "纭",
- cancelButtonText: "鍙栨秷",
- type: "warning",
- })
- .then(() => {
- proxy.download(`/device/ledger/export`, {}, "璁惧鍙拌处妗ｆ.xlsx");
- })
- .catch(() => {
- proxy.$modal.msg("宸插彇娑�");
+ const {
+ filters,
+ columns,
+ dataList,
+ pagination,
+ getTableData,
+ resetFilters,
+ onCurrentChange,
+ } = usePaginationApi(
+ getLedgerPage,
+ {
+ 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: "渚涘簲鍟�",
+ 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: "enableDepreciation",
+ formatData: v => (v ? "鏄�" : "鍚�"),
+ },
+ {
+ label: "褰曞叆浜�",
+ align: "center",
+ prop: "createUser",
+ },
+ {
+ label: "褰曞叆鏃ユ湡",
+ align: "center",
+ prop: "createTime",
+ },
+ {
+ 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);
+ },
+ },
+ ],
+ },
+ ]
+ );
+
+ const upload = reactive({
+ // 鏄惁鏄剧ず寮瑰嚭灞傦紙瀹㈡埛瀵煎叆锛�
+ open: false,
+ // 寮瑰嚭灞傛爣棰橈紙瀹㈡埛瀵煎叆锛�
+ title: "",
+ // 鏄惁绂佺敤涓婁紶
+ isUploading: false,
+ // 璁剧疆涓婁紶鐨勮姹傚ご閮�
+ headers: { Authorization: "Bearer " + getToken() },
+ // 涓婁紶鐨勫湴鍧�
+ url: import.meta.env.VITE_APP_BASE_API + "/device/ledger/import",
+ // 鏂囦欢涓婁紶鍓嶇殑鍥炶皟
+ beforeUpload: file => {
+ console.log("鏂囦欢鍗冲皢涓婁紶", file);
+ // 鍙互鍦ㄦ澶勫仛鏂囦欢绫诲瀷鎴栧ぇ灏忔牎楠�
+ const isValid =
+ file.type ===
+ "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" ||
+ file.name.endsWith(".xlsx") ||
+ file.name.endsWith(".xls");
+ if (!isValid) {
+ proxy.$modal.msgError("鍙兘涓婁紶 Excel 鏂囦欢");
+ }
+ return isValid;
+ },
+ // 鏂囦欢鐘舵�佹敼鍙樻椂鐨勫洖璋�
+ onChange: (file, fileList) => {
+ console.log("鏂囦欢鐘舵�佹敼鍙�", file, fileList);
+ },
+ // 鏂囦欢涓婁紶鎴愬姛鏃剁殑鍥炶皟
+ onSuccess: (response, file, fileList) => {
+ console.log("涓婁紶鎴愬姛", response, file, fileList);
+ upload.isUploading = false;
+ if (response.code === 200) {
+ proxy.$modal.msgSuccess("鏂囦欢涓婁紶鎴愬姛");
+ upload.open = false;
+ proxy.$refs["uploadRef"].clearFiles();
+ getTableData();
+ } else if (response.code === 500) {
+ proxy.$modal.msgError(response.msg);
+ } else {
+ proxy.$modal.msgWarning(response.msg);
+ }
+ },
+ // 鏂囦欢涓婁紶澶辫触鏃剁殑鍥炶皟
+ onError: (error, file, fileList) => {
+ console.error("涓婁紶澶辫触", error, file, fileList);
+ upload.isUploading = false;
+ proxy.$modal.msgError("鏂囦欢涓婁紶澶辫触");
+ },
+ // 鏂囦欢涓婁紶杩涘害鍥炶皟
+ onProgress: (event, file, fileList) => {
+ console.log("涓婁紶涓�...", event.percent);
+ },
+ });
+
+ /** 鎻愪氦涓婁紶鏂囦欢 */
+ const submitFileForm = () => {
+ upload.isUploading = true;
+ proxy.$refs["uploadRef"].submit();
+ };
+
+ /** 涓嬭浇妯℃澘 */
+ const importTemplate = () => {
+ proxy.download("/device/ledger/downloadTemplate", {}, "璁惧鍙拌处妯℃澘.xlsx");
+ };
+
+ // 澶氶�夊悗鍋氫粈涔�
+ const handleSelectionChange = selectionList => {
+ multipleList.value = selectionList;
+ };
+
+ const add = () => {
+ modalRef.value.openModal();
+ };
+ const edit = id => {
+ modalRef.value.loadForm(id);
+ };
+ const changePage = ({ page, limit }) => {
+ pagination.currentPage = page;
+ pagination.pageSize = limit;
+ onCurrentChange(page);
+ };
+ const deleteRow = id => {
+ ElMessageBox.confirm("姝ゆ搷浣滃皢姘镐箙鍒犻櫎璇ユ枃浠�, 鏄惁缁х画?", "鎻愮ず", {
+ confirmButtonText: "纭畾",
+ cancelButtonText: "鍙栨秷",
+ type: "warning",
+ }).then(async () => {
+ const { code } = await delLedger(id);
+ if (code == 200) {
+ ElMessage({
+ type: "success",
+ message: "鍒犻櫎鎴愬姛",
+ });
+ getTableData();
+ }
});
-};
+ };
-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 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 handleImport = () => {
+ upload.title = "璁惧鍙拌处瀵煎叆";
+ upload.open = 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 handleOut = () => {
+ ElMessageBox.confirm("閫変腑鐨勫唴瀹瑰皢琚鍑猴紝鏄惁纭瀵煎嚭锛�", "瀵煎嚭", {
+ confirmButtonText: "纭",
+ cancelButtonText: "鍙栨秷",
+ type: "warning",
+ })
+ .then(() => {
+ proxy.download(`/device/ledger/export`, {}, "璁惧鍙拌处妗ｆ.xlsx");
+ })
+ .catch(() => {
+ proxy.$modal.msg("宸插彇娑�");
+ });
+ };
-onMounted(() => {
- getTableData();
-});
+ 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();
+ });
</script>
<style lang="scss" scoped>
-.table_list {
- margin-top: unset;
-}
-.actions {
- display: flex;
- justify-content: space-between;
- margin-bottom: 10px;
-}
+ .table_list {
+ margin-top: unset;
+ }
+ .actions {
+ display: flex;
+ justify-content: space-between;
+ margin-bottom: 10px;
+ }
</style>
--
Gitblit v1.9.3