瀏覽代碼

单页签模式兼容

lilei 3 年之前
父節點
當前提交
1640c4655e
共有 3 個文件被更改,包括 17 次插入112 次删除
  1. 3 111
      src/components/PageHeader/PageHeader.vue
  2. 4 1
      src/layouts/PageView.vue
  3. 10 0
      src/utils/mixin.js

+ 3 - 111
src/components/PageHeader/PageHeader.vue

@@ -1,32 +1,7 @@
 <template>
   <div class="page-header">
     <div class="page-header-index-wide">
-      <!-- <s-breadcrumb /> -->
-      <div class="detail">
-        <div class="main" v-if="!$route.meta.hiddenHeaderContent">
-          <!-- <div class="row">
-            <img v-if="logo" :src="logo" class="logo"/>
-            <h1 v-if="title" class="title">{{ title }}</h1>
-            <div class="action">
-              <slot name="action"></slot>
-            </div>
-          </div> -->
-          <div class="row">
-            <div v-if="avatar" class="avatar">
-              <a-avatar :src="avatar" />
-            </div>
-            <div v-if="this.$slots.content" class="headerContent">
-              <slot name="content"></slot>
-            </div>
-            <div v-if="this.$slots.extra" class="extra">
-              <slot name="extra"></slot>
-            </div>
-          </div>
-          <div>
-            <slot name="pageMenu"></slot>
-          </div>
-        </div>
-      </div>
+      <s-breadcrumb />
     </div>
   </div>
 </template>
@@ -63,92 +38,9 @@ export default {
 
 <style lang="less" scoped>
 .page-header {
-  background: #fff;
-  padding: 16px 32px 0;
-  border-bottom: 1px solid #e8e8e8;
-
+  padding: 0 15px 0;
   .breadcrumb {
-    margin-bottom: 16px;
-  }
-
-  .detail {
-    display: flex;
-    /*margin-bottom: 16px;*/
-
-    .avatar {
-      flex: 0 1 72px;
-      margin: 0 24px 8px 0;
-
-      & > span {
-        border-radius: 72px;
-        display: block;
-        width: 72px;
-        height: 72px;
-      }
-    }
-
-    .main {
-      width: 100%;
-      flex: 0 1 auto;
-
-      .row {
-        display: flex;
-        width: 100%;
-
-        .avatar {
-          margin-bottom: 16px;
-        }
-      }
-
-      .title {
-        font-size: 20px;
-        font-weight: 500;
-
-        font-size: 20px;
-        line-height: 28px;
-        font-weight: 500;
-        color: rgba(0, 0, 0);
-        margin-bottom: 16px;
-        flex: auto;
-      }
-      .logo {
-        width: 28px;
-        height: 28px;
-        border-radius: 4px;
-        margin-right: 16px;
-      }
-      .content,
-      .headerContent {
-        flex: auto;
-        color: rgba(0, 0, 0, 0.45);
-        line-height: 22px;
-
-        .link {
-          margin-top: 16px;
-          line-height: 24px;
-
-          a {
-            font-size: 14px;
-            margin-right: 32px;
-          }
-        }
-      }
-      .extra {
-        flex: 0 1 auto;
-        margin-left: 88px;
-        min-width: 242px;
-        text-align: right;
-      }
-      .action {
-        margin-left: 56px;
-        min-width: 266px;
-        flex: 0 1 auto;
-        text-align: right;
-        &:empty {
-          display: none;
-        }
-      }
-    }
+    margin-bottom: 0;
   }
 }
 

+ 4 - 1
src/layouts/PageView.vue

@@ -1,5 +1,6 @@
 <template>
   <div :style="!$route.meta.hiddenHeaderContent ? 'margin: -24px -24px 0px;' : null">
+    <PageHeader v-if="!multiTab"></PageHeader>
     <div class="content" :style="{ height: pageHeight+'px' }">
       <div class="page-header-index-wide">
         <slot>
@@ -11,11 +12,13 @@
 </template>
 
 <script>
+import PageHeader from '@/components/PageHeader/PageHeader.vue'
 import { mapState } from 'vuex'
 import { on, off } from '@/libs/tools'
 export default {
   name: 'PageView',
   components: {
+    PageHeader
   },
   props: {
     avatar: {
@@ -76,7 +79,7 @@ export default {
 
 <style lang="less" scoped>
   .content {
-    margin: 12px 12px 0;
+    margin: 8px 12px 0;
     .page-header-index-wide{
       height: 100%;
       >div{

+ 10 - 0
src/utils/mixin.js

@@ -123,10 +123,20 @@ const commonMixin = {
     const cache = parentNode&&parentNode.componentInstance?parentNode.componentInstance.cache:null
     const keys = parentNode&&parentNode.componentInstance?parentNode.componentInstance.keys:null
     const closeTabPages = this.$store.state.app.closeTabPages
+    const multiTab = this.$store.state.app.multiTab
     // console.log(closeTabPages,key)
     // 清空同级路由的组件缓存
     if(hasChildren&&(oa||ob||oc||oxt)&&cache&&keys){
       this.clearCompCache(cache,keys,key)
+      // 单页签模式
+      if(!multiTab){
+        this.$store.state.app.isNewTab = false
+        this.$store.state.app.updateList = true
+      }
+    }
+    // 单页签模式,并且不是同级菜单的清空组件
+    if(!multiTab&&!hasChildren){
+      this.clearCompCache(cache,keys,key)
     }
     // 批量清空组件缓存
     if(closeTabPages.length&&cache&&keys){