<template>
|
<div
|
style="display: flex; width: 100%; min-height: 100vh; height: 100%"
|
:class="['vol-theme-' + theme]"
|
>
|
<div style="flex: 1; height: 100%; display: flex; flex-direction: column">
|
<header style="height: 4.38rem; background-color: #006eff">
|
<div
|
style="
|
height: 4.38rem;
|
display: flex;
|
padding: 0 1.31rem 0 1.19rem;
|
justify-content: space-between;
|
align-items: center;
|
"
|
>
|
<div
|
style="
|
height: 100%;
|
display: flex;
|
align-items: center;
|
cursor: pointer;
|
"
|
@click="router.push({ path: '/' })"
|
>
|
<img
|
style="height: 3.38rem; width: 16rem"
|
src="@/assets/index/index-text.png"
|
alt=""
|
/>
|
</div>
|
<!-- 占位 -->
|
<span> </span>
|
<div style="display: flex; align-items: center">
|
<div
|
style="
|
height: 1.25rem;
|
display: flex;
|
align-items: center;
|
padding: 0 0.69rem 0 0;
|
"
|
>
|
<span
|
style="
|
color: rgb(255, 255, 255);
|
font-size: 0.88rem;
|
margin-right: 1rem;
|
"
|
@click="toDetail"
|
class="tetxsize"
|
>权限修改</span
|
>
|
|
<img
|
v-if="!isFullscreen"
|
style="
|
width: 1.88rem;
|
height: 1.88rem;
|
margin-right: 1.81rem;
|
cursor: pointer;
|
"
|
src="@/assets/screen.png"
|
alt=""
|
@click="screenonToggle"
|
/>
|
<img
|
v-if="isFullscreen"
|
style="
|
width: 1.88rem;
|
height: 1.88rem;
|
margin-right: 1.81rem;
|
cursor: pointer;
|
"
|
src="@/assets/exitscreen.png"
|
alt=""
|
@click="screenonToggle"
|
/>
|
<img
|
style="
|
width: 1.88rem;
|
height: 1.88rem;
|
margin-right: 1.81rem;
|
cursor: pointer;
|
"
|
src="@/assets/index/icon/home.png"
|
alt=""
|
@click="router.push({ path: '/index' })"
|
/>
|
<div>
|
<span
|
style="color: rgb(255, 255, 255); font-size: 0.88rem"
|
class="tetxsize"
|
>角色：{{ acountInfo.roleName }}</span
|
>
|
</div>
|
<div style="margin-left: 2rem">
|
<span
|
style="color: rgb(255, 255, 255); font-size: 0.88rem"
|
class="tetxsize"
|
>姓名：{{ acountInfo.userTrueName }}</span
|
>
|
</div>
|
<img
|
v-if="avatar"
|
@click="to(links[0])"
|
:src="avatar"
|
style="
|
cursor: pointer;
|
width: 2.19rem;
|
height: 2.19rem;
|
margin: 0 1.38rem 0 1.81rem;
|
border-radius: 50%;
|
overflow: hidden;
|
box-shadow: 0rem 0.13rem 0.38rem 0rem rgba(0, 0, 0, 0.4);
|
"
|
/>
|
<img
|
v-else
|
@click="to(links[0])"
|
src="@/assets/newLogo.png"
|
style="
|
cursor: pointer;
|
width: 2.19rem;
|
height: 2.19rem;
|
margin: 0 1.38rem 0 1.81rem;
|
border-radius: 50%;
|
overflow: hidden;
|
box-shadow: 0rem 0.13rem 0.38rem 0rem rgba(0, 0, 0, 0.4);
|
"
|
/>
|
|
<div
|
style="
|
cursor: pointer;
|
line-height: 1.25rem;
|
color: rgba(255, 255, 255, 1);
|
font-size: 0.88rem;
|
text-align: left;
|
"
|
class="tetxsize"
|
>
|
{{ userName }}
|
</div>
|
</div>
|
<img
|
@click="to(links[1])"
|
src="@/assets/index/loginout.png"
|
style="
|
cursor: pointer;
|
height: 1.44rem;
|
height: 1.44rem;
|
margin-left: 0.69rem;
|
"
|
alt=""
|
/>
|
</div>
|
</div>
|
</header>
|
<!-- 主界面 -->
|
<div class="main">
|
<!-- <el-scrollbar style="height: 100%;" v-if="permissionInited"> -->
|
<loading v-show="$store.getters.isLoading()"></loading>
|
|
<router-view
|
style="
|
height: calc(100vh - 4.38rem - 1.61rem);
|
width: calc(100vw - 1.61rem);
|
"
|
v-slot="{ Component }"
|
>
|
<component
|
:is="Component"
|
:key="$route.name"
|
v-if="
|
!$route.meta ||
|
($route.meta && !$route.meta.hasOwnProperty('keepAlive'))
|
"
|
/>
|
<!-- </keep-alive> -->
|
<component
|
:is="Component"
|
:key="$route.name"
|
v-if="$route.meta && $route.meta.hasOwnProperty('keepAlive')"
|
/>
|
<!-- <keep-alive> -->
|
</router-view>
|
<!-- </el-scrollbar> -->
|
</div>
|
</div>
|
</div>
|
</template>
|
<style lang="less" scoped>
|
@import "./index.less";
|
</style>
|
<script>
|
// import { getTreeMenu } from "@/api/menu.js";
|
import { baseUrl } from "../utils";
|
import loading from "../components/basic/RouterLoading.vue";
|
// import VolMenu from "@/components/basic/VolElementMenu.vue";
|
import Message from "@/views/index/Message.vue";
|
// import MessageConfig from "@/views/index/MessageConfig.js";
|
import screenfull from "screenfull";
|
import { setTimeOut } from "@/api/login";
|
|
var imgUrl = new URL("../assets/imgs/wms_x.png", import.meta.url).href;
|
var $this;
|
var $interval;
|
var $indexDate;
|
import {
|
defineComponent,
|
reactive,
|
ref,
|
watch,
|
onMounted,
|
onUnmounted,
|
getCurrentInstance,
|
} from "vue";
|
import { useRouter, useRoute } from "vue-router";
|
import store from "../store/index";
|
import http from "@/../src/api/http.js";
|
import { GetUserInfo } from "@/api/user";
|
|
export default defineComponent({
|
components: {
|
// VolMenu,
|
loading,
|
Message,
|
},
|
|
data() {
|
return {
|
allTabs: true,
|
leftTabs: true,
|
rightTabs: true,
|
otherTabs: true,
|
menuLeft: 0,
|
menuTop: 0,
|
avatar: store.state.userInfo.img
|
? baseUrl + store.state.userInfo.img
|
: store.state.userInfo.img, // 头像
|
userName: store.state.userInfo.userName,
|
// contextMenuVisible: false, // 右键关闭显/隐
|
};
|
},
|
setup(props, context) {
|
// 获取全局属性和方法
|
const { proxy } = getCurrentInstance();
|
|
// 菜单导航默认宽度
|
const menuWidth = ref(200);
|
const contextMenuVisible = ref(false);
|
const isCollapse = ref(false);
|
const drawer_model = ref(false);
|
const messageModel = 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: "/UserInfo", id: -1, icon: "el-icon-s-custom" },
|
{
|
text: "安全退出",
|
path: "/login",
|
id: -4,
|
icon: "el-icon-switch-button",
|
},
|
]);
|
const errorImg = ref(
|
'this.src="' +
|
new URL("../assets/imgs/error-img.png", import.meta.url).href +
|
'"'
|
);
|
const selectId = ref("1");
|
// 【首页】标签序号(当前右键选中的菜单)
|
const selectMenuIndex = ref("0");
|
//2022.05.29增加tab选项与菜单联动功能
|
const currentMenuId = ref(0);
|
const userName = ref("--");
|
const userInfo = ref({});
|
const visibleItem = reactive({
|
left: false,
|
right: false,
|
all: false,
|
other: false,
|
});
|
const userImg = ref("");
|
const navigation = reactive([
|
{ orderNo: "0", id: "1", name: "首页", path: "/home" },
|
]);
|
const logo = ref(imgUrl);
|
const theme = ref("blue2");
|
const menuOptions = ref([]);
|
const permissionInited = ref(false);
|
const messageList = reactive([]);
|
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) => {
|
console.log(item);
|
|
/* 2020.07.31增加手动打开tabs*/
|
if (item.path.indexOf("http") != -1) {
|
window.open(item.path);
|
return;
|
}
|
if (typeof item == "string" || item.path == "/login") {
|
if (item == "/login" || item.path == "/login") {
|
//确认是否退出
|
let tenantId = JSON.parse(localStorage.getItem("user")).tenantId;
|
console.log("退出登录", store.state);
|
setTimeOut({
|
account: store.state.userInfo.userName,
|
});
|
store.commit("clearUserInfo", "");
|
window.location.href = "/#/login?tenantId=" + tenantId;
|
|
return;
|
}
|
router.push({ path: item });
|
return;
|
}
|
if (item.path == "#") return;
|
open(item);
|
};
|
// 管理 路由跳转
|
const toDetail = (row) => {
|
router.push("/sysMenu");
|
};
|
const open = (item, useRoute) => {
|
/* 2020.07.31增加手动打开tabs*/
|
let _index = navigation.findIndex((x) => {
|
return x.path == item.path;
|
});
|
if (_index == -1) {
|
navigation.push({
|
// orderNo: String(navigation.length),// 序号
|
id: item.id + "",
|
name: item.name || item.text || "无标题",
|
path: item.path,
|
query: item.query, //2021.03.20修复自定义二次打开$tabs时参数丢失的问题
|
});
|
//新打开的tab移至最后一个选项
|
selectId.value = navigation.length - 1 + "";
|
} else {
|
selectId.value = _index + "";
|
}
|
if (useRoute === undefined) {
|
//非标准菜单，记录最后一次跳转的页面，用于刷新
|
setItem(item);
|
router.push(item);
|
// this.$router.push(item);
|
}
|
currentMenuId.value = item.id * 1;
|
// tab菜单绑定右键事件
|
proxy.$nextTick(function (e) {
|
proxy.bindRightClickMenu(true);
|
});
|
};
|
const close = (path) => {
|
/* 2020.07.31增加手动打开tabs*/
|
let index = navigation.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) => {
|
//升级element正式版修改
|
selectId.value = item.props.name;
|
let _path = navigation[item.index].path;
|
currentMenuId.value = (
|
menuOptions.value.find((c) => {
|
return c.path == _path;
|
}) || { id: 0 }
|
).id;
|
|
router.push({
|
path: navigation[item.index].path,
|
query: navigation[item.index].query,
|
});
|
};
|
|
const removeNav = (_index) => {
|
return new Promise(() => {
|
//关闭的当前项,跳转到前一个页面
|
if (selectId.value == _index + "") {
|
console.log(navigation[_index - 1]);
|
setItem(navigation[_index - 1]);
|
router.push({
|
path: navigation[_index - 1].path,
|
//2022.06.27修复tabs二次切换后参数丢失的问题
|
query: navigation[_index - 1].query,
|
});
|
navigation.splice(_index, 1);
|
selectId.value = selectId.value - 1 + "";
|
return;
|
}
|
if (_index < selectId.value) {
|
selectId.value = selectId.value - 1 + "";
|
}
|
navigation.splice(_index, 1);
|
currentMenuId.value = (
|
menuOptions.value.find((c) => {
|
return c.path == navigation[selectId.value * 1].path;
|
}) || { id: 0 }
|
).id;
|
});
|
};
|
|
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);
|
};
|
|
/**
|
* 显示右键菜单
|
* @param {*} e 事件对象
|
*/
|
const openTabsMenu = function (e) {
|
e.preventDefault(); // 防止默认菜单弹出
|
let tabId = e.target.id.split("-")[1] * 1;
|
|
//记录当前选中的菜单index
|
selectMenuIndex.value =
|
document.getElementById("pane-" + tabId).children[0].textContent * 1;
|
//只有首页时不显示
|
if (navigation.length == 1) {
|
return;
|
}
|
|
//首页设置显示关闭右边菜单
|
if (!selectMenuIndex.value) {
|
visibleItem.all = false;
|
visibleItem.right = true;
|
visibleItem.left = false;
|
visibleItem.other = false;
|
} else {
|
visibleItem.all = true;
|
//不是最后一个显示关闭右边菜单
|
visibleItem.right = selectMenuIndex.value != navigation.length - 1;
|
//只有两个菜单时不显示关闭左边
|
visibleItem.left = navigation.length != 2;
|
//只有两个菜单时不显示关闭其他
|
visibleItem.other = navigation.length != 2;
|
}
|
contextMenuVisible.value = true;
|
// 设置右键菜单显示的位置
|
proxy.menuLeft =
|
e.target.getBoundingClientRect().left - (isCollapse.value ? 63 : 198); //-e.target.clientWidth
|
proxy.menuTop = 36;
|
};
|
|
/**
|
* 关闭右键菜单
|
*/
|
const closeTabsMenu = () => {
|
contextMenuVisible.value = false;
|
};
|
const toHome = () => {
|
open({
|
text: navigation[0].name,
|
path: navigation[0].path,
|
});
|
};
|
/**
|
* 关闭其它标签页
|
* @param {*} par 关闭类型(left,right,other)
|
*/
|
const closeTabs = (value) => {
|
let _menuId = navigation[selectId.value * 1].id;
|
let currnetIndex = selectId.value * 1; // navigation.findIndex(c => { return c.id == selectId.value });
|
switch (value) {
|
case "left": {
|
// 删除左侧tab标签
|
navigation.splice(1, currnetIndex - 1); // 删除左侧tab标签
|
break;
|
}
|
case "right": {
|
// 删除右侧tab标签
|
if (selectMenuIndex.value == 0) {
|
navigation.splice(currnetIndex); // 删除右侧tab标签
|
toHome();
|
} else {
|
navigation.splice(currnetIndex + 1); // 删除右侧tab标签
|
if (selectMenuIndex.value < currnetIndex) {
|
navigation.splice(
|
selectMenuIndex.value,
|
currnetIndex - selectMenuIndex.value
|
);
|
}
|
}
|
break;
|
}
|
case "other": {
|
// 删除其他所有tab标签
|
navigation.splice(currnetIndex + 1); // 删除右侧tab标签(这里必须按照右→左顺序删除)
|
navigation.splice(1, currnetIndex - 1); // 删除左侧tab标签
|
break;
|
}
|
default: {
|
//关闭所有
|
navigation.splice(1, navigation.length);
|
toHome();
|
break;
|
}
|
}
|
selectId.value =
|
navigation.findIndex((c) => {
|
return c.id == _menuId;
|
}) + "";
|
closeTabsMenu();
|
};
|
|
watch(
|
() => contextMenuVisible.value,
|
(newVal, oldVal) => {
|
// 监视
|
if (newVal) {
|
document.body.addEventListener("click", closeTabsMenu);
|
} else {
|
document.body.removeEventListener("click", closeTabsMenu);
|
}
|
}
|
);
|
|
/**
|
* 系统创建开始
|
*/
|
const created = () => {
|
let _theme = localStorage.getItem("vol3_theme");
|
if (_theme) {
|
theme.value = _theme;
|
}
|
|
let _userInfo = store.getters.getUserInfo();
|
if (_userInfo) {
|
userName.value = _userInfo.userName;
|
if (_userInfo.img) {
|
userImg.value = _config.base.getImgSrc(_userInfo.img, http.ipAddress);
|
}
|
}
|
Object.assign(_config.$tabs, { open: open, close: close });
|
getUser();
|
|
//初始化菜单
|
// getTreeMenu().then((res) => {
|
// console.log("meanu", res);
|
// res.push({ id: "1", name: "首页", url: "/home" }); // 为了获取选中id使用
|
// res.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", res);
|
|
// console.log("权限", store.state);
|
// menuOptions.value = res;
|
// permissionInited.value = true;
|
|
// //开启消息推送（main.js中设置是否开启signalR）2022.05.05
|
// if (_config.$global.signalR) {
|
// MessageConfig(http, (result) => {
|
// messageList.unshift(result);
|
// // console.log(result)
|
// });
|
// }
|
|
// //当前刷新是不是首页
|
// if (router.currentRoute.value.path != navigation[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 = "1";
|
// });
|
};
|
const acountInfo = ref({});
|
const getUser = () => {
|
GetUserInfo({}).then((res) => {
|
acountInfo.value = res.data;
|
});
|
};
|
|
// 是否全屏
|
const isFullscreen = ref(false);
|
|
// 监听变化
|
const screenchange = () => {
|
isFullscreen.value = screenfull.isFullscreen;
|
};
|
|
// 切换事件
|
const screenonToggle = () => {
|
screenfull.toggle();
|
};
|
// 设置侦听器
|
onMounted(() => {
|
screenfull.on("screenchange", screenchange);
|
});
|
|
// 删除侦听器
|
onUnmounted(() => {
|
screenfull.off("screenchange", screenchange);
|
});
|
|
created();
|
return {
|
menuWidth,
|
isCollapse,
|
drawer_model,
|
theme_color,
|
errorImg,
|
userInfo,
|
userName,
|
userImg,
|
selectId,
|
selectMenuIndex,
|
navigation,
|
links,
|
onSelect,
|
openTabsMenu,
|
selectNav,
|
getSelectMenuName,
|
removeNav,
|
logo,
|
theme,
|
menuOptions,
|
permissionInited,
|
changeTheme,
|
to,
|
toggleLeft,
|
messageModel,
|
messageList,
|
contextMenuVisible,
|
visibleItem,
|
closeTabsMenu,
|
closeTabs,
|
currentMenuId,
|
router,
|
acountInfo,
|
screenonToggle,
|
isFullscreen,
|
toDetail,
|
};
|
},
|
/**
|
* 挂载钩子函数
|
*/
|
mounted() {
|
// let _date = showTime();
|
// $indexDate = document.getElementById("index-date");
|
// $indexDate.innerText = _date;
|
// $interval = setInterval(function () {
|
// $indexDate.innerText = showTime();
|
// }, 1000);
|
// this.bindRightClickMenu(true);
|
},
|
|
methods: {
|
/**
|
* 绑定右键事件
|
* @param {*} enable 是否启用右键事件[true:启用;false:禁用;]
|
* @param {*} $event 事件
|
*/
|
bindRightClickMenu(enable) {
|
if (!enable) return;
|
let that = this;
|
// 使用原生js 为单个dom绑定鼠标右击事件
|
that.$nextTick(() => {
|
let tab_top_dom = Object.assign(
|
[],
|
document.getElementsByClassName("el-tabs__item is-top")
|
);
|
tab_top_dom.forEach((item, index) => {
|
item.oncontextmenu = that.openTabsMenu;
|
});
|
});
|
},
|
},
|
|
/**
|
* 销毁钩子函数
|
*/
|
destroyed() {
|
$this = null;
|
clearInterval($interval);
|
},
|
});
|
</script>
|
|
<style lang="less" scoped>
|
* {
|
margin: 0;
|
padding: 0;
|
box-sizing: border-box;
|
}
|
.main {
|
width: 100%;
|
flex: 1;
|
background-image: url("../assets/index/bg.png");
|
background-repeat: no-repeat;
|
background-size: 100% 100%;
|
padding: 0.81rem 0.81rem;
|
box-sizing: border-box;
|
}
|
|
.item {
|
margin-top: 10px;
|
margin-right: 30px;
|
}
|
|
.vol-container .vol-path ::v-deep(.el-tabs__content) {
|
padding: 0;
|
}
|
|
.contextMenu {
|
width: 120px;
|
margin: 0;
|
border: 1px solid #eaeaea;
|
background: #fff;
|
z-index: 30000;
|
position: absolute;
|
list-style-type: none;
|
padding: 5px 0;
|
border-radius: 4px;
|
font-size: 14px;
|
color: #333;
|
box-shadow: 2px 2px 3px 0 rgb(182 182 182 / 20%);
|
|
i,
|
button {
|
font-size: 14px !important;
|
}
|
}
|
|
.contextMenu li {
|
margin: 0;
|
padding: 5px 17px;
|
}
|
|
.contextMenu li:hover {
|
background: #fafafa;
|
cursor: pointer;
|
}
|
|
.contextMenu li button {
|
color: #626060;
|
font-size: 14px;
|
letter-spacing: 1px;
|
}
|
|
.el-tabs.el-tabs--top.el-tabs--border-card.header-navigation
|
> .el-tabs__header
|
.el-tabs__item:last-child,
|
.el-tabs--top.el-tabs--border-card.header-navigation
|
> .el-tabs__header
|
.el-tabs__item:nth-child(2) {
|
padding: 0;
|
}
|
|
.header-navigation ::v-deep(.el-tabs__item.is-top) {
|
padding: 0 15px;
|
}
|
|
@media screen and (max-width: 1080px) {
|
.tetxsize {
|
font-size: 1.5rem !important;
|
}
|
}
|
</style>
|
<style>
|
.horizontal-collapse-transition {
|
transition: 0s width ease-in-out, 0s padding-left ease-in-out,
|
0s padding-right ease-in-out;
|
}
|
</style>
|
