duxingchen/KCGL
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
问题
----
备选库位浮层的触发区原先只有一个小图标（默认 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
1 changed files with 25 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

35
inventory-web/src/views/borrow/approval/index.vue
View File

@ -44,9 +44,8 @@
<el-table-column prop="name" label="名称" min-width="140" show-overflow-tooltip /> <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 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 }"> <template #default="{ row: item }">
<span>{{ item.warehouse_location || '-' }}</span>
<el-popover <el-popover
v-if="item.base_id" v-if="item.base_id"
placement="right" placement="right"
@ -54,10 +53,12 @@
trigger="click" trigger="click"
@show="loadAlternatives(item)" @show="loadAlternatives(item)"
> >
<!-- ★ 整个库位格子都是点击热区，工人不必精准点图标 -->
<template #reference> <template #reference>
<el-icon class="alt-icon" title="查看备选库位"> <span class="loc-cell" title="点击查看该物料的所有可选库位">
<LocationInformation /> <span class="loc-text">{{ item.warehouse_location || '-' }}</span>
</el-icon> <el-icon class="alt-icon"><LocationInformation /></el-icon>
</span>
</template> </template>
<div v-loading="altLoading" class="alt-panel"> <div v-loading="altLoading" class="alt-panel">
@ -80,6 +81,7 @@
</div> </div>
</div> </div>
</el-popover> </el-popover>
<span v-else>{{ item.warehouse_location || '-' }}</span>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column prop="quantity" label="计划数量" width="100" align="center"> <el-table-column prop="quantity" label="计划数量" width="100" align="center">
@ -493,13 +495,26 @@ onMounted(() => {
<style scoped> <style scoped>
/* ★ 备选库位：库位旁的图标与浮层（与出库执行页同款） */ /* ★ 备选库位：库位旁的图标与浮层（与出库执行页同款） */
.alt-icon { /* 库位格子整体可点击：工人不必精准点小图标，点单元格任意位置即可 */
margin-left: 4px; .loc-cell {
color: #409EFF; display: inline-flex;
align-items: center;
gap: 6px;
padding: 2px 6px;
border-radius: 4px;
cursor: pointer; 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-panel { font-size: 13px; }
.alt-title { .alt-title {