liyanhong
/
jinjianback1.1
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

refine

This commit is contained in:
Pan 2017-06-28 23:02:22 +08:00
parent 2bc84413e3
commit c51c7fec5f
13 changed files with 319 additions and 351 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
src/components/Hamburger/index.vue
View File

@ -1,6 +1,15 @@
<template> <template>
<div> <div>
<svg t="1492500959545" @click="toggleClick" class="svg-icon hamburger" :class="{'is-active':isActive}" style="" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1691" xmlns:xlink="http://www.w3.org/1999/xlink" width="64" height="64"><path d="M966.8023 568.849776 57.196677 568.849776c-31.397081 0-56.850799-25.452695-56.850799-56.850799l0 0c0-31.397081 25.452695-56.849776 56.850799-56.849776l909.605623 0c31.397081 0 56.849776 25.452695 56.849776 56.849776l0 0C1023.653099 543.397081 998.200404 568.849776 966.8023 568.849776z" p-id="1692"></path><path d="M966.8023 881.527125 57.196677 881.527125c-31.397081 0-56.850799-25.452695-56.850799-56.849776l0 0c0-31.397081 25.452695-56.849776 56.850799-56.849776l909.605623 0c31.397081 0 56.849776 25.452695 56.849776 56.849776l0 0C1023.653099 856.07443 998.200404 881.527125 966.8023 881.527125z" p-id="1693"></path><path d="M966.8023 256.17345 57.196677 256.17345c-31.397081 0-56.850799-25.452695-56.850799-56.849776l0 0c0-31.397081 25.452695-56.850799 56.850799-56.850799l909.605623 0c31.397081 0 56.849776 25.452695 56.849776 56.850799l0 0C1023.653099 230.720755 998.200404 256.17345 966.8023 256.17345z" p-id="1694"></path></svg> <svg t="1492500959545" @click="toggleClick" class="svg-icon hamburger" :class="{'is-active':isActive}" style="" viewBox="0 0 1024 1024"
version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1691" xmlns:xlink="http://www.w3.org/1999/xlink" width="64"
height="64">
<path d="M966.8023 568.849776 57.196677 568.849776c-31.397081 0-56.850799-25.452695-56.850799-56.850799l0 0c0-31.397081 25.452695-56.849776 56.850799-56.849776l909.605623 0c31.397081 0 56.849776 25.452695 56.849776 56.849776l0 0C1023.653099 543.397081 998.200404 568.849776 966.8023 568.849776z"
p-id="1692"></path>
<path d="M966.8023 881.527125 57.196677 881.527125c-31.397081 0-56.850799-25.452695-56.850799-56.849776l0 0c0-31.397081 25.452695-56.849776 56.850799-56.849776l909.605623 0c31.397081 0 56.849776 25.452695 56.849776 56.849776l0 0C1023.653099 856.07443 998.200404 881.527125 966.8023 881.527125z"
p-id="1693"></path>
<path d="M966.8023 256.17345 57.196677 256.17345c-31.397081 0-56.850799-25.452695-56.850799-56.849776l0 0c0-31.397081 25.452695-56.850799 56.850799-56.850799l909.605623 0c31.397081 0 56.849776 25.452695 56.849776 56.850799l0 0C1023.653099 230.720755 998.200404 256.17345 966.8023 256.17345z"
p-id="1694"></path>
</svg>
</div> </div>
</template> </template>
@ -21,7 +30,7 @@
</script> </script>
<style scoped> <style scoped>
.hamburger { .hamburger {
display: inline-block; display: inline-block;
cursor: pointer; cursor: pointer;
width: 20px; width: 20px;
@ -29,8 +38,9 @@
transform: rotate(0deg); transform: rotate(0deg);
transition: .38s; transition: .38s;
transform-origin: 50% 50%; transform-origin: 50% 50%;
} }
.hamburger.is-active {
.hamburger.is-active {
transform: rotate(90deg); transform: rotate(90deg);
} }
</style> </style>

16
src/router/index.js
View File

