style(borrow): 审批页物料明细数量前置,清单标题对齐出库
背景 ---- 借库审批页展开行的「计划数量」排在表格最右(库位之后),与扫码出库页 的前置做法不一致 —— 列多时容易被容器裁掉,工人看不到数量。 改动 ---- · 计划数量从最右移到序号之后,橙色加粗 + 字号 15px; · 清单标题由朴素文字改为与出库页同款的标题栏结构 (planned-header + planned-title + 绿色标签); · 补上 .planned-header / .planned-title 样式定义(该页原先没有)。 注:本轮定位时曾误以为这是用户反馈的「扫码借库页」,实际扫码借库页是 views/transaction/borrow.vue(见下一提交)。此处是同类问题的另一处, 一并修正,非误改。
This commit is contained in:
@ -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 {
|
||||
|
||||
Reference in New Issue
Block a user