feat(outbound): 计划出库清单数量前置,移除类型列

问题
----
计划出库清单的「计划数量」列排在表格最右侧(名称/规格/库位之后)。
表格共 6 列且名称规格会撑宽,最右列容易被容器裁掉,工人反馈"看不见数量"。

改动
----
· 「计划数量」从最右移到「序号」之后,橙色加粗 + 字号放大到 15px;
· 移除「类型」列(material_type);
· 库位列宽 150 → 170。

注:该列一直存在且数据正常(items_json 的 quantity 字段),
此前是可见性问题而非数据缺失。
This commit is contained in:
yueli
2026-09-10 15:57:20 +08:00
parent 851c3a9c1f
commit ea52c78f9e

View File

@ -56,17 +56,19 @@
</div> </div>
<el-table :data="selectedRequest.items || []" border size="small" style="width: 100%;"> <el-table :data="selectedRequest.items || []" border size="small" style="width: 100%;">
<el-table-column type="index" label="序号" width="60" align="center" /> <el-table-column type="index" label="序号" width="60" align="center" />
<el-table-column label="类型" width="80" align="center"> <!-- 计划数量前置原先排在表格最右侧列多时容易被容器裁掉看不见 -->
<el-table-column label="计划数量" width="100" align="center">
<template #default="{ row }"> <template #default="{ row }">
<el-tag size="small" type="info">{{ row.material_type || '-' }}</el-tag> <span style="color: #E6A23C; font-weight: bold; font-size: 15px;">
{{ row.quantity ?? '-' }}
</span>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column prop="name" label="名称" min-width="120" show-overflow-tooltip /> <el-table-column prop="name" label="名称" min-width="120" show-overflow-tooltip />
<el-table-column prop="spec_model" label="规格" min-width="100" show-overflow-tooltip /> <el-table-column prop="spec_model" label="规格" min-width="100" show-overflow-tooltip />
<!-- 库位 + 备选库位现场进不去时可改扫其它批次 --> <!-- 库位 + 备选库位现场进不去时可改扫其它批次 -->
<el-table-column label="库位" width="150" show-overflow-tooltip> <el-table-column label="库位" width="170">
<template #default="{ row }"> <template #default="{ row }">
<span>{{ row.warehouse_location || '-' }}</span>
<el-popover <el-popover
v-if="row.base_id" v-if="row.base_id"
placement="right" placement="right"
@ -74,10 +76,12 @@
trigger="click" trigger="click"
@show="loadAlternatives(row)" @show="loadAlternatives(row)"
> >
<!-- 整个库位格子都是点击热区工人不必精准点图标 -->
<template #reference> <template #reference>
<el-icon class="alt-icon" title="查看备选库位"> <span class="loc-cell" title="点击查看该物料的所有可选库位">
<LocationInformation /> <span class="loc-text">{{ row.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">
@ -100,11 +104,7 @@
</div> </div>
</div> </div>
</el-popover> </el-popover>
</template> <span v-else>{{ row.warehouse_location || '-' }}</span>
</el-table-column>
<el-table-column label="计划数量" width="90" align="center">
<template #default="{ row }">
<span style="color: #E6A23C; font-weight: bold;">{{ row.quantity ?? '-' }}</span>
</template> </template>
</el-table-column> </el-table-column>
</el-table> </el-table>
@ -973,13 +973,27 @@ onUnmounted(() => {
.planned-title { font-weight: bold; font-size: 14px; color: #67C23A; } .planned-title { font-weight: bold; font-size: 14px; color: #67C23A; }
/* ★ 备选库位:库位旁的图标与浮层 */ /* ★ 备选库位:库位旁的图标与浮层 */
.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; }
/* 图标放大到 18px并加圆形底衬在触屏上更易命中 */
.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 {