Browse Source

增加历史页签功能

main
pixel 5 years ago
parent
commit
619f456f34
  1. 11
      QMPlusVuePage/src/store/module/router.js
  2. 63
      QMPlusVuePage/src/view/layout/aside/historyComponent/history.vue
  3. 9
      QMPlusVuePage/src/view/layout/aside/index.vue
  4. 37
      QMPlusVuePage/src/view/layout/index.vue
  5. 13
      QMPlusVuePage/src/view/superAdmin/api/api.vue

11
QMPlusVuePage/src/store/module/router.js

@ -2,6 +2,16 @@ import { asyncRouterHandle } from '@/utils/asyncRouter';
import { asyncMenu } from '@/api/menu'
const formatRouter = (routes) => {
routes && routes.map(item => {
item.meta.hidden = item.hidden
if (item.children.length > 0) {
formatRouter(item.children)
}
})
}
export const router = {
namespaced: true,
state: {
@ -27,6 +37,7 @@ export const router = {
}]
const asyncRouterRes = await asyncMenu()
const asyncRouter = asyncRouterRes.data.menus
formatRouter(asyncRouter)
baseRouter[0].children = asyncRouter
baseRouter.push({
path: '*',

63
QMPlusVuePage/src/view/layout/aside/historyComponent/history.vue

@ -0,0 +1,63 @@
<template>
<div class="router-history">
<el-tabs v-model="activeValue" type="card" :closable="!(historys.length==1&&this.$route.name=='dashbord')" @tab-click="changeTab" @tab-remove="removeTab">
<el-tab-pane
v-for="item in historys"
:key="item.name"
:label="item.meta.title"
:name="item.name"
>
</el-tab-pane>
</el-tabs>
</div>
</template>
<script>
export default {
name:"HistoryComponent",
data(){
return{
historys:[
{
name:"dashbord",
meta:{
title:"仪表盘"
}
}
],
activeValue:"dashbord"
}
},
methods:{
changeTab(tab){
this.$router.push({name:tab.name})
},
removeTab(tab){
const index = this.historys.findIndex(item=>item.name == tab)
if(this.$route.name == tab){
if(this.historys.length==1){
this.$router.push({name:"dashbord"})
}else{
if(index<this.historys.length-1){
this.$router.push({name:this.historys[index+1].name})
}else{
this.$router.push({name:this.historys[index-1].name})
}
}
}
this.historys.splice(index,1)
}
},
watch:{
$route( to ){
this.historys = this.historys.filter(item=>!item.meta.hidden)
if(!this.historys.some(item=>item.name==to.name)){
this.historys.push(to)
}
this.activeValue = to.name
}
}
}
</script>
<style lang="scss">
</style>

9
QMPlusVuePage/src/view/layout/aside/index.vue

@ -20,7 +20,7 @@
</template>
<script>
import { mapGetters } from 'vuex'
import { mapGetters,mapMutations } from 'vuex'
import AsideComponent from '@/view/layout/aside/asideComponent'
export default {
name: 'Aside',
@ -31,6 +31,7 @@ export default {
}
},
methods: {
...mapMutations("history",["addHistory"]),
selectMenuItem(index) {
if (index === this.$route.name) return
this.$router.push({ name: index })
@ -44,7 +45,6 @@ export default {
AsideComponent
},
created() {
this.active = this.$route.name
let screenWidth = document.body.clientWidth
if(screenWidth<1000){
this.isCollapse = !this.isCollapse
@ -57,6 +57,11 @@ export default {
})
},
watch:{
$route(){
this.active = this.$route.name
}
},
beforeDestroy() {
this.$bus.off('totalCollapse')
this.$bus.off('collapse')

37
QMPlusVuePage/src/view/layout/index.vue

@ -12,7 +12,12 @@
<i class="el-icon-s-unfold" v-if="isCollapse"></i>
<i class="el-icon-s-fold" v-else></i>
</div>
<h1 class="admin-title">Gin-Vue-Admin</h1>
<el-breadcrumb class="breadcrumb" separator-class="el-icon-arrow-right">
<el-breadcrumb-item
:key="item.path"
v-for="item in matched.slice(1,matched.length)"
>{{item.meta.title}}</el-breadcrumb-item>
</el-breadcrumb>
<div class="fl-right right-box">
<el-dropdown>
<span class="el-dropdown-link">
@ -55,16 +60,12 @@
</div>
</el-dialog>
</div>
</el-header>
<!-- 当前面包屑用路由自动生成可根据需求修改 -->
<!--
:to="{ path: item.path }" 暂时注释不用-->
<el-breadcrumb class="breadcrumb" separator-class="el-icon-arrow-right">
<el-breadcrumb-item
:key="item.path"
v-for="item in matched.slice(1,matched.length)"
>{{item.meta.title}}</el-breadcrumb-item>
</el-breadcrumb>
<HistoryComponent />
<transition mode="out-in" name="el-fade-in-linear">
<router-view class="admin-box"></router-view>
</transition>
@ -75,6 +76,8 @@
<script>
import Aside from '@/view/layout/aside'
import HistoryComponent from '@/view/layout/aside/historyComponent/history'
import { mapGetters, mapActions } from 'vuex'
import { changePassword } from '@/api/user'
export default {
@ -110,11 +113,12 @@ export default {
trigger: 'blur'
}
]
}
},
}
},
components: {
Aside
Aside,HistoryComponent
},
created() {
let screenWidth = document.body.clientWidth
@ -158,6 +162,9 @@ export default {
}
})
},
removeTab(targetName) {
console.log(targetName)
},
clearPassword() {
this.pwdModify = {
password: '',
@ -169,6 +176,7 @@ export default {
},
computed: {
...mapGetters('user', ['userInfo']),
...mapGetters('history', ['historys','activeValue']),
title() {
return this.$route.meta.title || '当前页面'
},
@ -239,13 +247,20 @@ $mainHight: 100vh;
}
.main-cont {
.breadcrumb {
line-height: 24px;
line-height: 48px;
display: inline-block;
padding: 0 24px;
// padding: 6px;
// border-bottom: 1px solid #eee;
margin-bottom: 6px;
}
.router-history{
background: #fff;
margin-top: 1px;
padding: 0 6px;
}
&.el-main {
overflow: auto;
background: #fff;
// padding: 0px 10px;
// background: #fff;
}

13
QMPlusVuePage/src/view/superAdmin/api/api.vue

@ -5,6 +5,19 @@
<el-form-item label="路径">
<el-input placeholder="路径" v-model="searchInfo.path"></el-input>
</el-form-item>
<el-form-item label="描述">
<el-input placeholder="描述" v-model="searchInfo.description"></el-input>
</el-form-item>
<el-form-item label="请求">
<el-select placeholder="请选择" clear v-model="searchInfo.method">
<el-option
:key="item.value"
:label="`${item.label}(${item.value})`"
:value="item.value"
v-for="item in methodOptions"
></el-option>
</el-select>
</el-form-item>
<el-form-item>
<el-button @click="onSubmit" type="primary">查询</el-button>
</el-form-item>

Loading…
Cancel
Save