290 lines
13 KiB
HTML
290 lines
13 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="zh-CN">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>资产管理系统</title>
|
|
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
|
|
<style>
|
|
body {
|
|
margin: 0;
|
|
padding: 0;
|
|
font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", Arial, sans-serif;
|
|
}
|
|
.el-header {
|
|
background-color: #409EFF;
|
|
color: #fff;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 0 20px;
|
|
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12);
|
|
z-index: 100;
|
|
}
|
|
.el-aside {
|
|
background-color: #304156;
|
|
color: #fff;
|
|
overflow: hidden;
|
|
}
|
|
.el-main {
|
|
padding: 0;
|
|
height: calc(100vh - 60px);
|
|
overflow: hidden;
|
|
}
|
|
.system-title {
|
|
font-size: 20px;
|
|
font-weight: bold;
|
|
}
|
|
.user-info {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
.avatar {
|
|
width: 40px;
|
|
height: 40px;
|
|
border-radius: 50%;
|
|
margin-right: 10px;
|
|
}
|
|
.menu-container {
|
|
height: 100%;
|
|
overflow-y: auto;
|
|
}
|
|
.el-menu {
|
|
border-right: none;
|
|
}
|
|
.menu-item-icon {
|
|
margin-right: 5px;
|
|
}
|
|
.iframe-container {
|
|
width: 100%;
|
|
height: 100%;
|
|
overflow: hidden;
|
|
}
|
|
.main-iframe {
|
|
width: 100%;
|
|
height: 100%;
|
|
border: none;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div id="app">
|
|
<el-container style="height: 100vh;">
|
|
<el-header height="60px">
|
|
<div class="system-title">资产管理系统</div>
|
|
<div class="user-info">
|
|
<span>欢迎，{{ currentUser.userName }}</span>
|
|
<el-dropdown trigger="click" @command="handleCommand">
|
|
<span class="el-dropdown-link" style="cursor: pointer; margin-left: 15px;">
|
|
<img :src="currentUser.avatar || 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png'" class="avatar">
|
|
<i class="el-icon-arrow-down el-icon--right"></i>
|
|
</span>
|
|
<el-dropdown-menu slot="dropdown">
|
|
<el-dropdown-item command="userInfo">个人信息</el-dropdown-item>
|
|
<el-dropdown-item command="changePassword">修改密码</el-dropdown-item>
|
|
<el-dropdown-item divided command="logout">退出登录</el-dropdown-item>
|
|
</el-dropdown-menu>
|
|
</el-dropdown>
|
|
</div>
|
|
</el-header>
|
|
|
|
<el-container>
|
|
<el-aside width="220px">
|
|
<div class="menu-container">
|
|
<el-menu
|
|
:default-active="activeMenu"
|
|
background-color="#304156"
|
|
text-color="#bfcbd9"
|
|
active-text-color="#409EFF"
|
|
:unique-opened="true"
|
|
@select="handleMenuSelect">
|
|
|
|
<el-menu-item index="dashboard">
|
|
<i class="el-icon-s-home menu-item-icon"></i>
|
|
<span slot="title">首页</span>
|
|
</el-menu-item>
|
|
|
|
<el-submenu index="asset">
|
|
<template slot="title">
|
|
<i class="el-icon-s-management menu-item-icon"></i>
|
|
<span>资产管理</span>
|
|
</template>
|
|
<el-menu-item index="asset/list">资产列表</el-menu-item>
|
|
<el-menu-item index="asset/add">资产登记</el-menu-item>
|
|
<el-menu-item index="asset/transfer">资产转移</el-menu-item>
|
|
<el-menu-item index="asset/maintenance">资产维护</el-menu-item>
|
|
<el-menu-item index="asset/scrap">资产报废</el-menu-item>
|
|
</el-submenu>
|
|
|
|
<el-submenu index="basic-data">
|
|
<template slot="title">
|
|
<i class="el-icon-s-data menu-item-icon"></i>
|
|
<span>基础数据</span>
|
|
</template>
|
|
<el-menu-item index="asset/classification">资产分类</el-menu-item>
|
|
<el-menu-item index="asset/location">资产位置</el-menu-item>
|
|
<el-menu-item index="asset/supplier">供应商管理</el-menu-item>
|
|
</el-submenu>
|
|
|
|
<el-submenu index="report">
|
|
<template slot="title">
|
|
<i class="el-icon-s-marketing menu-item-icon"></i>
|
|
<span>统计报表</span>
|
|
</template>
|
|
<el-menu-item index="report/asset-distribution">资产分布</el-menu-item>
|
|
<el-menu-item index="report/asset-status">资产状态</el-menu-item>
|
|
<el-menu-item index="report/asset-value">资产价值</el-menu-item>
|
|
<el-menu-item index="report/asset-lifecycle">资产生命周期</el-menu-item>
|
|
</el-submenu>
|
|
|
|
<el-submenu index="system">
|
|
<template slot="title">
|
|
<i class="el-icon-setting menu-item-icon"></i>
|
|
<span>系统设置</span>
|
|
</template>
|
|
<el-menu-item index="system/user">用户管理</el-menu-item>
|
|
<el-menu-item index="system/role">角色管理</el-menu-item>
|
|
<el-menu-item index="system/menu">菜单管理</el-menu-item>
|
|
<el-menu-item index="system/dict">字典管理</el-menu-item>
|
|
<el-menu-item index="system/company">公司管理</el-menu-item>
|
|
<el-menu-item index="system/department">部门管理</el-menu-item>
|
|
<el-menu-item index="system/tenant">租户管理</el-menu-item>
|
|
</el-submenu>
|
|
</el-menu>
|
|
</div>
|
|
</el-aside>
|
|
|
|
<el-main>
|
|
<div class="iframe-container">
|
|
<iframe :src="currentIframeSrc" class="main-iframe" ref="mainIframe"></iframe>
|
|
</div>
|
|
</el-main>
|
|
</el-container>
|
|
</el-container>
|
|
</div>
|
|
|
|
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
|
|
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
|
|
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
|
|
<script>
|
|
new Vue({
|
|
el: '#app',
|
|
data() {
|
|
return {
|
|
// 当前活动菜单
|
|
activeMenu: 'dashboard',
|
|
// 当前iframe地址
|
|
currentIframeSrc: 'dashboard/index.html',
|
|
// 当前用户信息
|
|
currentUser: {
|
|
userId: 'admin',
|
|
userName: '管理员',
|
|
avatar: ''
|
|
},
|
|
// 菜单映射表
|
|
menuMap: {
|
|
'dashboard': 'dashboard/index.html',
|
|
'asset/list': 'asset/list/index.html',
|
|
'asset/add': 'asset/add/index.html',
|
|
'asset/transfer': 'asset/transfer/index.html',
|
|
'asset/maintenance': 'asset/maintenance/index.html',
|
|
'asset/scrap': 'asset/scrap/index.html',
|
|
'asset/classification': 'asset/classification/index.html',
|
|
'asset/location': 'asset/location/index.html',
|
|
'asset/supplier': 'asset/supplier/index.html',
|
|
'report/asset-distribution': 'report/asset-distribution/index.html',
|
|
'report/asset-status': 'report/asset-status/index.html',
|
|
'report/asset-value': 'report/asset-value/index.html',
|
|
'report/asset-lifecycle': 'report/asset-lifecycle/index.html',
|
|
'system/user': 'system/user/index.html',
|
|
'system/role': 'system/role/index.html',
|
|
'system/menu': 'system/menu/index.html',
|
|
'system/dict': 'system/dict/index.html',
|
|
'system/company': 'system/company/index.html',
|
|
'system/department': 'system/department/index.html',
|
|
'system/tenant': 'system/tenant/index.html'
|
|
}
|
|
};
|
|
},
|
|
created() {
|
|
// 从URL获取菜单参数
|
|
const menuParam = this.getQueryParam('menu');
|
|
if (menuParam && this.menuMap[menuParam]) {
|
|
this.activeMenu = menuParam;
|
|
this.currentIframeSrc = this.menuMap[menuParam];
|
|
}
|
|
|
|
// 获取用户信息
|
|
this.getUserInfo();
|
|
},
|
|
methods: {
|
|
// 处理菜单选择
|
|
handleMenuSelect(index) {
|
|
this.activeMenu = index;
|
|
this.currentIframeSrc = this.menuMap[index];
|
|
},
|
|
|
|
// 获取URL参数
|
|
getQueryParam(name) {
|
|
const search = window.location.search;
|
|
const params = new URLSearchParams(search);
|
|
return params.get(name);
|
|
},
|
|
|
|
// 获取用户信息
|
|
getUserInfo() {
|
|
// 实际项目中应该调用接口获取用户信息
|
|
// axios.get('/system/user/info').then(response => {
|
|
// this.currentUser = response.data;
|
|
// }).catch(error => {
|
|
// console.error('获取用户信息失败:', error);
|
|
// });
|
|
},
|
|
|
|
// 处理用户下拉菜单命令
|
|
handleCommand(command) {
|
|
switch (command) {
|
|
case 'userInfo':
|
|
this.showUserInfo();
|
|
break;
|
|
case 'changePassword':
|
|
this.showChangePassword();
|
|
break;
|
|
case 'logout':
|
|
this.logout();
|
|
break;
|
|
}
|
|
},
|
|
|
|
// 显示用户信息
|
|
showUserInfo() {
|
|
this.$message.info('功能开发中...');
|
|
},
|
|
|
|
// 显示修改密码对话框
|
|
showChangePassword() {
|
|
this.$message.info('功能开发中...');
|
|
},
|
|
|
|
// 退出登录
|
|
logout() {
|
|
this.$confirm('确定要退出登录吗?', '提示', {
|
|
confirmButtonText: '确定',
|
|
cancelButtonText: '取消',
|
|
type: 'warning'
|
|
}).then(() => {
|
|
// 实际项目中应该调用退出登录接口
|
|
// axios.post('/logout').then(() => {
|
|
// window.location.href = '/login.html';
|
|
// });
|
|
this.$message.success('退出成功');
|
|
setTimeout(() => {
|
|
window.location.href = '/login.html';
|
|
}, 1500);
|
|
}).catch(() => {});
|
|
}
|
|
}
|
|
});
|
|
</script>
|
|
</body>
|
|
</html> |