From 8d817b3847f9a96850c1a28f7923940697df7235 Mon Sep 17 00:00:00 2001
From: 李林 <z1292839451@163.com>
Date: 星期一, 26 二月 2024 02:12:35 +0800
Subject: [PATCH] 框架搭建
---
src/view/index.vue | 264 ++++++++++++++++++----------------------------------
1 files changed, 94 insertions(+), 170 deletions(-)
diff --git a/src/view/index.vue b/src/view/index.vue
index 90e3a44..40bd6df 100644
--- a/src/view/index.vue
+++ b/src/view/index.vue
@@ -9,7 +9,7 @@
.title {
width: 100%;
- height: 58px;
+ height: 48px;
display: flex;
align-items: center;
padding: 0 30px;
@@ -25,7 +25,7 @@
}
.title .label {
- font-size: 16px;
+ font-size: 14px;
text-align: center;
width: calc(100% - 130px - 200px);
}
@@ -54,7 +54,7 @@
}
.left {
- height: calc(100vh - 58px - 40px);
+ height: calc(100vh - 48px - 40px);
background-color: #3A7BFA;
display: flex;
align-items: center;
@@ -78,7 +78,7 @@
color: #fff;
width: 68px;
height: 68px;
- margin: 12px 0;
+ margin: 8px 0;
cursor: pointer;
display: flex;
align-items: center;
@@ -97,12 +97,12 @@
}
.left .box i {
- font-size: 28px;
+ font-size: 24px;
margin-bottom: 4px;
}
.left .box div {
- font-size: 14px;
+ font-size: 12px;
}
.small_menu {
@@ -113,13 +113,13 @@
color: #3A7BFA;
}
- .small_menu p {
- padding: 12px 15px;
+ .small_menu .p {
+ padding: 6px 10px;
cursor: pointer;
}
- .small_menu p:hover {
- background-color: rgba(0, 0, 0, 0.05);
+ .small_menu .p:hover {
+ color: #3A7BFA;
}
.small_menu i {
@@ -127,17 +127,17 @@
}
.small_menu span {
- font-size: 14px;
+ font-size: 12px;
}
.right {
- height: calc(100vh - 58px);
+ height: calc(100vh - 48px);
transition: .3s;
}
.tag {
width: 100%;
- height: 36px;
+ height: 32px;
background: rgb(255, 255, 255);
opacity: 0.8;
box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.1);
@@ -163,7 +163,7 @@
.tag>.el-icon-s-unfold,
.el-icon-s-fold,
.el-icon-delete {
- font-size: 18px;
+ font-size: 16px;
cursor: pointer;
margin: 0 8px;
}
@@ -174,21 +174,26 @@
align-items: center;
display: flex;
overflow-x: auto;
+ overflow-y: hidden;
+ }
+
+ .tabs::-webkit-scrollbar {
+ height: 4px;
}
.tab {
cursor: pointer;
- font-size: 14px;
+ font-size: 12px;
margin: 0 8px;
- line-height: 32px;
+ line-height: 28px;
transition: 0.3s;
border-top: 2px solid transparent;
border-bottom: 2px solid transparent;
user-select: none;
flex-shrink: 0;
}
-
- .tab:hover{
+
+ .tab:hover {
color: #3A7BFA;
}
@@ -208,7 +213,7 @@
}
.component_view {
- height: calc(100vh - 94px);
+ height: calc(100vh - 84px);
width: calc(100% - 52px);
padding: 0 26px;
background: rgb(245, 247, 251);
@@ -226,23 +231,32 @@
left: 0;
display: none;
z-index: 999;
+ padding: 0;
}
.right_key_menu li {
list-style-type: none;
- padding: 5px 0;
+ padding: 6px 0;
padding-left: 10px;
- font-size: 0.9rem;
- transition: .5s;
+ font-size: 12px;
+ transition: .3s;
cursor: pointer;
}
-
- .right_key_menu li i{
- margin-right: 20px;
+
+ .right_key_menu li i {
+ margin-right: 14px;
}
.right_key_menu li:hover {
- background-color: #dedede;
+ background-color: #eeeeee;
+ }
+
+ .group {
+ font-size: 12px;
+ color: #ed940d;
+ background-color: transparent !important;
+ cursor: auto !important;
+ margin: 8px 12px;
}
</style>
<style></style>
@@ -252,30 +266,38 @@
<div class="logo">
<!-- <img src="../../static/img/logo 1.png" /> -->
</div>
- <div class="label">灞变笢鑳滀簯鏁版嵁绠＄悊绯荤粺</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" />
+ <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)">
+ <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)">
+ <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>{{ a.v }}</div>
+ <div style="text-align: center;">{{ 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 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>
@@ -292,15 +314,15 @@
<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 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'}">
+ <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>
@@ -323,151 +345,34 @@
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: [{
- 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"
- }]
- }
- ],
+ menu: [],
activeBox: 0,
activeP: 0,
tabActive: 0,
tabs: [{
k: 0,
- v: "棣栭〉",
+ v: "涓汉棣栭〉",
i: "font icon-a-Group1124",
- u: "index-index"
+ u: "nullFace"
}],
upIndex: 0,
activeIndex: 0,
power: []
};
},
- created() {},
+ created() {
+ this.menu = menus.menu
+ },
mounted() {
this.userName = JSON.parse(localStorage.getItem("user")).name;
this.power = JSON.parse(sessionStorage.getItem('power'))
@@ -485,6 +390,7 @@
}
});
if (num == -1) {
+ if(ob.u == "") ob.u = "nullFace"
this.tabs.push(ob);
}
},
@@ -542,23 +448,41 @@
})
},
// 鍒锋柊琛ㄦ牸鍐呭
- refreshTable(){
+ refreshTable() {
var thing = this.tabs.splice(this.activeIndex, 1)
- setTimeout(()=>{
+ setTimeout(() => {
this.tabs.splice(this.activeIndex, 0, thing[0])
}, 0)
},
// 鏉冮檺鍒嗛厤
- getPower(p){
- if(p==undefined) return true
+ 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]) {
+ 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
}
}
};
--
Gitblit v1.9.3