From fb600a68d1bf4892e1f9817c4fea18563756b2e2 Mon Sep 17 00:00:00 2001
From: zss <zss@example.com>
Date: 星期四, 23 四月 2026 13:51:21 +0800
Subject: [PATCH] 发货记录增加数量+“库存预警”字段移至库存管理+点击销售合同号自动跳转到销售台账
---
src/views/equipmentManagement/ledger/index.vue | 475 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++---
1 files changed, 450 insertions(+), 25 deletions(-)
diff --git a/src/views/equipmentManagement/ledger/index.vue b/src/views/equipmentManagement/ledger/index.vue
index 3ecac9d..c8a3acc 100644
--- a/src/views/equipmentManagement/ledger/index.vue
+++ b/src/views/equipmentManagement/ledger/index.vue
@@ -1,38 +1,463 @@
<template>
<div class="app-container">
- <el-form :model="filters">
- <el-form-item label="鎼滅储">
- <el-input
- v-model="filters.searchText"
- style="width: 240px"
- placeholder="璇疯緭鍏�"
- clearable
- :prefix-icon="Search"
- @change="getTableData"
- />
+ <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-form-item>
+ <el-form-item label="瑙勬牸鍨嬪彿">
+ <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-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>
+ <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>
</el-form-item>
</el-form>
- <PIMTable :column="columns" />
+ <div class="table_list">
+ <div class="actions">
+ <div></div>
+ <div>
+ <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="{
+ current: pagination.currentPage,
+ size: pagination.pageSize,
+ total: pagination.total,
+ }"
+ @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>
+ <!-- 鐢ㄦ埛瀵煎叆瀵硅瘽妗� -->
+ <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 { 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: "璁惧鍙拌处",
-});
+ defineOptions({
+ name: "璁惧鍙拌处",
+ });
-const { filters, columns, getTableData } = usePaginationApi(
- () => {},
- {
- searchText: undefined,
- },
- [
+ // 琛ㄦ牸澶氶�夋閫変腑椤�
+ 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,
{
- label: "璁惧鍚嶇О",
+ 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 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 handleOut = () => {
+ ElMessageBox.confirm("閫変腑鐨勫唴瀹瑰皢琚鍑猴紝鏄惁纭瀵煎嚭锛�", "瀵煎嚭", {
+ confirmButtonText: "纭",
+ cancelButtonText: "鍙栨秷",
+ type: "warning",
+ })
+ .then(() => {
+ proxy.download(`/device/ledger/export`, {}, "璁惧鍙拌处妗ｆ.xlsx");
+ })
+ .catch(() => {
+ proxy.$modal.msg("宸插彇娑�");
+ });
+ };
+
+ 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;
+ }
+</style>
--
Gitblit v1.9.3