|
|
@@ -1,19 +1,32 @@
|
|
|
<template>
|
|
|
<div class="app-container" v-loading="loading">
|
|
|
- <el-tabs v-model="currentTab">
|
|
|
- <el-tab-pane v-for="t in tabs" :label="t.label" :name="t.name">
|
|
|
- <component :is="t.page" v-if="t.visited" :key="t.name"/>
|
|
|
- </el-tab-pane>
|
|
|
- </el-tabs>
|
|
|
+ <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()
|
|
|
|
|
|
@@ -40,6 +53,33 @@ const tabs = ref([{
|
|
|
}])
|
|
|
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)
|
|
|
@@ -47,4 +87,19 @@ watch(currentTab, tabName => {
|
|
|
})
|
|
|
</script>
|
|
|
|
|
|
-<style scoped></style>
|
|
|
+<style scoped>
|
|
|
+.tabs-container {
|
|
|
+ position: relative;
|
|
|
+}
|
|
|
+
|
|
|
+.paper-tabs {
|
|
|
+ width: calc(100% - 50px);
|
|
|
+}
|
|
|
+
|
|
|
+.refresh-btn {
|
|
|
+ position: absolute;
|
|
|
+ right: 0;
|
|
|
+ top: 8px;
|
|
|
+ z-index: 10;
|
|
|
+}
|
|
|
+</style>
|