From 2a2bd03e4041e8f08c32229dc9a0246319bd923a Mon Sep 17 00:00:00 2001 From: fengyuan_yang <1976974459@qq.com> Date: Wed, 10 Dec 2025 13:45:06 +0800 Subject: [PATCH] =?UTF-8?q?2025-12-10=20pda=E7=89=A9=E6=96=99=E6=B8=85?= =?UTF-8?q?=E5=8D=95=E4=BC=98=E5=8C=96?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../other-inout/otherInboundDetail.vue | 99 +++++++++++++- .../other-inout/otherOutboundDetail.vue | 97 +++++++++++++- .../productionPickingDetail.vue | 120 ++++++++++++++++- .../production/productionInboundStorage.vue | 99 +++++++++++++- .../production/productionReturnStorage.vue | 99 +++++++++++++- .../purchase-inbound/inboundStorage.vue | 121 +++++++++++++++++- .../purchase-return/purchaseReturnDetail.vue | 108 +++++++++++++++- .../sales-return/salesReturnStorage.vue | 99 +++++++++++++- .../modules/sales/salesOutboundDetail.vue | 97 +++++++++++++- 9 files changed, 898 insertions(+), 41 deletions(-) diff --git a/src/views/modules/other-inout/otherInboundDetail.vue b/src/views/modules/other-inout/otherInboundDetail.vue index cc9c004..bae8fb4 100644 --- a/src/views/modules/other-inout/otherInboundDetail.vue +++ b/src/views/modules/other-inout/otherInboundDetail.vue @@ -229,6 +229,7 @@
NO.
物料编码
+
物料名称
需求数量
可用数量
扫描数量
@@ -241,7 +242,10 @@ class="table-row" >
{{ index + 1 }}
-
{{ item.materialCode }}
+
{{ item.materialCode || item.partNo }}
+
+ {{ item.materialName || '-' }} +
{{ item.requiredQty || 0 }}
{{ item.pickedQty || 0 }}
{{ item.scansQty || 0 }}
@@ -260,6 +264,11 @@
+ + +
+
{{ currentPartName }}
+
@@ -327,7 +336,11 @@ export default { // 左滑删除相关 touchStartX: 0, touchStartY: 0, - deleteButtonWidth: 80 // 删除按钮宽度 + deleteButtonWidth: 80, // 删除按钮宽度 + // 物料名称提示框相关 + showPartNameTooltip: false, + currentPartName: '', + tooltipStyle: { top: '0px', left: '0px' } }; }, methods: { @@ -647,6 +660,24 @@ export default { // 关闭物料清单弹窗 closeMaterialDialog() { this.showMaterialDialog = false; + this.hidePartNameTip(); + }, + + // 显示物料名称提示框 + showPartNameTip(partName, event) { + if (!partName || partName === '-') return; + const rect = event.target.getBoundingClientRect(); + this.tooltipStyle = { top: (rect.top - 5) + 'px', left: rect.left + 'px' }; + this.currentPartName = partName; + this.showPartNameTooltip = true; + setTimeout(() => { document.addEventListener('click', this.hidePartNameTip); }, 0); + }, + + // 隐藏物料名称提示框 + hidePartNameTip() { + this.showPartNameTooltip = false; + this.currentPartName = ''; + document.removeEventListener('click', this.hidePartNameTip); }, showStockDialogFn(item) { @@ -1344,7 +1375,8 @@ export default { } .material-table { - width: 100%; + min-width: 500px; + width: max-content; } .table-header { @@ -1361,8 +1393,7 @@ export default { } .table-body { - max-height: 400px; - overflow-y: auto; + /* 垂直滚动由modal-body处理 */ } .table-row { @@ -1440,6 +1471,64 @@ export default { font-size: 12px; } +/* 物料名称列样式 */ +.material-table .col-part-name { + flex: 1.2; + text-align: left; + min-width: 80px; + font-size: 12px; + overflow: hidden; +} + +.material-table .col-part-name .part-name-text { + display: block; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + max-width: 100%; + color: #17B3A3; + cursor: pointer; +} + +.material-table .col-part-name .part-name-text:active { + color: #0d8f7f; +} + +/* 物料名称提示框样式 */ +.part-name-tooltip { + position: fixed; + z-index: 10001; + transform: translateY(-100%); + max-width: 200px; + animation: tooltipFadeIn 0.2s ease; +} + +@keyframes tooltipFadeIn { + from { opacity: 0; transform: translateY(-100%) translateY(5px); } + to { opacity: 1; transform: translateY(-100%) translateY(0); } +} + +.part-name-tooltip .tooltip-content { + background: #303133; + color: #fff; + padding: 8px 12px; + border-radius: 4px; + font-size: 12px; + line-height: 1.4; + word-break: break-all; + box-shadow: 0 2px 12px rgba(0, 0, 0, 0.2); +} + +.part-name-tooltip::after { + content: ''; + position: absolute; + bottom: -6px; + left: 15px; + border-width: 6px 6px 0 6px; + border-style: solid; + border-color: #303133 transparent transparent transparent; +} + .material-modal .modal-footer { padding: 15px 20px; display: flex; diff --git a/src/views/modules/other-inout/otherOutboundDetail.vue b/src/views/modules/other-inout/otherOutboundDetail.vue index 872fad4..49376a6 100644 --- a/src/views/modules/other-inout/otherOutboundDetail.vue +++ b/src/views/modules/other-inout/otherOutboundDetail.vue @@ -130,6 +130,7 @@
NO.
物料编码
+
物料名称
需求数量
出库数量
扫描数量
@@ -143,6 +144,9 @@ >
{{ index + 1 }}
{{ item.materialCode || item.partNo }}
+
+ {{ item.materialName || '-' }} +
{{ item.requiredQty || 0 }}
{{ item.pickedQty || 0 }}
{{ item.scansQty || 0 }}
@@ -161,6 +165,11 @@
+ + +
+
{{ currentPartName }}
+
@@ -218,7 +227,11 @@ export default { showStockDialog: false, stockList: [], stockLoading: false, - currentPartNo: '' + currentPartNo: '', + // 物料名称提示框相关 + showPartNameTooltip: false, + currentPartName: '', + tooltipStyle: { top: '0px', left: '0px' } }; }, methods: { @@ -386,6 +399,24 @@ export default { // 关闭物料清单弹窗 closeMaterialDialog() { this.showMaterialDialog = false; + this.hidePartNameTip(); + }, + + // 显示物料名称提示框 + showPartNameTip(partName, event) { + if (!partName || partName === '-') return; + const rect = event.target.getBoundingClientRect(); + this.tooltipStyle = { top: (rect.top - 5) + 'px', left: rect.left + 'px' }; + this.currentPartName = partName; + this.showPartNameTooltip = true; + setTimeout(() => { document.addEventListener('click', this.hidePartNameTip); }, 0); + }, + + // 隐藏物料名称提示框 + hidePartNameTip() { + this.showPartNameTooltip = false; + this.currentPartName = ''; + document.removeEventListener('click', this.hidePartNameTip); }, showStockDialogFn(item) { @@ -901,7 +932,8 @@ export default { } .material-table { - width: 100%; + min-width: 500px; + width: max-content; } .table-header { @@ -918,8 +950,7 @@ export default { } .table-body { - max-height: 400px; - overflow-y: auto; + /* 垂直滚动由modal-body处理 */ } .table-row { @@ -997,6 +1028,64 @@ export default { font-size: 12px; } +/* 物料名称列样式 */ +.material-table .col-part-name { + flex: 1.2; + text-align: left; + min-width: 80px; + font-size: 12px; + overflow: hidden; +} + +.material-table .col-part-name .part-name-text { + display: block; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + max-width: 100%; + color: #17B3A3; + cursor: pointer; +} + +.material-table .col-part-name .part-name-text:active { + color: #0d8f7f; +} + +/* 物料名称提示框样式 */ +.part-name-tooltip { + position: fixed; + z-index: 10001; + transform: translateY(-100%); + max-width: 200px; + animation: tooltipFadeIn 0.2s ease; +} + +@keyframes tooltipFadeIn { + from { opacity: 0; transform: translateY(-100%) translateY(5px); } + to { opacity: 1; transform: translateY(-100%) translateY(0); } +} + +.part-name-tooltip .tooltip-content { + background: #303133; + color: #fff; + padding: 8px 12px; + border-radius: 4px; + font-size: 12px; + line-height: 1.4; + word-break: break-all; + box-shadow: 0 2px 12px rgba(0, 0, 0, 0.2); +} + +.part-name-tooltip::after { + content: ''; + position: absolute; + bottom: -6px; + left: 15px; + border-width: 6px 6px 0 6px; + border-style: solid; + border-color: #303133 transparent transparent transparent; +} + .material-modal .modal-footer { padding: 15px 20px; display: flex; diff --git a/src/views/modules/production-pick/productionPickingDetail.vue b/src/views/modules/production-pick/productionPickingDetail.vue index 34c4d8c..e81e667 100644 --- a/src/views/modules/production-pick/productionPickingDetail.vue +++ b/src/views/modules/production-pick/productionPickingDetail.vue @@ -133,6 +133,7 @@
NO.
物料编码
+
物料名称
需求数量
已领数量
扫描数量
@@ -146,6 +147,9 @@ >
{{ index + 1 }}
{{ item.materialCode || item.partNo }}
+
+ {{ item.materialName || '-' }} +
{{ item.requiredQty || 0 }}
{{ item.pickedQty || 0 }}
{{ item.scansQty || 0 }}
@@ -156,6 +160,7 @@
+

暂无物料数据

@@ -164,6 +169,11 @@ + + +
+
{{ currentPartName }}
+
@@ -223,7 +233,14 @@ export default { showStockDialog: false, stockList: [], stockLoading: false, - currentPartNo: '' + currentPartNo: '', + // 物料名称提示框相关 + showPartNameTooltip: false, + currentPartName: '', + tooltipStyle: { + top: '0px', + left: '0px' + } }; }, methods: { @@ -389,6 +406,36 @@ export default { // 关闭物料清单弹窗 closeMaterialDialog() { this.showMaterialDialog = false; + this.hidePartNameTip(); + }, + + // 显示物料名称提示框 + showPartNameTip(partName, event) { + if (!partName || partName === '-') return; + + // 获取点击元素位置(使用屏幕坐标) + const rect = event.target.getBoundingClientRect(); + + // 计算提示框位置(fixed定位,显示在点击位置上方) + this.tooltipStyle = { + top: (rect.top - 5) + 'px', + left: rect.left + 'px' + }; + + this.currentPartName = partName; + this.showPartNameTooltip = true; + + // 添加点击其他位置关闭的监听 + setTimeout(() => { + document.addEventListener('click', this.hidePartNameTip); + }, 0); + }, + + // 隐藏物料名称提示框 + hidePartNameTip() { + this.showPartNameTooltip = false; + this.currentPartName = ''; + document.removeEventListener('click', this.hidePartNameTip); }, showStockDialogFn(item) { @@ -932,7 +979,8 @@ export default { } .material-table { - width: 100%; + min-width: 500px; + width: max-content; } .table-header { @@ -949,8 +997,7 @@ export default { } .table-body { - max-height: 400px; - overflow-y: auto; + /* 垂直滚动由modal-body处理 */ } .table-row { @@ -1021,6 +1068,71 @@ export default { font-size: 12px; } +/* 物料名称列样式 */ +.material-table .col-part-name { + flex: 1.2; + text-align: left; + min-width: 80px; + font-size: 12px; + overflow: hidden; +} + +.material-table .col-part-name .part-name-text { + display: block; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + max-width: 100%; + color: #17B3A3; + cursor: pointer; +} + +.material-table .col-part-name .part-name-text:active { + color: #0d8f7f; +} + +/* 物料名称提示框样式 */ +.part-name-tooltip { + position: fixed; + z-index: 10001; + transform: translateY(-100%); + max-width: 200px; + animation: tooltipFadeIn 0.2s ease; +} + +@keyframes tooltipFadeIn { + from { + opacity: 0; + transform: translateY(-100%) translateY(5px); + } + to { + opacity: 1; + transform: translateY(-100%) translateY(0); + } +} + +.part-name-tooltip .tooltip-content { + background: #303133; + color: #fff; + padding: 8px 12px; + border-radius: 4px; + font-size: 12px; + line-height: 1.4; + word-break: break-all; + box-shadow: 0 2px 12px rgba(0, 0, 0, 0.2); +} + +/* 提示框箭头(向下) */ +.part-name-tooltip::after { + content: ''; + position: absolute; + bottom: -6px; + left: 15px; + border-width: 6px 6px 0 6px; + border-style: solid; + border-color: #303133 transparent transparent transparent; +} + .material-modal .modal-footer { padding: 15px 20px; display: flex; diff --git a/src/views/modules/production/productionInboundStorage.vue b/src/views/modules/production/productionInboundStorage.vue index 3c9809d..abf5bb1 100644 --- a/src/views/modules/production/productionInboundStorage.vue +++ b/src/views/modules/production/productionInboundStorage.vue @@ -174,6 +174,7 @@
NO.
物料编码
+
物料名称
需求数量
已入库数
扫描数量
@@ -188,7 +189,10 @@
{{ index + 1 }}
{{ item.materialCode || item.partNo }}
-
{{ item.labelCount || 0 }}
+
+ {{ item.materialName || '-' }} +
+
{{ item.requiredQty || 0 }}
{{ item.pickedQty || 0 }}
{{ item.scansQty || 0 }}
@@ -206,6 +210,11 @@ + + +
+
{{ currentPartName }}
+
@@ -281,7 +290,11 @@ export default { showStockDialog: false, stockList: [], stockLoading: false, - currentPartNo: '' + currentPartNo: '', + // 物料名称提示框相关 + showPartNameTooltip: false, + currentPartName: '', + tooltipStyle: { top: '0px', left: '0px' } }; }, methods: { @@ -499,6 +512,24 @@ export default { // 关闭物料清单弹窗 closeMaterialDialog() { this.showMaterialDialog = false; + this.hidePartNameTip(); + }, + + // 显示物料名称提示框 + showPartNameTip(partName, event) { + if (!partName || partName === '-') return; + const rect = event.target.getBoundingClientRect(); + this.tooltipStyle = { top: (rect.top - 5) + 'px', left: rect.left + 'px' }; + this.currentPartName = partName; + this.showPartNameTooltip = true; + setTimeout(() => { document.addEventListener('click', this.hidePartNameTip); }, 0); + }, + + // 隐藏物料名称提示框 + hidePartNameTip() { + this.showPartNameTooltip = false; + this.currentPartName = ''; + document.removeEventListener('click', this.hidePartNameTip); }, // 显示可用库存弹窗 @@ -1278,7 +1309,8 @@ export default { } .material-table { - width: 100%; + min-width: 500px; + width: max-content; } .table-header { @@ -1295,8 +1327,7 @@ export default { } .table-body { - max-height: 400px; - overflow-y: auto; + /* 垂直滚动由modal-body处理 */ } .table-row { @@ -1522,6 +1553,64 @@ export default { font-size: 12px; } +/* 物料名称列样式 */ +.material-table .col-part-name { + flex: 1.2; + text-align: left; + min-width: 80px; + font-size: 12px; + overflow: hidden; +} + +.material-table .col-part-name .part-name-text { + display: block; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + max-width: 100%; + color: #17B3A3; + cursor: pointer; +} + +.material-table .col-part-name .part-name-text:active { + color: #0d8f7f; +} + +/* 物料名称提示框样式 */ +.part-name-tooltip { + position: fixed; + z-index: 10001; + transform: translateY(-100%); + max-width: 200px; + animation: tooltipFadeIn 0.2s ease; +} + +@keyframes tooltipFadeIn { + from { opacity: 0; transform: translateY(-100%) translateY(5px); } + to { opacity: 1; transform: translateY(-100%) translateY(0); } +} + +.part-name-tooltip .tooltip-content { + background: #303133; + color: #fff; + padding: 8px 12px; + border-radius: 4px; + font-size: 12px; + line-height: 1.4; + word-break: break-all; + box-shadow: 0 2px 12px rgba(0, 0, 0, 0.2); +} + +.part-name-tooltip::after { + content: ''; + position: absolute; + bottom: -6px; + left: 15px; + border-width: 6px 6px 0 6px; + border-style: solid; + border-color: #303133 transparent transparent transparent; +} + .material-modal .modal-footer { padding: 15px 20px; display: flex; diff --git a/src/views/modules/production/productionReturnStorage.vue b/src/views/modules/production/productionReturnStorage.vue index a90a745..20bcc40 100644 --- a/src/views/modules/production/productionReturnStorage.vue +++ b/src/views/modules/production/productionReturnStorage.vue @@ -166,6 +166,7 @@
NO.
物料编码
+
物料名称
需求数量
已入库数
扫描数量
@@ -180,7 +181,10 @@
{{ index + 1 }}
{{ item.materialCode || item.partNo }}
-
{{ item.labelCount || 0 }}
+
+ {{ item.materialName || '-' }} +
+
{{ item.requiredQty || 0 }}
{{ item.pickedQty || 0 }}
{{ item.scansQty || 0 }}
@@ -198,6 +202,11 @@ + + +
+
{{ currentPartName }}
+
@@ -225,7 +234,11 @@ export default { showMaterialDialog: false, materialList: [], materialListLoading: false, - isRemoveMode: false // 默认为添加模式 + isRemoveMode: false, // 默认为添加模式 + // 物料名称提示框相关 + showPartNameTooltip: false, + currentPartName: '', + tooltipStyle: { top: '0px', left: '0px' } }; }, methods: { @@ -412,6 +425,24 @@ export default { // 关闭物料清单弹窗 closeMaterialDialog() { this.showMaterialDialog = false; + this.hidePartNameTip(); + }, + + // 显示物料名称提示框 + showPartNameTip(partName, event) { + if (!partName || partName === '-') return; + const rect = event.target.getBoundingClientRect(); + this.tooltipStyle = { top: (rect.top - 5) + 'px', left: rect.left + 'px' }; + this.currentPartName = partName; + this.showPartNameTooltip = true; + setTimeout(() => { document.addEventListener('click', this.hidePartNameTip); }, 0); + }, + + // 隐藏物料名称提示框 + hidePartNameTip() { + this.showPartNameTooltip = false; + this.currentPartName = ''; + document.removeEventListener('click', this.hidePartNameTip); }, // 加载入库单详情 @@ -1152,7 +1183,8 @@ export default { } .material-table { - width: 100%; + min-width: 500px; + width: max-content; } .table-header { @@ -1169,8 +1201,7 @@ export default { } .table-body { - max-height: 400px; - overflow-y: auto; + /* 垂直滚动由modal-body处理 */ } .table-row { @@ -1234,6 +1265,64 @@ export default { font-size: 12px; } +/* 物料名称列样式 */ +.material-table .col-part-name { + flex: 1.2; + text-align: left; + min-width: 80px; + font-size: 12px; + overflow: hidden; +} + +.material-table .col-part-name .part-name-text { + display: block; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + max-width: 100%; + color: #17B3A3; + cursor: pointer; +} + +.material-table .col-part-name .part-name-text:active { + color: #0d8f7f; +} + +/* 物料名称提示框样式 */ +.part-name-tooltip { + position: fixed; + z-index: 10001; + transform: translateY(-100%); + max-width: 200px; + animation: tooltipFadeIn 0.2s ease; +} + +@keyframes tooltipFadeIn { + from { opacity: 0; transform: translateY(-100%) translateY(5px); } + to { opacity: 1; transform: translateY(-100%) translateY(0); } +} + +.part-name-tooltip .tooltip-content { + background: #303133; + color: #fff; + padding: 8px 12px; + border-radius: 4px; + font-size: 12px; + line-height: 1.4; + word-break: break-all; + box-shadow: 0 2px 12px rgba(0, 0, 0, 0.2); +} + +.part-name-tooltip::after { + content: ''; + position: absolute; + bottom: -6px; + left: 15px; + border-width: 6px 6px 0 6px; + border-style: solid; + border-color: #303133 transparent transparent transparent; +} + .material-modal .modal-footer { padding: 15px 20px; display: flex; diff --git a/src/views/modules/purchase-inbound/inboundStorage.vue b/src/views/modules/purchase-inbound/inboundStorage.vue index 87ffb87..4202346 100644 --- a/src/views/modules/purchase-inbound/inboundStorage.vue +++ b/src/views/modules/purchase-inbound/inboundStorage.vue @@ -169,6 +169,7 @@
NO.
物料编码
+
物料名称
需求数量
已入库数
扫描数量
@@ -183,7 +184,10 @@
{{ index + 1 }}
{{item.partNo }}
-
{{ item.labelCount || 0 }}
+
+ {{ item.materialName || '-' }} +
+
{{ item.requiredQty || 0 }}
{{ item.pickedQty || 0 }}
{{ item.scansQty || 0 }}
@@ -201,6 +205,11 @@ + + +
+
{{ currentPartName }}
+
@@ -280,7 +289,14 @@ export default { showStockDialog: false, stockList: [], stockLoading: false, - currentPartNo: '' + currentPartNo: '', + // 物料名称提示框相关 + showPartNameTooltip: false, + currentPartName: '', + tooltipStyle: { + top: '0px', + left: '0px' + } }; }, methods: { @@ -470,6 +486,36 @@ export default { // 关闭物料清单弹窗 closeMaterialDialog() { this.showMaterialDialog = false; + this.hidePartNameTip(); + }, + + // 显示物料名称提示框 + showPartNameTip(partName, event) { + if (!partName || partName === '-') return; + + // 获取点击元素位置(使用屏幕坐标) + const rect = event.target.getBoundingClientRect(); + + // 计算提示框位置(fixed定位,显示在点击位置上方) + this.tooltipStyle = { + top: (rect.top - 5) + 'px', + left: rect.left + 'px' + }; + + this.currentPartName = partName; + this.showPartNameTooltip = true; + + // 添加点击其他位置关闭的监听 + setTimeout(() => { + document.addEventListener('click', this.hidePartNameTip); + }, 0); + }, + + // 隐藏物料名称提示框 + hidePartNameTip() { + this.showPartNameTooltip = false; + this.currentPartName = ''; + document.removeEventListener('click', this.hidePartNameTip); }, // 显示可用库存弹窗 @@ -1257,7 +1303,8 @@ export default { } .material-table { - width: 100%; + min-width: 500px; + width: max-content; } .table-header { @@ -1274,8 +1321,7 @@ export default { } .table-body { - max-height: 400px; - overflow-y: auto; + /* 垂直滚动由modal-body处理 */ } .table-row { @@ -1355,6 +1401,71 @@ export default { font-size: 12px; } +/* 物料名称列样式 */ +.material-table .col-part-name { + flex: 1.2; + text-align: left; + min-width: 80px; + font-size: 12px; + overflow: hidden; +} + +.material-table .col-part-name .part-name-text { + display: block; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + max-width: 100%; + color: #17B3A3; + cursor: pointer; +} + +.material-table .col-part-name .part-name-text:active { + color: #0d8f7f; +} + +/* 物料名称提示框样式 */ +.part-name-tooltip { + position: fixed; + z-index: 10001; + transform: translateY(-100%); + max-width: 200px; + animation: tooltipFadeIn 0.2s ease; +} + +@keyframes tooltipFadeIn { + from { + opacity: 0; + transform: translateY(-100%) translateY(5px); + } + to { + opacity: 1; + transform: translateY(-100%) translateY(0); + } +} + +.part-name-tooltip .tooltip-content { + background: #303133; + color: #fff; + padding: 8px 12px; + border-radius: 4px; + font-size: 12px; + line-height: 1.4; + word-break: break-all; + box-shadow: 0 2px 12px rgba(0, 0, 0, 0.2); +} + +/* 提示框箭头(向下) */ +.part-name-tooltip::after { + content: ''; + position: absolute; + bottom: -6px; + left: 15px; + border-width: 6px 6px 0 6px; + border-style: solid; + border-color: #303133 transparent transparent transparent; +} + .material-modal .modal-footer { padding: 15px 20px; display: flex; diff --git a/src/views/modules/purchase-return/purchaseReturnDetail.vue b/src/views/modules/purchase-return/purchaseReturnDetail.vue index b7dbd40..f527ac4 100644 --- a/src/views/modules/purchase-return/purchaseReturnDetail.vue +++ b/src/views/modules/purchase-return/purchaseReturnDetail.vue @@ -129,6 +129,7 @@
NO.
物料编码
+
物料名称
需求数量
出库数量
扫描数量
@@ -142,6 +143,9 @@ >
{{ index + 1 }}
{{ item.materialCode || item.partNo }}
+
+ {{ item.materialName || '-' }} +
{{ item.requiredQty || 0 }}
{{ item.pickedQty || 0 }}
{{ item.scansQty || 0 }}
@@ -160,6 +164,11 @@
+ + +
+
{{ currentPartName }}
+
@@ -221,7 +230,14 @@ export default { showStockDialog: false, stockList: [], stockLoading: false, - currentPartNo: '' + currentPartNo: '', + // 物料名称提示框相关 + showPartNameTooltip: false, + currentPartName: '', + tooltipStyle: { + top: '0px', + left: '0px' + } }; }, methods: { @@ -389,6 +405,32 @@ export default { // 关闭物料清单弹窗 closeMaterialDialog() { this.showMaterialDialog = false; + this.hidePartNameTip(); + }, + + // 显示物料名称提示框 + showPartNameTip(partName, event) { + if (!partName || partName === '-') return; + + const rect = event.target.getBoundingClientRect(); + this.tooltipStyle = { + top: (rect.top - 5) + 'px', + left: rect.left + 'px' + }; + + this.currentPartName = partName; + this.showPartNameTooltip = true; + + setTimeout(() => { + document.addEventListener('click', this.hidePartNameTip); + }, 0); + }, + + // 隐藏物料名称提示框 + hidePartNameTip() { + this.showPartNameTooltip = false; + this.currentPartName = ''; + document.removeEventListener('click', this.hidePartNameTip); }, showStockDialogFn(item) { @@ -945,7 +987,8 @@ export default { } .material-table { - width: 100%; + min-width: 500px; + width: max-content; } .table-header { @@ -962,8 +1005,7 @@ export default { } .table-body { - max-height: 400px; - overflow-y: auto; + /* 垂直滚动由modal-body处理 */ } .table-row { @@ -1041,6 +1083,64 @@ export default { font-size: 12px; } +/* 物料名称列样式 */ +.material-table .col-part-name { + flex: 1.2; + text-align: left; + min-width: 80px; + font-size: 12px; + overflow: hidden; +} + +.material-table .col-part-name .part-name-text { + display: block; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + max-width: 100%; + color: #17B3A3; + cursor: pointer; +} + +.material-table .col-part-name .part-name-text:active { + color: #0d8f7f; +} + +/* 物料名称提示框样式 */ +.part-name-tooltip { + position: fixed; + z-index: 10001; + transform: translateY(-100%); + max-width: 200px; + animation: tooltipFadeIn 0.2s ease; +} + +@keyframes tooltipFadeIn { + from { opacity: 0; transform: translateY(-100%) translateY(5px); } + to { opacity: 1; transform: translateY(-100%) translateY(0); } +} + +.part-name-tooltip .tooltip-content { + background: #303133; + color: #fff; + padding: 8px 12px; + border-radius: 4px; + font-size: 12px; + line-height: 1.4; + word-break: break-all; + box-shadow: 0 2px 12px rgba(0, 0, 0, 0.2); +} + +.part-name-tooltip::after { + content: ''; + position: absolute; + bottom: -6px; + left: 15px; + border-width: 6px 6px 0 6px; + border-style: solid; + border-color: #303133 transparent transparent transparent; +} + .material-modal .modal-footer { padding: 15px 20px; display: flex; diff --git a/src/views/modules/sales-return/salesReturnStorage.vue b/src/views/modules/sales-return/salesReturnStorage.vue index 16f15fc..1c0e194 100644 --- a/src/views/modules/sales-return/salesReturnStorage.vue +++ b/src/views/modules/sales-return/salesReturnStorage.vue @@ -164,6 +164,7 @@
NO.
物料编码
+
物料名称
需求数量
已退货数
扫描数量
@@ -177,7 +178,10 @@ >
{{ index + 1 }}
{{ item.materialCode || item.partNo }}
-
{{ item.labelCount || 0 }}
+
+ {{ item.materialName || '-' }} +
+
{{ item.requiredQty || 0 }}
{{ item.pickedQty || 0 }}
{{ item.scansQty || 0 }}
@@ -195,6 +199,11 @@ + + +
+
{{ currentPartName }}
+
@@ -268,7 +277,11 @@ export default { showStockDialog: false, stockList: [], stockLoading: false, - currentPartNo: '' + currentPartNo: '', + // 物料名称提示框相关 + showPartNameTooltip: false, + currentPartName: '', + tooltipStyle: { top: '0px', left: '0px' } }; }, methods: { @@ -480,6 +493,24 @@ export default { // 关闭物料清单弹窗 closeMaterialDialog() { this.showMaterialDialog = false; + this.hidePartNameTip(); + }, + + // 显示物料名称提示框 + showPartNameTip(partName, event) { + if (!partName || partName === '-') return; + const rect = event.target.getBoundingClientRect(); + this.tooltipStyle = { top: (rect.top - 5) + 'px', left: rect.left + 'px' }; + this.currentPartName = partName; + this.showPartNameTooltip = true; + setTimeout(() => { document.addEventListener('click', this.hidePartNameTip); }, 0); + }, + + // 隐藏物料名称提示框 + hidePartNameTip() { + this.showPartNameTooltip = false; + this.currentPartName = ''; + document.removeEventListener('click', this.hidePartNameTip); }, // 显示可用库存弹窗 @@ -1229,7 +1260,8 @@ export default { } .material-table { - width: 100%; + min-width: 500px; + width: max-content; } .table-header { @@ -1246,8 +1278,7 @@ export default { } .table-body { - max-height: 400px; - overflow-y: auto; + /* 垂直滚动由modal-body处理 */ } .table-row { @@ -1336,6 +1367,64 @@ export default { font-size: 12px; } +/* 物料名称列样式 */ +.material-table .col-part-name { + flex: 1.2; + text-align: left; + min-width: 80px; + font-size: 12px; + overflow: hidden; +} + +.material-table .col-part-name .part-name-text { + display: block; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + max-width: 100%; + color: #17B3A3; + cursor: pointer; +} + +.material-table .col-part-name .part-name-text:active { + color: #0d8f7f; +} + +/* 物料名称提示框样式 */ +.part-name-tooltip { + position: fixed; + z-index: 10001; + transform: translateY(-100%); + max-width: 200px; + animation: tooltipFadeIn 0.2s ease; +} + +@keyframes tooltipFadeIn { + from { opacity: 0; transform: translateY(-100%) translateY(5px); } + to { opacity: 1; transform: translateY(-100%) translateY(0); } +} + +.part-name-tooltip .tooltip-content { + background: #303133; + color: #fff; + padding: 8px 12px; + border-radius: 4px; + font-size: 12px; + line-height: 1.4; + word-break: break-all; + box-shadow: 0 2px 12px rgba(0, 0, 0, 0.2); +} + +.part-name-tooltip::after { + content: ''; + position: absolute; + bottom: -6px; + left: 15px; + border-width: 6px 6px 0 6px; + border-style: solid; + border-color: #303133 transparent transparent transparent; +} + .material-modal .modal-footer { padding: 15px 20px; display: flex; diff --git a/src/views/modules/sales/salesOutboundDetail.vue b/src/views/modules/sales/salesOutboundDetail.vue index 409d989..35a80f9 100644 --- a/src/views/modules/sales/salesOutboundDetail.vue +++ b/src/views/modules/sales/salesOutboundDetail.vue @@ -150,6 +150,7 @@
NO.
物料编码
+
物料名称
需求数量
出库数量
扫描数量
@@ -163,6 +164,9 @@ >
{{ index + 1 }}
{{ item.materialCode || item.partNo }}
+
+ {{ item.materialName || '-' }} +
{{ item.requiredQty || 0 }}
{{ item.pickedQty || 0 }}
{{ item.scansQty || 0 }}
@@ -181,6 +185,11 @@
+ + +
+
{{ currentPartName }}
+
@@ -240,7 +249,11 @@ export default { showStockDialog: false, stockList: [], stockLoading: false, - currentPartNo: '' + currentPartNo: '', + // 物料名称提示框相关 + showPartNameTooltip: false, + currentPartName: '', + tooltipStyle: { top: '0px', left: '0px' } }; }, methods: { @@ -414,6 +427,24 @@ export default { // 关闭物料清单弹窗 closeMaterialDialog() { this.showMaterialDialog = false; + this.hidePartNameTip(); + }, + + // 显示物料名称提示框 + showPartNameTip(partName, event) { + if (!partName || partName === '-') return; + const rect = event.target.getBoundingClientRect(); + this.tooltipStyle = { top: (rect.top - 5) + 'px', left: rect.left + 'px' }; + this.currentPartName = partName; + this.showPartNameTooltip = true; + setTimeout(() => { document.addEventListener('click', this.hidePartNameTip); }, 0); + }, + + // 隐藏物料名称提示框 + hidePartNameTip() { + this.showPartNameTooltip = false; + this.currentPartName = ''; + document.removeEventListener('click', this.hidePartNameTip); }, showStockDialogFn(item) { @@ -1019,7 +1050,8 @@ export default { } .material-table { - width: 100%; + min-width: 500px; + width: max-content; } .table-header { @@ -1036,8 +1068,7 @@ export default { } .table-body { - max-height: 400px; - overflow-y: auto; + /* 垂直滚动由modal-body处理 */ } .table-row { @@ -1115,6 +1146,64 @@ export default { font-size: 12px; } +/* 物料名称列样式 */ +.material-table .col-part-name { + flex: 1.2; + text-align: left; + min-width: 80px; + font-size: 12px; + overflow: hidden; +} + +.material-table .col-part-name .part-name-text { + display: block; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + max-width: 100%; + color: #17B3A3; + cursor: pointer; +} + +.material-table .col-part-name .part-name-text:active { + color: #0d8f7f; +} + +/* 物料名称提示框样式 */ +.part-name-tooltip { + position: fixed; + z-index: 10001; + transform: translateY(-100%); + max-width: 200px; + animation: tooltipFadeIn 0.2s ease; +} + +@keyframes tooltipFadeIn { + from { opacity: 0; transform: translateY(-100%) translateY(5px); } + to { opacity: 1; transform: translateY(-100%) translateY(0); } +} + +.part-name-tooltip .tooltip-content { + background: #303133; + color: #fff; + padding: 8px 12px; + border-radius: 4px; + font-size: 12px; + line-height: 1.4; + word-break: break-all; + box-shadow: 0 2px 12px rgba(0, 0, 0, 0.2); +} + +.part-name-tooltip::after { + content: ''; + position: absolute; + bottom: -6px; + left: 15px; + border-width: 6px 6px 0 6px; + border-style: solid; + border-color: #303133 transparent transparent transparent; +} + .material-modal .modal-footer { padding: 15px 20px; display: flex;