| // 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 :style="!$route.meta.hiddenHeaderContent ? 'margin: -24px -24px 0px;' : null"> |
| <div class="page-menu-tabs"> |
| <a-tabs :tabBarStyle="{margin: 0}" @change="changeTab"> |
| <a-tab-pane v-for="child in $route.permission" :tab="this.$t(child.meta.title)" :key="child.key"></a-tab-pane> |
| </a-tabs> |
| </div> |
| <div class="content"> |
| <div class="page-header-index-wide"> |
| <slot> |
| <!-- keep-alive --> |
| <keep-alive v-if="multiTab"> |
| <router-view ref="content" /> |
| </keep-alive> |
| <router-view v-else ref="content" /> |
| </slot> |
| </div> |
| </div> |
| </div> |
| </template> |
| |
| <script> |
| import { mapState } from 'vuex' |
| |
| export default { |
| name: 'PageView', |
| created () { |
| console.log(this.$route) |
| console.log(this.$router) |
| }, |
| components: { |
| }, |
| props: { |
| avatar: { |
| type: String, |
| default: null |
| }, |
| title: { |
| type: [String, Boolean], |
| default: true |
| }, |
| logo: { |
| type: String, |
| default: null |
| } |
| }, |
| data () { |
| return { |
| pageTitle: null, |
| description: null, |
| linkList: [], |
| extraImage: '', |
| search: false, |
| tabs: {} |
| } |
| }, |
| computed: { |
| ...mapState({ |
| multiTab: state => state.app.multiTab |
| }) |
| }, |
| mounted () { |
| this.getPageMeta() |
| }, |
| updated () { |
| this.getPageMeta() |
| }, |
| methods: { |
| changeTab () { |
| |
| }, |
| getPageMeta () { |
| // eslint-disable-next-line |
| this.pageTitle = (typeof(this.title) === 'string' || !this.title) ? this.$t(this.title) : this.$t(this.$route.meta.title) |
| |
| const content = this.$refs.content |
| if (content) { |
| if (content.pageMeta) { |
| Object.assign(this, content.pageMeta) |
| } else { |
| this.description = content.description |
| this.linkList = content.linkList |
| this.extraImage = content.extraImage |
| this.search = content.search === true |
| this.tabs = content.tabs |
| } |
| } |
| } |
| } |
| } |
| </script> |
| |
| <style lang="less" scoped> |
| .content { |
| margin: 24px 24px 0; |
| .link { |
| margin-top: 16px; |
| &:not(:empty) { |
| margin-bottom: 16px; |
| } |
| a { |
| margin-right: 32px; |
| height: 24px; |
| line-height: 24px; |
| display: inline-block; |
| i { |
| font-size: 24px; |
| margin-right: 8px; |
| vertical-align: middle; |
| } |
| span { |
| height: 24px; |
| line-height: 24px; |
| display: inline-block; |
| vertical-align: middle; |
| } |
| } |
| } |
| } |
| .page-menu-search { |
| text-align: center; |
| margin-bottom: 16px; |
| } |
| .page-menu-tabs { |
| margin-top: 48px; |
| } |
| |
| .extra-img { |
| margin-top: -60px; |
| text-align: center; |
| width: 195px; |
| |
| img { |
| width: 100%; |
| } |
| } |
| |
| .mobile { |
| .extra-img{ |
| margin-top: 0; |
| text-align: center; |
| width: 96px; |
| |
| img{ |
| width: 100%; |
| } |
| } |
| } |
| </style> |