Skip to content

H
haobanDevOps
Commit 854a7f6d by 黑潮
Options

update: 修改

parent e4876842
Showing with 192 additions and 8 deletions
index.html
......@@ -4,6 +4,7 @@
<meta charset="utf-8">
<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">
<link rel="shortcut icon" href="./favicon.ico">
<link rel="stylesheet" href="//at.alicdn.com/t/font_2995156_rf810o69kh.css">
<title>运维平台</title>
</head>
<body>
......
package.json
......@@ -16,7 +16,7 @@
"dependencies": {
"@antv/g2": "^3.5.12",
"axios": "^0.18.0",
"element-ui": "^2.8.2",
"element-ui": "^2.15.7",
"less": "^3.9.0",
"less-loader": "^4.1.0",
"vue": "^2.5.2",
......
src/components/aside.vue 0 → 100644
<template>
<el-aside width="200px">
<el-menu
class="aside-menu"
style="height:100%"
router
:default-active="$route.query.tabCode">
<template v-for="item in menuList">
<el-menu-item v-if="item.children.length === 0" :route="{path: item.uri, query: {tabCode:item.code}}" :key="item.code" :index="item.code"><i class="iconfont" style="margin-right:6px" :class="item.iconUrl"></i>{{item.menuName}}</el-menu-item>
<el-submenu v-else :key="item.code" :index="item.uri">
<template slot="title"><i class="iconfont" style="margin-right:6px" :class="item.iconUrl"></i>{{item.menuName}}</template>
<template v-for="item2 in item.children">
<el-menu-item v-if="item2.children.length === 0" :route="{path: item2.uri, query: {tabCode:item2.code}}" :key="item2.code" :index="item2.code">{{item2.menuName}}</el-menu-item>
<el-submenu v-else :key="item2.code" :index="item.uri">
<template slot="title">{{item2.menuName}}</template>
<el-menu-item v-for="item3 in item2.children" :route="{path: item3.uri, query: {tabCode:item3.code}}" :key="item3.code" :index="item3.code">{{item3.menuName}}</el-menu-item>
</el-submenu>
</template>
</el-submenu>
</template>
</el-menu>
</el-aside>
</template>
<script>
export default {
name: 'base-aside',
props: {
menuList: {
type: Array,
required: true,
}
},
};
</script>
<style lang="scss" scoped>
.aside-menu /deep/ {
background-color: #F5F7FA94;
border-right: 1px solid #E4E7ED !important;
.el-submenu__title {
height: 36px;
line-height: 36px;
padding: 0 30px;
color: #606266;
}
.el-menu-item {
position: relative;
height: 36px;
line-height: 36px;
padding: 0 30px;
color: #606266;
&.is-active {
background-color: #F0F5FF ;
color: #1890ff;
&::before {
content: '';
position: absolute;
left: 0;
top: 1px;
width: 2px;
bottom: 1px;
background-color: #1890ff;
}
}
}
.el-menu-item {
background-color: #F5F7FA;
}
}
</style>
src/components/layout.vue 0 → 100644
<template>
<el-container style="height:100vh;background:#fff" direction="vertical">
<base-header :currentModule="currentModule" :moduleList="moduleList"></base-header>
<el-container>
<base-aside :menuList="menuList"></base-aside>
<el-main style="padding:0;max-height:calc(100vh - 60px)">
<el-main style="padding:0">
<router-view></router-view>
</el-main>
</el-main>
</el-container>
</el-container>
</template>
<script>
import baseHeader from './header';
import baseAside from './aside';
import { getRequest } from '@/api/api';
import { generatorMenuList, getFirstMenu } from '@/utils';
export default {
name: 'index',
props: {
moduleName: {
type: String,
required: true,
}
},
data() {
return {
menuList: [],
currentModule: {},
moduleList: []
};
},
created() {
this.getMenuList();
},
methods: {
getMenuList() {
let para = {
requestProject: this.requestProject
};
getRequest('/gic-authcenter/loginuser', para).then(res => {
let resData = res.data;
if (resData.errorCode == '0') {
this.entranceList = [];
let entranceList = resData.result.menuList ? generatorMenuList(resData.result.menuList) : [];
let menu = entranceList.find(el => el.code === this.moduleName);
this.menuList = menu.children;
this.currentModule = menu;
this.moduleList = entranceList;
let firstMenu = getFirstMenu(this.menuList);
if(this.$route.path === '/') {
this.$router.replace({path: firstMenu.uri, query: { tabCode: firstMenu.code }});
}
} else {
this.$message.error(resData.message);
}
}).catch(function(error) {
throw error
});
}
},
components: {
baseHeader,
baseAside
}
};
</script>
<style lang="less" scoped>
</style>
src/router/index.js
......@@ -16,16 +16,16 @@ const errorPage = r => {
};
export const constantRouterMap = [
// {
// path: '/',
// name: '/',
// redirect: '/version'
// },
{
path: '/',
name: '/',
redirect: '/version'
},
{
path: '/haoban',
name: '好办运维后台',
redirect: '/version',
component: _import('haoban', 'haobanIndex'),
// redirect: '/version',
component: _import('haoban', 'layout'),
children: [
{
path: '/version',
......
src/utils/index.js
......@@ -188,3 +188,34 @@ export const checkUrl = function(urlString) {
}
return false;
};
export function generatorMenuList(list) {
let treeData = list.filter(el => !el.parentCode);
treeData = treeData.filter(el => el.isShow === 1);
treeData.sort((a, b) => a.sort - b.sort)
const travel = (root, allData) => {
root.forEach(item => {
let children = allData.filter(el => el.parentCode === item.code);
item.children = children.filter(el => el.isShow === 1);
item.children.sort((a, b) => a.sort - b.sort)
item.nodeChildren = item.children;
item.indexSort = item.sort;
travel(item.children, allData);
})
}
travel(treeData, list);
return treeData
}
export function getFirstMenu(list) {
const travel = (root) => {
for (let i of root) {
if (i.children.length === 0) {
return i
} else {
return travel(i.children);
}
}
}
return travel(list)
}
src/views/haoban/layout.vue 0 → 100644
<template>
<base-layout moduleName="platform_operation"></base-layout>
</template>
<script>
import BaseLayout from '@/components/layout.vue';
export default {
components: {BaseLayout}
}
</script>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment