借库列表：主子表聚合 + 展开行内嵌明细

inventory-web/src/views/transaction/records.vue

@@ -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 }
 }