BomManage: 首屏懒渲染优化 — el-table 加 v-if 按需挂载，v-loading 替换为骨架屏

inventory-web/src/views/bom/BomManage.vue

@@ -24,15 +24,16 @@
         </div>
       </template>
 
-      <div v-loading="loading">
-        <el-collapse v-model="activeCategories" class="bom-category-collapse">
-          <el-collapse-item
-              v-for="group in bomGroups"
-              :key="group.category"
-              :title="group.category + ' (' + group.count + ')'"
-              :name="group.category"
-          >
-            <el-table :data="group.items" border style="width: 100%">
+      <el-skeleton :rows="8" animated v-if="loading && bomGroups.length === 0" />
+      <el-empty v-else-if="!loading && bomGroups.length === 0" description="暂无 BOM 数据" />
+      <el-collapse v-else v-model="activeCategories" class="bom-category-collapse">
+        <el-collapse-item
+            v-for="group in bomGroups"
+            :key="group.category"
+            :title="group.category + ' (' + group.count + ')'"
+            :name="group.category"
+        >
+          <el-table v-if="activeCategories.includes(group.category)" :data="group.items" border style="width: 100%">
               <el-table-column v-if="hasColumnPermission('bom_no')" prop="bom_no" label="BOM编号" min-width="180" sortable>
                 <template #default="{ row }">
                   <span style="cursor: pointer; color: #409EFF;" @click="handleView(row)">{{ row.bom_no }}</span>
@@ -60,7 +61,6 @@
             </el-table>
           </el-collapse-item>
         </el-collapse>
-      </div>
     </el-card>
 
     <el-dialog v-model="dialogVisible" :title="dialogTitle" width="850px" destroy-on-close :close-on-click-modal="false" :close-on-press-escape="false">
@@ -313,7 +313,9 @@ const fetchParentSuggestions = (query: string, cb: (results: any[]) => void) =>
   const safeQuery = rawQuery.replace(/[\x00-\x1F\x7F-\x9F\u200B-\u200D\uFEFF]/g, '').trim()
   searchLoading.value = true
   searchMaterialBase(safeQuery).then((res: any) => {
-    cb(res.data?.items || [])
+    const items = res.data?.items || res.data || []
+    const formatted = items.map((i: any) => ({ ...i, name: i.name || i.material_name }))
+    cb(formatted)
   }).catch(() => cb([])).finally(() => { searchLoading.value = false })
 }
 
@@ -324,6 +326,7 @@ const onParentClear = () => {
 
 const onParentSelected = (item: any) => {
   form.parent_id = item.id
+  parentNameInput.value = item.name || item.material_name || ''
   if (item.spec) {
     form.bom_no = item.spec.split('/')[0].trim()
   } else {
@@ -336,7 +339,9 @@ const fetchChildSuggestions = (row: any, query: string, cb: (results: any[]) =>
   const safeQuery = rawQuery.replace(/[\x00-\x1F\x7F-\x9F\u200B-\u200D\uFEFF]/g, '').trim()
   searchLoading.value = true
   searchMaterialBase(safeQuery).then((res: any) => {
-    cb(res.data?.items || [])
+    const items = res.data?.items || res.data || []
+    const formatted = items.map((i: any) => ({ ...i, name: i.name || i.material_name }))
+    cb(formatted)
   }).catch(() => cb([])).finally(() => { searchLoading.value = false })
 }