<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">【CRH】轴承立库WMS管理系统</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" /> -->
|
<el-avatar class="user-header" shape="circle" :size="52" :fit="none"
|
:src="logo"></el-avatar>
|
</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/wms_x.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: "出库口大屏数据", path: "/bigdataForOutbound", 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 = data.filter((r) => r.name != 'APP权限');
|
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>
|
