ieplus/back-ui/src/views/dz/papers/index.vue

<template>
    <div class="app-container" v-loading="loading">
        <div class="tabs-container">
            <el-tabs v-model="currentTab" class="paper-tabs">
                <el-tab-pane v-for="t in tabs" :label="t.label" :name="t.name" :key="t.name">
                    <component :is="t.page" v-if="t.visited" :key="t.name" :ref="el => setComponentRef(t.name, el)"/>
                </el-tab-pane>
            </el-tabs>
            <el-button 
                type="primary" 
                :icon="Refresh" 
                circle 
                size="small" 
                @click="handleRefresh"
                class="refresh-btn"
                title="刷新当前页面数据"
            />
        </div>
    </div>
</template>

<script setup name="PaperIndex">
import {ref, watch, markRaw} from "vue";
import {useProvideGlobalLoading} from "@/views/hooks/useGlobalLoading.js";
import PaperExactIntelligent from "@/views/dz/papers/components/paper-exact-intelligent.vue";
import PaperFullIntelligent from "@/views/dz/papers/components/paper-full-intelligent.vue";
import PaperExactHand from "@/views/dz/papers/components/paper-exact-hand.vue";
import PaperFullHand from "@/views/dz/papers/components/paper-full-hand.vue";
import {Refresh} from "@element-plus/icons-vue";

const {loading} = useProvideGlobalLoading()

const tabs = ref([{
    name: 'ExactIntelligent',
    label: '定向智能',
    page: markRaw(PaperExactIntelligent) ,
    visited: true
}, {
    name: 'FullIntelligent',
    label: '全量智能',
    page: markRaw(PaperFullIntelligent),
    visited: false
}, {
    name: 'ExactHand',
    label: '定向手动',
    page: markRaw(PaperExactHand),
    visited: false
}, {
    name: 'FullHand',
    label: '全量手动',
    page: markRaw(PaperFullHand),
    visited: false
}])
const currentTab = ref('ExactIntelligent')

// 存储组件实例的引用
const componentRefs = ref({})

// 设置组件引用
const setComponentRef = (name, el) => {
    if (el) {
        // 处理 ref 可能是数组的情况
        const component = Array.isArray(el) ? el[0] : el
        if (component) {
            componentRefs.value[name] = component
        }
    } else {
        // 组件卸载时清除引用
        delete componentRefs.value[name]
    }
}

// 刷新当前 tab 的数据
const handleRefresh = () => {
    const currentComponent = componentRefs.value[currentTab.value]
    if (currentComponent && typeof currentComponent.refresh === 'function') {
        currentComponent.refresh()
    } else {
        console.warn('当前 tab 组件不支持刷新功能')
    }
}

watch(currentTab, tabName => {
    // 通过visited=true 延迟渲染，组件只创建一次，切换时不会重新创建
    const tab = tabs.value.find(t => t.name == tabName)
    if (tab) tab.visited = true
})
</script>

<style scoped>
.tabs-container {
    position: relative;
}

.paper-tabs {
    width: calc(100% - 50px);
}

.refresh-btn {
    position: absolute;
    right: 0;
    top: 8px;
    z-index: 10;
}
</style>