style(outbound,borrow): 库位格子整体可点击,图标放大

问题
----
备选库位浮层的触发区原先只有一个小图标(默认 1em),工人需要精准
点击才能弹出 —— 戴手套或在触屏上操作时命中率很低。

改动
----
· #reference 从「仅图标」改为「库位文字 + 图标」整体,
  点格子任意位置都能弹出;
· 悬停时整格高亮(#ecf5ff),给出可点击的视觉反馈;
· 图标放大到 18px;
· 库位文字着蓝色(#409EFF),并加 title 提示;
· 无 base_id 时回退为纯文本(历史单据)——原先这种情况下会渲染空白。

出库执行页与借库审批页同款实现,一并同步。

注:编辑过程中曾因残留旧的 popover 闭合标签导致模板结构损坏
(SFC PARSE ERR),已通过编译检查发现并修复。
This commit is contained in:
yueli
2026-09-10 15:57:26 +08:00
parent ea52c78f9e
commit d69ec9f5ec

View File

@ -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 {