.

src/components/contacts/searchMenu.vue

+<template>
+    <div class="searh-menu-container">
+        <el-input prefix-icon="el-icon-search" placeholder="请输入内容"></el-input>
+        <ul class="search-menu">
+            <li class="cpn-submenu" style="padding: 0;">
+                <div class="cpn-submenu_title">
+                    <i class="iconfont icon-2zuzhijiagou"></i>
+                    <span>品牌一</span>
+                </div>
+                <ul>
+                    <li class="menuitem cpn-submenu-item">
+                        <i class="iconfont icon-chengyuan"></i>
+                        <span>陈景良</span>
+                    </li>
+                    <li class="cpn-submenu">
+                        <div class="cpn-submenu_title">
+                            <i class="iconfont icon-tongshi-zuzhijiagou"></i>
+                            <span>人事部</span>
+                        </div>
+                        <ul>
+                            <li class="menuitem cpn-submenu-item">
+                                <i class="iconfont icon-chengyuan"></i>
+                                <span>陈景良</span>
+                            </li>
+                            <li class="cpn-submenu">
+                                <div class="cpn-submenu_title">
+                                    <i class="iconfont icon-tongshi-zuzhijiagou"></i>
+                                    <span>人事部</span>
+                                </div>
+                                <ul>
+                                    <li class="menuitem cpn-submenu-item">
+                                        <i class="iconfont icon-chengyuan"></i>
+                                        <span>陈景良</span>
+                                    </li>
+                                </ul>
+                            </li>
+                        </ul>
+                    </li>
+                </ul>
+            </li>
+        </ul>
+        <!-- <el-menu
+            class="search-menu"
+            @open="handleOpen"
+            @close="handleClose">
+            <el-submenu index="1">
+                <template slot="title">
+                    <i class="iconfont icon-2zuzhijiagou"></i>
+                    <span>品牌一</span>
+                </template>
+                <el-submenu index="1-1">
+                    <template slot="title">
+                        <i class="icon-tongshi-zuzhijiagou iconfont"></i>
+                        <span>选项4</span>
+                    </template>
+                    <el-menu-item index="1-1-1">
+                        <i class="iconfont icon-chengyuan"></i>
+                        <span>张三</span>
+                    </el-menu-item>
+                </el-submenu>
+            </el-submenu>
+        </el-menu> -->
+        
+    </div>
+</template>
+<script>
+    export default {
+       name: "searchMenu",
+       components: {},
+       props: {},
+       data: {
+           data: [
+               {
+                   brand_name: "江南布衣",
+                   brand_code: "001",
+                   brand_id: "jnby001",
+                   sort: 1,
+                   status: 1,
+
+               }
+           ]
+       },
+       created() {},
+       metods: {},
+       filter: {},
+       computed: {},
+       watch: {}
+    };
+</script>
+<style lang="scss">
+    .searh-menu-container {
+        width: 260px;
+        background: #eef1f8;
+        height: 100%;
+        min-height: 600px;
+        padding: 20px 15px;
+        .search-menu {
+            margin-top: 30px;
+            color: #606266;
+            font-size: 14px;
+            background: #EEF1F8;
+            .iconfont {
+                color: #409EFF;
+                font-size: 16px;
+                margin-right: 5px;
+            }
+            .cpn-submenu {
+                list-style: none;
+                margin: 0;
+            }
+            .cpn-submenu_title {
+                height: 36px;
+                line-height: 36px;
+                padding: 0 20px;
+                &:hover {
+                    background:#409EFF;
+                    color: #fff;
+                    .iconfont {
+                        color: #fff;
+                    }
+                }
+            }
+            .cpn-submenu-item {
+                height: 36px;
+                line-height: 36px;
+                padding: 0 40px;
+                &:hover {
+                    background: #409EFF;
+                    color: #fff;
+                    .iconfont {
+                        color: #fff;
+                    }
+                }
+            }
+        }
+        // .search-menu {
+        //     margin-top: 30px;
+        //     background: none;
+        //     border: none;
+        //     .el-submenu__title {
+        //         height: 36px;
+        //         line-height: 36px;
+        //         .iconfont {
+        //             font-size: 16px;
+        //             color: #409EFF;
+        //             margin-right: 5px;
+        //         }
+        //     }
+        //     .el-menu {
+        //         background: none;
+        //         .el-menu-item {
+        //             height: 36px;
+        //             line-height: 36px;
+        //             .iconfont {
+        //                 font-size: 16px;
+        //                 color: #409EFF;
+        //                 margin-right: 5px;
+        //             }
+        //         }
+        //     }
+        // }
+    }
+</style>
+
+

