<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"
|
>
|
<component
|
:is="tab.component"
|
v-if="activeTab === tab.name"
|
:stock-type="tab.name"
|
/>
|
</el-tab-pane>
|
</el-tabs>
|
</div>
|
</template>
|
|
<script setup>
|
// 1. 导入 shallowRef
|
import { ref, shallowRef } from 'vue'
|
import QualifiedRecord from "@/views/inventoryManagement/stockManagement/Qualified.vue";
|
import UnqualifiedRecord from "@/views/inventoryManagement/stockManagement/Unqualified.vue";
|
import rawMaterialRecord from "@/views/inventoryManagement/stockManagement/rawMaterialRecord.vue"
|
|
const activeTab = ref('qualified')
|
|
// 2. 关键：tabs 用 shallowRef 包裹
|
const tabs = shallowRef([
|
{
|
label: '成品库存',
|
name: 'qualified',
|
component: QualifiedRecord
|
},
|
{
|
label: '辅材库存',
|
name: 'assistant',
|
component: UnqualifiedRecord
|
},
|
{
|
label: '原材料库存',
|
name: 'rawMaterial',
|
component: rawMaterialRecord
|
}
|
])
|
|
const handleTabChange = (tabName) => {
|
activeTab.value = tabName;
|
}
|
</script>
|
