emis-frontend/src/components/BizNav/index.vue
2024-02-22 11:05:35 +08:00

152 lines
4.1 KiB
Vue

<template>
<div>
<!-- v-if="domainIdsOptions.length >0" -->
<div style="display:inline-flex;width: 100%;justify-content: space-between;padding:0px 10px;border-top: 1px solid #f6f6f6;">
<div style="width:100%" >
<el-dropdown @command="onSelectChangeDomainId" v-if="isShowBizNav" style="width:100%;background: white;height: 34px;line-height: 34px;font-size: 13px;border-radius: 0px 5px 0px 0px;">
<div class="el-dropdown-link" style="text-align: left;width:100%">
<span v-if="!domainLabel" style="color:lightslategray">快捷导航</span>
<span v-else>{{domainLabel}}</span>
<i class="el-icon-arrow-down el-icon--right" v-if="domainIdsOptions.length >0"></i>
</div>
<el-dropdown-menu v-if="domainIdsOptions.length >0" slot="dropdown">
<el-dropdown-item
class="region-item-style"
:command="item.value"
v-for="(item, index) in domainIdsOptions"
:key="index"
:title="item.label"
:class="{'selected':domainId==item.value}"
>
{{ item.label }}
</el-dropdown-item>
</el-dropdown-menu>
<el-dropdown-menu v-else slot="dropdown">
<div></div>
</el-dropdown-menu>
</el-dropdown>
</div>
<div class="quick-tool" style="line-height: 34px;">
<el-popover
placement="right"
width="200"
trigger="hover"
ref="popoverRef"
effect="light"
:show-arrow="false"
>
<div style="text-align: center;"> </div>
<span slot="reference">
<i class="icon iconfont icon-icon_menhukuaijiecaidan" ></i>
</span>
</el-popover>
</div>
</div>
</div>
</template>
<script>
import { constantRoutes } from "@/router";
import {checkRole} from '@/utils/permission'
import { listSysDomain } from "@/api/system/domain";
import Cookies from 'js-cookie'
export default {
data() {
return {
// 当前激活菜单的 index
currentIndex: undefined,
domainId:undefined,
domainLabel:undefined,
domainIdsOptions:[],
};
},
computed: {
// 所有的路由信息
routers() {
return this.$store.state.permission.topbarRouters;
},
},
mounted() {
if(checkRole(['admin'])){
this.initDomainList();
}
},
methods: {
initDomainList() {
// 读取 cookie
this.domainId=Cookies.get("BIZ_DOMAINID");
let queryParams = {
pageNum: 1,
pageSize: 1000
}
listSysDomain(queryParams).then(response => {
this.domainIdsOptions.push({value:"-1",label:"全部"})
response.rows.forEach(item =>{
var optItem={value:item.id,label:item.name};
this.domainIdsOptions.push(optItem)
});
if(this.domainId!=undefined){
this.onSelectChangeDomainId(this.domainId);
}
});
},
isShowBizNav() {
if(checkRole(['admin'])){
return true;
}else{
return false;
}
},
onSelectChangeDomainId(val){
Cookies.set("BIZ_DOMAINID", val)
this.domainId=val;
if(this.domainId==-1){
this.$store.commit("SET_SIDEBAR_ROUTERS", this.routers);
this.domainLabel=''
}
else{
for (var i = 0; i < this.domainIdsOptions.length; i++) {
if (this.domainIdsOptions[i].value == val) {
this.domainLabel = this.domainIdsOptions[i].label;
}
}
var routes = [];
this.routers.map((item) => {
if (this.domainId == item.domainId) {
routes.push(item);
}
});
this.$store.commit("SET_SIDEBAR_ROUTERS", routes);
}
},
},
};
</script>
<style scoped lang="scss">
.selected{
color:red;
}
.quick-tool {
cursor: pointer;
padding-right: 8px;
i {
color:#8493a2;
font-size: 20px;
}
i:hover{
color: #0027ff;
font-weight: 600;
}
}
</style>