<style scoped>
|
.all {
|
width: 100vw;
|
height: 100vh;
|
background-size: 100% 100%;
|
display: flex;
|
flex-wrap: wrap;
|
}
|
|
.title {
|
width: 100%;
|
height: 48px;
|
display: flex;
|
align-items: center;
|
padding: 0 30px;
|
}
|
|
.logo {
|
width: 130px;
|
}
|
|
.logo img {
|
width: 100%;
|
height: 100%;
|
}
|
|
.title .label {
|
font-size: 14px;
|
text-align: center;
|
width: calc(100% - 130px - 200px);
|
}
|
|
.user {
|
width: 200px;
|
height: 100%;
|
display: flex;
|
align-items: center;
|
justify-content: right;
|
color: #000;
|
}
|
|
.user * {
|
margin: 0 5px;
|
}
|
|
.user img {
|
margin-left: 20px;
|
cursor: pointer;
|
width: 14px;
|
}
|
|
.user span {
|
font-size: 14px;
|
}
|
|
.left {
|
height: calc(100vh - 48px - 40px);
|
background-color: #3A7BFA;
|
display: flex;
|
align-items: center;
|
flex-direction: column;
|
padding: 20px 0;
|
transition: .3s;
|
overflow-y: auto;
|
user-select: none;
|
}
|
|
.left::-webkit-scrollbar {
|
width: 0px;
|
}
|
|
.left::-webkit-scrollbar-thumb {
|
background-color: transparent;
|
border-radius: 3px;
|
}
|
|
.left .box {
|
color: #fff;
|
width: 68px;
|
height: 68px;
|
margin: 8px 0;
|
cursor: pointer;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
flex-direction: column;
|
border-radius: 8px;
|
}
|
|
.left .box:active {
|
opacity: 0.8;
|
}
|
|
.left .active_box {
|
background-color: #fff;
|
color: #3A7BFA;
|
}
|
|
.left .box i {
|
font-size: 24px;
|
margin-bottom: 4px;
|
}
|
|
.left .box div {
|
font-size: 12px;
|
}
|
|
.small_menu {
|
color: #666;
|
}
|
|
.small_menu .active_p {
|
color: #3A7BFA;
|
}
|
|
.small_menu .p {
|
padding: 6px 10px;
|
cursor: pointer;
|
}
|
|
.small_menu .p:hover {
|
color: #3A7BFA;
|
}
|
|
.small_menu i {
|
font-size: 16px;
|
}
|
|
.small_menu span {
|
font-size: 12px;
|
}
|
|
.right {
|
height: calc(100vh - 48px);
|
transition: .3s;
|
}
|
|
.tag {
|
width: 100%;
|
height: 32px;
|
background: rgb(255, 255, 255);
|
opacity: 0.8;
|
box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.1);
|
display: flex;
|
align-items: center;
|
color: #999;
|
font-size: 14px;
|
}
|
|
.tag .el-icon-delete {
|
display: none;
|
}
|
|
.tag .el-icon-delete:hover {
|
color: #F56C6C;
|
font-weight: bold;
|
}
|
|
.tag:hover .el-icon-delete {
|
display: block;
|
}
|
|
.tag>.el-icon-s-unfold,
|
.el-icon-s-fold,
|
.el-icon-delete {
|
font-size: 16px;
|
cursor: pointer;
|
margin: 0 8px;
|
}
|
|
.tabs {
|
min-width: calc(100% - 68px);
|
height: 100%;
|
align-items: center;
|
display: flex;
|
overflow-x: auto;
|
overflow-y: hidden;
|
}
|
|
.tabs::-webkit-scrollbar {
|
height: 4px;
|
}
|
|
.tab {
|
cursor: pointer;
|
font-size: 12px;
|
margin: 0 8px;
|
line-height: 28px;
|
transition: 0.3s;
|
border-top: 2px solid transparent;
|
border-bottom: 2px solid transparent;
|
user-select: none;
|
flex-shrink: 0;
|
}
|
|
.tab:hover {
|
color: #3A7BFA;
|
}
|
|
.tab i {
|
font-size: 12px;
|
display: none;
|
}
|
|
.active_tab {
|
border-bottom: 2px solid #3A7BFA;
|
color: #3A7BFA;
|
}
|
|
.active_tab i {
|
display: inline;
|
color: #3A7BFA;
|
}
|
|
.component_view {
|
height: calc(100vh - 84px);
|
width: calc(100% - 52px);
|
padding: 0 26px;
|
background: rgb(245, 247, 251);
|
}
|
|
.com_index {
|
width: 100%;
|
height: 100%;
|
}
|
|
.right_key_menu {
|
width: 120px;
|
position: absolute;
|
top: 0;
|
left: 0;
|
display: none;
|
z-index: 999;
|
padding: 0;
|
}
|
|
.right_key_menu li {
|
list-style-type: none;
|
padding: 6px 0;
|
padding-left: 10px;
|
font-size: 12px;
|
transition: .3s;
|
cursor: pointer;
|
}
|
|
.right_key_menu li i {
|
margin-right: 14px;
|
}
|
|
.right_key_menu li:hover {
|
background-color: #eeeeee;
|
}
|
|
.group {
|
font-size: 12px;
|
color: #ed940d;
|
background-color: transparent !important;
|
cursor: auto !important;
|
margin: 8px 12px;
|
}
|
</style>
|
<style></style>
|
<template>
|
<div class="all" @click="closeRightKey">
|
<div class="title">
|
<div class="logo">
|
<!-- <img src="../../static/img/logo 1.png" /> -->
|
</div>
|
<div class="label">LIMS实验室管理系统</div>
|
<div class="user">
|
<el-avatar :size="26">{{ userName.substring(0, 1) }}</el-avatar>
|
<span>{{ userName }}</span>
|
<img src="../../static/img/退出.png" @click="out" title="退出账号" />
|
</div>
|
</div>
|
<div class="left" :style="`width: ${leftOpen?'92':'0'}px;`">
|
<div v-for="(a, ai) in menu" :key="ai">
|
<div :class="`box ${activeBox == a.c[0].k ? 'active_box' : ''}`" @click="addTab(a.c[0], -1)"
|
v-if="a.self && getPower(a.c[0].p)">
|
<i :class="a.i"></i>
|
<div>{{a.v}}</div>
|
</div>
|
<el-popover placement="right-start" trigger="click" v-if="a.self != true && getPower(a.p)">
|
<div :class="`box ${activeBox == a.k ? 'active_box' : ''}`" slot="reference">
|
<i :class="a.i"></i>
|
<div style="text-align: center;">{{ a.v }}</div>
|
</div>
|
<div class="small_menu">
|
<div v-for="(b, bi) in a.c" :key="bi">
|
<el-col v-if="groupMenu(b.g, a.c[bi - 1])" class="group">{{b.g}}</el-col>
|
<el-col :span="groupCount(b.g, a.c)" :class="activeP == b.k ? 'active_p p' : 'p'"
|
@click.native="addTab(b, a.k)" v-if="getPower(b.p)">
|
<p :title="b.v" style="white-space: nowrap;text-overflow: ellipsis;overflow: hidden;">
|
<i :class="b.i"></i>
|
<span>{{ b.v }}</span>
|
</p>
|
</el-col>
|
</div>
|
</div>
|
</el-popover>
|
</el-popover>
|
</div>
|
</div>
|
<div class="right" :style="`width: calc(100% - ${leftOpen?'92':'0'}px);`">
|
<div class="tag">
|
<i :class="`${leftOpen?'el-icon-s-unfold':'el-icon-s-fold'}`" @click="leftOpen = !leftOpen"></i>
|
<div class="tabs">
|
<div :class="`tab ${tabActive == a.k ? 'active_tab' : ''}`" v-for="(a, ai) in tabs" :key="ai"
|
@click="upTabActive(a.k)" @contextmenu.prevent="rightKeyMenu(ai, $event)">
|
{{ a.v }}
|
<i class="el-icon-close" @click="removeTab(ai)" v-if="tabActive!=0"></i>
|
</div>
|
</div>
|
<i class="el-icon-delete" @click="allDel" title="删除所有标签页"></i>
|
</div>
|
<div class="component_view">
|
<component class="com_index" v-for="(com, index) in tabs" :is="com.u" :key="com.k" v-show="com.k == tabActive"
|
:ref="`com-${com.k}`">
|
</component>
|
</div>
|
</div>
|
<!-- 右键菜单 -->
|
<div class="right_key_menu">
|
<el-col :span="24">
|
<el-card :body-style="{padding: '6px'}">
|
<ul>
|
<li style="color: red;" @click="removeTab(activeIndex)"><i class="el-icon-close"></i>关闭</li>
|
<el-divider></el-divider>
|
<li @click="refreshTable"><i class="el-icon-refresh"></i>刷新</li>
|
</ul>
|
</el-card>
|
</el-col>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
const requireComponent = require.context("../components/view", false, /\.vue/);
|
var comObj = {};
|
requireComponent.keys().forEach(fileName => {
|
var names = fileName
|
.split("/")
|
.pop()
|
.replace(".vue", "");
|
const componentConfig = requireComponent(fileName);
|
comObj[names] = componentConfig.default || componentConfig;
|
});
|
import menu from '../../static/js/menu.js';
|
import menus from '../../static/js/menu.js'
|
import nullFace from '../view/404.vue'
|
comObj['nullFace'] = nullFace
|
export default {
|
components: comObj,
|
data() {
|
return {
|
userName: "value",
|
leftOpen: true,
|
menu: [],
|
activeBox: 0,
|
activeP: 0,
|
tabActive: 0,
|
tabs: [{
|
k: 0,
|
v: "个人首页",
|
i: "font icon-a-Group1124",
|
u: "nullFace"
|
}],
|
upIndex: 0,
|
activeIndex: 0,
|
power: []
|
};
|
},
|
created() {
|
this.menu = menus.menu
|
},
|
mounted() {
|
this.userName = JSON.parse(localStorage.getItem("user")).name;
|
this.power = JSON.parse(sessionStorage.getItem('power'))
|
this.getPower()
|
},
|
methods: {
|
addTab(ob, self) {
|
this.activeBox = self == -1 ? ob.k : self
|
this.activeP = ob.k; //0
|
this.tabActive = ob.k; //0
|
let num = -1;
|
this.tabs.forEach((a, ai) => {
|
if (ob.k == a.k) {
|
num = a.k;
|
}
|
});
|
if (num == -1) {
|
if(ob.u == "") ob.u = "nullFace"
|
this.tabs.push(ob);
|
}
|
},
|
removeTab(index) {
|
this.tabs.splice(index, 1);
|
let data = this.tabs[this.tabs.length - 1]
|
this.activeP = data.k;
|
this.tabActive = data.k;
|
this.activeBox = data.k
|
},
|
allDel() {
|
this.activeBox = 0
|
this.activeP = 0
|
this.tabActive = 0
|
this.tabs = [{
|
k: 0,
|
v: " 首页",
|
i: "font icon-a-Group1124",
|
u: "index-index"
|
}]
|
},
|
upTabActive(num) {
|
this.tabActive = num;
|
this.activeP = num;
|
for (var i = 0; i < this.menu.length; i++) {
|
this.menu[i].c.forEach(b => {
|
if (b.k == num) {
|
this.activeBox = this.menu[i].k;
|
return
|
}
|
})
|
}
|
},
|
out() {
|
sessionStorage.clear();
|
localStorage.removeItem("autoenter");
|
this.$router.push("/enter");
|
},
|
// 关闭右键菜单
|
closeRightKey() {
|
$('.right_key_menu').css({
|
'display': 'none'
|
})
|
},
|
// 右键菜单
|
rightKeyMenu(id, e) {
|
if (id == 0) return
|
this.activeIndex = id
|
var x = e.clientX + 'px'
|
var y = e.clientY + 'px'
|
$('.right_key_menu').css({
|
'top': y,
|
'left': x,
|
'display': 'block'
|
})
|
},
|
// 刷新表格内容
|
refreshTable() {
|
var thing = this.tabs.splice(this.activeIndex, 1)
|
setTimeout(() => {
|
this.tabs.splice(this.activeIndex, 0, thing[0])
|
}, 0)
|
},
|
// 权限分配
|
getPower(p) {
|
if (p == undefined || p == '') return true
|
let str = p.split(' ')
|
for (var a = 0; a < str.length; a++) {
|
for (var i = 0; i < this.power.length; i++) {
|
if (this.power[i].menuMethod == str[a]) {
|
return true
|
}
|
}
|
}
|
},
|
// 菜单栏分类判断
|
groupMenu(g1, g2) {
|
if (g1 == undefined) return false
|
if (g2 == undefined) return true
|
if (g1 == g2.g) return false
|
return true
|
},
|
// 相同分类的菜单数量是否大于4
|
groupCount(g1, gs) {
|
if (g1 == undefined) return 24
|
let count = 0
|
gs.forEach(a=>{
|
if(a.g == g1) count++
|
})
|
if (count > 4) return 8
|
if (count > 1) return 12
|
if (count == 1) return 24
|
}
|
}
|
};
|
</script>
|
