前后端全面升级

cmdb-ui/src/layouts/PageView.vue

@@ -1,7 +1,13 @@
 <template>
   <div :style="!$route.meta.hiddenHeaderContent ? 'margin: -24px -24px 0px;' : null">
     <!-- pageHeader , route meta :true on hide -->
-    <page-header v-if="!$route.meta.hiddenHeaderContent" :title="pageTitle" :logo="logo" :avatar="avatar">
+    <page-header
+      v-if="!$route.meta.hiddenHeaderContent"
+      :isShowBreadcrumb="isShowBreadcrumb"
+      :title="pageTitle"
+      :logo="logo"
+      :avatar="avatar"
+    >
       <slot slot="action" name="action"></slot>
       <slot slot="content" name="headerContent"></slot>
       <div slot="content" v-if="!this.$slots.headerContent && description">
@@ -15,9 +21,9 @@
           </template>
         </div>
       </div>
-      <slot slot="extra" name="extra">
+      <slot slot="extra" name="extra" v-if="extra">
         <div class="extra-img">
-          <img v-if="typeof extraImage !== 'undefined'" :src="extraImage"/>
+          <img v-if="typeof extraImage !== 'undefined'" :src="extraImage" />
         </div>
       </slot>
       <div slot="pageMenu">
@@ -31,7 +37,7 @@
         </div>
         <div class="page-menu-tabs" v-if="tabs && tabs.items">
           <!-- @change="callback" :activeKey="activeKey" -->
-          <a-tabs :tabBarStyle="{margin: 0}" :activeKey="tabs.active()" @change="tabs.callback">
+          <a-tabs :tabBarStyle="{ margin: 0 }" :activeKey="tabs.active()" @change="tabs.callback">
             <a-tab-pane v-for="item in tabs.items" :tab="item.title" :key="item.key"></a-tab-pane>
           </a-tabs>
         </div>
@@ -58,52 +64,60 @@ import PageHeader from '@/components/PageHeader'
 export default {
   name: 'PageView',
   components: {
-    PageHeader
+    PageHeader,
   },
   props: {
     avatar: {
       type: String,
-      default: null
+      default: null,
     },
     title: {
       type: [String, Boolean],
-      default: true
+      default: true,
     },
     logo: {
       type: String,
-      default: null
+      default: null,
     },
     directTabs: {
       type: Object,
-      default: null
-    }
+      default: null,
+    },
+    extra: {
+      type: Boolean,
+      default: true,
+    },
+    isShowBreadcrumb: {
+      type: Boolean,
+      default: true,
+    },
   },
-  data () {
+  data() {
     return {
       pageTitle: null,
       description: null,
       linkList: [],
       extraImage: '',
       search: false,
-      tabs: {}
+      tabs: {},
     }
   },
   computed: {
     ...mapState({
-      multiTab: state => state.app.multiTab
-    })
+      multiTab: state => state.app.multiTab,
+    }),
   },
-  mounted () {
+  mounted() {
     this.tabs = this.directTabs
     this.getPageMeta()
   },
-  updated () {
+  updated() {
     this.getPageMeta()
   },
   methods: {
-    getPageMeta () {
+    getPageMeta() {
       // eslint-disable-next-line
-      this.pageTitle = (typeof(this.title) === 'string' || !this.title) ? this.title : this.$route.meta.title
+      this.pageTitle = typeof this.title === 'string' || !this.title ? this.title : this.$route.meta.title
 
       const content = this.$refs.content
       if (content) {
@@ -117,65 +131,65 @@ export default {
           this.tabs = content.tabs
         }
       }
-    }
-  }
+    },
+  },
 }
 </script>
 
 <style lang="less" scoped>
-  .content {
-    margin: 24px 24px 0;
-    .link {
-      margin-top: 16px;
-      &:not(:empty) {
-        margin-bottom: 16px;
+.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;
       }
-      a {
-        margin-right: 32px;
+      span {
         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;
-        }
+        vertical-align: middle;
       }
     }
   }
-  .page-menu-search {
-    text-align: center;
-    margin-bottom: 16px;
-  }
-  .page-menu-tabs {
-    margin-top: 48px;
-  }
+}
+.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: -60px;
+    margin-top: 0;
     text-align: center;
-    width: 195px;
+    width: 96px;
 
     img {
       width: 100%;
     }
   }
-
-  .mobile {
-    .extra-img{
-      margin-top: 0;
-      text-align: center;
-      width: 96px;
-
-      img{
-        width: 100%;
-      }
-    }
-  }
+}
 </style>