<template>
|
<div class="app-container">
|
<el-tabs v-model="activeTab" @tab-change="handleTabChange">
|
<el-tab-pane v-for="tab in tabs"
|
:label="tab.label"
|
:name="tab.name"
|
:key="tab.name" />
|
</el-tabs>
|
<qualified-record
|
v-if="currentParentId !== undefined"
|
:key="activeTab"
|
:parent-id="currentParentId"
|
/>
|
</div>
|
</template>
|
|
<script setup>
|
import { getProductParentNames } from "@/api/basicData/productModel.js";
|
import QualifiedRecord from "@/views/inventoryManagement/stockManagement/Qualified.vue";
|
|
const activeTab = ref('')
|
const tabs = ref([])
|
const currentParentId = computed(() => {
|
const current = tabs.value.find((item) => item.name === activeTab.value)
|
return current?.parentId
|
})
|
|
const handleTabChange = (tabName) => {
|
activeTab.value = tabName;
|
}
|
|
const getTabs = async () => {
|
const res = await getProductParentNames()
|
const list = Array.isArray(res?.data) ? res.data : []
|
tabs.value = list.map((item) => ({
|
label: item.productName,
|
name: String(item.id),
|
parentId: item.id,
|
}))
|
if (tabs.value.length && !activeTab.value) {
|
activeTab.value = tabs.value[0].name
|
}
|
}
|
|
onMounted(() => {
|
getTabs()
|
})
|
</script>
|
