借库列表:主子表聚合 + 展开行内嵌明细
This commit is contained in:
@ -35,27 +35,50 @@
|
||||
stripe
|
||||
style="margin-top:20px"
|
||||
v-loading="loading"
|
||||
type="expand"
|
||||
>
|
||||
<el-table-column type="expand">
|
||||
<template #default="props">
|
||||
<div style="padding: 10px 40px;">
|
||||
<h4 style="margin: 0 0 10px; font-size: 14px; color: #606266;">借出明细</h4>
|
||||
<el-table :data="props.row.children" border size="small">
|
||||
<el-table-column prop="material_name" label="物料名称" min-width="140" show-overflow-tooltip />
|
||||
<el-table-column prop="sku" label="SKU" width="120" show-overflow-tooltip />
|
||||
<el-table-column label="借出数量" width="80" align="center">
|
||||
<template #default="{row}">
|
||||
<el-tag type="info">{{ row.quantity }}</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="已还数量" width="80" align="center">
|
||||
<template #default="{row}">
|
||||
<el-tag type="success">{{ row.returned_quantity || 0 }}</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="待还数量" width="80" align="center">
|
||||
<template #default="{row}">
|
||||
<el-tag v-if="row.pending_quantity > 0" type="warning">{{ row.pending_quantity }}</el-tag>
|
||||
<el-tag v-else type="success">0</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="return_location" label="归还库位" min-width="120">
|
||||
<template #default="{row}">
|
||||
<span v-if="row.return_location">{{ row.return_location }}</span>
|
||||
<span v-else style="color:#ccc">-</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column v-if="hasColumnPermission('borrow_no')" prop="borrow_no" label="单号" width="180" show-overflow-tooltip />
|
||||
<el-table-column v-if="hasColumnPermission('borrower_name')" prop="borrower_name" label="借用人" width="100" />
|
||||
<el-table-column v-if="hasColumnPermission('sku')" prop="sku" label="SKU" width="120" show-overflow-tooltip />
|
||||
<el-table-column label="借出数量" width="90" align="center">
|
||||
<template #default="{row}">
|
||||
<el-tag type="info">{{ row.quantity }}</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="已还数量" width="90" align="center">
|
||||
<template #default="{row}">
|
||||
<el-tag type="success">{{ row.returned_quantity || 0 }}</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="待还数量" width="90" align="center">
|
||||
<template #default="{row}">
|
||||
<el-tag v-if="row.pending_quantity > 0" type="warning">{{ row.pending_quantity }}</el-tag>
|
||||
<el-tag v-else type="success">0</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column v-if="hasColumnPermission('borrow_time')" prop="borrow_time" label="借出时间" width="160" sortable />
|
||||
<el-table-column label="借出物品" width="90" align="center">
|
||||
<template #default="{row}">
|
||||
<el-tag type="info">{{ row.children ? row.children.length : 0 }} 项</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column v-if="hasColumnPermission('return_operator')" prop="return_operator" label="归还人" width="100" />
|
||||
|
||||
<el-table-column v-if="hasColumnPermission('expected_return_time') || hasColumnPermission('return_time')" label="归还时间 / 预计" min-width="200">
|
||||
@ -88,13 +111,6 @@
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column v-if="hasColumnPermission('return_location')" label="归还库位" min-width="120">
|
||||
<template #default="{row}">
|
||||
<span v-if="row.return_location">{{ row.return_location }}</span>
|
||||
<span v-else style="color:#ccc">-</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column v-if="hasColumnPermission('borrow_signature') || hasColumnPermission('return_signature')" label="电子签名" width="140" align="center">
|
||||
<template #default="{row}">
|
||||
<div style="display:flex; justify-content: center; gap:10px">
|
||||
@ -205,7 +221,20 @@ const fetchData = async () => {
|
||||
search_type: searchType.value
|
||||
}
|
||||
})
|
||||
list.value = res.data.items
|
||||
|
||||
// ★ 按 borrow_no 分组聚合为主子表结构
|
||||
const groupMap = new Map()
|
||||
;(res.data.items || []).forEach(item => {
|
||||
if (!groupMap.has(item.borrow_no)) {
|
||||
groupMap.set(item.borrow_no, {
|
||||
...item,
|
||||
children: []
|
||||
})
|
||||
}
|
||||
groupMap.get(item.borrow_no).children.push(item)
|
||||
})
|
||||
list.value = Array.from(groupMap.values())
|
||||
|
||||
total.value = res.data.total
|
||||
} finally { loading.value = false }
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user