张诺
5 天以前 ccd67e291e00a2ad9c29ad8df43de6fab5a4afed
src/views/inventoryManagement/stockManagement/index.vue
@@ -1,34 +1,51 @@
<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>