src/components/vue-office-header.vue

@@ -50,7 +50,7 @@
           {
             menuCode: null,
             menuName: "通讯录",
-            menuUrl: "/administrativeFrame",
+            menuUrl: "/administrativeEstrutura",
             parentCode: null,
             project: "office"
           },

src/views/contacts/administrativeFrame.vue

 <template>
-  <div class="administrative-wrap">
-    <div class="inline-block administrative-wrap__left common-wrap__left">
-
-    </div>
-    <div class="inline-block administrative-wrap__right common-wrap__right">
-
+    <div class="administrative-estrutura-container">
+        <search-menu></search-menu>
     </div>
-  </div>
 </template>
 <script>
-
-export default {
-  name: "administrativeFrame",
-  data() {
-    return {
-
-    }
-  },
-  computed: {
-
-  },
-  methods: {
-
-  },
-  mounted() {
-
-  },
-}
-
+    import searchMenu from "components/contacts/searchMenu";
+    export default {
+        name: "administrativeEstrutura",
+        components: {
+            searchMenu
+        }
+    };
 </script>
-<style lang="less" scoped>
-  .administrative-wrap {
-    width: 100%;
-    font-size: 0;
+<style lang="scss">
 
-    &__left {
-      width: 260px;
-      height: 690px;
-      vertical-align: top;
-      font-size: 14px;
-      background: rgba(238,241,248,1);
-      border-radius: 2px;
-    }
-
-    &__right {
-      width: calc(100% - 260px);
-      min-height: 690px;
-      padding: 24px;
-      vertical-align: top;
-      font-size: 14px;
-      -webkit-box-sizing: border-box;
-      -moz-box-sizing: border-box;
-      box-sizing: border-box;
-    }
-  }
 </style>
+
+

src/views/contacts/administrativeFrame1.vue

+<template>
+  <div class="administrative-wrap">
+    <div class="inline-block administrative-wrap__left common-wrap__left">
+
+    </div>
+    <search-menu></search-menu>
+    <div class="inline-block administrative-wrap__right common-wrap__right">
+
+    </div>
+  </div>
+</template>
+<script>
+  import searchMenu from "components/contacts/searchMenu";
+  export default {
+    name: "administrativeFrame",
+    components: {
+      searchMenu
+    },
+    data() {
+      return {
+
+      }
+    },
+    computed: {
+
+    },
+    methods: {
+
+    },
+    mounted() {
+
+    },
+  };
+</script>
+<style lang="less" scoped>
+  .administrative-wrap {
+    width: 100%;
+    font-size: 0;
+
+    &__left {
+      width: 260px;
+      height: 690px;
+      vertical-align: top;
+      font-size: 14px;
+      background: rgba(238,241,248,1);
+      border-radius: 2px;
+    }
+
+    &__right {
+      width: calc(100% - 260px);
+      min-height: 690px;
+      padding: 24px;
+      vertical-align: top;
+      font-size: 14px;
+      -webkit-box-sizing: border-box;
+      -moz-box-sizing: border-box;
+      box-sizing: border-box;
+    }
+  }
+</style>

src/views/contacts/index.vue

@@ -21,25 +21,32 @@
 import topNav from 'components/nav/nav'
 export default {
   name: "contact",
+  components: {
+    topNav
+  },
   data() {
     return {
       projectName: 'gic-clique', // 当前项目名
       collapseFlag: false, // 折叠参数
       // 面包屑导航数据
-      navpath: [{
+      navpath: [
+        {
           name: '首页',
           path: '/'
         },
         {
-          name: '集团信息',
+          name: '通讯录',
           path: ''
+        },
+        {
+          name: "企业通讯录"
+        },
+        {
+          name: "行政架构"
         }
       ],
     }
   },
-  computed: {
-
-  },
   methods: {
     // 处理路由跳转
     toRouterView(val) {
@@ -66,10 +73,9 @@ export default {
   mounted() {
 
   },
+  computed: {
 
-  components: {
-    topNav
-  },
+  }
 }
 
 </script>

src/views/login/index.vue

@@ -73,12 +73,12 @@ export default {
       // 企业列表
       enterpriseList:[
         {
-          id: '1233',
+          id: '1231',
           src: require("../../assets/logo.png"),
           name: '达摩网络'
         },
         {
-          id: '12334',
+          id: '1232',
           src: require("../../assets/logo.png"),
           name: '达摩网络2'
         },
@@ -88,7 +88,7 @@ export default {
           name: '达摩网络'
         },
         {
-          id: '12334',
+          id: '1234',
           src: require("../../assets/logo.png"),
           name: '达摩网络2'
         }