ops
/
jump-web
8
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity
Browse Source

Merge branch 'dev'

master
taylor 8 years ago
parent
9da6caee42 87e060a7b4
commit
e25ce7d705
6 changed files with 160 additions and 184 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  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
View File

@ -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
View File

@ -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
View File

@ -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
View File

@ -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
View File

@ -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
View File

@ -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;
Write Preview
Loading…
Cancel
Save