zhangyanpeng
2020-02-11 050f815891df7c732e1ef64f1f32a83da495af11
src/views/Home.vue
@@ -1,83 +1,182 @@
<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>{{userName}}</span>
               <el-button size="small" type="primary" @click="Cancel">退 出</el-button>
          </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:[],
      }
  },
   created() {
      let userId_ = localStorage.getItem('userId');
      this.userName = localStorage.getItem('userName');
      let departId = localStorage.getItem('departId');
      if (!userId_ || !departId) {
         this.$router.push('/login');
      }
      else {
         this.defaultActive = "mine";
         this.$router.push('/mine');
         let type;
         if(departId == "100" || departId == "500") {
            type = departId;
             localStorage.setItem('assign', false);
         }else {
            type = "all";
            localStorage.setItem('assign', true);
         }
         this.getMenu(type);
      }
   },
  methods: {
     handleSelect(key, keyPath){
             switch(key){
               case '0':
      getMenu(userType) {
         let DayDatas = {
             all: [
               {'id': "110", 'title': "首页", 'path': "mine"}, //返回的数组字段
               {'id': "111", 'title': "项目管理", 'path': "0_111"}, //返回的数组字段
               {'id': "112", 'title': "任务管理", 'path': "0_112"},
               {'id': "111_1", 'title': "信息广场", 'path': 'square', 'parentId': "111"}, //
               {'id': "111_2", 'title': "项目总览", 'path': 'list', 'parentId': "111"}, //
               {'id': "111_3", 'title': "项目分析", 'path': 'Overview', 'parentId': "111"}, //
               // {'id': "111_4", 'title': "归档报告", 'path': 'project4', 'parentId': "111"}, //
               {'id': "112_1", 'title': "任务列表", 'path': 'calendarTask', 'parentId': "112"}, //
            ],
            100: [
                  {'id': "110", 'title': "首页", 'path': "mine"}, //返回的数组字段
                  {'id': "112", 'title': "任务管理", 'path': "0_112"},
                  {'id': "112_1", 'title': "任务列表", 'path': 'calendarTask', 'parentId': "112"}, //
               ],
            500: [
               {'id': "110", 'title': "首页", 'path': "mine"}, //返回的数组字段
               {'id': "112", 'title': "任务管理", 'path': "0_112"},
               {'id': "112_1", 'title': "任务列表", 'path': 'calendarTask', 'parentId': "112"}, //
            ],
         };
         let list = [];
         if (!userType || userType=='undefined') {
            list = DayDatas['all'];
         }
         else {
            list = DayDatas[userType];
         }
         let parId = "";
         let obj = {};
         let result = [];
         list.map(el => {
             obj[el.id] = el;
         })
         for(let i=0, len = list.length; i < len; i++) {
             let id = list[i].parentId;
             //设置显示字段
             list[i].title = list[i].title;
             if(id == parId || !id) {
                 if(!obj[list[i].id].children) {
                   obj[list[i].id].children = [];
                 }
                 result.push(list[i]);
                 continue;
             }
             if(obj[id].children) {
                 obj[id].children.push(list[i]);
             } else {
                 obj[id].children = [list[i]];
             }
         }
         this.navList = result;
      },
      Cancel() {
         this.$router.push('/login');
         localStorage.setItem('userId', undefined);
      },
      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;
         }
      }, */
  }
};