style(outbound,borrow): 库位格子整体可点击,图标放大
问题 ---- 备选库位浮层的触发区原先只有一个小图标(默认 1em),工人需要精准 点击才能弹出 —— 戴手套或在触屏上操作时命中率很低。 改动 ---- · #reference 从「仅图标」改为「库位文字 + 图标」整体, 点格子任意位置都能弹出; · 悬停时整格高亮(#ecf5ff),给出可点击的视觉反馈; · 图标放大到 18px; · 库位文字着蓝色(#409EFF),并加 title 提示; · 无 base_id 时回退为纯文本(历史单据)——原先这种情况下会渲染空白。 出库执行页与借库审批页同款实现,一并同步。 注:编辑过程中曾因残留旧的 popover 闭合标签导致模板结构损坏 (SFC PARSE ERR),已通过编译检查发现并修复。
This commit is contained in:
@ -44,9 +44,8 @@
|
||||
<el-table-column prop="name" label="名称" min-width="140" show-overflow-tooltip />
|
||||
<el-table-column prop="spec_model" label="规格型号" min-width="120" show-overflow-tooltip />
|
||||
<!-- ★ 库位 + 备选库位:现场进不去时可改扫其它批次 -->
|
||||
<el-table-column label="库位" width="150" show-overflow-tooltip>
|
||||
<el-table-column label="库位" width="170">
|
||||
<template #default="{ row: item }">
|
||||
<span>{{ item.warehouse_location || '-' }}</span>
|
||||
<el-popover
|
||||
v-if="item.base_id"
|
||||
placement="right"
|
||||
@ -54,10 +53,12 @@
|
||||
trigger="click"
|
||||
@show="loadAlternatives(item)"
|
||||
>
|
||||
<!-- ★ 整个库位格子都是点击热区,工人不必精准点图标 -->
|
||||
<template #reference>
|
||||
<el-icon class="alt-icon" title="查看备选库位">
|
||||
<LocationInformation />
|
||||
</el-icon>
|
||||
<span class="loc-cell" title="点击查看该物料的所有可选库位">
|
||||
<span class="loc-text">{{ item.warehouse_location || '-' }}</span>
|
||||
<el-icon class="alt-icon"><LocationInformation /></el-icon>
|
||||
</span>
|
||||
</template>
|
||||
|
||||
<div v-loading="altLoading" class="alt-panel">
|
||||
@ -80,6 +81,7 @@
|
||||
</div>
|
||||
</div>
|
||||
</el-popover>
|
||||
<span v-else>{{ item.warehouse_location || '-' }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="quantity" label="计划数量" width="100" align="center">
|
||||
@ -493,13 +495,26 @@ onMounted(() => {
|
||||
|
||||
<style scoped>
|
||||
/* ★ 备选库位:库位旁的图标与浮层(与出库执行页同款) */
|
||||
.alt-icon {
|
||||
margin-left: 4px;
|
||||
color: #409EFF;
|
||||
/* 库位格子整体可点击:工人不必精准点小图标,点单元格任意位置即可 */
|
||||
.loc-cell {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
padding: 2px 6px;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
vertical-align: middle;
|
||||
transition: background-color 0.2s;
|
||||
}
|
||||
.alt-icon:hover { color: #66b1ff; }
|
||||
.loc-cell:hover { background-color: #ecf5ff; }
|
||||
.loc-cell .loc-text { color: #409EFF; }
|
||||
|
||||
.alt-icon {
|
||||
font-size: 18px;
|
||||
color: #409EFF;
|
||||
vertical-align: middle;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.loc-cell:hover .alt-icon { color: #66b1ff; }
|
||||
|
||||
.alt-panel { font-size: 13px; }
|
||||
.alt-title {
|
||||
|
||||
Reference in New Issue
Block a user