From 52459bcaba196c47a0f28079729b48ce012eaef1 Mon Sep 17 00:00:00 2001
From: yyb <995253665@qq.com>
Date: 星期六, 18 四月 2026 13:35:47 +0800
Subject: [PATCH] feat: 添加销售订单二维码功能及相关样式，更新操作列宽度
---
src/views/salesManagement/salesLedger/index.vue | 196 +++++++++++++++++++++++++++++++++++++++++++++++-
1 files changed, 190 insertions(+), 6 deletions(-)
diff --git a/src/views/salesManagement/salesLedger/index.vue b/src/views/salesManagement/salesLedger/index.vue
index 3c13486..61251e2 100644
--- a/src/views/salesManagement/salesLedger/index.vue
+++ b/src/views/salesManagement/salesLedger/index.vue
@@ -221,6 +221,8 @@
align="center">
<template #default="scope">
<el-tag v-if="scope.row.productStockStatus == 1"
+ type="warning">閮ㄥ垎鍏ュ簱</el-tag>
+ <el-tag v-else-if="scope.row.productStockStatus == 2"
type="success">宸插叆搴�</el-tag>
<el-tag v-else-if="scope.row.productStockStatus == 0"
type="info">鏈嚭搴�</el-tag>
@@ -375,7 +377,7 @@
show-overflow-tooltip />
<el-table-column fixed="right"
label="鎿嶄綔"
- width="200"
+ width="280"
align="center">
<template #default="scope">
<el-button link
@@ -389,6 +391,9 @@
<el-button link
type="primary"
@click="downLoadFile(scope.row)">闄勪欢</el-button>
+ <el-button link
+ type="primary"
+ @click="openLedgerQrDialog(scope.row)">浜岀淮鐮�</el-button>
</template>
</el-table-column>
</el-table>
@@ -461,7 +466,7 @@
:key="item.id"
:label="item.customerName"
:value="item.id">
-{{ item.customerName + (item.taxpayerIdentificationNumber ? "鈥斺��" + item.taxpayerIdentificationNumber : "") }}
+ {{ item.customerName + (item.taxpayerIdentificationNumber ? "鈥斺��" + item.taxpayerIdentificationNumber : "") }}
</el-option>
</el-select>
</el-form-item>
@@ -1529,9 +1534,10 @@
<FormDialog v-model="importUpload.open"
:title="importUpload.title"
:width="'600px'"
- @close="importUpload.open = false"
+ :loading="importUpload.isUploading"
+ @close="onClose"
@confirm="submitImportFile"
- @cancel="importUpload.open = false">
+ @cancel="onClose">
<el-upload ref="importUploadRef"
:limit="1"
accept=".xlsx,.xls"
@@ -1542,6 +1548,7 @@
:on-error="importUpload.onError"
:on-progress="importUpload.onProgress"
:on-change="importUpload.onChange"
+ :on-exceed="importUpload.onExceed"
:auto-upload="false"
drag>
<i class="el-icon-upload"></i>
@@ -1660,6 +1667,11 @@
<el-table-column prop="quantity"
label="鏁伴噺"
width="100" />
+ <el-table-column prop="stockedQuantity"
+ label="宸插叆搴撴暟閲�"
+ width="120"
+ align="center"
+ show-overflow-tooltip />
<el-table-column prop="floorCode"
label="妤煎眰缂栧彿"
show-overflow-tooltip />
@@ -1672,6 +1684,24 @@
纭鍏ュ簱
</el-button>
</template>
+ </el-dialog>
+ <el-dialog v-model="ledgerQrDialogVisible"
+ title="閿�鍞鍗曚簩缁寸爜"
+ width="360px"
+ draggable
+ :close-on-click-modal="false">
+ <div class="ledger-qr-dialog">
+ <img v-if="ledgerQrCompositeUrl"
+ :src="ledgerQrCompositeUrl"
+ alt="閿�鍞鍗曚簩缁寸爜"
+ class="ledger-qr-composite-img" />
+ <el-button type="primary"
+ class="ledger-qr-save-btn"
+ :disabled="!ledgerQrCompositeUrl"
+ @click="downloadLedgerQrCode">
+ 淇濆瓨鍥剧墖
+ </el-button>
+ </div>
</el-dialog>
</div>
</template>
@@ -1720,6 +1750,7 @@
import { printSalesOrder } from "./components/salesOrderPrint.js";
import { printSalesDeliveryNote } from "./components/salesDeliveryPrint.js";
import { printSalesLabel } from "./components/salesLabelPrint.js";
+ import QRCode from "qrcode";
// import { salesLedgerProductSetProcessFlowConfig } from "@/api/salesManagement/salesProcessFlowConfig.js";
const userStore = useUserStore();
@@ -1754,6 +1785,109 @@
const selectedStockProductIds = ref([]);
const stockLoading = ref(false);
const currentStockLedgerId = ref(null);
+
+ const ledgerQrDialogVisible = ref(false);
+ const ledgerQrCompositeUrl = ref("");
+ const ledgerQrDownloadBaseName = ref("");
+
+ const sanitizeLedgerQrFilename = s =>
+ String(s)
+ .replace(/[\\/:*?"<>|]/g, "_")
+ .trim()
+ .slice(0, 80) || "ledger";
+
+ const wrapLedgerQrTextLines = (ctx, text, maxWidth) => {
+ const chars = [...text];
+ const lines = [];
+ let line = "";
+ for (const ch of chars) {
+ const test = line + ch;
+ if (ctx.measureText(test).width > maxWidth && line.length) {
+ lines.push(line);
+ line = ch;
+ } else {
+ line = test;
+ }
+ }
+ if (line) lines.push(line);
+ return lines;
+ };
+
+ const buildLedgerQrCompositeDataUrl = row =>
+ new Promise((resolve, reject) => {
+ const payload = JSON.stringify({ id: row.id });
+ QRCode.toDataURL(payload, { width: 220, margin: 2 })
+ .then(qrDataUrl => {
+ const contract = (row.salesContractNo ?? "").trim() || "鈥�";
+ const img = new Image();
+ img.onload = () => {
+ const QR_SIZE = 220;
+ const padTop = 16;
+ const gapAfterQr = 14;
+ const bottomPad = 48;
+ const horizontalPad = 20;
+ const lineHeight = 20;
+ const fontSize = 14;
+ const label = `閿�鍞悎鍚屽彿锛�${contract}`;
+
+ const canvas = document.createElement("canvas");
+ const ctx = canvas.getContext("2d");
+ canvas.width = Math.max(QR_SIZE + horizontalPad * 2, 280);
+ ctx.font = `${fontSize}px "Microsoft YaHei", "PingFang SC", sans-serif`;
+ const lines = wrapLedgerQrTextLines(ctx, label, canvas.width - horizontalPad * 2);
+ const textBlockHeight = lines.length * lineHeight;
+ canvas.height = padTop + QR_SIZE + gapAfterQr + textBlockHeight + bottomPad;
+
+ ctx.fillStyle = "#ffffff";
+ ctx.fillRect(0, 0, canvas.width, canvas.height);
+
+ const qrX = (canvas.width - QR_SIZE) / 2;
+ ctx.drawImage(img, qrX, padTop, QR_SIZE, QR_SIZE);
+
+ ctx.fillStyle = "#606266";
+ ctx.font = `${fontSize}px "Microsoft YaHei", "PingFang SC", sans-serif`;
+ ctx.textAlign = "center";
+ ctx.textBaseline = "top";
+ const textY0 = padTop + QR_SIZE + gapAfterQr;
+ lines.forEach((ln, i) => {
+ ctx.fillText(ln, canvas.width / 2, textY0 + i * lineHeight);
+ });
+
+ const baseName = sanitizeLedgerQrFilename(
+ contract !== "鈥�" ? contract : String(row.id)
+ );
+ resolve({ dataUrl: canvas.toDataURL("image/png"), baseName });
+ };
+ img.onerror = () => reject(new Error("浜岀淮鐮佸浘鐗囧姞杞藉け璐�"));
+ img.src = qrDataUrl;
+ })
+ .catch(reject);
+ });
+
+ const openLedgerQrDialog = async row => {
+ if (row?.id === undefined || row?.id === null || row?.id === "") {
+ ElMessage.warning("鏃犳硶鐢熸垚浜岀淮鐮侊細缂哄皯鍙拌处 ID");
+ return;
+ }
+ ledgerQrCompositeUrl.value = "";
+ ledgerQrDownloadBaseName.value = "";
+ try {
+ const { dataUrl, baseName } = await buildLedgerQrCompositeDataUrl(row);
+ ledgerQrCompositeUrl.value = dataUrl;
+ ledgerQrDownloadBaseName.value = baseName;
+ ledgerQrDialogVisible.value = true;
+ } catch {
+ ElMessage.error("浜岀淮鐮佺敓鎴愬け璐�");
+ }
+ };
+
+ const downloadLedgerQrCode = () => {
+ if (!ledgerQrCompositeUrl.value) return;
+ const a = document.createElement("a");
+ a.href = ledgerQrCompositeUrl.value;
+ a.download = `閿�鍞攢鍞鍗曚簩缁寸爜-${ledgerQrDownloadBaseName.value}.png`;
+ a.click();
+ };
// 鐢ㄦ埛淇℃伅琛ㄥ崟寮规鏁版嵁
const operationType = ref("");
@@ -2579,6 +2713,13 @@
},
onChange: (file, fileList) => {
console.log("鏂囦欢鐘舵�佹敼鍙�", file, fileList);
+ },
+ onExceed: (files, fileList) => {
+ if (importUploadRef.value) {
+ importUploadRef.value.clearFiles();
+ const file = files[0];
+ importUploadRef.value.handleStart(file);
+ }
},
onProgress: (event, file, fileList) => {
console.log("涓婁紶涓�...", event.percent);
@@ -3463,6 +3604,12 @@
const downloadTemplate = () => {
proxy.download("/sales/ledger/exportTemplate", {}, "閿�鍞彴璐﹀鍏ユā鏉�.xlsx");
};
+ const onClose = () => {
+ importUpload.open = false;
+ if (importUploadRef.value) {
+ importUploadRef.value.clearFiles();
+ }
+ };
// 鎻愪氦瀵煎叆鏂囦欢
const submitImportFile = () => {
@@ -3629,7 +3776,28 @@
} else {
const res = await getProcessCard(selectedId);
const processCardData = res?.data ?? {};
- printFinishedProcessCard(processCardData);
+ const routeNodes = processCardData?.routeNodes;
+ const isProcessRouteEmpty =
+ !Array.isArray(routeNodes) || routeNodes.length === 0;
+ if (isProcessRouteEmpty) {
+ proxy.$modal.closeLoading();
+ try {
+ await ElMessageBox.confirm(
+ "褰撳墠璁㈠崟鏈粦瀹氬伐鑹鸿矾绾夸篃娌℃湁璁剧疆榛樿鐨勫伐鑹鸿矾绾匡紝鏄惁浠嶈鎵撳嵃锛�",
+ "鎻愮ず",
+ {
+ confirmButtonText: "鎵撳嵃",
+ cancelButtonText: "鍙栨秷",
+ type: "warning",
+ }
+ );
+ } catch {
+ return;
+ }
+ printFinishedProcessCard(processCardData);
+ } else {
+ printFinishedProcessCard(processCardData);
+ }
}
} catch (error) {
console.error(
@@ -4056,7 +4224,7 @@
const isTrue = true;
selectedRows.value.forEach(row => {
if (row.deliveryStatus != 1 && row.deliveryStatus != 3) {
- proxy.$modal.msgWarning("浠呮湭鍙戣揣鎴栧鎵瑰け璐ョ殑鍙拌处鍙互鍚堝苟鍙戣揣");
+ proxy.$modal.msgWarning("浠呮湭鍙戣揣鎴栧鎵瑰け璐ョ殑鍙拌处鍙互鍙戣揣");
isTrue = false;
return;
}
@@ -4341,4 +4509,20 @@
justify-content: space-between;
margin-bottom: 10px;
}
+
+ .ledger-qr-dialog {
+ text-align: center;
+ padding-bottom: 8px;
+ }
+
+ .ledger-qr-composite-img {
+ max-width: 100%;
+ height: auto;
+ display: block;
+ margin: 0 auto 28px;
+ }
+
+ .ledger-qr-save-btn {
+ margin-bottom: 12px;
+ }
</style>
--
Gitblit v1.9.3