<template>
|
<div id="vol-container" :class="['vol-theme-' + theme]">
|
<div class="vol-aside" :style="{ width: menuWidth + 'px' }">
|
<div class="header" :style="{ width: menuWidth - 1 + 'px' }">
|
<img v-show="!isCollapse" v-bind:src="logo" />
|
<i @click="toggleLeft" class="el-icon-s-fold collapse-menu" />
|
</div>
|
<div class="vol-menu">
|
<el-scrollbar style="height: 100%">
|
<VolMenu
|
:on-select="onSelect"
|
:enable="true"
|
:open-select="false"
|
:isCollapse="isCollapse"
|
:list="menuOptions"
|
></VolMenu>
|
</el-scrollbar>
|
</div>
|
</div>
|
<div class="vol-container" :style="{ left: menuWidth - 1 + 'px' }">
|
<div class="vol-header">
|
<span class="header-text"
|
>EVE_WCS</span
|
>
|
<div class="header-info">
|
<div class="h-link">
|
<a
|
href="javascript:void(0)"
|
@click="to(item)"
|
v-for="(item, index) in links"
|
:key="index"
|
v-bind:class="{ actived: selectId == item.id }"
|
>{{ item.text }}
|
</a>
|
</div>
|
<div>
|
<img class="user-header" :src="userImg" :onerror="errorImg" />
|
</div>
|
<div class="user">
|
<span>{{ userName }}</span>
|
<br />
|
<span id="index-date"></span>
|
</div>
|
<div class="settings">
|
<i
|
style="font-size: 20px"
|
class="el-icon-s-tools"
|
@click="drawer_model = true"
|
/>
|
</div>
|
</div>
|
</div>
|
<div class="vol-path">
|
<el-tabs
|
@tab-click="selectNav"
|
@tab-remove="removeNav"
|
type="border-card"
|
class="header-navigation"
|
v-model="selectId"
|
>
|
<el-tab-pane
|
v-model="selectId"
|
v-for="(item, navIndex) in navigation"
|
type="card"
|
:name="navIndex + ''"
|
:closable="navIndex > 0"
|
:key="navIndex"
|
class="header-nav-item"
|
:label="item.name"
|
></el-tab-pane>
|
</el-tabs>
|
</div>
|
<div class="vol-main" id="vol-main">
|
<el-scrollbar style="height: 100%" v-if="permissionInited">
|
<loading v-show="$store.getters.isLoading()"></loading>
|
<router-view
|
v-if="
|
!$route.meta ||
|
($route.meta && !$route.meta.hasOwnProperty('keepAlive'))
|
"
|
v-slot="{ Component }"
|
>
|
<keep-alive>
|
<component :is="Component" />
|
</keep-alive>
|
</router-view>
|
<router-view
|
v-if="$route.meta && $route.meta.hasOwnProperty('keepAlive')"
|
></router-view>
|
</el-scrollbar>
|
</div>
|
</div>
|
<el-drawer
|
title="选择主题"
|
v-model="drawer_model"
|
direction="rtl"
|
destroy-on-close
|
>
|
<div class="theme-selector">
|
<div
|
@click="changeTheme(item.name)"
|
class="item"
|
v-for="(item, index) in theme_color"
|
:key="index"
|
:style="{ background: item.color }"
|
>
|
<div
|
v-show="item.leftColor"
|
:style="{ background: item.leftColor }"
|
style="height: 100%; width: 20px"
|
class="t-left"
|
></div>
|
<div class="t-right"></div>
|
</div>
|
</div>
|
</el-drawer>
|
</div>
|
</template>
|
<style lang="less" scoped>
|
@import "./index/index.less";
|
</style>
|
<script>
|
import loading from "@/components/basic/RouterLoading";
|
import VolMenu from "@/components/basic/VolElementMenu.vue";
|
var imgUrl = require("@/assets/imgs/wcs_logo.png");
|
var $this;
|
var $interval;
|
var $indexDate;
|
import { defineComponent, ref, onMounted, getCurrentInstance } from "vue";
|
import { useRouter, useRoute } from "vue-router";
|
import store from "../store/index";
|
import http from "@/../src/api/http.js";
|
export default defineComponent({
|
components: {
|
VolMenu,
|
loading,
|
},
|
setup(props, context) {
|
const menuWidth = ref(200);
|
const isCollapse = ref(false);
|
const drawer_model = ref(false);
|
const theme_color = ref([
|
{ name: "blue", color: "rgb(45, 140, 240)" },
|
{ name: "blue2", color: "rgb(45, 140, 240)", leftColor: "#0068d6" },
|
{ name: "red", color: "rgb(237, 64, 20)" },
|
{ name: "red2", color: "rgb(237, 64, 20)", leftColor: "#a90000" },
|
{ name: "dark", color: "#272929" },
|
{ name: "orange", color: "#ff9900" },
|
{ name: "orange2", color: "#ff9900", leftColor: "rgb(232 141 5)" },
|
{ name: "green", color: "rgb(25, 190, 107)" },
|
{ name: "green2", color: "rgb(25, 190, 107)", leftColor: "#019e4f" },
|
{ name: "white", color: "#fff" },
|
]);
|
const links = ref([
|
//{ text: "大屏数据", path: "/bigdata", id: -3 },
|
// { text: "框架文档", path: "http://v2.volcore.xyz/document/guide", id: -2 },
|
// { text: "GitHub", path: "#", id: -3 },
|
{ text: "个人中心", path: "/UserInfo", id: -1 },
|
{ text: "安全退出", path: "/login", id: -4 },
|
]);
|
const errorImg = ref(
|
'this.src="' + require("@/assets/imgs/error-img.png") + '"'
|
);
|
const selectId = ref("0");
|
const userName = ref("--");
|
const userInfo = ref({});
|
const userImg = ref("");
|
const navigation = ref([{ name: "首页", id: 0, path: "/home" }]);
|
const logo = ref(imgUrl);
|
const theme = ref("blue2");
|
const menuOptions = ref([]);
|
const permissionInited = ref(false);
|
|
let _config = getCurrentInstance().appContext.config.globalProperties;
|
let router = useRouter();
|
const toggleLeft = () => {
|
isCollapse.value = !isCollapse.value;
|
menuWidth.value = isCollapse.value ? 63 : 200;
|
};
|
//2021.08.28开放手动折叠菜单方法
|
_config.menu = {
|
show() {
|
toggleLeft();
|
},
|
hide() {
|
toggleLeft();
|
},
|
};
|
const changeTheme = (name) => {
|
if (theme.value != name) {
|
theme.value = name;
|
}
|
localStorage.setItem("vol3_theme", name);
|
};
|
const to = (item) => {
|
/* 2020.07.31增加手动打开tabs*/
|
if (item.path == "#") {
|
window.open("https://github.com/cq-panda/Vue.NetCore");
|
return;
|
}
|
if (item.path.indexOf("http") != -1) {
|
window.open(item.path);
|
return;
|
}
|
if (typeof item == "string" || item.path == "/login") {
|
if (item == "/login" || item.path == "/login") {
|
store.commit("clearUserInfo", "");
|
window.location.href = "/";
|
return;
|
}
|
router.push({ path: item });
|
return;
|
}
|
if (item.path == "#") return;
|
open(item);
|
};
|
const open = (item, useRoute) => {
|
/* 2020.07.31增加手动打开tabs*/
|
let _index = navigation.value.findIndex((x) => {
|
return x.path == item.path;
|
});
|
if (_index == -1) {
|
navigation.value.push({
|
name: item.name || item.text || "无标题",
|
path: item.path,
|
query: item.query, //2021.03.20修复自定义二次打开$tabs时参数丢失的问题
|
});
|
//新打开的tab移至最后一个选项
|
selectId.value = navigation.value.length - 1 + "";
|
//return;
|
} else {
|
selectId.value = _index + "";
|
}
|
if (useRoute === undefined) {
|
//非标准菜单，记录最后一次跳转的页面，用于刷新
|
setItem(item);
|
router.push(item);
|
// this.$router.push(item);
|
}
|
};
|
const close = (path) => {
|
/* 2020.07.31增加手动打开tabs*/
|
let index = navigation.value.findIndex((x) => {
|
return x.path == path;
|
});
|
if (index == -1) {
|
return _config.$Message.error("未找到菜单");
|
}
|
removeNav(index);
|
};
|
const setItem = (item) => {
|
/* 2020.07.31增加手动打开tabs*/
|
localStorage.setItem(
|
window.location.origin + "_tabs",
|
JSON.stringify(item)
|
);
|
};
|
const getItem = () => {
|
/* 2020.07.31增加手动打开tabs*/
|
let nav = localStorage.getItem(window.location.origin + "_tabs");
|
return nav ? JSON.parse(nav) : null;
|
};
|
const selectNav = (item) => {
|
selectId.value = item.instance.props.name + "";
|
router.push({
|
path: navigation.value[item.index].path,
|
query: navigation.value[item.index].query,
|
});
|
};
|
const removeNav = (_index) => {
|
return new Promise(() => {
|
//关闭的当前项,跳转到前一个页面
|
if (selectId.value == _index + "") {
|
setItem(navigation.value[_index - 1]);
|
router.push({
|
path: navigation.value[_index - 1].path,
|
});
|
navigation.value.splice(_index, 1);
|
selectId.value = selectId.value - 1 + "";
|
return;
|
}
|
if (_index < selectId.value) {
|
selectId.value = selectId.value - 1 + "";
|
}
|
navigation.value.splice(_index, 1);
|
});
|
};
|
|
const getSelectMenuName = (id) => {
|
return menuOptions.value.find(function (x) {
|
return x.id == id;
|
});
|
};
|
const onSelect = (treeId) => {
|
/* 2020.07.31增加手动打开tabs*/
|
var item = getSelectMenuName(treeId);
|
open(item, false);
|
};
|
|
const created = () => {
|
let _theme = localStorage.getItem("vol3_theme");
|
if (_theme) {
|
theme.value = _theme;
|
}
|
|
let _userInfo = store.getters.getUserInfo();
|
if (_userInfo) {
|
userName.value = _userInfo.userName;
|
userImg.value = _config.base.getImgSrc(_userInfo.img, http.ipAddress);
|
}
|
Object.assign(_config.$tabs, { open: open, close: close });
|
|
http.get("api/menu/getTreeMenu", {}, true).then((data) => {
|
|
data.forEach((d) => {
|
d.path = (d.url || "").replace("/Manager", "");
|
d.to = (d.url || "").replace("/Manager", "");
|
if (!d.icon || d.icon.substring(0, 3) != "el-") {
|
d.icon = "el-icon-menu";
|
}
|
});
|
store.dispatch("setPermission", data);
|
menuOptions.value = data;
|
permissionInited.value = true;
|
|
//当前刷新是不是首页
|
if (router.currentRoute.value.path != navigation.value[0].path) {
|
//查找系统菜单
|
let item = menuOptions.value.find((x) => {
|
return x.path == router.currentRoute.value.path; //this.$route.path;
|
});
|
if (item) return onSelect(item.id);
|
//查找顶部快捷连接
|
item = links.value.find((x) => {
|
return x.path == router.currentRoute.value.path; //this.$route.path;
|
});
|
//查找最后一次跳转的页面
|
if (!item) {
|
item = getItem();
|
}
|
if (item) {
|
return open(item, false);
|
}
|
}
|
selectId.value = "0";
|
});
|
};
|
created();
|
return {
|
menuWidth,
|
isCollapse,
|
drawer_model,
|
theme_color,
|
errorImg,
|
userInfo,
|
userName,
|
userImg,
|
selectId,
|
navigation,
|
links,
|
onSelect,
|
selectNav,
|
removeNav,
|
logo,
|
theme,
|
menuOptions,
|
permissionInited,
|
changeTheme,
|
to,
|
toggleLeft,
|
};
|
},
|
mounted() {
|
let _date = showTime();
|
$indexDate = document.getElementById("index-date");
|
$indexDate.innerText = _date;
|
$interval = setInterval(function () {
|
$indexDate.innerText = showTime();
|
}, 1000);
|
},
|
destroyed() {
|
$this = null;
|
clearInterval($interval);
|
},
|
});
|
const week = new Array(
|
"星期一",
|
"星期二",
|
"星期三",
|
"星期四",
|
"星期五",
|
"星期六",
|
"星期日"
|
);
|
function showTime() {
|
let date = new Date();
|
let year = date.getFullYear();
|
let month = date.getMonth() + 1;
|
let day = date.getDate();
|
let hour = date.getHours();
|
let minutes = date.getMinutes();
|
let second = date.getSeconds();
|
|
return (
|
year +
|
"." +
|
(month < 10 ? "0" + month : month) +
|
"." +
|
(day < 10 ? "0" + day : day) + //202.08.08修复日期天数小于10时添加0
|
"" +
|
" " +
|
(hour < 10 ? "0" + hour : hour) +
|
":" +
|
(minutes < 10 ? "0" + minutes : minutes) +
|
":" +
|
(second < 10 ? "0" + second : second) +
|
" " + //2020.08.30修复首页日期星期天不显示的问题
|
(week[date.getDay() - 1] || week[6])
|
);
|
}
|
</script>
|
|
<style lang="less" scoped>
|
.vol-container .vol-path ::v-deep(.el-tabs__content) {
|
padding: 0;
|
}
|
</style>
|
<style >
|
.horizontal-collapse-transition {
|
transition: 0s width ease-in-out, 0s padding-left ease-in-out,
|
0s padding-right ease-in-out;
|
}
|
</style>
|
