style(borrow): 审批页物料明细数量前置,清单标题对齐出库

背景
----
借库审批页展开行的「计划数量」排在表格最右(库位之后),与扫码出库页
的前置做法不一致 —— 列多时容易被容器裁掉,工人看不到数量。

改动
----
· 计划数量从最右移到序号之后,橙色加粗 + 字号 15px;
· 清单标题由朴素文字改为与出库页同款的标题栏结构
  (planned-header + planned-title + 绿色标签);
· 补上 .planned-header / .planned-title 样式定义(该页原先没有)。

注:本轮定位时曾误以为这是用户反馈的「扫码借库页」,实际扫码借库页是
views/transaction/borrow.vue(见下一提交)。此处是同类问题的另一处,
一并修正,非误改。
This commit is contained in:
yueli
2026-09-10 16:17:42 +08:00
parent eeefaeb528
commit f8267c6ee2

View File

@ -30,9 +30,11 @@
<el-table-column type="expand" width="60" align="center">
<template #default="{ row }">
<div style="padding: 12px 24px; background: #f5f7fa;">
<p style="margin: 0 0 10px 0; font-weight: bold; font-size: 13px; color: #606266;">
物料明细 {{ row.items?.length || 0 }}
</p>
<!-- 与扫码出库页的计划出库清单标题样式对齐 -->
<div class="planned-header">
<span class="planned-title">计划借用清单</span>
<el-tag type="success" size="small">{{ row.items?.length || 0 }} </el-tag>
</div>
<el-table
v-if="row.items?.length"
:data="row.items"
@ -41,6 +43,15 @@
style="width: 100%;"
>
<el-table-column type="index" label="序号" width="60" align="center" />
<!-- 计划数量前置与扫码出库页保持一致
原先排在表格最右库位之后列多时容易被容器裁掉看不见 -->
<el-table-column label="计划数量" width="100" align="center">
<template #default="{ row: item }">
<span style="color: #E6A23C; font-weight: bold; font-size: 15px;">
{{ item.quantity ?? '-' }}
</span>
</template>
</el-table-column>
<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 />
<!-- 库位 + 备选库位现场进不去时可改扫其它批次 -->
@ -84,11 +95,6 @@
<span v-else>{{ item.warehouse_location || '-' }}</span>
</template>
</el-table-column>
<el-table-column prop="quantity" label="计划数量" width="100" align="center">
<template #default="{ row: item }">
<span style="color: #F56C6C; font-weight: bold;">{{ item.quantity ?? '-' }}</span>
</template>
</el-table-column>
</el-table>
<el-empty v-else description="暂无物料明细" :image-size="60" />
</div>
@ -494,6 +500,15 @@ onMounted(() => {
</script>
<style scoped>
/* ★ 计划清单标题:与扫码出库页的「计划出库清单」保持一致 */
.planned-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 10px;
}
.planned-title { font-weight: bold; font-size: 14px; color: #67C23A; }
/* ★ 备选库位:库位旁的图标与浮层(与出库执行页同款) */
/* 库位格子整体可点击:工人不必精准点小图标,点单元格任意位置即可 */
.loc-cell {