feat(dashboard): display department drawer while hovering

src/components/service/DepartmentDrawer/index.vue

@@ -2,11 +2,16 @@
   <el-drawer
     :visible.sync="drawer"
     direction="ltr"
-    :size="480"
+    :size="320"
     :with-header="false"
     append-to-body
+    @opened="onOpened"
+    @close="onClose"
   >
-    <div class="c-department-tree u-overflow--auto">
+    <div
+      class="c-department-tree u-overflow--auto"
+      @mouseleave="onHide"
+    >
       <el-tree
         v-if="groups"
         ref="groupTree"
@@ -17,8 +22,9 @@
         :current-node-key="group.path"
         :default-expanded-keys="expandedKeys"
         :expand-on-click-node="false"
-        accordion
+        :indent="8"
         highlight-current
+        default-expand-all
         auto-expand-parent
         @node-click="setGroup"
       />
@@ -37,6 +43,10 @@ export default {
       type: Object,
       default: null
     },
+    closeOnLeave: {
+      type: [Boolean, String],
+      default: false
+    },
     remember: {
       type: [Boolean, String],
       default: false
@@ -78,6 +88,17 @@ export default {
       }
       return Promise.resolve(this.drawer)
     },
+    onOpened () {
+      this.$opend = true
+    },
+    onClose () {
+      this.$opend = false
+    },
+    onHide () {
+      if (this.closeOnLeave && this.$opend) {
+        this.drawer = false
+      }
+    },
     getTree () {
       this.loading = true
       this.error = false
@@ -99,12 +120,12 @@ export default {
     setGroup (group) {
       if (!this.group || this.group.path !== group.path) {
         this.group = group
-        this.drawer = false
         this.$emit('change', group)
         if (this.remember) {
           this.$store.dispatch('user/department', group)
         }
       }
+      this.drawer = false
     }
   }
 }
@@ -114,5 +135,14 @@ export default {
 .c-department-tree {
   height: 100%;
   padding: $spacing--xs;
+
+  ::v-deep {
+    .el-tree--highlight-current
+      .el-tree-node.is-current
+      > .el-tree-node__content {
+      color: #fff;
+      background-color: $blue;
+    }
+  }
 }
 </style>

src/layout/components/Navbar/index.vue

@@ -40,6 +40,7 @@
       ref="tenantDialog"
       :title="title"
       :schema="tenantSchema"
+      append-to-body
       @confirm="onChoosenTenant"
     />
     <el-drawer

src/views/dashboard/components/DeviceDashboard.vue

@@ -1,15 +1,18 @@
 <template>
   <div class="l-flex--col">
     <div class="l-flex__none l-flex--row c-sibling-item--v c-count">
-      <div
-        class="l-flex__none u-width--sm u-color--blue u-bold u-ellipsis has-active"
-        @click="onChooseDepartment"
-      >
+      <div class="l-flex__none l-flex--row u-width--sm u-color--blue u-bold">
         <i
           v-if="loading"
           class="el-icon-loading"
         />
-        {{ group.name }}
+        <div
+          class="l-flex__self u-ellipsis has-active"
+          @mouseenter="onChooseDepartment"
+          @click="onChooseDepartment"
+        >
+          {{ group.name }}
+        </div>
       </div>
       <div
         class="l-flex__none c-count__item u-color--black u-bold u-text--center u-pointer"
@@ -69,6 +72,7 @@
     </div>
     <department-drawer
       ref="departmentDrawer"
+      close-on-leave
       remember
       @change="onGroupChanged"
       @loaded="onGroupLoaded"