<style scoped>
|
.all {
|
width: 100vw;
|
height: 100vh;
|
background-size: 100% 100%;
|
display: flex;
|
flex-wrap: wrap;
|
}
|
|
.title {
|
width: 100%;
|
height: 58px;
|
display: flex;
|
align-items: center;
|
padding: 0 30px;
|
}
|
|
.logo {
|
width: 130px;
|
}
|
|
.logo img {
|
width: 100%;
|
height: 100%;
|
}
|
|
.title .label {
|
font-size: 16px;
|
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 - 58px - 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: 12px 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: 28px;
|
margin-bottom: 4px;
|
}
|
|
.left .box div {
|
font-size: 14px;
|
}
|
|
.small_menu {
|
color: #666;
|
}
|
|
.small_menu .active_p {
|
color: #3A7BFA;
|
}
|
|
.small_menu p {
|
padding: 12px 15px;
|
cursor: pointer;
|
}
|
|
.small_menu p:hover {
|
background-color: rgba(0, 0, 0, 0.05);
|
}
|
|
.small_menu i {
|
font-size: 16px;
|
}
|
|
.small_menu span {
|
font-size: 14px;
|
}
|
|
.right {
|
height: calc(100vh - 58px);
|
transition: .3s;
|
}
|
|
.tag {
|
width: 100%;
|
height: 36px;
|
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: 18px;
|
cursor: pointer;
|
margin: 0 8px;
|
}
|
|
.tabs {
|
min-width: calc(100% - 68px);
|
height: 100%;
|
align-items: center;
|
display: flex;
|
overflow-x: auto;
|
}
|
|
.tab {
|
cursor: pointer;
|
font-size: 14px;
|
margin: 0 8px;
|
line-height: 32px;
|
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 - 94px);
|
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;
|
}
|
|
.right_key_menu li {
|
list-style-type: none;
|
padding: 5px 0;
|
padding-left: 10px;
|
font-size: 0.9rem;
|
transition: .5s;
|
cursor: pointer;
|
}
|
|
.right_key_menu li i{
|
margin-right: 20px;
|
}
|
|
.right_key_menu li:hover {
|
background-color: #dedede;
|
}
|
</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">山东胜云数据管理系统</div>
|
<div class="user">
|
<el-avatar :size="26">{{ userName.substring(0, 1) }}</el-avatar>
|
<span>{{ userName }}</span>
|
<img src="../../static/img/退出.png" @click="out" />
|
</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" width="90" 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>{{ a.v }}</div>
|
</div>
|
<div class="small_menu">
|
<p v-for="(b, bi) in a.c" :key="bi" :class="activeP == b.k ? 'active_p' : ''" @click="addTab(b, a.k)" v-if="getPower(b.p)">
|
<i :class="b.i"></i>
|
<span>{{ b.v }}</span>
|
</p>
|
</div>
|
</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 0'}">
|
<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;
|
});
|
export default {
|
components: comObj,
|
data() {
|
return {
|
userName: "value",
|
leftOpen: true,
|
menu: [{
|
k: 0,
|
v: "首页",
|
i: "font icon-shouyefill",
|
self: true,
|
c: [{
|
k: 0,
|
v: "首页",
|
i: "font icon-shouyefill",
|
u: "index-index"
|
}]
|
},
|
{
|
k: 2,
|
v: "数据上报",
|
i: "font icon-a-Group1118",
|
self: true,
|
c: [{
|
k: 2,
|
v: "数据上报",
|
i: "font icon-a-Group1118",
|
u: "data-reporting",
|
p: "selectDataReportingList"
|
}]
|
},
|
{
|
k: 3,
|
v: "数据统计",
|
i: "font icon-a-Group1120",
|
p: "selectProductCountDtoPageList selectRegistrantCountDtoPageList",
|
c: [{
|
k: 9,
|
v: "项目数据统计",
|
i: "font icon-24gl-clipboardList",
|
u: "product-count",
|
p: "selectProductCountDtoPageList"
|
},{
|
k: 10,
|
v: "员工数据统计",
|
i: "font icon-24gl-clipboardList",
|
u: "registrant-count",
|
p: "selectRegistrantCountDtoPageList"
|
},{
|
k: 12,
|
v: "员工数据对比",
|
i: "font icon-24gl-clipboardList",
|
u: "data-comparison",
|
p: "selectDataComparisonDtoPageList"
|
}]
|
},
|
{
|
k: 5,
|
v: "进粉上报",
|
i: "font icon-a-Group1122",
|
self: true,
|
c: [{
|
k: 5,
|
v: "进粉上报",
|
i: "font icon-a-Group1122",
|
u: "fans-submit",
|
p: "selectFansSubmitList"
|
}]
|
},
|
{
|
k: 6,
|
v: "财务上报",
|
i: "font icon-a-Group1236",
|
self: true,
|
c: [{
|
k: 6,
|
v: "财务上报",
|
i: "font icon-a-Group1236",
|
u: "finance-submit",
|
p: "selectFinanceSubmitList"
|
}]
|
},
|
{
|
k: 7,
|
v: "角色管理",
|
i: "font icon-a-Group1126",
|
self: true,
|
c: [{
|
k: 7,
|
v: "角色管理",
|
i: "font icon-a-Group1126",
|
u: "role-manage",
|
p: "selectRoleLists"
|
}]
|
},
|
{
|
k: 4,
|
v: "数据字典",
|
i: "font icon-odbc-full",
|
p: "selectCustomEnumLists selectProductEnumLists",
|
c: [{
|
k: 4,
|
v: "客户管理",
|
i: "font icon-24gl-clipboardList",
|
u: "custom-enum",
|
p: "selectCustomEnumLists"
|
},
|
{
|
k: 11,
|
v: "项目管理",
|
i: "font icon-24gl-clipboardList",
|
u: "product-enum",
|
p: "selectProductEnumLists"
|
}
|
]
|
},
|
{
|
k: 8,
|
v: "人员管理",
|
i: "font icon-a-Group1124",
|
self: true,
|
c: [{
|
k: 8,
|
v: "人员管理",
|
i: "font icon-a-Group1124",
|
u: "person-manage",
|
p: "selectUserList"
|
}]
|
}
|
],
|
activeBox: 0,
|
activeP: 0,
|
tabActive: 0,
|
tabs: [{
|
k: 0,
|
v: "首页",
|
i: "font icon-a-Group1124",
|
u: "index-index"
|
}],
|
upIndex: 0,
|
activeIndex: 0,
|
power: []
|
};
|
},
|
created() {},
|
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) {
|
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) 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
|
}
|
}
|
}
|
}
|
}
|
};
|
</script>
|
