调整分页栏

src/components/tab-page-exp/tab-page-exp.less

@@ -87,28 +87,96 @@
 //     opacity: 0;
 // }
 .ibiz-page-tag {
-    .el-tabs{
-        .el-tabs__nav{
-            padding:0px 10px;
-            border:none;
-        }
-        .el-tabs__item{
-            color:#ccc;
-            border:none;
-        }
-        .el-tabs__item:hover{
-            color:#409eff;
-        }
-        .is-active{
-            color:#409eff;
-            border-bottom:2px solid #409eff !important;    
-        }
-        .el-tabs__nav-scroll{
-            background-color: white;
+    position: relative;
+    .contextmenu {
+        margin: 0;
+        background: #fff;
+        z-index: 3000;
+        position: absolute;
+        list-style-type: none;
+        padding: 5px 0;
+        border-radius: 4px;
+        font-size: 12px;
+        font-weight: 400;
+        color: #333;
+        box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, 0.3);
+    
+        li {
+          margin: 0;
+          padding: 7px 16px;
+          cursor: pointer;
+    
+          &:hover {
+            background: #eee;
+          }
         }
+      }
+    .left{
         .el-tabs__header{
-            box-shadow: 0 1px 2px 0 rgba(0,0,0,.15);
-            margin:0 0 1 0;
+            padding-right:120px;
+        }
+    }
+    .right{
+        position: absolute;
+        right:0px;
+        top:0px;
+        width:120px;
+        margin:5px 0px;
+        display: flex;
+        justify-content: center;
+    }
+    >.tag-tabs{
+        background-color: #F0F0F0 !important;
+        .el-tabs{
+            .el-tabs__nav-scroll{
+            }
+            .el-tabs__nav{
+                padding:0px 10px;
+                border:none;
+            }
+            .el-tabs__active-bar{
+                background-color: transparent !important;
+            }
+            .el-tabs__item{
+                height: 32px;
+                line-height: 32px;
+                border: 1px solid #e8eaec!important;
+                color: #515a6e!important;
+                background: #fff!important;
+                padding: 0 12px;
+                display: inline-block;
+                margin: 4px 4px 4px 0;
+                border-radius: 3px;
+                font-size: 12px;
+                vertical-align: middle;
+                opacity: 1;
+                overflow: hidden;
+                .ivu-tag-dot-inner{
+                    display: inline-block;
+                    width: 12px;
+                    height: 12px;
+                    margin-right: 8px;
+                    border-radius: 50%;
+                    background: #e8eaec;
+                    position: relative;
+                    top: 1px;
+                }
+            }
+            .el-tabs__item:hover{
+                color:#409eff;
+            }
+            .is-active{
+                color:#409eff;
+                .ivu-tag-dot-inner{
+                    background-color:#409eff !important;
+                }
+                border-bottom:2px solid transparent !important; 
+            }
+            .el-tabs__header{
+                box-shadow: 0 1px 2px 0 rgba(0,0,0,.15);
+                margin:0 0 1 0;
+            }
         }
     }
+   
 }
\ No newline at end of file

src/components/tab-page-exp/tab-page-exp.vue

 <template>
   <div class="ibiz-page-tag">
-    <el-tabs
-      type="card"
-      @tab-click="changePage"
-      v-model="editableTabsValue"
-      closable
-      @tab-remove="onClose"
+    <div class="tag-tabs left">
+      <el-tabs
+        type="card"
+        @tab-click="changePage"
+        v-model="editableTabsValue"
+        closable 
+        @tab-remove="onClose"
+        @contextmenu.prevent.native="openMenu($event)"
+      >
+        <el-tab-pane
+          v-for="(meta, index) of $store.state.pageMetas"
+          :name="index+''"
+          :key="index+''"
+         
+        >
+        <span slot="label"><span class="ivu-tag-dot-inner"></span>{{ getCaption(meta.caption, meta.info) }}</span>
+        </el-tab-pane>
+      </el-tabs>
+    </div>
+    <ul
+      v-show="visible"
+      :style="{left: left+'px', top: top+'px'}"
+      class="contextmenu"
     >
-      <el-tab-pane
-        v-for="(meta, index) of $store.state.pageMetas"
-        :label="getCaption(meta.caption, meta.info)"
-        :name="index+''"
-        :key="index+''"
-      ></el-tab-pane>
-    </el-tabs>
+      <li v-for="(item,index) in actions" @click="handlerClose(item)">
+        {{ $t(item.text) }}
+      </li>
+    </ul>
+    <div v-show="$store.state.pageMetas.length > 0" class="right">
+      <el-dropdown @command="handlerClose">
+        <el-button size="mini" type="primary">
+          更多<i class="el-icon-arrow-down el-icon--right"></i>
+        </el-button>
+        <el-dropdown-menu slot="dropdown">
+          <el-dropdown-item :command="item" v-for="(item,index) in actions">{{ $t(item.text) }}</el-dropdown-item>
+        </el-dropdown-menu>
+      </el-dropdown>
+    </div>
   </div>
 </template>
 
@@ -23,16 +47,49 @@ import { Environment } from "../../environments/environment";
 
 @Component({})
 export default class TabPageExp extends Vue {
+
   @Provide()
   public styleLeft: number = 0;
 
+  private visible = false;  //右键菜单显示状态
+
+  private top = 0;  //菜单距离顶部位置
+
+  private left = 0; //菜单距离左侧位置
+
   @Provide()
   public actions: any[] = [
     { text: "app.tabpage.closeall", value: "closeAll" },
     { text: "app.tabpage.closeother", value: "closeOther" }
   ];
 
-  public editableTabsValue: any = "";
+  /**
+   * 关闭tab页方法
+   */
+  public handlerClose(item: any){
+    this.visible = false;
+    this.doTagAction(item.value);
+  }
+
+  /**
+   * 打开右键菜单
+   */
+  private openMenu(e: MouseEvent) {
+    const menuMinWidth = 105;
+    const offsetLeft = this.$el.getBoundingClientRect().left;
+    const offsetWidth = (this.$el as HTMLElement).offsetWidth;
+    const maxLeft = offsetWidth - menuMinWidth;
+    const left = e.clientX - offsetLeft - 15;
+    if (left > maxLeft) {
+      this.left = maxLeft;
+    } else {
+      this.left = left;
+    }
+    this.top = e.clientY - 45;
+    this.visible = true;
+  }
+
+  public editableTabsValue: any = ""; //tabs页绑定值
 
   @Watch("$route")
   public onRouteChange(newVal: any) {

src/engine/view/edit-view-engine.ts

@@ -248,7 +248,7 @@ export default class EditViewEngine extends ViewEngine {
     public setTabCaption(info: string): void {
         let viewdata: any = this.view.model;
         if (viewdata  && info && !Object.is(info, '') && this.view.$tabPageExp && (viewdata.srfTitle.indexOf(" - ") === -1)) {
-            this.view.$tabPageExp.setCurPageCaption(viewdata.srfCaption, viewdata.srfTitle, info);
+            this.view.$tabPageExp.setCurPageCaption(viewdata.srfTitle, viewdata.srfTitle, info);
             this.view.model.srfTitle = `${this.view.$t(viewdata.srfTitle)} - ${viewdata.dataInfo}`;
         }
     }