|
|
@@ -1,10 +1,10 @@
|
|
|
<template>
|
|
|
<el-row>
|
|
|
<el-col :span="24">
|
|
|
- <el-card class="el-card-auto">
|
|
|
+ <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">添加应用</el-button>
|
|
|
+ <el-button style="font-size: 20px;float: right; padding: 3px 0" type="text" @click="childMethod()">新建应用</el-button>
|
|
|
</div>
|
|
|
<!-- <div class="appList">
|
|
|
<div class="typeTitle">OA</div>
|
|
|
@@ -43,13 +43,35 @@
|
|
|
</div>
|
|
|
</div> -->
|
|
|
<el-tabs v-model="activeName" @tab-click="handleClick">
|
|
|
- <el-tab-pane label="OA审批" name="first">
|
|
|
+ <el-tab-pane v-for="item in appList" :label="item.name" :name="item.type">
|
|
|
+ <div class="app-item" v-for="(childItem,index) in item.list" :key="index" @click="handleSelect(childItem)" @mouseover="showContent=index" @mouseleave="showContent=null">
|
|
|
+ <svg-icon :icon-class="childItem.icon" style="width: 40px;height: 40px"/>
|
|
|
+ {{ childItem.title }}
|
|
|
+ <div v-if="showContent==index" class="app-item-tools">
|
|
|
+ <!-- <el-popconfirm
|
|
|
+ title="确定删除吗？">
|
|
|
+ <i slot="reference" class="el-icon-delete-solid" @click="removeApp(index)"></i>
|
|
|
+ </el-popconfirm> -->
|
|
|
+ <i slot="reference" class="el-icon-s-tools" @click.stop="editApp(childItem)"></i>
|
|
|
+ <!-- <el-popover
|
|
|
+ placement="bottom"
|
|
|
+ width="200"
|
|
|
+ trigger="click"
|
|
|
+ content="这是一段内容,这是一段内容,这是一段内容,这是一段内容。">
|
|
|
+ <i slot="reference" class="el-icon-delete-solid"></i>
|
|
|
+ </el-popover> -->
|
|
|
+
|
|
|
+
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-tab-pane>
|
|
|
+ <!-- <el-tab-pane label="OA" name="first">
|
|
|
<div class="app-item" v-for="item in topMenus" @click="handleSelect(item)">
|
|
|
<svg-icon :icon-class="item.meta.icon"/>
|
|
|
{{ item.meta.title }}
|
|
|
</div>
|
|
|
</el-tab-pane>
|
|
|
- <el-tab-pane label="人事管理" name="second">
|
|
|
+ <el-tab-pane label="人事" name="second">
|
|
|
<div class="app-item" v-for="item in topMenus" @click="handleSelect(item)">
|
|
|
<svg-icon :icon-class="item.meta.icon"/>
|
|
|
{{ item.meta.title }}
|
|
|
@@ -66,7 +88,7 @@
|
|
|
<svg-icon :icon-class="item.meta.icon"/>
|
|
|
{{ item.meta.title }}
|
|
|
</div>
|
|
|
- </el-tab-pane>
|
|
|
+ </el-tab-pane> -->
|
|
|
</el-tabs>
|
|
|
</el-card>
|
|
|
</el-col>
|
|
|
@@ -78,7 +100,52 @@
|
|
|
export default {
|
|
|
data() {
|
|
|
return {
|
|
|
- activeName: 'first'
|
|
|
+ activeName: 'first',
|
|
|
+ showContent: null,
|
|
|
+ appList:[
|
|
|
+ {
|
|
|
+ name: 'OA',
|
|
|
+ type: 'first',
|
|
|
+ list: [
|
|
|
+ {
|
|
|
+ type:1,
|
|
|
+ path: 'https://www.baidu.com/',
|
|
|
+ title: '自定义应用',
|
|
|
+ icon: 'zidingyi',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ type:2,
|
|
|
+ path: '/',
|
|
|
+ title: '请假',
|
|
|
+ icon: 'qingjia',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ type:2,
|
|
|
+ path: '/',
|
|
|
+ title: '出差',
|
|
|
+ icon: 'chuchai',
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '人事',
|
|
|
+ type: 'second',
|
|
|
+ list: [],
|
|
|
+
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '财务',
|
|
|
+ type: 'third',
|
|
|
+ list: [],
|
|
|
+
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: 'CRM',
|
|
|
+ type: 'fourth',
|
|
|
+ list: [],
|
|
|
+
|
|
|
+ },
|
|
|
+ ]
|
|
|
};
|
|
|
},
|
|
|
computed: {
|
|
|
@@ -103,6 +170,13 @@ export default {
|
|
|
},
|
|
|
},
|
|
|
methods: {
|
|
|
+ childMethod() {
|
|
|
+ this.$parent.openAppList();
|
|
|
+ },
|
|
|
+ //编辑应用
|
|
|
+ editApp(item){
|
|
|
+ this.$parent.editApp(item);
|
|
|
+ },
|
|
|
// 菜单选择事件
|
|
|
handleSelect(item) {
|
|
|
let key = item.path;
|
|
|
@@ -123,8 +197,24 @@ export default {
|
|
|
},
|
|
|
};
|
|
|
</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;
|
|
|
@@ -150,13 +240,11 @@ export default {
|
|
|
justify-content: center;
|
|
|
align-items: center;
|
|
|
float: left;
|
|
|
- width: 180px;
|
|
|
+ width: 178px;
|
|
|
height: 150px;
|
|
|
color: #999093;
|
|
|
- // padding: 0 5px;
|
|
|
margin: 10px 10px 10px 10px;
|
|
|
- background-color: #e8f4ff;
|
|
|
- border-radius: 10%;
|
|
|
+ border-radius: 5px;
|
|
|
}
|
|
|
.app-item {
|
|
|
line-height: 50px;
|
|
|
@@ -168,8 +256,18 @@ export default {
|
|
|
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: #e8f4ff;
|
|
|
+ background-color: #FFFFFF;
|
|
|
+ box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
|
|
|
}
|
|
|
</style>
|
