yudao-ui-saas/src/components/AppList/index.vue

<template>
  <el-row>
    <el-col :span="24">
      <el-card class="el-card-auto" style="min-height:350px">
        <div slot="header" class="clearfix">
          <span style="font-size: 20px;">我的应用</span>
          <!-- <el-button style="font-size: 20px;float: right; padding: 3px 0" type="text"
            @click="childMethod()">新建应用</el-button> -->
        </div>
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane v-for="item, index in appList" :label="item.name" :name="item.name" :key="index">
            <div class="app-item" v-for="(childItem, index) in item.children" :key="index" v-if="childItem.name!='企业管理' && childItem.name!='审批中心'" @click="handleSelect(childItem)"
              @mouseover="showContent = index" @mouseleave="showContent = null" v-loading.fullscreen.lock="fullscreenLoading">
              <svg-icon :icon-class="childItem.icon" style="width: 40px;height: 40px" />
              {{ childItem.name }}
              <div v-if="showContent == index" class="app-item-tools">
                <!-- <i slot="reference" class="el-icon-s-tools" @click.stop="editApp(childItem)"></i> -->
              </div>
            </div>
          </el-tab-pane>
        </el-tabs>
      </el-card>
    </el-col>
  </el-row>
</template>

<script>
import {appList,getListByMenuId} from "@/api/home";
import router from '@/router'
import store from '@/store'
export default {
  data() {
    return {
      fullscreenLoading:false,
      activeName: 'OA',
      showContent: null,
      appList: [
        // {
        //   name: 'OA',
        //   children: [
        //     {
        //       type: 1,
        //       path: 'https://www.baidu.com/',
        //       name: '自定义应用',
        //       icon: 'zidingyi',
        //     },
        //     {
        //       type: 3,
        //       path: '/system/companyInfo',
        //       name: '系统管理',
        //       icon: 'chuchai',
        //     },
        //     {
        //       type: 99,
        //       path: '/oa/universal',
        //       name: '通用审批',
        //       icon: 'qingjia',
        //     },
        //     {
        //       type: 1,
        //       path: '/oa/entry',
        //       name: '入职审批',
        //       icon: 'qingjia',
        //     },
        //     {
        //       type: 2,
        //       path: '/oa/turnJust',
        //       name: '转正申请',
        //       icon: 'chuchai',
        //     },
        //     {
        //       type: 3,
        //       path: '/oa/renewal',
        //       name: '续签申请',
        //       icon: 'chuchai',
        //     },
        //     {
        //       type: 4,
        //       path: '/oa/staffQuit',
        //       name: '离职申请',
        //       icon: 'chuchai',
        //     },
           
        //     {
        //       type: 4,
        //       path: '/meeting/list',
        //       name: '会议室管理',
        //       icon: 'chuchai',
        //     },
        //   ],
        // },
        // {
        //   name: '人事',
        //   children: [],

        // },
        // {
        //   name: '财务',
        //   children: [],

        // },
        // {
        //   name: 'CRM',
        //   children: [],

        // },
      ]
    };
  },
  created(){
    this.getAppList();
  },
  methods: {
    getAppList() {
      appList().then(res => {
        let appDataList = [];
        res.data.map((item) => {
          // if (item.name != '其他') {
            appDataList.push(item);
          // }
        });
        this.appList = appDataList;
      })
    },
    childMethod() {
      this.$parent.openAppList();
    },
    //编辑应用
    editApp(item) {
      this.$parent.editApp(item);
    },
    // 菜单选择事件
    handleSelect(item) {
      console.log(item);
      let key = item.path;
      if(this.ishttp(key)){
        // http(s):// 路径新窗口打开
        window.open(key, "_blank");
      }else if(item.path.indexOf('oa') > -1){
        this.$router.push({ path: key });
      }else{
        this.fullscreenLoading = true;
        getListByMenuId(item.id).then(response => {
          let menuList =response.data;
          localStorage.setItem("parentId", item.parentId)
          localStorage.setItem("menus", JSON.stringify(menuList))
          store.dispatch('GenerateRoutes', menuList).then(accessRoutes => {
              console.log(accessRoutes);
              // 根据 roles 权限生成可访问的路由表
              router.addRoutes(accessRoutes) // 动态添加可访问路由表
            })
            setTimeout(() => {
              this.fullscreenLoading = false;
              this.$router.push({ path: item.component });
            }, 200);
        });
      }
     
    },
    handleClick(tab, event) {
      console.log(tab, event);
    },
    ishttp(url) {
      return url.indexOf('http://') !== -1 || url.indexOf('https://') !== -1
    }
  },
};
</script>
<style>
/*去掉切换时el-tab-pane底部的蓝色下划线*/
/* .el-tabs__active-bar {
    background-color: transparent !important;
  } */

/*去掉tabs底部的下划线*/
.el-tabs__nav-wrap::after {
  position: static !important;
}

.el-tabs__nav-wrap {
  padding: 0 30px !important;
}
</style>
<style lang="scss">
.el-icon-s-tools:hover {
  color: #00B899;
}

.typeTitle {
  font-size: 20px;
  font-weight: 400;
  color: #1f2f3d;
  margin-left: 10px;
  margin-bottom: 10px;
}

.el-card-auto {
  min-height: 100%;
  height: 100%;
  margin-bottom: 20px;
}

.el-card-auto>>>.el-card__body {
  height: 100%;
}

.el-tabs__item {
  font-size: 18px;
  font-weight: 500;
}

.app-item {
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  float: left;
  width: 178px;
  height: 150px;
  color: #999093;
  margin: 10px 10px 10px 10px;
  border-radius: 5px;
}

.app-item {
  line-height: 50px;
  font-size: 18px;
  list-style: none;
  cursor: pointer;
  position: relative;
  transition: border-color 0.3s, background-color 0.3s, color 0.3s;
  box-sizing: border-box;
  white-space: nowrap;
}

.app-item-tools {
  color: #838892;
  cursor: pointer;
  font-size: 16px;
  line-height: 16px;
  position: absolute;
  right: 10px;
  top: 10px;
}

.app-item:hover,
.app-item:focus {
  outline: none;
  background-color: #FFFFFF;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}
</style>