调整应用切换器

src/app-register.ts

@@ -73,8 +73,9 @@ import AppDepartmentSelect from './components/app-department-select/app-departme
 import IBizGroupSelect from './components/ibiz-group-select/ibiz-group-select.vue'
 import IBizGroupPicker from './components/ibiz-group-picker/ibiz-group-picker.vue'
 import AppWFApproval from './components/app-wf-approval/app-wf-approval.vue'
-import Breadcrumb from './components/app-breadcrumb/app-breadcrumb.vue';
+import Breadcrumb from './components/app-breadcrumb/app-breadcrumb.vue'
 import AppTransfer from './components/app-transfer/app-transfer.vue'
+import ContextMenuDrag from './components/context-menu-drag/context-menu-drag.vue'
 
 // 全局挂载UI实体服务注册中心
 window['uiServiceRegister'] = uiServiceRegister;
@@ -162,5 +163,6 @@ export const AppComponents = {
         v.component('app-wf-approval',AppWFApproval);
         v.component('app-breadcrumb',Breadcrumb);
         v.component('app-transfer',AppTransfer);
+        v.component('context-menu-drag',ContextMenuDrag);
     },
 };
\ No newline at end of file

src/components/context-menu-drag/context-menu-drag.vue

+<template>
+  <Drawer
+    class-name="sider-drawer"
+    placement="left"
+    :closable="false"
+    :mask="false"
+    width="240"
+    v-model="visiable"
+  >
+    <div class="context-menu-drag">
+      <div class="menu-list">
+        <div
+          class="menu-header"
+          @mouseover="showMenuDrawer"
+          @click="drawerVisiable=!drawerVisiable"
+        >
+          <div class="menuicon">
+            <Icon type="md-apps" />
+          </div>
+          <div class="content">
+            <span>服务</span>
+          </div>
+          <div class="forward">
+            <Icon type="ios-arrow-forward" />
+          </div>
+        </div>
+        <div style="padding:8px 0px;" class="col-6">
+          <draggable
+            class="list-group"
+            tag="ul"
+            v-model="selectlist"
+            v-bind="dragOptionsVal"
+            @start="onStart"
+            @end="onEnd"
+            :animation="250"
+            handle=".handle"
+            ghost-class="ghost"
+          >
+            <transition-group type="transition" :name="!drag ? 'flip-list' : null">
+              <li class="list-group-item" v-for="(item,index) in selectlist" :key="item.id">
+                <el-row>
+                  <el-col class="menuicon" :span="4">
+                    <span>
+                      <Icon v-if="item.icon" :type="item.icon" />
+                      <Icon v-else type="md-menu" />
+                    </span>
+                  </el-col>
+                  <el-col :span="14">
+                    <span>{{ item.label }}</span>
+                  </el-col>
+                  <el-col :span="6">
+                    <div class="bar">
+                      <div>
+                        <Icon type="ios-close" @click="removeAt(index)" />
+                      </div>
+                      <div>
+                        <Icon type="ios-move handle" />
+                      </div>
+                    </div>
+                  </el-col>
+                </el-row>
+              </li>
+            </transition-group>
+          </draggable>
+        </div>
+      </div>
+      <Drawer
+        class-name="menu-drawer"
+        width="60"
+        :closable="true"
+        :mask="false"
+        placement="left"
+        v-model="drawerVisiable"
+      >
+        <div class="menuItems">
+          <div class="item" v-for="(item,index) in list" :key="item.id">
+            <span class="title">{{item.label}}</span>
+            <span v-if="isStar(item.id)" class="star" @click="outStar(item)">
+              <Icon type="ios-star" />
+            </span>
+            <span v-else class="star" @click="onStar(item)">
+              <Icon type="ios-star-outline" />
+            </span>
+          </div>
+        </div>
+      </Drawer>
+    </div>
+  </Drawer>
+</template>
+
+<script lang="ts">
+import draggable from "vuedraggable";
+import {
+  Vue,
+  Component,
+  Provide,
+  Watch,
+  Prop,
+  Model
+} from "vue-property-decorator";
+
+// tslint:disable-next-line:max-classes-per-file
+@Component({
+  components: {
+    draggable
+  }
+})
+export default class ContextMenuDrag extends Vue {
+  drawerVisiable: boolean = false;
+
+  current: number = 0;
+
+  list: Array<any> = [];
+
+  selectlist: Array<any> = [];
+
+  drag: boolean = false;
+
+  @Model("change") dragOptions: any;
+
+  @Prop() contextMenuDragVisiable?: boolean;
+
+  visiable: boolean = false;
+
+  @Watch("contextMenuDragVisiable")
+  public onVisiableChange(newVal: any, oldVal: any) {
+    if (newVal) {
+      this.visiable = newVal;
+    } else {
+      let that: any = this;
+      let params: any = {};
+      params.model = this.selectlist;
+      const put: Promise<any> = this.$http.put("uaa/access-center/app-switcher/default",params);
+      put.then((response: any) => {
+        if(response){
+          console.log(response);
+        }
+      }).catch((e) => {
+        console.log(e);
+      });
+      this.drawerVisiable = false;
+      setTimeout(() => {
+        that.visiable = false;
+      }, 300);
+    }
+  }
+
+  public showMenuDrawer() {
+    let that: any = this;
+    if(this.contextMenuDragVisiable){
+      setTimeout(() => {
+        that.drawerVisiable = true;
+      }, 300);
+    }
+  }
+
+  public menuDrawerClose() {}
+
+  public onStart(evt: any) {
+    this.drag = true;
+  }
+
+  public onEnd(evt: any) {
+    this.drag = false;
+    console.log(...this.selectlist);
+  }
+
+  /**
+   *  判断是否已加入列表
+   */
+  public isStar(id: any) {
+    let istar: boolean = false;
+    this.selectlist.forEach((item: any) => {
+      if (Object.is(item.id, id)) {
+        istar = true;
+      }
+    });
+    return istar;
+  }
+
+  /**
+   * 加入列表
+   */
+  public onStar(item: any) {
+    item.visabled = 1;
+    this.selectlist.push(item);
+  }
+
+  /**
+   * 从列表中删除
+   */
+  public outStar(item: any) {
+    item.visabled = 0;
+    let index: number = 0;
+    let that: any = this;
+    this.selectlist.forEach((select: any, index: number) => {
+      if (Object.is(item.id, select.id)) {
+        that.selectlist.splice(index,1);
+      }
+    });
+  }
+
+  get dragOptionsVal() {
+    return {
+      animation: 200,
+      group: "description",
+      disabled: false,
+      ghostClass: "ghost"
+    };
+  }
+  removeAt(index: any) {
+    this.selectlist.splice(index, 1);
+  }
+  sort() {
+    this.selectlist = this.selectlist.sort((a, b) => a.order - b.order);
+  }
+  listFilter() {
+    let that: any = this;
+    that.selectlist = [];
+    this.list.forEach((item: any) => {
+      if (item.visabled === 1) {
+        that.selectlist.push(item);
+      }
+    });
+  }
+  mounted() {
+    let that: any = this;
+    const get: Promise<any> = this.$http.get(
+      "uaa/access-center/app-switcher/default"
+    );
+    get
+      .then((response: any) => {
+        if (response) {
+          that.list = response.data.model;
+          that.listFilter();
+          console.log(response);
+        }
+      })
+      .catch(e => {
+        console.log(e);
+      });
+  }
+}
+</script>
+
+<style lang='less'>
+.menu-drawer {
+  .ivu-drawer-left {
+    left: 241px !important;
+  }
+  .ivu-drawer {
+    top: 64px !important;
+  }
+  .ivu-drawer-body {
+    padding: 32px !important;
+    .menuItems {
+      display: flex;
+      flex-wrap: wrap;
+      > .item {
+        margin: 0px 10px;
+        width: calc(33.333% - 20px);
+        padding: 0px 15px;
+        font-size: 13px;
+        transition: all 0.3s;
+        display: flex;
+        justify-content: space-between;
+        height: 32px;
+        align-items: center;
+        .star {
+          display: flex;
+          height: 100%;
+          width: 30px;
+          font-size: 15px;
+          align-items: center;
+          justify-content: center;
+          .ivu-icon-ios-star-outline{
+            display: none;
+          }
+        }
+      }
+      > .item:hover {
+        background-color: #eaeaea;
+        cursor: pointer;
+          .ivu-icon-ios-star-outline{
+            display: inline;
+          }
+      }
+    }
+  }
+}
+.sider-drawer {
+  .ivu-drawer {
+    background-color: #ffffff !important;
+  }
+  .ivu-drawer-body {
+    padding: 0px !important;
+  }
+  .ivu-drawer {
+    top: 64px !important;
+  }
+  .context-menu-drag {
+    display: flex;
+    .flip-list-move {
+      transition: transform 0.3s;
+    }
+    .menu-list {
+      width: 100%;
+      height: 100%;
+      .menu-header {
+        cursor: pointer;
+        border-bottom: 1px solid rgb(222, 222, 222);
+        height: 48px;
+        line-height: 48px;
+        display: flex;
+        align-items: center;
+        .menuicon {
+          display: inline-block;
+          width: 50px;
+          font-size: 16px;
+          text-align: center;
+          font-size: 22px;
+        }
+        .content {
+          display: inline-block;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+          flex: 1 1 0%;
+          overflow: hidden;
+          font-size: 13px;
+        }
+        .forward {
+          margin: 0px 8px 0px 4px;
+          color: rgb(222, 222, 222);
+          font-size: 15px;
+        }
+      }
+      .list-group-item {
+        transition: background 1s;
+        -webkit-transition: background 1s;
+        .menuicon {
+          text-align: center;
+        }
+        .el-row {
+          height: 100%;
+          display: flex;
+          align-items: center;
+          padding: 0px 5px;
+        }
+        height: 40px;
+        cursor: pointer;
+        position: relative;
+        display: block;
+        margin-bottom: -1px;
+        transition: background-color 0.5s;
+        transition-timing-function: ease-in-out;
+        .handle {
+          cursor: move;
+        }
+        .bar {
+          display: flex;
+          .ivu-icon-ios-close {
+            cursor: pointer;
+            font-size: 25px;
+          }
+        }
+      }
+      .list-group-item:hover {
+        background-color: #f5f5f5;
+        .ivu-icon-ios-star-outline{
+          display: inline;
+        }
+      }
+    }
+  }
+}
+</style>

