<!-- 在你的主页面中 -->
|
<template>
|
<div class="app-container">
|
<div v-loading="loading" element-loading-text="加载中..." style="min-height: 80vh;">
|
<el-tabs v-model="activeTab" @tab-change="handleTabChange" v-if="!loading">
|
<el-tab-pane v-for="tab in tabs"
|
:label="tab.productName"
|
:name="tab.id"
|
:key="tab.id">
|
<Record v-bind="{ type: tab.type, topParentProductId: activeTab }" v-if="tab.id === activeTab" />
|
</el-tab-pane>
|
</el-tabs>
|
</div>
|
</div>
|
</template>
|
|
<script setup>
|
import { ref, onMounted } from 'vue';
|
import { productTreeList } from "@/api/basicData/product.js";
|
import Record from "@/views/inventoryManagement/dispatchLog/Record.vue";
|
const activeTab = ref(null)
|
const tabs = ref([])
|
const loading = ref(false)
|
|
const resolveTypeByName = (name) => {
|
return String(name || "").includes("不合格") ? "1" : "0";
|
};
|
|
const handleTabChange = (tabName) => {
|
activeTab.value = tabName;
|
}
|
|
const fetchProducts = async () => {
|
loading.value = true;
|
try {
|
const res = await productTreeList();
|
tabs.value = res
|
.filter((item) => item.parentId === null)
|
.map(({ id, productName }) => ({
|
id,
|
productName,
|
type: resolveTypeByName(productName),
|
}));
|
if (tabs.value.length > 0) {
|
activeTab.value = tabs.value[0].id;
|
}
|
} finally {
|
loading.value = false;
|
}
|
}
|
|
onMounted(() => {
|
fetchProducts();
|
})
|
</script>
|
