<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 24px;
|
}
|
|
.logo {
|
width: 118px;
|
height: 40px;
|
}
|
|
.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;
|
}
|
.el-dropdown{
|
display: flex;
|
align-items: center;
|
color: #000;
|
cursor: pointer;
|
}
|
|
.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{
|
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;
|
border-radius: 50%;
|
}
|
|
.active_tab i:hover{
|
background-color: rgba(0, 0, 0, 0.08);
|
}
|
|
.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: 130px;
|
position: absolute;
|
top: 0;
|
left: 0;
|
display: none;
|
z-index: 9998;
|
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: 10px;
|
}
|
|
.right_key_menu li:hover {
|
background-color: #eeeeee;
|
}
|
|
.group {
|
font-size: 12px;
|
color: #ed940d;
|
background-color: transparent !important;
|
cursor: auto !important;
|
margin: 8px 12px;
|
}
|
|
.search_thing {
|
display: flex;
|
align-items: center;
|
height: 50px;
|
}
|
|
.search_label {
|
width: 90px;
|
font-size: 14px;
|
text-align: right;
|
}
|
|
.search_input {
|
width: calc(100% - 120px);
|
}
|
</style>
|
<style></style>
|
<template>
|
<div class="all" @click="closeRightKey">
|
<div class="title">
|
<div class="logo">
|
<img src="../../static/img/logo1.png" />
|
</div>
|
<div class="label">LIMS实验室管理系统</div>
|
<div class="user">
|
<el-dropdown trigger="click" @command="handleCommand">
|
<el-avatar :size="26">{{ userName.substring(0, 1) }}</el-avatar>
|
<span>{{ userName }}</span>
|
<el-dropdown-menu slot="dropdown">
|
<el-dropdown-item>修改密码</el-dropdown-item>
|
</el-dropdown-menu>
|
</el-dropdown>
|
<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 ref="popoverName" 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>
|
</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>
|
</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 @click="removeTab(activeIndex)"><i class="el-icon-close"></i>关闭</li>
|
<li @click="allDel"><i class="el-icon-delete"></i>关闭所有</li>
|
<li @click="rightDel(activeIndex)"><i class="el-icon-d-arrow-right"></i>关闭右侧页签</li>
|
<el-divider></el-divider>
|
<li @click="refreshTable"><i class="el-icon-refresh"></i>刷新</li>
|
</ul>
|
</el-card>
|
</el-col>
|
</div>
|
<el-dialog
|
title="修改密码"
|
:visible.sync="editVisible"
|
width="400px"
|
:before-close="handleClose">
|
<el-row>
|
<el-col class="search_thing" :span="24">
|
<div class="search_label"><span class="required-span">* </span>旧密码：</div>
|
<div class="search_input">
|
<el-input v-model="query.oldPassword" size="small" clearable show-password></el-input>
|
</div>
|
</el-col>
|
</el-row>
|
<el-row>
|
<el-col class="search_thing" :span="24">
|
<div class="search_label"><span class="required-span">* </span>新密码：</div>
|
<div class="search_input">
|
<el-input v-model="query.newPassWord" size="small" clearable show-password></el-input>
|
</div>
|
</el-col>
|
</el-row>
|
<span slot="footer" class="dialog-footer">
|
<el-button @click="handleClose">取 消</el-button>
|
<el-button type="primary" @click="handleEdit">确 定</el-button>
|
</span>
|
</el-dialog>
|
</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 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: [],
|
upIndex: 0,
|
activeIndex: 0,
|
power: [],
|
editVisible:false,
|
query:{}
|
};
|
},
|
created() {
|
this.menu = menus.menu
|
},
|
mounted() {
|
this.userName = JSON.parse(localStorage.getItem("user")).name;
|
this.power = JSON.parse(sessionStorage.getItem('power'))
|
this.tabs = JSON.parse(localStorage.getItem('tabs'))
|
if (this.tabs == undefined || this.tabs == null) {
|
this.tabs = [{
|
k: 0,
|
v: "个人首页",
|
i: "font icon-a-Group1124",
|
u: "index-index"
|
}]
|
}
|
this.tabActive = JSON.parse(localStorage.getItem('tabActive'))
|
if (this.tabActive == undefined || this.tabActive == null) {
|
this.tabActive = 0
|
}
|
this.activeP = JSON.parse(localStorage.getItem('activeP'))
|
if (this.activeP == undefined || this.activeP == null) {
|
this.activeP = 0
|
}
|
this.activeBox = JSON.parse(localStorage.getItem('activeBox'))
|
if (this.activeBox == undefined || this.activeBox == null) {
|
this.activeBox = 0
|
}
|
this.getPower()
|
},
|
methods: {
|
saveClick(){
|
localStorage.setItem('tabs', JSON.stringify(this.tabs))
|
localStorage.setItem('tabActive', JSON.stringify(this.tabActive))
|
localStorage.setItem('activeP', JSON.stringify(this.activeP))
|
localStorage.setItem('activeBox', JSON.stringify(this.activeBox))
|
},
|
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);
|
}
|
this.$refs['popoverName'].forEach(a=>{
|
a.doClose()
|
})
|
this.saveClick()
|
},
|
removeTab(index) {
|
this.tabs.splice(index, 1);
|
let data = this.tabs[this.tabs.length - 1]
|
this.upTabActive(data.k)
|
},
|
rightDel(index){
|
for (var i = this.tabs.length - 1; i > index; i--) {
|
this.tabs.splice(i, 1);
|
}
|
let data = this.tabs[this.tabs.length - 1]
|
this.upTabActive(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"
|
}]
|
this.saveClick()
|
},
|
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
|
}
|
})
|
}
|
this.saveClick()
|
},
|
out() {
|
sessionStorage.clear();
|
localStorage.removeItem("autoenter");
|
localStorage.removeItem("tabs")
|
localStorage.removeItem("tabActive")
|
localStorage.removeItem("activeP")
|
localStorage.removeItem("activeBox")
|
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
|
},
|
// 修改密码-打开弹窗
|
handleCommand(e){
|
this.editVisible = true;
|
},
|
handleEdit(){
|
if (!this.query.oldPassword) {
|
this.$message.error('请填写旧密码')
|
return
|
}
|
if (!this.query.newPassWord) {
|
this.$message.error('请填写旧密码')
|
return
|
}
|
this.$axios.post(this.$api.user.upUserPassword, {...this.query}).then(res => {
|
if (res.code == 201) {
|
this.$message.error('修改失败')
|
return
|
}
|
this.$message.success('修改成功')
|
this.editVisible = false
|
this.query = {}
|
this.out();
|
})
|
},
|
handleClose(){
|
this.editVisible = false
|
this.query = {}
|
}
|
}
|
};
|
</script>
|
