From fb945f18dba1721de6c360482638578fed49f8c8 Mon Sep 17 00:00:00 2001
From: kevin jiang <kevin.jiang@kiisoo.com>
Date: Fri, 10 Apr 2020 14:52:05 +0800
Subject: [PATCH] =?UTF-8?q?=E8=8F=9C=E5=8D=95=E4=BF=AE=E6=94=B9=E3=80=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 kiisoo-ic-ui/src/pages/Home.vue | 109 ++++++++++++++++++++++----------
 1 file changed, 77 insertions(+), 32 deletions(-)

diff --git a/kiisoo-ic-ui/src/pages/Home.vue b/kiisoo-ic-ui/src/pages/Home.vue
index c4be200..55f4667 100644
--- a/kiisoo-ic-ui/src/pages/Home.vue
+++ b/kiisoo-ic-ui/src/pages/Home.vue
@@ -8,32 +8,13 @@
           <span>拓客营销</span>
         </div>
 
-        <Menu active-name="3" theme="dark" width="auto" :class="menuitemClasses" @on-select="onSelectLister" :accordion="true">
-          <Submenu name="1">
+        <Menu :active-name="selectedItemName" theme="dark" width="auto" :class="menuitemClasses" @on-select="onSelectLister" @on-open-change="onOpenChangeLister" :accordion="true">
+          <Submenu :name="item.id" v-for="item in menuList" :key="item.id">
             <template slot="title">
               <Icon type="ios-paper" />
-              设置管理
+              {{item.name}}
             </template>
-            <MenuItem name="1-1" to="/account/manager">账户管理</MenuItem>
-            <MenuItem name="1-2" to="/role/manager">角色管理</MenuItem>
-          </Submenu>
-          <Submenu name="2">
-            <template slot="title">
-              <Icon type="ios-people" />
-              门店推广
-            </template>
-            <MenuItem name="2-1" to="/shop/increase/manager">推广管理</MenuItem>
-            <MenuItem name="2-2" to="/shop/increase/data">推广数据</MenuItem>
-          </Submenu>
-
-          <Submenu name="3">
-            <template slot="title">
-              <Icon type="ios-paper" />
-              数据中心
-            </template>
-            <MenuItem name="3-1" to="/customer/view">客户数据</MenuItem>
-            <MenuItem name="3-2" to="/customer/data/detail">客户数据明细</MenuItem>
-
+            <MenuItem :name="cItem.id" :to="cItem.url" v-for="cItem in item.subMenuList" :key="cItem.id">{{cItem.name}}</MenuItem>
           </Submenu>
         </Menu>
       </Sider>
@@ -41,8 +22,8 @@
 <!--        <Header :style="{background: '#fff', boxShadow: '0 2px 3px 2px rgba(0,0,0,.1)'}"></Header>-->
         <Content :style="{padding: '0 16px 16px'}">
           <Breadcrumb :style="{margin: '16px 0'}">
-            <BreadcrumbItem>Home</BreadcrumbItem>
-            <BreadcrumbItem>Components</BreadcrumbItem>
+            <BreadcrumbItem>{{selectedMenu}}</BreadcrumbItem>
+            <BreadcrumbItem>{{selectedSubMenu}}</BreadcrumbItem>
           </Breadcrumb>
           <Card>
             <div :style="{'height':mHeight + 'px'}">
@@ -64,11 +45,69 @@ export default {
   data() {
     return {
       isCollapsed: false,
-      mHeight: 600
+      mHeight: 600,
+      selectedItemName: '',
+      selectedMenu: '',
+      selectedSubMenu: '',
+      menuList: [
+        {
+          id: 1,
+          'name': '设置管理',
+          'url': 'setting',
+          subMenuList: [
+            {
+              'id': 2,
+              'name': '账户管理',
+              'url': '/account/manager'
+            },
+            {
+              'id': 3,
+              'name': '角色管理',
+              'url': '/role/manager'
+            }
+          ]
+        },
+        {
+          id: 4,
+          'name': '门店推广',
+          'url': 'shop',
+          subMenuList: [
+            {
+              'id': 5,
+              'name': '推广管理',
+              'url': '/shop/increase/manager'
+            },
+            {
+              'id': 6,
+              'name': '推广数据',
+              'url': '/shop/increase/data'
+            }
+          ]
+        },
+        {
+          id: 7,
+          'name': '数据中心',
+          'url': 'data',
+          subMenuList: [
+            {
+              'id': 8,
+              'name': '客户数据',
+              'url': '/customer/view'
+            },
+            {
+              'id': 9,
+              'name': '客户数据明细',
+              'url': '/customer/data/detail'
+            }
+          ]
+        }
+      ]
     }
   },
   created() {
     this.mHeight = window.screen.availHeight - 22;
+
+    this.selectedItemName = this.menuList[0].subMenuList[0].id;
   },
   computed: {
     rotateIcon () {
@@ -85,6 +124,18 @@ export default {
     }
   },
   methods: {
+    onSelectLister (val) {
+      for (let i = 0; i < this.menuList.length; i++) {
+        let item = this.menuList[i];
+        for (let k = 0; k < item.subMenuList.length; k++) {
+          let cItem = item.subMenuList[k];
+          if (cItem.id === val) {
+            this.selectedMenu = item.name;
+            this.selectedSubMenu = cItem.name;
+          }
+        }
+      }
+    },
     //对象属性空检查
     checkParamBlank: function(obj){
       for(let param in obj){
@@ -98,12 +149,6 @@ export default {
       }else{
         return data;
       }
-    },
-    onSelectLister () {
-
-    },
-    collapsedSider () {
-      this.$refs.side1.toggleCollapse();
     }
   }
 }