From 5229a61ca5250e1bd24399258e05ada2e7c4253a Mon Sep 17 00:00:00 2001
From: 李林 <z1292839451@163.com>
Date: 星期四, 28 十二月 2023 11:26:01 +0800
Subject: [PATCH] 第三阶段
---
src/view/index.vue | 192 +++++++++++++++++++++++++++++++++++++----------
1 files changed, 150 insertions(+), 42 deletions(-)
diff --git a/src/view/index.vue b/src/view/index.vue
index 4ba58ec..1e2e81c 100644
--- a/src/view/index.vue
+++ b/src/view/index.vue
@@ -62,6 +62,16 @@
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 {
@@ -87,8 +97,8 @@
}
.left .box i {
- font-size: 32px;
- margin-bottom: 8px;
+ font-size: 28px;
+ margin-bottom: 4px;
}
.left .box div {
@@ -177,6 +187,10 @@
user-select: none;
flex-shrink: 0;
}
+
+ .tab:hover{
+ color: #3A7BFA;
+ }
.tab i {
font-size: 12px;
@@ -204,10 +218,36 @@
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">
+ <div class="all" @click="closeRightKey">
<div class="title">
<div class="logo">
<!-- <img src="../../static/img/logo 1.png" /> -->
@@ -221,17 +261,17 @@
</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">
+ <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">
+ <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)">
+ <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>
@@ -244,7 +284,7 @@
<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)">
+ @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>
@@ -252,10 +292,22 @@
<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="upIndex + '|' + index"
- v-show="com.k == tabActive">
+ <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>
@@ -280,103 +332,118 @@
menu: [{
k: 0,
v: "棣栭〉",
- i: "font icon-shouye",
+ i: "font icon-shouyefill",
self: true,
c: [{
k: 0,
v: "棣栭〉",
- i: "font icon-shouye",
+ i: "font icon-shouyefill",
u: "index-index"
}]
},
{
k: 2,
v: "鏁版嵁涓婃姤",
- i: "font icon-shouye",
+ i: "font icon-a-Group1118",
self: true,
c: [{
k: 2,
v: "鏁版嵁涓婃姤",
- i: "font icon-shouye",
- u: "index-index"
+ i: "font icon-a-Group1118",
+ u: "data-reporting",
+ p: "selectDataReportingList"
}]
},
{
k: 3,
v: "鏁版嵁缁熻",
- i: "font icon-shouye",
- self: true,
+ i: "font icon-a-Group1120",
+ p: "selectProductCountDtoPageList selectRegistrantCountDtoPageList",
c: [{
- k: 3,
- v: "鏁版嵁缁熻",
- i: "font icon-shouye",
- u: "index-index"
+ 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: 5,
v: "杩涚矇涓婃姤",
- i: "font icon-shouye",
+ i: "font icon-a-Group1122",
self: true,
c: [{
k: 5,
v: "杩涚矇涓婃姤",
- i: "font icon-shouye",
- u: "index-index"
+ i: "font icon-a-Group1122",
+ u: "fans-submit",
+ p: "selectFansSubmitList"
}]
},
{
k: 6,
v: "璐㈠姟涓婃姤",
- i: "font icon-shouye",
+ i: "font icon-a-Group1236",
self: true,
c: [{
k: 6,
v: "璐㈠姟涓婃姤",
- i: "font icon-shouye",
- u: "index-index"
+ i: "font icon-a-Group1236",
+ u: "finance-submit",
+ p: "selectFinanceSubmitList"
}]
},
{
k: 7,
v: "瑙掕壊绠＄悊",
- i: "font icon-shouye",
+ i: "font icon-a-Group1126",
self: true,
c: [{
k: 7,
v: "瑙掕壊绠＄悊",
- i: "font icon-shouye",
- u: "index-index"
+ i: "font icon-a-Group1126",
+ u: "role-manage",
+ p: "selectRoleLists"
}]
},
{
k: 4,
v: "鏁版嵁瀛楀吀",
- i: "font icon-shouye",
+ i: "font icon-odbc-full",
+ p: "selectCustomEnumLists selectProductEnumLists",
c: [{
k: 4,
v: "瀹㈡埛绠＄悊",
- i: "font icon-shouye",
- u: ""
+ i: "font icon-24gl-clipboardList",
+ u: "custom-enum",
+ p: "selectCustomEnumLists"
},
{
- k: 5,
- v: "鐥呯绠＄悊",
- i: "font icon-shouye",
- u: ""
+ k: 11,
+ v: "椤圭洰绠＄悊",
+ i: "font icon-24gl-clipboardList",
+ u: "product-enum",
+ p: "selectProductEnumLists"
}
]
},
{
k: 8,
v: "浜哄憳绠＄悊",
- i: "font icon-shouye",
+ i: "font icon-a-Group1124",
self: true,
c: [{
k: 8,
v: "浜哄憳绠＄悊",
- i: "font icon-shouye",
- u: "person-manage"
+ i: "font icon-a-Group1124",
+ u: "person-manage",
+ p: "selectUserList"
}]
}
],
@@ -386,15 +453,19 @@
tabs: [{
k: 0,
v: "棣栭〉",
- i: "font icon-shouye",
+ i: "font icon-a-Group1124",
u: "index-index"
}],
- upIndex: 0
+ 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) {
@@ -425,7 +496,7 @@
this.tabs = [{
k: 0,
v: " 棣栭〉",
- i: "font icon-shouye",
+ i: "font icon-a-Group1124",
u: "index-index"
}]
},
@@ -445,6 +516,43 @@
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
+ }
+ }
+ }
}
}
};
--
Gitblit v1.9.3