@ -1,8 +1,7 @@
import Vue from 'vue'; import Vue from 'vue';
import Router from 'vue-router'; import Router from 'vue-router';
const _import = require('./_import_' + process.env.NODE_ENV); const _import = require('./_import_' + process.env.NODE_ENV);
// in development env not use Lazy Loading,because Lazy Loading large page will cause webpack hot update too slow // in development env not use Lazy Loading,because Lazy Loading large page will cause webpack hot update too slow.so only in production use Lazy Loading
// so only in production use Lazy Loading
/* layout */ /* layout */
import Layout from '../views/layout/Layout'; import Layout from '../views/layout/Layout';
@ -16,6 +15,7 @@ const dashboard = _import('dashboard/index');
/* error page */ /* error page */
const Err404 = _import('404'); const Err404 = _import('404');
/* demo page */
const Form = _import('page/form'); const Form = _import('page/form');
const Table = _import('table/index'); const Table = _import('table/index');
@ -23,10 +23,10 @@ Vue.use(Router);
/** /**
* icon : the icon show in the sidebar * icon : the icon show in the sidebar
* hidden : if hidden:true will not show in the sidebar * hidden : if `hidden:true` will not show in the sidebar
* redirect : if redirect:noredirect will not redirct in the levelbar * redirect : if `redirect:noredirect` will not redirct in the levelbar
* noDropdown : if noDropdown:true will not has submenu * noDropdown : if `noDropdown:true` will not has submenu in the sidebar
* meta : { role: ['admin'] } will control the page role * meta : `{ role: ['admin'] }` will control the page role
**/ **/
export const constantRouterMap = [ export const constantRouterMap = [
{ path: '/login', component: Login, hidden: true }, { path: '/login', component: Login, hidden: true },
@ -35,7 +35,7 @@ export const constantRouterMap = [
path: '/', path: '/',
component: Layout, component: Layout,
redirect: '/dashboard', redirect: '/dashboard',
name: '首页', name: 'Home',
hidden: true, hidden: true,
children: [{ path: 'dashboard', component: dashboard }] children: [{ path: 'dashboard', component: dashboard }]
} }
@ -58,6 +58,7 @@ export const asyncRouterMap = [
{ path: 'index', component: Form, name: 'Form', icon: 'zonghe' } { path: 'index', component: Form, name: 'Form', icon: 'zonghe' }
] ]
}, },
{ {
path: '/table', path: '/table',
component: Layout, component: Layout,
@ -67,5 +68,6 @@ export const asyncRouterMap = [
noDropdown: true, noDropdown: true,
children: [{ path: 'index', component: Table, name: 'Table', meta: { role: ['admin'] } }] children: [{ path: 'index', component: Table, name: 'Table', meta: { role: ['admin'] } }]
}, },
{ path: '*', redirect: '/404', hidden: true } { path: '*', redirect: '/404', hidden: true }
]; ];

25
src/store/modules/user.js
View File

@ -56,21 +56,6 @@ const user = {
}); });
}, },
// 第三方验证登录
LoginByThirdparty({ commit, state }, code) {
return new Promise((resolve, reject) => {
commit('SET_CODE', code);
loginByThirdparty(state.status, state.email, state.code, state.auth_type).then(response => {
commit('SET_TOKEN', response.data.token);
Cookies.set('Admin-Token', response.data.token);
resolve();
}).catch(error => {
reject(error);
});
});
},
// 登出 // 登出
LogOut({ commit, state }) { LogOut({ commit, state }) {
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
@ -92,16 +77,6 @@ const user = {
Cookies.remove('Admin-Token'); Cookies.remove('Admin-Token');
resolve(); resolve();
}); });
},
// 动态修改权限
ChangeRole({ commit }, role) {
return new Promise(resolve => {
commit('SET_ROLES', [role]);
commit('SET_TOKEN', role);
Cookies.set('Admin-Token', role);
resolve();
})
} }
} }
}; };

9
src/utils/fetch.js
View File

