|
|
|
@ -166,6 +166,7 @@ |
|
|
|
<div class="col-no">NO.</div> |
|
|
|
<!-- <div class="col-label-code">标签条码</div>--> |
|
|
|
<div class="col-material-code">物料编码</div> |
|
|
|
<div class="col-part-name">物料名称</div> |
|
|
|
<div class="col-required-qty">需求数量</div> |
|
|
|
<div class="col-inbound-qty">已入库数</div> |
|
|
|
<div class="col-scans-qty">扫描数量</div> |
|
|
|
@ -180,7 +181,10 @@ |
|
|
|
<div class="col-no">{{ index + 1 }}</div> |
|
|
|
<!-- <div class="col-label-code">{{ item.labelCode || item.rollNo }}</div>--> |
|
|
|
<div class="col-material-code">{{ item.materialCode || item.partNo }}</div> |
|
|
|
<div class="col-required-qty">{{ item.labelCount || 0 }}</div> |
|
|
|
<div class="col-part-name"> |
|
|
|
<span class="part-name-text" @click.stop="showPartNameTip(item.materialName, $event)">{{ item.materialName || '-' }}</span> |
|
|
|
</div> |
|
|
|
<div class="col-required-qty">{{ item.requiredQty || 0 }}</div> |
|
|
|
<div class="col-inbound-qty">{{ item.pickedQty || 0 }}</div> |
|
|
|
<div class="col-scans-qty">{{ item.scansQty || 0 }}</div> |
|
|
|
</div> |
|
|
|
@ -198,6 +202,11 @@ |
|
|
|
<button class="btn-close" @click="closeMaterialDialog">关闭</button> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
|
|
|
|
<!-- 物料名称提示框 --> |
|
|
|
<div v-if="showPartNameTooltip" class="part-name-tooltip" :style="tooltipStyle" @click.stop> |
|
|
|
<div class="tooltip-content">{{ currentPartName }}</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</template> |
|
|
|
@ -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; |
|
|
|
|
fengyuan_yang
6 months ago