zhangyanpeng
2020-01-21 c676e48cfcfae16cf276e75af57d0c79344bbcdc
src/views/Home.vue
@@ -1,83 +1,123 @@
<template>
   <div style="100%;height: 100%;margin: 0;">
      <el-container style="height: 100%; width: 100%; border: 1px solid #eee">
      <el-container style="height: 100vh; box-sizing: border-box;">
        <el-aside width="200px" style="background-color: rgb(238, 241, 246); ">
         <div style="width: 100%;height: 60px;"></div>
          <el-menu default-active="1"  @select="handleSelect">
            <el-menu-item index="0">
              <i class="el-icon-menu"></i>
              <span slot="title">首页</span>
            </el-menu-item>
            <div style="width: 100%;height: 60px;"></div>
            <el-menu
                class="el-menu-vertical-demo"
                :unique-opened="false"
                  :default-active="defaultActive"
                @select ="menuSelect"
                @open ="menuSelect"
                @close ="menuSelect"
                active-text-color="#409EFF"
                >
              <navigationItem v-for="menu in navList" :key="menu.path" :item="menu" />
            </el-menu>
            
            <el-submenu index="1">
             <template slot="title">
                       <i class="el-icon-menu"></i>
                       <span>项目管理</span>
                     </template>
              <el-menu-item-group>
                <el-menu-item index="1-1">信息广场</el-menu-item>
                <el-menu-item index="1-2">项目总览</el-menu-item>
                <el-menu-item index="1-3">项目分析</el-menu-item>
                <el-menu-item index="1-4">归档报告</el-menu-item>
              </el-menu-item-group>
            </el-submenu>
            <el-menu-item index="2">
              <i class="el-icon-menu"></i>
              <span slot="title">任务管理</span>
            </el-menu-item>
          </el-menu>
          <!-- <el-menu default-active="1"  @select="handleSelect">
               <el-menu-item index="0">
                  <i class="el-icon-menu"></i>
                  <span slot="title">首页</span>
               </el-menu-item>
                  <el-submenu index="1">
                     <template slot="title">
                        <i class="el-icon-menu"></i>
                        <span>项目管理</span>
                     </template>
                     <el-menu-item-group>
                        <el-menu-item index="1-1">信息广场</el-menu-item>
                        <el-menu-item index="1-2">项目总览</el-menu-item>
                        <el-menu-item index="1-3">项目分析</el-menu-item>
                        <el-menu-item index="1-4">归档报告</el-menu-item>
                     </el-menu-item-group>
                  </el-submenu>
               <el-menu-item index="2">
                  <i class="el-icon-menu"></i>
                  <span slot="title">任务管理</span>
               </el-menu-item>
          </el-menu> -->
        </el-aside>
        
        <el-container>
          <el-header style="text-align: right; font-size: 15px;padding-right: 40px;">
            <i class="el-icon-user-solid"></i>
            <span>admin</span>
               <i class="el-icon-user-solid"></i>
               <span>admin</span>
          </el-header>
          
          <el-main>
            <router-view></router-view>
          <el-main style="background-color: #f7f8f9;">
               <router-view name="home"></router-view>
          </el-main>
        </el-container>
      </el-container>
   </div>
</template>
<script>
import navigationItem from '../components/menu/navigationItem.vue'
export default {
   components: {
     navigationItem
   },
  data() {
      return {
         breadcrumbItems:[],
         defaultActive: "",
         navList:[
            {
               title:"首页", path:"mine",children:[]
            },
           {
             title:"项目管理", path:"0_1",children:[
               {title:"信息广场", path:"project2",children:[]},
               {title:"项目总览", path:"Overview",children:[]},
               {title:"项目分析", path:"project3",children:[]},
               {title:"归档报告", path:"project4",children:[]},
             ]
           },
           {
             title:"任务管理", path:"0_2",children:[
               {title:"任务列表", path:"calendarTask",children:[]},
             ]
           }
         ],
      }
  },
   created() {
      let userId_ = localStorage.getItem('userId');
      if (!userId_) {
         this.$router.push('/login');
      }
      else {
         this.defaultActive = "mine";
         this.$router.push('/mine');
      }
   },
  methods: {
     handleSelect(key, keyPath){
             switch(key){
               case '0':
      menuSelect(index, a){
       let isPage = index.substring(0,2);
       if (isPage != "0_") {
         this.$router.push('/'+ index);
       }
      },
     /* handleSelect(key, keyPath){
         switch(key){
            case '0':
               this.$router.push('/mine');
               this.breadcrumbItems = ["首页"];
                 break;
               case '2':
                 this.$router.push('/project')
                  this.breadcrumbItems = ["首页"];
                 break;
               case '3':
                 this.$router.push('/Page3')
                 break;
             }
           },
               break;
            case '2':
               this.$router.push('/project')
               this.breadcrumbItems = ["首页"];
               break;
            case '3':
               this.$router.push('/Page3')
               break;
         }
      }, */
  }
};