duxingchen/KCGL
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
DXC
2026-06-05 11:24:40 +08:00
parent 3d30cbc5c2
commit 7087769a33
1 changed files with 17 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
inventory-web/src/views/bom/BomManage.vue
View File

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