修复tabbug；完善Readme

Author: weihomechen

README.md

@@ -26,15 +26,43 @@ ng serve
 
 ### angular4基本功能的使用
 ### 带管理功能可切换的tab
+    - tab可管理；
+    - 自定义路由重用机制
 ### 一个增改查删的Demo（见人员管理）
-### 集成一些插件（文本编辑器、图表、地图、弹出框、流程图、树目录等）
+    - 增改查删的实现
+    - 多种表单控件
+### 集成一些插件
+    - 文本编辑器
+    - 图表
+    - 地图
+    - 弹出框
+    - 流程图
+    - 树目录
+    - 日程安排
 ### 与后台交互使用Rxjs
+    - 异步编程使用Rxjs
 ### 集成Material Design风格和Bootstrap风格的UI
 
 如果喜欢，还请挪一下鼠标给我一个star~~
 
 # 效果图
 
+![person-list](http://oqtn5nfde.bkt.clouddn.com/person-list.png)
+
+![tab](http://oqtn5nfde.bkt.clouddn.com/tab.png)
+
+![alert](http://oqtn5nfde.bkt.clouddn.com/alert.png)
+
+![calendar](http://oqtn5nfde.bkt.clouddn.com/calendar.png)
+
+![echarts](http://oqtn5nfde.bkt.clouddn.com/echarts.png)
+
+![jsplumb](http://oqtn5nfde.bkt.clouddn.com/jsplumb.png)
+
+![ztree](http://oqtn5nfde.bkt.clouddn.com/ztree.png)
+
+![amap](http://oqtn5nfde.bkt.clouddn.com/amap.png)
+
 PS： 个人项目，一些琐碎的细节没有实现；与后台交互使用的是mock-data，增删改也是模拟成功返回；
 
 

src/app/layout/body/body.component.css

@@ -0,0 +1,10 @@
+.copy-right {
+    text-align: center;
+    margin-left: -12%;
+    padding-top: 10px;
+}
+
+.copy-right-link {
+    cursor: pointer;
+    color: #F38181;
+}

src/app/layout/body/body.component.html

@@ -1,4 +1,8 @@
 <div class="app-body">
     <router-outlet></router-outlet>
 </div>
-<div class="body-footer"></div>
+<div class="body-footer">
+    <p class="copy-right">Copyright&nbsp;&copy;&nbsp;weihome 2017
+        <a class="copy-right-link" target="_blank" href="http://rulifun.com">http://rulifun.com</a>
+    </p>
+</div>

src/app/layout/header/header.component.css

@@ -13,7 +13,7 @@
 }
 
 .header-user {
-    margin-top: 15px;
+    margin-top: 5px;
 }
 
 .header-user .mdl-button {

src/app/layout/header/tab/tab.component.css

@@ -17,9 +17,6 @@ md2-tabs {
     margin: 0;
     padding: 0;
     list-style: none;
-    -webkit-user-select: none;
-    -moz-user-select: none;
-    -ms-user-select: none;
     user-select: none;
 }
 
@@ -45,7 +42,7 @@ md2-tabs {
 }
 
 .md2-next-button {
-    right: 0;
+    right: -30px;
 }
 
 .md2-prev-button.disabled,
@@ -64,17 +61,17 @@ md2-tabs {
     border-style: solid;
     border-radius: 1px;
     transform: rotate(45deg);
-    margin: 6px;
+    margin: 4px 10px;
 }
 
 .md2-next-button .next-icon {
-    border-width: 2px 2px 0 0;
+    border-width: 4px 4px 0 0;
 }
 
 .md2-tabs-canvas {
     position: relative;
     height: 100%;
-    overflow: hidden;
+    /*overflow: hidden;*/
     display: block;
     outline: none;
 }
@@ -196,6 +193,11 @@ md2-tab.active {
     margin-left: -4px;
 }
 
+.fixed-manage-btn {
+    position: fixed;
+    right: 30px;
+}
+
 #tab_manage_btn .fa-lg {
     vertical-align: initial;
 }

src/app/layout/header/tab/tab.component.ts

@@ -17,13 +17,13 @@ export class TabComponent implements OnInit {
     private md2Tabs: Md2Tabs;
     constructor(
         private tabControlService: TabControlService
-        ) { }
+    ) { }
 
     ngOnInit(): void {
         this.tabsModel = this.tabControlService.tabsModel;
     }
 
-    goToTab(menuTab){
+    goToTab(menuTab) {
         this.tabControlService.goToTab(menuTab);
     }
 

src/app/layout/header/tab/tabControl.service.ts

@@ -83,7 +83,7 @@ export class TabControlService {
             link;
         if (~nowLink.indexOf(';')) {
             link = nowLink.substr(0, nowLink.indexOf(';'));
-        }else {
+        } else {
             link = nowLink;
         }
         if (~nowLink.indexOf('foo')) {
@@ -97,6 +97,7 @@ export class TabControlService {
     closeAll() {
         this.tabs.length = 1;
         this.tabsModel.activeTab = 0;
+
         this.router.navigate(['/home']);
     }
 

src/app/layout/header/tab/tabs.ts

@@ -26,6 +26,8 @@ import { TabControlServiceModal } from './TabControlServiceModal';
 import { TabControlService } from './tabControl.service';
 import { Menu } from '../../nav/menu';
 
+declare var $;
+
 export class Md2TabChangeEvent {
     index: number;
     tab: Md2Tab;
@@ -87,7 +89,7 @@ export class Md2TabLabel {
                 [class.disabled]="tab.disabled" (click)="goToTab(tab.reallyTab)">
             <span [md2Transclude]="tab.labelRef">{{tab.label}}</span>
           </div>
-          <button mdl-button #btn1="mdlButton" (click)="m1.toggle($event, btn1)" id="tab_manage_btn" mdl-ripple>
+          <button mdl-button #btn1="mdlButton" (click)="toggle(m1, $event, btn1)" id="tab_manage_btn" mdl-ripple>
              <i class="fa fa-sort-down fa-lg white"></i>
           </button>
           <mdl-menu #m1="mdlMenu" mdl-menu-position="bottom-left">
@@ -315,17 +317,33 @@ export class Md2Tabs implements OnInit, AfterContentInit {
             canvasWidth -= tab.offsetWidth;
         });
         this.shouldPaginate = canvasWidth < 0;
-        // TODO: need improve
-        if (this.tabsModel.tabs.length <= 6) {
-            this.shouldPaginate = false;
+
+        const manageBtn = $('#tab_manage_btn'),
+            canvas = $('.md2-tabs-canvas');
+        if (this.shouldPaginate) {
+            manageBtn.addClass('fixed-manage-btn');
+            canvas.css('overflow', 'hidden');
+        } else {
+            manageBtn.removeClass('fixed-manage-btn');
+            canvas.css('overflow', '');
+        }
+    }
+
+    toggle(target, $event, btn1) {
+        target.toggle(event, btn1);
+        const menuContainer = $('.mdl-menu__container');
+        if (this.shouldPaginate) {
+            setTimeout(() => menuContainer.css({ 'position': 'fixed', 'left': '', 'right': '0' }));
+        } else {
+            setTimeout(() => menuContainer.css({ 'position': '', 'right': '' }));
         }
     }
 
     /**
      * 调整tabs的位移
      * @param index
      */
-    adjustOffset(index: number) {
+    adjustOffset(index: number = this.tabsModel.activeTab) {
         let elements = this.element;
         let tabsWidth = 0;
         if (!elements.tabs[index]) { return; }

src/app/share/app-jsplumb/app-jsplumb.component.html

@@ -1,4 +1,4 @@
-<h2>点击线上的标签文字可修改</h2>
+<h2>简单流程图</h2>
 <div class="jtk-demo-canvas canvas-wide flowchart-demo jtk-surface jtk-surface-nopan" id="canvas">
     <div class="window jtk-node" id="flowchartWindow1"><strong>开始</strong><br/><br/></div>
     <div class="window jtk-node" id="flowchartWindow2"><strong>提交申请</strong><br/><br/></div>