| | |
| | | <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.name === 'qualified' ? QualifiedRecord : UnqualifiedRecord" /> |
| | | <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') |
| | | const type = ref(0) |
| | | const tabs = ref([ |
| | | |
| | | // 2. 关键:tabs 用 shallowRef 包裹 |
| | | const tabs = shallowRef([ |
| | | { |
| | | label: '合格库存', |
| | | name: 'qualified' |
| | | label: '成品库存', |
| | | name: 'qualified', |
| | | component: QualifiedRecord |
| | | }, |
| | | { |
| | | label: '不合格库存', |
| | | name: 'unqualified' |
| | | label: '辅材库存', |
| | | name: 'assistant', |
| | | component: UnqualifiedRecord |
| | | }, |
| | | { |
| | | label: '原材料库存', |
| | | name: 'rawMaterial', |
| | | component: rawMaterialRecord |
| | | } |
| | | ]) |
| | | |
| | | const handleTabChange = (tabName) => { |
| | | activeTab.value = tabName; |
| | | } |
| | | </script> |
| | | </script> |