Browse Source

Merge branch 'dev'

master
taylor 8 years ago
parent
commit
e25ce7d705
  1. 11
      index.html
  2. 16
      src/App.vue
  3. 78
      src/main.js
  4. 3
      src/pages/404.vue
  5. 107
      src/pages/Home.vue
  6. 75
      src/routes.js

11
index.html

@ -1,13 +1,16 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head>
<head>
<meta charset="utf-8"> <meta charset="utf-8">
<title>vue element admin</title> <title>vue element admin</title>
</head>
<body>
</head>
<body>
<div id="app"> <div id="app">
</div> </div>
<!-- built files will be auto injected --> <!-- built files will be auto injected -->
</body>
</body>
</html> </html>

16
src/App.vue

@ -11,21 +11,7 @@
export default { export default {
name: 'app', name: 'app',
components: { components: {
},
// beforeCreate: function () {
// let user = JSON.parse(localStorage.getItem('user'));
// if (!user) {
// this.$router.replace('/login')
// }
// }
watch: {
'$route'(to, from) {//
let user = JSON.parse(sessionStorage.getItem('user'));
if (!user) {
this.$router.replace('/login')
}
}
},
}
} }
</script> </script>

78
src/main.js

@ -8,19 +8,7 @@ import store from './vuex/store'
import Vuex from 'vuex' import Vuex from 'vuex'
import NProgress from 'nprogress'//页面顶部进度条 import NProgress from 'nprogress'//页面顶部进度条
import 'nprogress/nprogress.css' import 'nprogress/nprogress.css'
import Login from './pages/Login.vue'
import Home from './pages/Home.vue'
import Main from './pages/Main.vue'
import Table from './pages/nav1/Table.vue'
import Form from './pages/nav1/Form.vue'
import user from './pages/nav1/user.vue'
import Page4 from './pages/nav2/Page4.vue'
import Page5 from './pages/nav2/Page5.vue'
import Page6 from './pages/nav3/Page6.vue'
import echarts from './pages/charts/echarts.vue'
// start mock
import routes from './routes'
import Mock from './mock'; import Mock from './mock';
Mock.bootstrap(); Mock.bootstrap();
@ -30,72 +18,26 @@ Vue.use(Vuex)
NProgress.configure({ showSpinner: false }); NProgress.configure({ showSpinner: false });
const routes = [
{
path: '/login',
component: Login,
hidden: true//不显示在导航中
},
//{ path: '/main', component: Main },
{
path: '/',
component: Home,
name: '导航一',
iconCls: 'el-icon-message',//图标样式class
children: [
//{ path: '/main', component: Main },
{ path: '/table', component: Table, name: 'Table' },
{ path: '/form', component: Form, name: 'Form' },
{ path: '/user', component: user, name: '列表' },
]
},
{
path: '/',
component: Home,
name: '导航二',
iconCls: 'fa fa-id-card-o',
children: [
{ path: '/page4', component: Page4, name: '页面4' },
{ path: '/page5', component: Page5, name: '页面5' }
]
},
{
path: '/',
component: Home,
name: '',
iconCls: 'fa fa-address-card',
leaf: true,//只有一个节点
children: [
{ path: '/page6', component: Page6, name: '导航三' }
]
},
{
path: '/',
component: Home,
name: 'Charts',
iconCls: 'fa fa-bar-chart',
children: [
{ path: '/echarts', component: echarts, name: 'echarts' }
]
}
]
const router = new VueRouter({ const router = new VueRouter({
routes routes
}) })
router.beforeEach((to, from, next) => { router.beforeEach((to, from, next) => {
NProgress.start();
//NProgress.start();
if (to.path == '/login') {
sessionStorage.removeItem('user');
}
let user = JSON.parse(sessionStorage.getItem('user')); let user = JSON.parse(sessionStorage.getItem('user'));
if (!user && to.path != '/login') { if (!user && to.path != '/login') {
next({ path: '/login' }) next({ path: '/login' })
}
} else {
next() next()
}
}) })
router.afterEach(transition => {
NProgress.done();
});
//router.afterEach(transition => {
//NProgress.done();
//});
new Vue({ new Vue({
el: '#app', el: '#app',

3
src/pages/404.vue

@ -0,0 +1,3 @@
<template>
<p style="font-size:20px;text-align: center;color:rgb(192, 204, 218);">404</p>
</template>

107
src/pages/Home.vue

@ -2,86 +2,63 @@
<el-row class="panel"> <el-row class="panel">
<el-col :span="24" class="panel-top"> <el-col :span="24" class="panel-top">
<el-col :span="20" style="font-size:26px;"> <el-col :span="20" style="font-size:26px;">
<img src="../assets/logo4.png" class="logo"> <span>AD<i style="color:#20a0ff">MIN</i>
<img src="../assets/logo4.png" class="logo"> <span>AD<i style="color:#20a0ff">MIN</i>
</span> </span>
</el-col>
<el-col :span="4" class="rightbar">
</el-col>
<el-col :span="4" class="rightbar">
<el-dropdown trigger="click"> <el-dropdown trigger="click">
<span class="el-dropdown-link" style="color:#c0ccda;cursor: pointer;"><img :src="this.sysUserAvatar" class="head"> {{sysUserName}} <span class="el-dropdown-link" style="color:#c0ccda;cursor: pointer;"><img :src="this.sysUserAvatar" class="head"> {{sysUserName}}
</span> </span>
<el-dropdown-menu slot="dropdown">
<el-dropdown-menu slot="dropdown">
<el-dropdown-item>我的消息</el-dropdown-item> <el-dropdown-item>我的消息</el-dropdown-item>
<el-dropdown-item>设置</el-dropdown-item> <el-dropdown-item>设置</el-dropdown-item>
<el-dropdown-item divided @click.native="logout">退出登录</el-dropdown-item> <el-dropdown-item divided @click.native="logout">退出登录</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
<!--<el-tooltip class="item tip-logout" effect="dark" content="退出" placement="bottom" style="padding:0px;">
<i class="fa fa-sign-out" aria-hidden="true" v-on:click="logout"></i>
</el-tooltip>-->
</el-col>
</el-col>
<el-col :span="24" class="panel-center">
</el-dropdown-menu>
</el-dropdown>
</el-col>
</el-col>
<el-col :span="24" class="panel-center">
<!--<el-col :span="4">--> <!--<el-col :span="4">-->
<aside style="width:230px;"> <aside style="width:230px;">
<!--<h5 class="admin">
<i class="fa fa-user" aria-hidden="true" style="margin-right:5px;"></i>欢迎系统管理员测试</h5>-->
<!--<el-menu style="border-top: 1px solid #475669;" default-active="/table" class="el-menu-vertical-demo" @open="handleopen"
@close="handleclose" @select="handleselect" theme="dark" unique-opened router>
<el-submenu index="1">
<template slot="title"><i class="el-icon-message"></i>导航一</template>
<el-menu-item index="/table">Table</el-menu-item>
<el-menu-item index="/form">Form</el-menu-item>
<el-menu-item index="/page3">页面3</el-menu-item>
</el-submenu>
<el-submenu index="2">
<template slot="title"><i class="fa fa-id-card-o"></i>导航二</template>
<el-menu-item index="/page4">选项4</el-menu-item>
<el-menu-item index="/page5">选项5</el-menu-item>
</el-submenu>
<el-menu-item index="/page6"><i class="fa fa-line-chart"></i>导航三</el-menu-item>
</el-menu>-->
<el-menu :default-active="currentPath" class="el-menu-vertical-demo" @open="handleopen" @close="handleclose" @select="handleselect"
<el-menu :default-active="$route.path" class="el-menu-vertical-demo" @open="handleopen" @close="handleclose" @select="handleselect"
theme="dark" unique-opened router> theme="dark" unique-opened router>
<template v-for="(item,index) in $router.options.routes" v-if="!item.hidden"> <template v-for="(item,index) in $router.options.routes" v-if="!item.hidden">
<el-submenu :index="index+''" v-if="!item.leaf"> <el-submenu :index="index+''" v-if="!item.leaf">
<template slot="title"><i :class="item.iconCls"></i>{{item.name}}</template> <template slot="title"><i :class="item.iconCls"></i>{{item.name}}</template>
<el-menu-item v-for="child in item.children" :index="child.path">{{child.name}}</el-menu-item>
<el-menu-item v-for="child in item.children" :index="child.path" v-if="!child.hidden">{{child.name}}</el-menu-item>
</el-submenu> </el-submenu>
<el-menu-item v-if="item.leaf&&item.children.length>0" :index="item.children[0].path"><i :class="item.iconCls"></i>{{item.children[0].name}}</el-menu-item> <el-menu-item v-if="item.leaf&&item.children.length>0" :index="item.children[0].path"><i :class="item.iconCls"></i>{{item.children[0].name}}</el-menu-item>
</template> </template>
</el-menu>
</aside>
<!--</el-col>-->
<!--<el-col :span="20" class="panel-c-c">-->
<section class="panel-c-c">
</el-menu>
</aside>
<!--</el-col>-->
<!--<el-col :span="20" class="panel-c-c">-->
<section class="panel-c-c">
<div class="grid-content bg-purple-light"> <div class="grid-content bg-purple-light">
<el-col :span="24" style="margin-bottom:15px;"> <el-col :span="24" style="margin-bottom:15px;">
<strong style="width:200px;float:left;color: #475669;">{{currentPathName}}</strong>
<el-breadcrumb separator="/" style="float:right;">
<el-breadcrumb-item :to="{ path: '/table' }">首页</el-breadcrumb-item>
<el-breadcrumb-item v-if="currentPathNameParent!=''">{{currentPathNameParent}}</el-breadcrumb-item>
<el-breadcrumb-item v-if="currentPathName!=''">{{currentPathName}}</el-breadcrumb-item>
</el-breadcrumb>
</el-col>
<el-col :span="24" style="background-color:#fff;box-sizing: border-box;">
<!--<transition name="fade">-->
<router-view></router-view>
<!--</transition>-->
</el-col>
</div>
</section>
<!--</el-col>-->
</el-col>
</el-row>
<strong style="width:200px;float:left;color: #475669;">{{$route.name}}</strong>
<el-breadcrumb separator="/" style="float:right;">
<el-breadcrumb-item v-for="item in $route.matched">
{{ item.name }}
</el-breadcrumb-item>
</el-breadcrumb>
</el-col>
<el-col :span="24" style="background-color:#fff;box-sizing: border-box;">
<!--<transition name="fade">-->
<router-view></router-view>
<!--</transition>-->
</el-col>
</div>
</section>
<!--</el-col>-->
</el-col>
</el-row>
</template> </template>
<script> <script>
export default { export default {
data() { data() {
return { return {
currentPath: '/table',
currentPathName: 'Table',
currentPathNameParent: '导航一',
sysUserName: '', sysUserName: '',
sysUserAvatar: '', sysUserAvatar: '',
form: { form: {
@ -96,13 +73,6 @@
} }
} }
}, },
watch: {
'$route'(to, from) {//
this.currentPath = to.path;
this.currentPathName = to.name;
this.currentPathNameParent = to.matched[0].name;
}
},
methods: { methods: {
onSubmit() { onSubmit() {
console.log('submit!'); console.log('submit!');
@ -122,7 +92,7 @@
//type: 'warning' //type: 'warning'
}).then(() => { }).then(() => {
sessionStorage.removeItem('user'); sessionStorage.removeItem('user');
_this.$router.replace('/login');
_this.$router.push('/login');
}).catch(() => { }).catch(() => {
}); });
@ -131,10 +101,6 @@
} }
}, },
mounted() { mounted() {
this.currentPath = this.$route.path;
this.currentPathName = this.$route.name;
this.currentPathNameParent = this.$route.matched[0].name;
var user = sessionStorage.getItem('user'); var user = sessionStorage.getItem('user');
if (user) { if (user) {
user = JSON.parse(user); user = JSON.parse(user);
@ -143,6 +109,7 @@
} }
} }
} }
</script> </script>
<style scoped> <style scoped>
@ -170,12 +137,12 @@
color: #c0ccda; color: #c0ccda;
} }
.panel-top .rightbar{
.panel-top .rightbar {
text-align: right; text-align: right;
padding-right: 35px; padding-right: 35px;
} }
.panel-top .rightbar .head{
.panel-top .rightbar .head {
width: 40px; width: 40px;
height: 40px; height: 40px;
border-radius: 20px; border-radius: 20px;

75
src/routes.js

@ -0,0 +1,75 @@
import Login from './pages/Login.vue'
import NotFound from './pages/404.vue'
import Home from './pages/Home.vue'
import Main from './pages/Main.vue'
import Table from './pages/nav1/Table.vue'
import Form from './pages/nav1/Form.vue'
import user from './pages/nav1/user.vue'
import Page4 from './pages/nav2/Page4.vue'
import Page5 from './pages/nav2/Page5.vue'
import Page6 from './pages/nav3/Page6.vue'
import echarts from './pages/charts/echarts.vue'
let routes = [
{
path: '/login',
component: Login,
name: '',
hidden: true
},
{
path: '/404',
component: NotFound,
name: '',
hidden: true
},
//{ path: '/main', component: Main },
{
path: '/',
component: Home,
name: '导航一',
iconCls: 'el-icon-message',//图标样式class
children: [
{ path: '/main', component: Main, name: '主页', hidden: true },
{ path: '/table', component: Table, name: 'Table' },
{ path: '/form', component: Form, name: 'Form' },
{ path: '/user', component: user, name: '列表' },
]
},
{
path: '/',
component: Home,
name: '导航二',
iconCls: 'fa fa-id-card-o',
children: [
{ path: '/page4', component: Page4, name: '页面4' },
{ path: '/page5', component: Page5, name: '页面5' }
]
},
{
path: '/',
component: Home,
name: '',
iconCls: 'fa fa-address-card',
leaf: true,//只有一个节点
children: [
{ path: '/page6', component: Page6, name: '导航三' }
]
},
{
path: '/',
component: Home,
name: 'Charts',
iconCls: 'fa fa-bar-chart',
children: [
{ path: '/echarts', component: echarts, name: 'echarts' }
]
},
{
path: '*',
hidden: true,
redirect: { path: '/404' }
}
];
export default routes;
Loading…
Cancel
Save