Merge pull request #189 from Helltab/feature/ui/framework/vue3
fix(#187): The tab layout make components be invoked much times
diff --git a/ui-vue3/src/layout/tab/layout_tab.vue b/ui-vue3/src/layout/tab/layout_tab.vue
index aa0c5f7..e6a4df5 100644
--- a/ui-vue3/src/layout/tab/layout_tab.vue
+++ b/ui-vue3/src/layout/tab/layout_tab.vue
@@ -16,36 +16,39 @@
-->
<template>
<div class="__container_router_tab_index">
- <a-tabs
- v-if="tabRoute.meta.tab"
- @change="router.push({ name: activeKey || '' })"
- v-model:activeKey="activeKey"
- >
- <a-tab-pane :key="v.name" v-for="v in tabRouters">
- <template #tab>
+ <div :key="key">
+ <a-tabs
+ v-if="tabRoute.meta.tab"
+ @change="router.push({ name: activeKey || '' })"
+ v-model:activeKey="activeKey"
+ >
+ <a-tab-pane :key="v.name" v-for="v in tabRouters">
+ <template #tab>
<span>
<Icon style="margin-bottom: -2px" :icon="v.meta.icon"></Icon>
{{ $t(v.name) }}
</span>
- </template>
- <router-view :key="key" />
- </a-tab-pane>
- </a-tabs>
- <router-view v-if="!tabRoute.meta.tab" />
+ </template>
+ </a-tab-pane>
+ </a-tabs>
+ <router-view/>
+ </div>
</div>
</template>
<script setup lang="ts">
-import { ref } from 'vue'
-import { Icon } from '@iconify/vue'
-import { useRoute, useRouter } from 'vue-router'
+import {computed, ref} from 'vue'
+import {Icon} from '@iconify/vue'
+import {useRoute, useRouter} from 'vue-router'
import _ from 'lodash'
-import { PRIMARY_COLOR } from '@/base/constants'
-import type { RouterMeta } from '@/router/RouterMeta'
+
const router = useRouter()
const tabRoute = useRoute()
let meta: any = tabRoute.meta
-const tabRouters = meta?.parent?.children?.filter((x: any): any => x.meta.tab)
+const tabRouters = computed(() => {
+ let meta: any = tabRoute.meta
+ return meta?.parent?.children?.filter((x: any): any => x.meta.tab)
+})
let activeKey = ref(tabRoute.name)
let transitionFlag = ref(true)
let key = _.uniqueId('__tab_page')
@@ -58,6 +61,5 @@
transitionFlag.value = true
}, 500)
})
-console.log(tabRoute)
</script>
<style lang="less" scoped></style>
diff --git a/ui-vue3/src/router/defaultRoutes.ts b/ui-vue3/src/router/defaultRoutes.ts
index 1cb640a..a63af5d 100644
--- a/ui-vue3/src/router/defaultRoutes.ts
+++ b/ui-vue3/src/router/defaultRoutes.ts
@@ -85,6 +85,14 @@
meta: {
tab: true
}
+ },
+ {
+ path: '/detail3/:pathId',
+ name: 'application-tab3',
+ component: () => import('../views/resources/applications/tabs/tab3.vue'),
+ meta: {
+ tab: true
+ }
}
]
},
@@ -98,7 +106,7 @@
path: '/services',
name: 'services',
redirect: 'search',
- component: () => import('../views/resources/services/index.vue'),
+ component: LayoutTab,
meta: {
tab_parent: true
},
diff --git a/ui-vue3/src/views/resources/applications/index.vue b/ui-vue3/src/views/resources/applications/index.vue
index d85ae20..b8328e3 100644
--- a/ui-vue3/src/views/resources/applications/index.vue
+++ b/ui-vue3/src/views/resources/applications/index.vue
@@ -96,8 +96,10 @@
)
onMounted(() => {
+ searchDomain.tableStyle = {
+ scrollY: '40vh'
+ }
searchDomain.onSearch()
- console.log(searchDomain.result)
})
provide(PROVIDE_INJECT_KEY.SEARCH_DOMAIN, searchDomain)
diff --git a/ui-vue3/src/views/resources/applications/tabs/tab1.vue b/ui-vue3/src/views/resources/applications/tabs/tab1.vue
index be04898..1b67290 100644
--- a/ui-vue3/src/views/resources/applications/tabs/tab1.vue
+++ b/ui-vue3/src/views/resources/applications/tabs/tab1.vue
@@ -15,8 +15,15 @@
~ limitations under the License.
-->
<template>
- <div class="__container_tabDemo">tab1</div>
+ <div class="__container_tabDemo1">tab1</div>
</template>
-<script setup lang="ts"></script>
+<script setup lang="ts">
+
+import {onMounted} from "vue";
+
+onMounted(()=>{
+ console.log(111)
+})
+</script>
<style lang="less" scoped></style>
diff --git a/ui-vue3/src/views/resources/applications/tabs/tab2.vue b/ui-vue3/src/views/resources/applications/tabs/tab2.vue
index 55c136f..c20afd7 100644
--- a/ui-vue3/src/views/resources/applications/tabs/tab2.vue
+++ b/ui-vue3/src/views/resources/applications/tabs/tab2.vue
@@ -15,8 +15,15 @@
~ limitations under the License.
-->
<template>
- <div class="__container_tabDemo">tab2</div>
+ <div class="__container_tabDemo2">tab2</div>
</template>
-<script setup lang="ts"></script>
+<script setup lang="ts">
+import {onMounted} from "vue";
+
+onMounted(()=>{
+ console.log(222)
+})
+
+</script>
<style lang="less" scoped></style>
diff --git a/ui-vue3/src/views/resources/applications/tabs/tab3.vue b/ui-vue3/src/views/resources/applications/tabs/tab3.vue
new file mode 100644
index 0000000..9d496cb
--- /dev/null
+++ b/ui-vue3/src/views/resources/applications/tabs/tab3.vue
@@ -0,0 +1,29 @@
+<!--
+ ~ Licensed to the Apache Software Foundation (ASF) under one or more
+ ~ contributor license agreements. See the NOTICE file distributed with
+ ~ this work for additional information regarding copyright ownership.
+ ~ The ASF licenses this file to You under the Apache License, Version 2.0
+ ~ (the "License"); you may not use this file except in compliance with
+ ~ the License. You may obtain a copy of the License at
+ ~
+ ~ http://www.apache.org/licenses/LICENSE-2.0
+ ~
+ ~ Unless required by applicable law or agreed to in writing, software
+ ~ distributed under the License is distributed on an "AS IS" BASIS,
+ ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ ~ See the License for the specific language governing permissions and
+ ~ limitations under the License.
+-->
+<template>
+ <div class="__container_tabDemo3">tab3</div>
+</template>
+
+<script setup lang="ts">
+import {onMounted} from "vue";
+
+onMounted(()=>{
+ console.log(333)
+})
+
+</script>
+<style lang="less" scoped></style>
diff --git a/ui-vue3/src/views/resources/services/search.vue b/ui-vue3/src/views/resources/services/search.vue
index 73ef847..64f62e9 100644
--- a/ui-vue3/src/views/resources/services/search.vue
+++ b/ui-vue3/src/views/resources/services/search.vue
@@ -29,7 +29,7 @@
<script setup lang="ts">
import { useRouter } from 'vue-router'
import { reactive, provide } from 'vue'
-import { searchService } from '@/api/service/service.ts'
+import { searchService } from '@/api/service/service'
import { SearchDomain } from '@/utils/SearchUtil'
import SearchTable from '@/components/SearchTable.vue'
import { PROVIDE_INJECT_KEY } from '@/base/enums/ProvideInject'
diff --git a/ui-vue3/src/views/resources/services/tabs/debug.vue b/ui-vue3/src/views/resources/services/tabs/debug.vue
index 585fe79..e022898 100644
--- a/ui-vue3/src/views/resources/services/tabs/debug.vue
+++ b/ui-vue3/src/views/resources/services/tabs/debug.vue
@@ -61,9 +61,10 @@
</template>
<script setup lang="ts">
-import { ref, reactive } from 'vue'
+import {reactive, ref} from 'vue'
import MonacoEditor from '@/components/editor/MonacoEditor.vue';
+
const methodTabs = reactive([
'login',
'register',