src/styles/default.less

@@ -250,12 +250,6 @@
   }
 }
 
-// 清除看板里视图的阴影
-.dashboard .portlet .view-container{
-  -webkit-box-shadow: none ;
-  box-shadow: none;
-}
-
 /***    END:多数据视图属性布局    ***/
 
 // 看板视图，卡片模式

src/theme/blue.theme.less

@@ -4,29 +4,6 @@
       .app-theme-icon {
           color: #6ba1d1;
       }
-      /* .el-menu.el-menu--horizontal {
-          > .el-menu-item, > .el-submenu > .el-submenu__title {
-              background: #2d5f8b;
-              color: #6ba1d1;
-              i {
-                  color: #6ba1d1;
-              }
-          }
-          > .el-menu-item.is-active, > .el-submenu.is-active > .el-submenu__title {
-              background-color: #4276a4;
-              color: #f1f1f1;
-              i {
-                  color: #f1f1f1;
-              }
-          }
-          > .el-menu-item:hover, > .el-submenu:hover > .el-submenu__title {
-              background-color: #3c6c95;
-              color: #f1f1f1 !important;
-              i {
-                  color: #f1f1f1;
-              }
-          }
-      } */
   }
   
   > .ivu-layout {

src/theme/dark-blue.theme.less

@@ -3,30 +3,7 @@
     > .ivu-layout-has-sider > .ivu-layout > header{
         .app-theme-icon {
             color: #606d80;
-        }/* 
-        .el-menu.el-menu--horizontal {
-            > .el-menu-item, > .el-submenu > .el-submenu__title {
-                background: #20222A;
-                color: #606d80;
-                i {
-                    color: #606d80;
-                }
-            }
-            > .el-menu-item.is-active, > .el-submenu.is-active > .el-submenu__title {
-                background-color: #20222A;
-                color: #f1f1f1;
-                i {
-                    color: #f1f1f1;
-                }
-            }
-            > .el-menu-item:hover, > .el-submenu:hover > .el-submenu__title {
-                background-color: #3e4b5c;
-                color: #f1f1f1 !important;
-                i {
-                    color: #f1f1f1;
-                }
-            }
-        } */
+        }
     }
     > .ivu-layout {
         > .ivu-layout-sider {

src/theme/default.theme.less

@@ -4,29 +4,6 @@
         .app-theme-icon {
             color: #aaaaaa;
         }
-       /*  .el-menu.el-menu--horizontal {
-            > .el-menu-item, > .el-submenu > .el-submenu__title {
-                background: #e1e1e1;
-                color: #aaaaaa;
-                i {
-                    color: #aaaaaa;
-                }
-            }
-            > .el-menu-item.is-active, > .el-submenu.is-active > .el-submenu__title {
-                background-color: #f6f6f6;
-                color: #666666;
-                i {
-                    color: #666666;
-                }
-            }
-            > .el-menu-item:hover, > .el-submenu:hover > .el-submenu__title {
-                background-color: #e9e9e9;
-                color: #666666 !important;
-                i {
-                    color: #666666;
-                }
-            }
-        } */
     }
     > .ivu-layout {
         > .ivu-layout-sider {