<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 products"
|
:label="tab.productName"
|
:name="tab.id"
|
:key="tab.id">
|
<Record :product-id="tab.id" 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/stockManagement/Record.vue";
|
const products = ref([])
|
const activeTab = ref(null)
|
const loading = ref(false)
|
|
const handleTabChange = (tabName) => {
|
activeTab.value = tabName;
|
}
|
|
const fetchProducts = async () => {
|
loading.value = true;
|
try {
|
const res = await productTreeList();
|
products.value = res.filter((item) => item.parentId === null).map(({ id, productName }) => ({ id, productName }));
|
if (products.value.length > 0) {
|
activeTab.value = products.value[0].id;
|
}
|
} finally {
|
loading.value = false;
|
}
|
}
|
|
onMounted(() => {
|
fetchProducts();
|
})
|
</script>
|