@ -1,7 +1,7 @@
import axios from 'axios'; import axios from 'axios';
import { Message } from 'element-ui'; import { Message } from 'element-ui';
import store from '../store'; import store from '../store';
// import router from '../router';
// 创建axios实例 // 创建axios实例
const service = axios.create({ const service = axios.create({
@ -11,9 +11,8 @@ const service = axios.create({
// request拦截器 // request拦截器
service.interceptors.request.use(config => { service.interceptors.request.use(config => {
// Do something before request is sent
if (store.getters.token) { if (store.getters.token) {
config.headers['X-Token'] = store.getters.token; // 让每个请求携带token--['X-Token']为自定义key 请根据实际情况自行修改 config.headers['X-Token'] = store.getters.token; // 让每个请求携带自定义token 请根据实际情况自行修改
} }
return config; return config;
}, error => { }, error => {
@ -26,8 +25,7 @@ service.interceptors.request.use(config => {
service.interceptors.response.use( service.interceptors.response.use(
response => { response => {
/** /**
* 下面的注释为通过response自定义code来标示请求状态，当code返回如下情况为权限有问题，登出并返回到登录页 * code为非20000是抛错 可结合自己业务进行修改
* 如通过xmlhttprequest 状态码标识 逻辑可写在下面error中
*/ */
const res = response.data; const res = response.data;
if (res.code !== 20000) { if (res.code !== 20000) {
@ -36,6 +34,7 @@ service.interceptors.response.use(
type: 'error', type: 'error',
duration: 5 * 1000 duration: 5 * 1000
}); });
// 50008:非法的token; 50012:其他客户端登录了; 50014:Token 过期了; // 50008:非法的token; 50012:其他客户端登录了; 50014:Token 过期了;
if (res.code === 50008 || res.code === 50012 || res.code === 50014) { if (res.code === 50008 || res.code === 50012 || res.code === 50014) {
MessageBox.confirm('你已被登出，可以取消继续留在该页面，或者重新登录', '确定登出', { MessageBox.confirm('你已被登出，可以取消继续留在该页面，或者重新登录', '确定登出', {

12
src/utils/index.js
View File

@ -56,15 +56,3 @@
return d.getMonth() + 1 + '月' + d.getDate() + '日' + d.getHours() + '时' + d.getMinutes() + '分' return d.getMonth() + 1 + '月' + d.getDate() + '日' + d.getHours() + '时' + d.getMinutes() + '分'
} }
} }
export function scrollTo(element, to, duration) {
if (duration <= 0) return;
const difference = to - element.scrollTop;
const perTick = difference / duration * 10;
setTimeout(() => {
console.log(new Date())
element.scrollTop = element.scrollTop + perTick;
if (element.scrollTop === to) return;
scrollTo(element, to, duration - 10);
}, 10);
}

5
src/views/404.vue
View File

@ -38,7 +38,7 @@
</script> </script>
<style rel="stylesheet/scss" lang="scss" scoped> <style rel="stylesheet/scss" lang="scss" scoped>
.wscn-http404 { .wscn-http404 {
position: relative; position: relative;
width: 1200px; width: 1200px;
margin: 20px auto 60px; margin: 20px auto 60px;
@ -224,5 +224,6 @@
} }
} }
} }
} }
</style> </style>

2
src/views/layout/Layout.vue
View File

@ -48,7 +48,7 @@
} }
} }
} }
.main-container{ .main-container {
margin-left: 40px; margin-left: 40px;
} }
} }

4
src/views/layout/Levelbar.vue
View File

@ -41,9 +41,9 @@
font-size: 14px; font-size: 14px;
line-height: 50px; line-height: 50px;
margin-left: 10px; margin-left: 10px;
.no-redirect{ .no-redirect {
color: #97a8be; color: #97a8be;
cursor:text; cursor: text;
} }
} }
</style> </style>

9
src/views/layout/Navbar.vue
View File

@ -10,7 +10,7 @@
<el-dropdown-menu class="user-dropdown" slot="dropdown"> <el-dropdown-menu class="user-dropdown" slot="dropdown">
<router-link class='inlineBlock' to="/"> <router-link class='inlineBlock' to="/">
<el-dropdown-item> <el-dropdown-item>
首页 Home
</el-dropdown-item> </el-dropdown-item>
</router-link> </router-link>
<el-dropdown-item divided><span @click="logout" style="display:block;">退出登录</span></el-dropdown-item> <el-dropdown-item divided><span @click="logout" style="display:block;">退出登录</span></el-dropdown-item>
@ -32,7 +32,6 @@
computed: { computed: {
...mapGetters([ ...mapGetters([
'sidebar', 'sidebar',
'name',
'avatar' 'avatar'
]) ])
}, },
@ -42,7 +41,7 @@
}, },
logout() { logout() {
this.$store.dispatch('LogOut').then(() => { this.$store.dispatch('LogOut').then(() => {
location.reload();// 为了重新实例化vue-router对象 避免bug location.reload(); // 为了重新实例化vue-router对象 避免bug
}); });
} }
} }
@ -65,7 +64,7 @@
position: absolute; position: absolute;
right: 150px; right: 150px;
} }
.screenfull{ .screenfull {
position: absolute; position: absolute;
right: 90px; right: 90px;
top: 16px; top: 16px;
@ -78,7 +77,7 @@
right: 35px; right: 35px;
.avatar-wrapper { .avatar-wrapper {
cursor: pointer; cursor: pointer;
margin-top:5px; margin-top: 5px;
position: relative; position: relative;
.user-avatar { .user-avatar {
width: 40px; width: 40px;

5
src/views/layout/Sidebar.vue
View File

@ -18,7 +18,8 @@
</script> </script>
<style rel="stylesheet/scss" lang="scss" scoped> <style rel="stylesheet/scss" lang="scss" scoped>
.el-menu { .el-menu {
min-height: 100%; min-height: 100%;
} }
</style> </style>

1
src/views/layout/SidebarItem.vue
View File

@ -24,7 +24,6 @@
</template> </template>
<script> <script>
export default { export default {
name: 'SidebarItem', name: 'SidebarItem',
props: { props: {

21
src/views/login/index.vue
View File

@ -1,22 +1,20 @@
<template> <template>
<div class="login-container"> <div class="login-container">
<el-form autoComplete="on" :model="loginForm" :rules="loginRules" ref="loginForm" label-position="left" <el-form autoComplete="on" :model="loginForm" :rules="loginRules" ref="loginForm" label-position="left" label-width="0px"
label-width="0px"
class="card-box login-form"> class="card-box login-form">
<h3 class="title">系统登录</h3> <h3 class="title">系统登录</h3>
<el-form-item prop="email"> <el-form-item prop="email">
<span class="svg-container"> <span class="svg-container">
<icon-svg icon-class="jiedianyoujian"></icon-svg> <icon-svg icon-class="jiedianyoujian"></icon-svg>
</span> </span>
<el-input name="email" type="text" v-model="loginForm.email" autoComplete="on" <el-input name="email" type="text" v-model="loginForm.email" autoComplete="on" placeholder="邮箱"></el-input>
placeholder="邮箱"></el-input>
</el-form-item> </el-form-item>
<el-form-item prop="password"> <el-form-item prop="password">
<span class="svg-container"> <span class="svg-container">
<icon-svg icon-class="mima" ></icon-svg> <icon-svg icon-class="mima" ></icon-svg>
</span> </span>
<el-input name="password" type="password" @keyup.enter.native="handleLogin" v-model="loginForm.password" <el-input name="password" type="password" @keyup.enter.native="handleLogin" v-model="loginForm.password" autoComplete="on"
autoComplete="on" placeholder="密码"></el-input> placeholder="密码"></el-input>
</el-form-item> </el-form-item>
<el-form-item> <el-form-item>
<el-button type="primary" style="width:100%;" :loading="loading" @click.native.prevent="handleLogin"> <el-button type="primary" style="width:100%;" :loading="loading" @click.native.prevent="handleLogin">
@ -52,7 +50,7 @@
return { return {
loginForm: { loginForm: {
email: 'admin@wallstreetcn.com', email: 'admin@wallstreetcn.com',
password: '' password: '111111'
}, },
loginRules: { loginRules: {
email: [ email: [
@ -88,16 +86,16 @@
<style rel="stylesheet/scss" lang="scss"> <style rel="stylesheet/scss" lang="scss">
@import "src/styles/mixin.scss"; @import "src/styles/mixin.scss";
.tips{ .tips {
font-size: 14px; font-size: 14px;
color: #fff; color: #fff;
margin-bottom: 5px; margin-bottom: 5px;
} }
.login-container { .login-container {
@include relative; @include relative;
height: 100vh; height: 100vh;
background-color: #2d3a4b; background-color: #2d3a4b;
input:-webkit-autofill { input:-webkit-autofill {
-webkit-box-shadow: 0 0 0px 1000px #293444 inset !important; -webkit-box-shadow: 0 0 0px 1000px #293444 inset !important;
-webkit-text-fill-color: #fff !important; -webkit-text-fill-color: #fff !important;
@ -120,7 +118,6 @@
padding: 6px 5px 6px 15px; padding: 6px 5px 6px 15px;
color: #889aa4; color: #889aa4;
} }
.title { .title {
font-size: 26px; font-size: 26px;
font-weight: 400; font-weight: 400;
@ -129,7 +126,6 @@
text-align: center; text-align: center;
font-weight: bold; font-weight: bold;
} }
.login-form { .login-form {
position: absolute; position: absolute;
left: 0; left: 0;
@ -138,17 +134,14 @@
padding: 35px 35px 15px 35px; padding: 35px 35px 15px 35px;
margin: 120px auto; margin: 120px auto;
} }
.el-form-item { .el-form-item {
border: 1px solid rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.1);
background: rgba(0, 0, 0, 0.1); background: rgba(0, 0, 0, 0.1);
border-radius: 5px; border-radius: 5px;
color: #454545; color: #454545;
} }
.forget-pwd { .forget-pwd {
color: #fff; color: #fff;
} }
} }
</style> </style>

7
src/views/table/index.vue
View File

@ -33,8 +33,9 @@
</template> </template>
<script> <script>
import { getList } from '@/api/table'; import { getList } from '@/api/table';
export default {
export default {
data() { data() {
return { return {
list: null, list: null,
@ -53,5 +54,5 @@ export default {
}) })
} }
} }
}; };
</script> </script>