所有功能
fanluyan
2 years ago
parent
d798f100ee
commit
467b6c887d
Binary file not shown.
|
Before Width: | Height: | Size: 122 KiB After Width: | Height: | Size: 4.0 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 122 KiB |
@ -1,192 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="tags" v-if="showTags">
|
|
||||||
<ul>
|
|
||||||
<li class="tags-li" v-for="(item, index) in tagsList" :class="{ active: isActive(item.path) }" :key="index">
|
|
||||||
<router-link :to="item.path" class="tags-li-title"> <i :class="item.icon"></i>{{ item.title }} </router-link>
|
|
||||||
<span class="tags-li-icon" @click="closeTags(index)" v-if="item.path !== '/stritl'"><i class="el-icon-close"></i></span>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
<!-- <div class="tags-close-box">
|
|
||||||
<el-dropdown @command="handleTags">
|
|
||||||
<el-button size="mini" type="primary">
|
|
||||||
标签选项<i class="el-icon-arrow-down el-icon--right"></i>
|
|
||||||
</el-button>
|
|
||||||
<el-dropdown-menu size="small" slot="dropdown">
|
|
||||||
<el-dropdown-item command="other">关闭其他</el-dropdown-item>
|
|
||||||
<el-dropdown-item command="all">关闭所有</el-dropdown-item>
|
|
||||||
</el-dropdown-menu>
|
|
||||||
</el-dropdown>
|
|
||||||
</div> -->
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import bus from './bus';
|
|
||||||
export default {
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
tagsList: []
|
|
||||||
};
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
isActive(path) {
|
|
||||||
return path === this.$route.fullPath;
|
|
||||||
},
|
|
||||||
// 关闭单个标签
|
|
||||||
closeTags(index) {
|
|
||||||
const delItem = this.tagsList.splice(index, 1)[0];
|
|
||||||
const item = this.tagsList[index] ? this.tagsList[index] : this.tagsList[index - 1];
|
|
||||||
if (item) {
|
|
||||||
delItem.path === this.$route.fullPath && this.$router.push(item.path);
|
|
||||||
} else {
|
|
||||||
this.$router.push('/');
|
|
||||||
}
|
|
||||||
},
|
|
||||||
// 关闭全部标签
|
|
||||||
closeAll() {
|
|
||||||
this.tagsList = [];
|
|
||||||
this.$router.push('/');
|
|
||||||
},
|
|
||||||
// 关闭其他标签
|
|
||||||
closeOther() {
|
|
||||||
const curItem = this.tagsList.filter((item) => {
|
|
||||||
return item.path === this.$route.fullPath;
|
|
||||||
});
|
|
||||||
this.tagsList = curItem;
|
|
||||||
},
|
|
||||||
// 设置标签
|
|
||||||
setTags(route) {
|
|
||||||
const isExist = this.tagsList.some((item) => {
|
|
||||||
return item.path === route.fullPath;
|
|
||||||
});
|
|
||||||
if (!isExist) {
|
|
||||||
if (this.tagsList.length >= 8) {
|
|
||||||
this.tagsList.shift();
|
|
||||||
}
|
|
||||||
this.tagsList.push({
|
|
||||||
title: route.meta.title,
|
|
||||||
path: route.fullPath,
|
|
||||||
icon: route.meta.icon
|
|
||||||
});
|
|
||||||
// console.log(route);
|
|
||||||
}
|
|
||||||
bus.$emit('tags', this.tagsList);
|
|
||||||
},
|
|
||||||
handleTags(command) {
|
|
||||||
command === 'other' ? this.closeOther() : this.closeAll();
|
|
||||||
}
|
|
||||||
},
|
|
||||||
computed: {
|
|
||||||
showTags() {
|
|
||||||
return this.tagsList.length > 0;
|
|
||||||
}
|
|
||||||
},
|
|
||||||
watch: {
|
|
||||||
$route(newValue, oldValue) {
|
|
||||||
this.setTags(newValue);
|
|
||||||
}
|
|
||||||
},
|
|
||||||
created() {
|
|
||||||
this.setTags(this.$route);
|
|
||||||
// 监听关闭当前页面的标签页
|
|
||||||
bus.$on('close_current_tags', () => {
|
|
||||||
for (let i = 0, len = this.tagsList.length; i < len; i++) {
|
|
||||||
const item = this.tagsList[i];
|
|
||||||
if (item.path === this.$route.fullPath) {
|
|
||||||
if (i < len - 1) {
|
|
||||||
this.$router.push(this.tagsList[i + 1].path);
|
|
||||||
} else if (i > 0) {
|
|
||||||
this.$router.push(this.tagsList[i - 1].path);
|
|
||||||
} else {
|
|
||||||
this.$router.push('/');
|
|
||||||
}
|
|
||||||
this.tagsList.splice(i, 1);
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
|
|
||||||
|
|
||||||
<style lang="less">
|
|
||||||
.tags {
|
|
||||||
position: relative;
|
|
||||||
height: 48px;
|
|
||||||
overflow: hidden;
|
|
||||||
background: @color-white;
|
|
||||||
padding-right: 120px;
|
|
||||||
box-shadow: 0 5px 10px @border-color-light;
|
|
||||||
}
|
|
||||||
|
|
||||||
.tags ul {
|
|
||||||
box-sizing: border-box;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.tags-li {
|
|
||||||
float: left;
|
|
||||||
margin: 12px 8px 12px 8px;
|
|
||||||
border-radius: 3px;
|
|
||||||
font-size: 12px;
|
|
||||||
overflow: hidden;
|
|
||||||
cursor: pointer;
|
|
||||||
height: 24px;
|
|
||||||
line-height: 24px;
|
|
||||||
border: 1px solid @border-color-base;
|
|
||||||
background: @color-white;
|
|
||||||
padding: 0 5px 0 12px;
|
|
||||||
vertical-align: middle;
|
|
||||||
color: @color-text-regular;
|
|
||||||
-webkit-transition: all 0.3s ease-in;
|
|
||||||
-moz-transition: all 0.3s ease-in;
|
|
||||||
transition: all 0.3s ease-in;
|
|
||||||
}
|
|
||||||
|
|
||||||
.tags-li:not(.active):hover {
|
|
||||||
background: @border-color-extra-light;
|
|
||||||
}
|
|
||||||
|
|
||||||
.tags-li.active {
|
|
||||||
color: @color-white;
|
|
||||||
}
|
|
||||||
.tags-li.active {
|
|
||||||
border: 1px solid @color-primary;
|
|
||||||
background-color: @color-primary;
|
|
||||||
}
|
|
||||||
.tags-li-title {
|
|
||||||
float: left;
|
|
||||||
max-width: 80px;
|
|
||||||
overflow: hidden;
|
|
||||||
white-space: nowrap;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
margin-right: 5px;
|
|
||||||
color: @color-text-regular;
|
|
||||||
i {
|
|
||||||
margin-right: 4px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.tags-li.active .tags-li-title {
|
|
||||||
color: @color-white;
|
|
||||||
i {
|
|
||||||
color: @color-white;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.tags-close-box {
|
|
||||||
position: absolute;
|
|
||||||
right: 0;
|
|
||||||
top: 0;
|
|
||||||
box-sizing: border-box;
|
|
||||||
padding-top: 1px;
|
|
||||||
text-align: center;
|
|
||||||
width: 110px;
|
|
||||||
height: 30px;
|
|
||||||
background: @color-white;
|
|
||||||
box-shadow: @box-shadow-basic;
|
|
||||||
z-index: 10;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@ -1,56 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="error-page">
|
|
||||||
<div class="error-code">4<span>0</span>3</div>
|
|
||||||
<div class="error-desc">啊哦~ 你没有权限访问该页面哦</div>
|
|
||||||
<div class="error-handle">
|
|
||||||
<router-link to="/">
|
|
||||||
<el-button type="primary" size="large">返回首页</el-button>
|
|
||||||
</router-link>
|
|
||||||
<el-button class="error-btn" type="primary" size="large" @click="goBack">返回上一页</el-button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
export default {
|
|
||||||
methods: {
|
|
||||||
goBack(){
|
|
||||||
this.$router.go(-1);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
|
|
||||||
<style scoped>
|
|
||||||
.error-page{
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
flex-direction: column;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
background: #f3f3f3;
|
|
||||||
box-sizing: border-box;
|
|
||||||
}
|
|
||||||
.error-code{
|
|
||||||
line-height: 1;
|
|
||||||
font-size: 250px;
|
|
||||||
font-weight: bolder;
|
|
||||||
color: #f02d2d;
|
|
||||||
}
|
|
||||||
.error-code span{
|
|
||||||
color: #00a854;
|
|
||||||
}
|
|
||||||
.error-desc{
|
|
||||||
font-size: 30px;
|
|
||||||
color: #777;
|
|
||||||
}
|
|
||||||
.error-handle{
|
|
||||||
margin-top: 30px;
|
|
||||||
padding-bottom: 200px;
|
|
||||||
}
|
|
||||||
.error-btn{
|
|
||||||
margin-left: 100px;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@ -0,0 +1,17 @@
|
|||||||
|
<template>
|
||||||
|
<div class="realTimeSearch">查询展示图片</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {};
|
||||||
|
},
|
||||||
|
methods: {},
|
||||||
|
created() {},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
<style lang="less">
|
||||||
|
.realTimeSearch {
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -0,0 +1,13 @@
|
|||||||
|
<template>
|
||||||
|
<div class="userManagement">用户管理</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script></script>
|
||||||
|
|
||||||
|
<style lang="less">
|
||||||
|
.userManagement {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
Loading…
Reference in New Issue