You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
254 lines
7.9 KiB
254 lines
7.9 KiB
<template>
|
|
<div>
|
|
<nav v-if="showHeader" class="m-navbar">
|
|
<div class="navbar__header">
|
|
<!-- @click="$router.push({ name: 'home' })" -->
|
|
<h1 class="navbar__brand">
|
|
<a class="navbar__brand-lg" href="javascript:;">{{ customerName }}</a>
|
|
<a class="navbar__brand-mini" href="javascript:;">{{
|
|
customerName.slice(0, 2)
|
|
}}</a>
|
|
</h1>
|
|
</div>
|
|
<div class="navbar__body">
|
|
<el-menu class="navbar__menu mr-auto" mode="horizontal">
|
|
<el-menu-item
|
|
index="1"
|
|
@click="$store.state.sidebarFold = !$store.state.sidebarFold"
|
|
>
|
|
<svg
|
|
class="icon-svg navbar__icon-menu navbar__icon-menu--switch"
|
|
aria-hidden="true"
|
|
>
|
|
<use xlink:href="#icon-outdent"></use>
|
|
</svg>
|
|
</el-menu-item>
|
|
|
|
<el-menu-item index="2" @click="refresh()">
|
|
<svg class="icon-svg navbar__icon-menu" aria-hidden="true">
|
|
<use xlink:href="#icon-sync"></use>
|
|
</svg>
|
|
</el-menu-item>
|
|
</el-menu>
|
|
|
|
<el-menu
|
|
:default-active="$store.state.mainShuju.activeName"
|
|
:unique-opened="true"
|
|
:collapseTransition="false"
|
|
mode="horizontal"
|
|
class="navbar__menu mr-auto z-div"
|
|
>
|
|
<!-- <el-menu-item index="index" @click="toIndexPage">
|
|
<span>首页</span>
|
|
</el-menu-item> -->
|
|
|
|
<template v-for="(menu, idx) in $store.state.mainShuju.menuList">
|
|
<li
|
|
class="sub-menu"
|
|
:class="
|
|
$store.state.mainShuju.activeName == menu.id ? 'z-on' : ''
|
|
"
|
|
v-if="menu.children"
|
|
:key="menu.id"
|
|
@click="gotoRouteHandle(menu.id, idx)"
|
|
>
|
|
<span>{{ menu.name }}</span>
|
|
<div class="sub-menu-list">
|
|
<div
|
|
:class="
|
|
$store.state.mainShuju.activeName == subMenu.id
|
|
? 'z-on'
|
|
: ''
|
|
"
|
|
:key="subMenu.id"
|
|
@click="gotoRouteHandle(subMenu.id, subIndex)"
|
|
v-for="(subMenu, subIndex) in menu.children"
|
|
>
|
|
{{ subMenu.name }}
|
|
</div>
|
|
</div>
|
|
</li>
|
|
<el-menu-item
|
|
v-else
|
|
:key="menu.id"
|
|
:menu="menu"
|
|
:index="menu.id"
|
|
@click="gotoRouteHandle(menu.id, idx)"
|
|
>
|
|
<span>{{ menu.name }}</span>
|
|
</el-menu-item>
|
|
</template>
|
|
</el-menu>
|
|
|
|
<el-menu class="navbar__menu" mode="horizontal">
|
|
<!-- <el-menu-item index="1">
|
|
<el-dropdown placement="bottom"
|
|
:show-timeout="0">
|
|
<el-button size="mini">{{ $t('_lang') }}</el-button>
|
|
<el-dropdown-menu slot="dropdown">
|
|
<el-dropdown-item v-for="(val, key) in i18nMessages"
|
|
:key="key"
|
|
@click.native="$i18n.locale = key">{{ val._lang }}</el-dropdown-item>
|
|
</el-dropdown-menu>
|
|
</el-dropdown>
|
|
</el-menu-item> -->
|
|
<!-- <el-menu-item index="2">
|
|
<a href="//www.renren.io/"
|
|
target="_blank">
|
|
<svg class="icon-svg navbar__icon-menu"
|
|
aria-hidden="true">
|
|
<use xlink:href="#icon-earth"></use>
|
|
</svg>
|
|
</a>
|
|
</el-menu-item> -->
|
|
<el-menu-item index="3" @click="fullscreenHandle()">
|
|
<svg class="icon-svg navbar__icon-menu" aria-hidden="true">
|
|
<use xlink:href="#icon-fullscreen"></use>
|
|
</svg>
|
|
</el-menu-item>
|
|
|
|
<el-menu-item index="4" class="navbar__avatar">
|
|
<el-dropdown placement="bottom" :show-timeout="0">
|
|
<span class="el-dropdown-link">
|
|
<img src="~@/assets/img/staff-default-avatar.png" />
|
|
<span>{{ $store.state.user.realName }}</span>
|
|
<i class="el-icon-arrow-down"></i>
|
|
</span>
|
|
<el-dropdown-menu slot="dropdown">
|
|
<el-dropdown-item @click.native="updatePasswordHandle()">{{
|
|
$t("updatePassword.title")
|
|
}}</el-dropdown-item>
|
|
<el-dropdown-item @click.native="logoutHandle()">{{
|
|
$t("logout")
|
|
}}</el-dropdown-item>
|
|
</el-dropdown-menu>
|
|
</el-dropdown>
|
|
</el-menu-item>
|
|
</el-menu>
|
|
</div>
|
|
<!-- 弹窗, 修改密码 -->
|
|
<update-password-work
|
|
v-if="updatePassowrdVisible"
|
|
ref="updatePassowrd"
|
|
></update-password-work>
|
|
</nav>
|
|
<nav v-else class="navbar main-line"></nav>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { messages } from "@/i18n";
|
|
import { mapGetters } from "vuex";
|
|
import screenfull from "screenfull";
|
|
import UpdatePasswordWork from "./main-navbar-update-password-work";
|
|
import { clearLoginInfo } from "@/utils";
|
|
export default {
|
|
inject: ["refresh"],
|
|
data() {
|
|
return {
|
|
showHeader: true,
|
|
i18nMessages: messages,
|
|
updatePassowrdVisible: false,
|
|
customerName: "",
|
|
};
|
|
},
|
|
components: {
|
|
UpdatePasswordWork,
|
|
},
|
|
created() {
|
|
// let platformToken = localStorage.getItem("showHeader") || "";
|
|
// if (
|
|
// typeof platformToken !== "undefined" &&
|
|
// platformToken !== "undefined" &&
|
|
// platformToken !== ""
|
|
// ) {
|
|
// this.showHeader = false;
|
|
// }
|
|
this.changeCustomerName();
|
|
this.$store.state.mainShuju.menuList = window.SITE_CONFIG["menuShujuList"];
|
|
},
|
|
computed: {},
|
|
methods: {
|
|
toIndexPage() {
|
|
this.$router.replace("/indexWork");
|
|
},
|
|
// 通过menuId与动态(菜单)路由进行匹配跳转至指定路由
|
|
gotoRouteHandle(menuId, idx) {
|
|
var route = window.SITE_CONFIG["dynamicMenuRoutesShuju"].filter(
|
|
(item) => item.meta.menuId === menuId
|
|
)[0];
|
|
if (route) {
|
|
this.$router.push({ name: route.name });
|
|
this.$store.state.mainShuju.activeName = menuId;
|
|
}
|
|
},
|
|
changeCustomerName() {
|
|
this.customerName =
|
|
localStorage.getItem("customerName") || "数据分析可视化平台";
|
|
},
|
|
// 全屏
|
|
fullscreenHandle() {
|
|
if (!screenfull.enabled) {
|
|
return this.$message({
|
|
message: this.$t("fullscreen.prompt"),
|
|
type: "warning",
|
|
duration: 500,
|
|
});
|
|
}
|
|
screenfull.toggle();
|
|
},
|
|
// 修改密码
|
|
updatePasswordHandle() {
|
|
this.updatePassowrdVisible = true;
|
|
this.$nextTick(() => {
|
|
this.$refs.updatePassowrd.init();
|
|
});
|
|
},
|
|
// 退出
|
|
logoutHandle() {
|
|
this.$confirm(
|
|
this.$t("prompt.info", { handle: this.$t("logout") }),
|
|
this.$t("prompt.title"),
|
|
{
|
|
confirmButtonText: this.$t("confirm"),
|
|
cancelButtonText: this.$t("cancel"),
|
|
type: "warning",
|
|
}
|
|
)
|
|
.then(() => {
|
|
//关闭所有标签页
|
|
// tabs, 关闭全部
|
|
this.$store.state.contentTabs = this.$store.state.contentTabs.filter(
|
|
(item) => item.name === "home2"
|
|
);
|
|
|
|
this.$http
|
|
.post("/auth/login/logout")
|
|
.then(({ data: res }) => {
|
|
if (res.code !== 0) {
|
|
//别处登陆时 退出不提示 直接跳登陆页即可
|
|
if (res.code !== 10007) {
|
|
this.$message.error(res.msg);
|
|
}
|
|
}
|
|
|
|
clearLoginInfo();
|
|
|
|
this.$router.push({ name: "login" });
|
|
})
|
|
.catch(() => {});
|
|
})
|
|
.catch(() => {});
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.main-line {
|
|
height: 50px;
|
|
background: #eeeeee;
|
|
}
|
|
</style>
|
|
|
|
<style lang="scss" src="@/assets/scss/main-shuju.scss" scoped></style>
|
|
|