@@ -1,111 +0,0 @@ | |||
<template> | |||
<!-- <el-breadcrumb class="app-breadcrumb" separator="/"> | |||
<transition-group name="breadcrumb"> | |||
<el-breadcrumb-item v-for="(item,index) in levelList" :key="item.path"> | |||
<span v-if="item.redirect==='noRedirect'||index==levelList.length-1" class="no-redirect">{{ item.meta.title }}</span> | |||
<a v-else @click.prevent="handleLink(item)">{{ item.meta.title }}</a> | |||
</el-breadcrumb-item> | |||
</transition-group> | |||
</el-breadcrumb> --> | |||
<!-- <el-breadcrumb separator-class="el-icon-arrow-right"> | |||
<el-breadcrumb-item :to="{ path: '/' }" class="active">首页</el-breadcrumb-item> | |||
<el-breadcrumb-item :to="{ path: '/log/log' }">日志</el-breadcrumb-item> --> | |||
<!-- </el-breadcrumb> --> | |||
<div class="flex"> | |||
<span class="addr active">首页</span> | |||
<!-- <span> ></span> --> | |||
<span class="addr" @click="nextto('/log')">日志</span> | |||
</div> | |||
</template> | |||
<script> | |||
import pathToRegexp from 'path-to-regexp' | |||
export default { | |||
data() { | |||
return { | |||
levelList: null | |||
} | |||
}, | |||
watch: { | |||
$route() { | |||
this.getBreadcrumb() | |||
} | |||
}, | |||
created() { | |||
this.getBreadcrumb() | |||
}, | |||
methods: { | |||
nextto(to){ | |||
this.$router.push({ path: to }); | |||
}, | |||
getBreadcrumb() { | |||
// only show routes with meta.title | |||
let matched = this.$route.matched.filter(item => item.meta && item.meta.title) | |||
const first = matched[0] | |||
if (!this.isDashboard(first)) { | |||
matched = [{ path: '/dashboard', meta: { title: '首页' }}].concat(matched) | |||
} | |||
this.levelList = matched.filter(item => item.meta && item.meta.title && item.meta.breadcrumb !== false) | |||
}, | |||
isDashboard(route) { | |||
const name = route && route.name | |||
if (!name) { | |||
return false | |||
} | |||
return name.trim().toLocaleLowerCase() === 'Dashboard'.toLocaleLowerCase() | |||
}, | |||
pathCompile(path) { | |||
// To solve this problem https://github.com/PanJiaChen/vue-element-admin/issues/561 | |||
const { params } = this.$route | |||
var toPath = pathToRegexp.compile(path) | |||
return toPath(params) | |||
}, | |||
handleLink(item) { | |||
const { redirect, path } = item | |||
if (redirect) { | |||
this.$router.push(redirect) | |||
return | |||
} | |||
this.$router.push(this.pathCompile(path)) | |||
} | |||
} | |||
} | |||
</script> | |||
<style lang="scss" scoped> | |||
.app-breadcrumb.el-breadcrumb { | |||
display: inline-block; | |||
font-size: 14px; | |||
line-height: 50px; | |||
margin-left: 8px; | |||
.no-redirect { | |||
color: #97a8be; | |||
cursor: text; | |||
} | |||
} | |||
.flex{ | |||
display: flex; | |||
} | |||
.addr{ | |||
margin: 15px 35px 0 0; | |||
color: #333; | |||
font-family: 'Arial Negreta', 'Arial Normal', 'Arial', sans-serif; | |||
font-weight: 700; | |||
&:hover { | |||
color: #409eff; | |||
cursor: pointer; | |||
// background-color: $subMenuHover !important; | |||
} | |||
} | |||
.active{ | |||
color: #409eff; | |||
cursor: text !important; | |||
border-bottom: 3px solid #409eff; | |||
} | |||
</style> |
@@ -1,41 +0,0 @@ | |||
<template> | |||
<section class="app-main"> | |||
<transition name="fade-transform" mode="out-in"> | |||
<router-view :key="key" /> | |||
</transition> | |||
</section> | |||
</template> | |||
<script> | |||
export default { | |||
name: 'AppMain', | |||
computed: { | |||
key() { | |||
return this.$route.path | |||
} | |||
} | |||
} | |||
</script> | |||
<style scoped> | |||
.app-main { | |||
min-height: calc(100% - 50px); | |||
width: 100%; | |||
position: relative; | |||
overflow: hidden; | |||
} | |||
.fixed-header+.app-main { | |||
padding-top: 50px; | |||
} | |||
</style> | |||
<style lang="scss"> | |||
// fix css style bug in open el-dialog | |||
.el-popup-parent--hidden { | |||
.fixed-header { | |||
padding-right: 15px; | |||
} | |||
} | |||
</style> |
@@ -138,48 +138,8 @@ export default { | |||
return name == this.name ? "active " : ""; | |||
}, | |||
nextto(to) { | |||
this.$router.push({ path: to }); | |||
}, | |||
getBreadcrumb() { | |||
// only show routes with meta.title | |||
let matched = this.$route.matched.filter( | |||
(item) => item.meta && item.meta.title | |||
); | |||
const first = matched[0]; | |||
if (!this.isDashboard(first)) { | |||
matched = [{ path: "/dashboard", meta: { title: "首页" } }].concat( | |||
matched | |||
); | |||
} | |||
this.levelList = matched.filter( | |||
(item) => item.meta && item.meta.title && item.meta.breadcrumb !== false | |||
); | |||
}, | |||
isDashboard(route) { | |||
const name = route && route.name; | |||
if (!name) { | |||
return false; | |||
} | |||
return ( | |||
name.trim().toLocaleLowerCase() === "Dashboard".toLocaleLowerCase() | |||
); | |||
}, | |||
pathCompile(path) { | |||
// To solve this problem https://github.com/PanJiaChen/vue-element-admin/issues/561 | |||
const { params } = this.$route; | |||
var toPath = pathToRegexp.compile(path); | |||
return toPath(params); | |||
}, | |||
handleLink(item) { | |||
const { redirect, path } = item; | |||
if (redirect) { | |||
this.$router.push(redirect); | |||
return; | |||
} | |||
this.$router.push(this.pathCompile(path)); | |||
}, | |||
this.$router.push({ name: to }); | |||
} | |||
}, | |||
}; | |||
</script> |
@@ -19,8 +19,6 @@ | |||
<script> | |||
import { mapGetters, mapActions, mapState } from "vuex"; | |||
import Breadcrumb from "@/components/Breadcrumb"; | |||
import Hamburger from "@/components/Hamburger"; | |||
import { setToken, getToken, removeToken } from "@/utils/auth"; // get token from cookie | |||
export default { | |||
components: {}, |
@@ -1,4 +1,3 @@ | |||
export { default as Navtitle } from './Navtitle' | |||
export { default as AppMain } from './AppMain' | |||
export { default as Title } from './Title' | |||
export { default as Statusbar } from './Statusbar' |
@@ -3,33 +3,6 @@ import Router from 'vue-router' | |||
Vue.use(Router) | |||
/* Layout */ | |||
/** | |||
* Note: sub-menu only appear when route children.length >= 1 | |||
* Detail see: https://panjiachen.github.io/vue-element-admin-site/guide/essentials/router-and-nav.html | |||
* | |||
* hidden: true if set true, item will not show in the sidebar(default is false) | |||
* alwaysShow: true if set true, will always show the root menu | |||
* if not set alwaysShow, when item has more than one children route, | |||
* it will becomes nested mode, otherwise not show the root menu | |||
* redirect: noRedirect if set noRedirect will no redirect in the breadcrumb | |||
* name:'router-name' the name is used by <keep-alive> (must set!!!) | |||
* meta : { | |||
roles: ['admin','editor'] control the page roles (you can set multiple roles) | |||
title: 'title' the name show in sidebar and breadcrumb (recommend set) | |||
icon: 'svg-name'/'el-icon-x' the icon show in the sidebar | |||
breadcrumb: false if set false, the item will hidden in breadcrumb(default is true) | |||
activeMenu: '/example/list' if set path, the sidebar will highlight the path you set | |||
} | |||
*/ | |||
/** | |||
* constantRoutes | |||
* a base page that does not have permission requirements | |||
* all roles can be accessed | |||
*/ | |||
export const constantRoutes = [{ | |||
path: '/login', | |||
name: "/login", |
@@ -498,7 +498,7 @@ export default { | |||
nextto(to, access = true) { | |||
console.log(to, access); | |||
if (access) { | |||
this.$router.push({ path: to }); | |||
this.$router.push({name: to }); | |||
} | |||
}, | |||
@@ -5,7 +5,59 @@ | |||
<div class="main1"> | |||
<div class="login-frame"> | |||
<el-form | |||
<div class="login-form"> | |||
<div class="title-container"> | |||
<div class="title"> | |||
<span>登录</span> | |||
</div> | |||
</div> | |||
<div> | |||
<span class="svg-container" style="margin-left: 10px"> | |||
<svg-icon icon-class="user" /> | |||
</span> | |||
<el-input | |||
ref="user_name" | |||
v-model="loginForm.user_name" | |||
placeholder="帐户" | |||
name="user_name" | |||
type="text" | |||
tabindex="1" | |||
auto-complete="on" | |||
/> | |||
</div> | |||
<div> | |||
<span class="svg-container" style="margin-left: 10px"> | |||
<svg-icon icon-class="password" /> | |||
</span> | |||
<el-input | |||
:key="passwordType" | |||
ref="password" | |||
v-model="loginForm.password" | |||
:type="passwordType" | |||
placeholder="密码" | |||
name="password" | |||
tabindex="2" | |||
auto-complete="on" | |||
@input="oninput" | |||
@keydown.enter.native="handleSubmit" | |||
/> | |||
</div> | |||
<button | |||
class="a" | |||
:class="{active:active}" | |||
:loading="loading" | |||
style="width: 100%; margin-top: 27px" | |||
@click="handleSubmit" | |||
> | |||
登录 | |||
</button> | |||
</div> | |||
<!-- <el-form | |||
ref="loginForm" | |||
:model="loginForm" | |||
:rules="loginRules" | |||
@@ -67,7 +119,7 @@ | |||
> | |||
登录 | |||
</button> | |||
</el-form> | |||
</el-form> --> | |||
</div> | |||
</div> | |||
</div> | |||
@@ -95,6 +147,7 @@ export default { | |||
} | |||
}; | |||
return { | |||
active:false, | |||
loginForm: { | |||
user_name: "", | |||
password: "", | |||
@@ -134,17 +187,12 @@ export default { | |||
"set_loading", | |||
"statusInit", | |||
]), | |||
showPwd() { | |||
if (this.passwordType === "password") { | |||
this.passwordType = ""; | |||
} else { | |||
this.passwordType = "password"; | |||
} | |||
this.$nextTick(() => { | |||
this.$refs.password.focus(); | |||
}); | |||
oninput(e){ | |||
this.active = e !="" | |||
console.log('input',e,this.active) | |||
}, | |||
handleSubmit(e) { | |||
console.log("开始登录", e); | |||
if (e.pointerType == "mouse" || e.code == "Enter") { | |||
@@ -161,7 +209,7 @@ export default { | |||
console.log(this.$router); | |||
that.$router.push({ name: "/" }); | |||
that.getUserInfo(); | |||
}, 1000); | |||
}, 10000); | |||
} | |||
}); | |||
} | |||
@@ -292,15 +340,12 @@ $cursor: #fff; | |||
height: 38px; | |||
background-color: #aeaeae; | |||
border: 1px solid #dcdfe6; | |||
border-radius: 5px; | |||
border-radius: 4px; | |||
} | |||
.b { | |||
font-size: 13px; | |||
color: #fff; | |||
height: 38px; | |||
.active { | |||
background-color: #02a7f0; | |||
border-radius: 3px; | |||
border: 1px solid #dcdfe6; | |||
// border-radius: 4px; | |||
border: 1px solid #02a7f0; | |||
cursor: pointer; | |||
} | |||
.w { |
@@ -1,98 +0,0 @@ | |||
import { mount, createLocalVue } from '@vue/test-utils' | |||
import VueRouter from 'vue-router' | |||
import ElementUI from 'element-ui' | |||
import Breadcrumb from '@/components/Breadcrumb/index.vue' | |||
const localVue = createLocalVue() | |||
localVue.use(VueRouter) | |||
localVue.use(ElementUI) | |||
const routes = [ | |||
{ | |||
path: '/', | |||
name: 'home', | |||
children: [{ | |||
path: 'dashboard', | |||
name: 'dashboard' | |||
}] | |||
}, | |||
{ | |||
path: '/menu', | |||
name: 'menu', | |||
children: [{ | |||
path: 'menu1', | |||
name: 'menu1', | |||
meta: { title: 'menu1' }, | |||
children: [{ | |||
path: 'menu1-1', | |||
name: 'menu1-1', | |||
meta: { title: 'menu1-1' } | |||
}, | |||
{ | |||
path: 'menu1-2', | |||
name: 'menu1-2', | |||
redirect: 'noredirect', | |||
meta: { title: 'menu1-2' }, | |||
children: [{ | |||
path: 'menu1-2-1', | |||
name: 'menu1-2-1', | |||
meta: { title: 'menu1-2-1' } | |||
}, | |||
{ | |||
path: 'menu1-2-2', | |||
name: 'menu1-2-2' | |||
}] | |||
}] | |||
}] | |||
}] | |||
const router = new VueRouter({ | |||
routes | |||
}) | |||
describe('Breadcrumb.vue', () => { | |||
const wrapper = mount(Breadcrumb, { | |||
localVue, | |||
router | |||
}) | |||
it('dashboard', () => { | |||
router.push('/dashboard') | |||
const len = wrapper.findAll('.el-breadcrumb__inner').length | |||
expect(len).toBe(1) | |||
}) | |||
it('normal route', () => { | |||
router.push('/menu/menu1') | |||
const len = wrapper.findAll('.el-breadcrumb__inner').length | |||
expect(len).toBe(2) | |||
}) | |||
it('nested route', () => { | |||
router.push('/menu/menu1/menu1-2/menu1-2-1') | |||
const len = wrapper.findAll('.el-breadcrumb__inner').length | |||
expect(len).toBe(4) | |||
}) | |||
it('no meta.title', () => { | |||
router.push('/menu/menu1/menu1-2/menu1-2-2') | |||
const len = wrapper.findAll('.el-breadcrumb__inner').length | |||
expect(len).toBe(3) | |||
}) | |||
// it('click link', () => { | |||
// router.push('/menu/menu1/menu1-2/menu1-2-2') | |||
// const breadcrumbArray = wrapper.findAll('.el-breadcrumb__inner') | |||
// const second = breadcrumbArray.at(1) | |||
// console.log(breadcrumbArray) | |||
// const href = second.find('a').attributes().href | |||
// expect(href).toBe('#/menu/menu1') | |||
// }) | |||
// it('noRedirect', () => { | |||
// router.push('/menu/menu1/menu1-2/menu1-2-1') | |||
// const breadcrumbArray = wrapper.findAll('.el-breadcrumb__inner') | |||
// const redirectBreadcrumb = breadcrumbArray.at(2) | |||
// expect(redirectBreadcrumb.contains('a')).toBe(false) | |||
// }) | |||
it('last breadcrumb', () => { | |||
router.push('/menu/menu1/menu1-2/menu1-2-1') | |||
const breadcrumbArray = wrapper.findAll('.el-breadcrumb__inner') | |||
const redirectBreadcrumb = breadcrumbArray.at(3) | |||
expect(redirectBreadcrumb.contains('a')).toBe(false) | |||
}) | |||
}) |