admin-sjzx/src/views/pqs/database/model/index.vue

<template>
    <div class="default-main">
        <el-tabs v-model="activeName" type="border-card" @tab-change="handleTabChange">
            <el-tab-pane label="谐波阻抗模型库" name="1">
                <HarmonicImpedanceTable ref="harmonicImpedanceRef" />
            </el-tab-pane>
            <el-tab-pane label="谐波源模型库" name="2">
                <HarmonicSourcesTable ref="harmonicSourcesRef" />
            </el-tab-pane>
        </el-tabs>
    </div>
</template>

<script setup lang="ts">
import { onMounted, reactive, ref, provide } from 'vue'

import { mainHeight } from '@/utils/layout'
import HarmonicSourcesTable from './components/harmonicSources.vue'
import HarmonicImpedanceTable from './components/harmonicImpedance.vue'
defineOptions({
    name: 'database/model'
})
const activeName = ref('1')

// 获取子组件引用
const harmonicImpedanceRef = ref<InstanceType<typeof HarmonicImpedanceTable>>()
const harmonicSourcesRef = ref<InstanceType<typeof HarmonicSourcesTable>>()

const layout = mainHeight(63) as any

// 添加 tab 切换处理函数
const handleTabChange = (tabName: string) => {
    if (tabName === '1') {
        // 调用谐波阻抗数据库查询接口
        harmonicImpedanceRef.value?.queryData()
    } else if (tabName === '2') {
        // 调用谐波源数据库查询接口
        harmonicSourcesRef.value?.queryData()
    }
}

// 组件挂载时初始化数据
onMounted(() => {
    // 默认加载第一个 tab 的数据
    handleTabChange(activeName.value)
})
</script>