<script setup>
|
import useUserInfoStore from '@/stores/userInfo'
|
import userInfo from '@/stores/userInfo'
|
import request from '@/utils/request'
|
import {ElMessage} from 'element-plus'
|
import {ref, watch, onMounted } from 'vue'
|
import deepClone from '@/utils/deepClone'
|
import { useRouter } from 'vue-router';
|
import { useI18n } from 'vue-i18n'
|
const { t } = useI18n()
|
let language = ref(localStorage.getItem('lang') || 'zh')
|
const store = userInfo()
|
const isCollapse = ref(false);
|
// const { $i18n } = useI18n(); // 获取 i18n 实例
|
const router = useRouter()
|
const userStore = useUserInfoStore()
|
// const user = userStore.user.userName
|
|
let userInfoStr = window.localStorage.getItem('userInfo')
|
console.log(userInfoStr);
|
// const userInfoStr = localStorage.getItem('userInfo');
|
// let userInfo = userInfoStr.user.token;
|
let token = userInfo; // 提取 token
|
// 退出登录方法
|
function quit() {
|
// localStorage.removeItem('token');
|
store.$patch({
|
user: null,
|
})
|
router.push('/login')
|
}
|
// const quit = async () => {
|
// try {
|
// store.$patch({user: null})
|
// const response = await request.post('/loadGlass/sys/user/logout')
|
// if (response.code === 200) {
|
// console.log('登出成功');
|
// } else {
|
// // 处理错误情况
|
// console.error('登出失败', response);
|
// }
|
// }
|
// catch (error) {
|
// // 处理错误
|
// console.error(error);
|
// }
|
// }
|
// store.createWebSocket();
|
// function quit() {
|
// userStore.$patch({
|
// user: null,
|
// })
|
// // router.push('/login')
|
// request.get("/loadGlass/sys/user/login").then((res) => {
|
// if (res.code === 200) {
|
// ElMessage.success(res.msg);
|
// console.log(res.data);
|
// } else {
|
// ElMessage.warning(res.msg);
|
// // router.push("/login");
|
// }
|
// });
|
// }
|
|
|
function replaceChineseWithEnglish(menuData) {
|
// 定义中英文对照关系对象
|
const translation = {
|
'上片机': 'Стол загрузки',
|
'掰片/识别': 'Разлом/идентификация',
|
'卧式缓存': ' Горизонтальный буфер',
|
'磨边前卧式缓存': 'Горизонтальный буфер перед шлифовкой',
|
'下片卧式缓存': 'Горизонтальный буфер стекла разгрузки',
|
'磨边（冷加工）': 'Шлифовать края (холодная обработка)',
|
'1线磨边(冷加工)': 'Шлифовать края 1 линии (холодная обработка)',
|
'2线磨边(冷加工)': 'Шлифовать края 2 линии (холодная обработка)',
|
'大理片笼': 'Буферная система',
|
'钢化': 'Закалка',
|
'钢化前': 'Перед закалки',
|
'钢化后': 'После закалки',
|
'下片台': 'Стол разгрузки',
|
'系统管理': 'Управление системой',
|
'用户管理': 'Управление пользователем',
|
'权限管理': 'Управление полномочиями',
|
'角色管理': 'Управление ролью',
|
};
|
menuData.forEach(menu => {
|
menu.menuName = translation[menu.menuName] || menu.menuName;
|
// if (menu.children) {
|
menu.children && menu.children.forEach(submenu => {
|
submenu.menuName = translation[submenu.menuName] || submenu.menuName;
|
});
|
// }
|
});
|
}
|
//提取菜单模块列表
|
let menuList = $ref([])
|
|
// onMounted(async () => {
|
// try {
|
// const res = await request.get('/loadGlass/sys/menu/getMenuTree'); // 假设 request.get 返回 Promise
|
// if (res.code == 200) {
|
// // 使用 value 属性来修改 ref 引用的值
|
// menuList.value = deepClone(res.data);
|
// const language = $i18n.locale;
|
// if (language === 'en') {
|
// replaceChineseWithEnglish(menuList.value); // 传入 ref 的 value
|
// }
|
// console.log(res.data.token); // 如果 res.data 中有 token 的话
|
// } else {
|
// ElMessage.warning(res.msg);
|
// router.push('/login');
|
// }
|
// } catch (error) {
|
// // 处理请求错误
|
// console.error('获取菜单列表时出错:', error);
|
// }
|
// });
|
request.get('/loadGlass/sys/menu/getMenuTree').then((res) => {
|
if (res.code == 200) {
|
menuList = res.data
|
console.log(language.value)
|
if (language.value === 'en') {
|
|
replaceChineseWithEnglish(menuList);
|
}
|
} else {
|
ElMessage.warning(res.msg)
|
router.push('/login')
|
}
|
})
|
const menu = ref(null)
|
let indexKey = ref(null)
|
|
function handleOpen(key) {
|
indexKey.value = key
|
}
|
watch(
|
indexKey,
|
(newVal, oldVal) => {
|
if (oldVal !== newVal && oldVal !== null) {
|
menu.value.close(oldVal)
|
}
|
},
|
{deep: true}
|
)
|
|
router.beforeEach((to, from) => {
|
//return false
|
})
|
|
let openFlag = $ref(null)
|
//原始菜单打开
|
const openMenu = (menuID) => {
|
if (menuID === openFlag) {
|
openFlag = null
|
} else {
|
openFlag = menuID
|
}
|
}
|
function toggleCollapse() {
|
isCollapse.value = !isCollapse.value;
|
}
|
</script>
|
|
<template>
|
<div id="all">
|
<el-container>
|
<el-header>
|
<div style="height: 100%;width: 100%;display: flex;background-color: #fff;">
|
<img src="../assets/northGlass.ico"
|
alt=""
|
style="max-width: 100%;max-height: 100%">
|
<h3 style="margin: 1rem ;font-weight: bold;width: 33vw;"> {{ $t('main.titleFirst') }}{{ userName }}{{ $t('main.titleLast') }}</h3>
|
<span style="height: 70%;width: 78vw;margin-top: 1rem;">
|
<!-- <el-button class="sys-quit"
|
@click="quit"
|
round>
|
<el-icon size="large">
|
<SwitchButton size=""/>{{ $t('main.quit') }}
|
</el-icon>
|
</el-button> -->
|
<el-button class="sys-quit"
|
@click="quit"
|
round>
|
<el-icon size="large">
|
<SwitchButton size=""/>{{ $t('main.quit') }}
|
</el-icon>
|
</el-button>
|
<div class="header-left">
|
<el-button @click="toggleCollapse"
|
style="height:30px;">☰</el-button>
|
<!-- <el-button :icon="isCollapse ? 'el-icon-s-unfold' : 'el-icon-s-fold'" @click="toggleCollapse"
|
style="height:30px;"></el-button> -->
|
</div>
|
</span>
|
</div>
|
</el-header>
|
<div id="line"></div>
|
<el-container>
|
<el-aside :width="isCollapse ? '30px' : '200px'" style="background-color: #fff;">
|
<el-row :span="20">
|
<el-menu :default-active="activePath" class="el-menu-vertical-demo" >
|
<div class="menu">
|
<div v-for="items in menuList">
|
<div class='menu_title' v-show="!isCollapse"
|
@click="openMenu(items.id)">
|
<span>☰</span>
|
{{ items.menuName }}
|
</div>
|
<ul class='enter-x-left'
|
v-show="openFlag==items.id">
|
<li v-for="menuItem in items.children"
|
style="margin-bottom:2px">
|
<router-link :to="{path:menuItem.url}">
|
{{ menuItem.menuName }}
|
</router-link>
|
</li>
|
</ul>
|
</div>
|
</div>
|
</el-menu>
|
</el-row>
|
</el-aside>
|
<el-main>
|
<div id="main">
|
<router-view></router-view>
|
</div>
|
</el-main>
|
</el-container>
|
</el-container>
|
</div>
|
</template>
|
|
<style scoped>
|
|
.el-menu-vertical-demo:not(.el-menu--collapse) {
|
width: 200px;
|
min-height: 400px;
|
text-align: left;
|
|
}
|
|
|
|
|
#all {
|
background-color: #eee;
|
height: 100%;
|
}
|
|
.el-container {
|
height: 100vh;
|
width: 99vw;
|
}
|
|
* {
|
padding: 0;
|
margin: 0;
|
}
|
|
:deep(.sys-quit) {
|
float: right;
|
margin-right: 1rem;
|
width: 5rem;
|
}
|
|
/* 横线 */
|
#line {
|
float: right;
|
width: 100%;
|
height: 1px;
|
/* margin-top: 0.5em; */
|
margin-bottom: 0.5em;
|
background: #d4c4c4;
|
position: relative;
|
text-align: center;
|
}
|
|
:deep(span) {
|
margin-right: 0;
|
}
|
|
.el-collapse {
|
font-size: 16px;
|
font-weight: bold;
|
}
|
|
#main {
|
width: 99%;
|
float: right;
|
height: 99%;
|
background-color: #fff;
|
}
|
/*------------*/
|
|
/* .menu div div{
|
|
width: 138px;
|
height: 35px;
|
line-height: 35px;
|
background: #C6E2FF;
|
color: #000000;
|
font-size: 16px;
|
padding-left: 15px;
|
transition: all 0.3s ease;
|
cursor: pointer;
|
position: relative;
|
font-weight: bold;
|
overflow: hidden;
|
border-bottom: 12px ;
|
margin-bottom:4px;
|
text-align: left;
|
cursor: pointer; */
|
/* border-radius:8px; */
|
/* outline: none; */
|
/* background-color:#5CADFE; */
|
/* box-shadow: 0 8px 16px 0 rgba(0,0,0,0), 0 6px 5px 0 rgba(0,0,0,0.19); */
|
/* } */
|
|
.menu {
|
width: 138px;
|
height: 33px;
|
line-height: 25px;
|
|
color: #000000;
|
font-size: 16px;
|
padding-left: 15px;
|
padding-right: 2px;
|
}
|
|
ul {
|
height: auto;
|
margin: 1px auto;
|
text-align: center;
|
}
|
|
ul li {
|
height: 28px;
|
width: 200px;
|
line-height: 30px;
|
/* background: rgb(128, 128, 128); */
|
color: #000000;
|
padding-left: 36px;
|
cursor: pointer;
|
overflow: hidden;
|
text-align: left;
|
/* border-radius:8px; */
|
/* outline: none; */
|
|
/* background: #5CADFE; */
|
/* box-shadow: 0 8px 16px 0 rgba(0,0,0,0), 0 6px 5px 0 rgba(0,0,0,0.19); */
|
}
|
|
ul li:hover {
|
/* background:#5CADFE ; */
|
color: #ffffff;
|
}
|
|
ul li a {
|
text-decoration: none;
|
color: #000000;
|
font-size: 14px;
|
}
|
ul li a:hover {
|
color: #1087ff;
|
}
|
|
.item_divider {
|
width: 118px;
|
height: 0px;
|
/* background-color: white;
|
opacity: 0.8; */
|
margin-bottom: 2px;
|
}
|
|
.item a {
|
width: 138px;
|
height: 35px;
|
display: block;
|
/* text-align: justify; */
|
text-decoration: none;
|
color: white;
|
font-size: 14px;
|
text-decoration: none;
|
}
|
|
.menu_title {
|
width: 180px;
|
/* white-space: nowrap;
|
overflow: hidden;
|
text-overflow: ellipsis; */
|
|
height: 45px;
|
line-height: 55px;
|
/* background: #fafafa; */
|
color: rgb(43, 42, 42);
|
font-size: 17px;
|
padding-left: 15px;
|
transition: all 0.3s ease;
|
cursor: pointer;
|
position: relative;
|
font-weight: bold;
|
overflow: hidden;
|
}
|
|
.menu_title:hover {
|
/* background: #dedede; */
|
color: #3b9af9;
|
}
|
|
.indicator {
|
display: block;
|
width: 40px;
|
height: 35px;
|
font-weight: bold;
|
position: absolute;
|
right: 0px;
|
top: 0px;
|
transition: all 0.3s ease;
|
text-align: center;
|
}
|
|
/* 动画效果 */
|
.enter-x-left {
|
z-index: 9;
|
opacity: 0;
|
animation: enter-x-left 0.4s ease-in-out 0.3s;
|
animation-fill-mode: forwards;
|
transform: translateX(-50px);
|
transition: all 0.3s ease;
|
}
|
|
.enter-x-left:nth-child(1) {
|
animation-delay: 0.1s;
|
}
|
|
.enter-x-left:nth-child(2) {
|
animation-delay: 0.2s;
|
}
|
|
.enter-x-left:nth-child(3) {
|
animation-delay: 0.3s;
|
}
|
|
.enter-x-left:nth-child(4) {
|
animation-delay: 0.4s;
|
}
|
@keyframes enter-x-left {
|
to {
|
opacity: 1;
|
transform: translateX(0);
|
}
|
}
|
.header-left{
|
margin-left: -350px;
|
}
|
</style>
|
