顶部企业切换修改

components/default/Header.vue

@@ -10,7 +10,7 @@
         </div>
         <div class="navbar-right">
           <template v-if="user.logged">
-            <div class="item-wrap dropdown" @mouseleave="showEnterprises = false">
+            <div class="item-wrap dropdown">
               <div class="item dropdown-toggle">
                 欢迎您，{{ user.data.userName }}&nbsp;|&nbsp;
                 <a @click="logout()">[退出]</a>
@@ -18,17 +18,19 @@
               </div>
               <ul class="dropdown-menu">
                 <li class="menu-item-first">
-                  <span class="member-text" :title="enterprise.enName"><i class="fa fa-map-marker"></i>&nbsp;{{ enterprise.uu?enterprise.enName: user.data.userName + '（个人账户）' }}</span>
-                  <a class="pull-right" @click="toggleEnterprises()" v-if="user.data.enterprises && user.data.enterprises.length > 0">
-                    {{ showEnterprises ? '取消' : '切换' }}
-                  </a>
+                  <!--<span class="member-text" :title="enterprise.enName"><i class="fa fa-map-marker"></i>&nbsp;{{ enterprise.uu?enterprise.enName: user.data.userName + '（个人账户）' }}</span>-->
+                  <!--<a class="pull-right" @click="toggleEnterprises()" v-if="user.data.enterprises && user.data.enterprises.length > 0">-->
+                    <!--{{ showEnterprises ? '取消' : '切换' }}-->
+                  <!--</a>-->
+                  <span>切换至以下账户：</span>
+                  <!--<input type="text" placeholder="请输入公司名称" v-model="keyword"><span class="search-enterprise" @click="searchEnterprise()">搜索</span>-->
                 </li>
                 <li class="menu-item"
                     v-for="en in user.data.enterprises"
-                    v-if="showEnterprises && en.uu!=enterprise.uu">
+                    v-if="en.uu!=enterprise.uu">
                   <a @click="switchEnterprise(en)" :title="en.enName">{{ en.enName }}</a>
                 </li>
-                <li class="menu-item"  v-if="showEnterprises && enterprise.uu">
+                <li class="menu-item"  v-if="enterprise.uu">
                   <a @click="switchEnterprise({uu: 0})"><span v-text="user.data.userName"></span>（个人账户）</a>
                 </li>
               </ul>
@@ -56,11 +58,14 @@
 <script>
   export default {
     name: 'header',
-    data () {
-      return {
-        showEnterprises: false
-      }
-    },
+//    data () {
+//      return {
+//        showEnterprises: false
+//        searchEnterpriseArr: [],
+//        keyword: '',
+//        isSearching: false
+//      }
+//    },
     computed: {
       user () {
         return this.$store.state.option.user
@@ -100,12 +105,12 @@
           }
         })
       },
-      toggleEnterprises () {
-        this.showEnterprises = !this.showEnterprises
-      },
+//      toggleEnterprises () {
+//        this.showEnterprises = !this.showEnterprises
+//      },
       // 切换当前企业
       switchEnterprise (en) {
-        this.toggleEnterprises()
+//        this.toggleEnterprises()
         this.$http.get(`/user/authentication/${en.uu}`).then(() => {
           this.$store.dispatch('loadUserInfo')
 //          let href = window.location.href
@@ -142,9 +147,21 @@
           }
         }
       }
-    },
-    beforeMount () {
-      // this.$store.dispatch('loadUserInfo')
+//      searchEnterprise () {
+//        let key = this.keyword
+//        let enterprise = this.user.data.enterprises
+//        this.isSearching = true
+//        this.searchEnterpriseArr = []
+//        if (this.keyword === '') {
+//          this.isSearching = false
+//        } else {
+//          for (let i = 0; i < enterprise.length; i++) {
+//            if (enterprise[i].enName.indexOf(key) !== -1) {
+//              this.searchEnterpriseArr.push(enterprise[i])
+//            }
+//          }
+//        }
+//      }
     }
   }
 </script>
@@ -260,23 +277,52 @@
             }
 
             .dropdown-menu {
-              min-width: 220px;
-              margin-left: -1px;
-              border: $border;
-              border-top: none;
-              padding: 1em;
+              padding: 0;
               margin:0;
               border: none;
               border-radius: 0;
+              max-height: 330px;
+              overflow-y: auto;
+              right: unset;
+              background: #f6f6f6;
 
               .menu-item-first {
-                margin-bottom: 10px;
+                background: #eee;
+                padding: 0 12px;
+                line-height: 30px;
+                >span:nth-child(1) {
+                  cursor: default;
+                }
+                input {
+                  width: 174px;
+                  height: 24px;
+                  margin-left: 35px;
+                  background: #fff;
+                  border: 1px solid #5078cb;
+                  padding-left: 4px;
+                }
+                .search-enterprise {
+                  display: inline-block;
+                  width: 36px;
+                  height: 24px;
+                  color: #fff;
+                  background: #5078cb;
+                  text-align: center;
+                  line-height: 24px;
+                  cursor: pointer;
+                }
               }
 
               .menu-item {
-                line-height: 30px;
+                padding: 0 12px;
+                max-width: 300px;
                 a {
-                  color: $accent;
+                  color: #333;
+                  line-height: 30px;
+                  &:hover {
+                    color: #5078cb;
+                    text-decoration: none!important;
+                  }
                 }
               }
             }