perf:文件名字修改
This commit is contained in:
parent
8d21343575
commit
af9cb48659
|
|
@ -0,0 +1,127 @@
|
|||
|
||||
|
||||
<template>
|
||||
<div class="echarts" ref="echarts"></div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import * as echarts from "echarts";
|
||||
|
||||
export default {
|
||||
data(){
|
||||
return{
|
||||
chart:null
|
||||
}
|
||||
},
|
||||
methods:{
|
||||
initEcharts(){
|
||||
let option = {
|
||||
series: [
|
||||
{
|
||||
type: 'gauge',
|
||||
startAngle: 180,
|
||||
endAngle: 0,
|
||||
center: ['50%', '80%'],
|
||||
radius: '100%',
|
||||
min: 0,
|
||||
max: 1,
|
||||
z: 5,
|
||||
splitNumber: 12,
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
width: 6,
|
||||
color: [
|
||||
[0.12, "#d92d4d"],
|
||||
[0.35, "#eb8349"],
|
||||
[0.63, "#e6e462"],
|
||||
[0.8, "#74c7da"],
|
||||
[1, "#67b45a"],
|
||||
]
|
||||
}
|
||||
},
|
||||
axisTick: {
|
||||
splitNumber: 13,
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: "auto",
|
||||
width: 2,
|
||||
},
|
||||
length: 17,
|
||||
},
|
||||
splitLine: {
|
||||
length: 25,
|
||||
lineStyle: {
|
||||
color: 'auto',
|
||||
width: 8
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
color: '#a0a7b8',
|
||||
fontSize: 20,
|
||||
distance: -60,
|
||||
rotate: 'tangential',
|
||||
formatter: function (value) {
|
||||
var value = value.toFixed(2);
|
||||
if (value == 0.0) {
|
||||
return "危";
|
||||
} else if (value == 0.25) {
|
||||
return "差";
|
||||
} else if (value == 0.5) {
|
||||
return "中";
|
||||
} else if (value == 0.75) {
|
||||
return "良";
|
||||
} else if (value == 1.0) {
|
||||
return "优";
|
||||
} else {
|
||||
return "";
|
||||
}
|
||||
}
|
||||
},
|
||||
title: {
|
||||
offsetCenter: [0, '-10%'],
|
||||
fontSize: 20
|
||||
},
|
||||
anchor: {
|
||||
show: true,
|
||||
showAbove: true,
|
||||
size: 25,
|
||||
itemStyle: {
|
||||
borderWidth: 10
|
||||
}
|
||||
},
|
||||
detail: {
|
||||
fontSize: 30,
|
||||
offsetCenter: [0, '-25%'],
|
||||
valueAnimation: true,
|
||||
formatter: function (value) {
|
||||
return Math.round(value * 100);
|
||||
},
|
||||
color: 'auto'
|
||||
},
|
||||
data: [
|
||||
{
|
||||
value: 0.7,
|
||||
name: 'Grade Rating'
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
|
||||
this.chart = echarts.init(this.$refs.echarts)
|
||||
this.chart.setOption(option)
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.initEcharts()
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.echarts {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -193,7 +193,7 @@
|
|||
}
|
||||
}
|
||||
|
||||
::v-deep(.el-drawer__title) {
|
||||
:deep(.el-drawer__title) {
|
||||
font-weight: bold;
|
||||
color: black;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,59 @@
|
|||
<template>
|
||||
<el-dropdown trigger="hover">
|
||||
<el-button size="small" type="primary">
|
||||
<span>更多</span>
|
||||
<el-icon class="el-icon--right"><arrow-down /></el-icon>
|
||||
</el-button>
|
||||
<template #dropdown>
|
||||
<el-dropdown-menu>
|
||||
<el-dropdown-item @click="refresh">刷新当页</el-dropdown-item>
|
||||
<el-dropdown-item @click="closeCurrentTab">关闭当前</el-dropdown-item>
|
||||
<el-dropdown-item @click="closeOtherTab">关闭其他</el-dropdown-item>
|
||||
<el-dropdown-item @click="closeAllTab">关闭所有</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</template>
|
||||
</el-dropdown>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import {computed} from "vue";
|
||||
import {useSettingStore} from "@/store/modules/setting"
|
||||
import {useTagsViewStore} from "@/store/modules/tagsView"
|
||||
|
||||
const SettingStore = useSettingStore()
|
||||
const TagsViewStore = useTagsViewStore()
|
||||
const visitedViews = computed(() => TagsViewStore.visitedViews)
|
||||
const refresh = () => {
|
||||
SettingStore.setReload()
|
||||
}
|
||||
// 关闭当前
|
||||
const closeCurrentTab = (event)=>{
|
||||
closeSelectedTag(event,route)
|
||||
}
|
||||
// 关闭其他
|
||||
const closeOtherTab= async ()=>{
|
||||
const { name } = route
|
||||
for(let item of visitedViews.value){
|
||||
if(item.name!==name){
|
||||
await closeSelectedTag(null,item)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
// 关闭所有 去首页
|
||||
const closeAllTab = async ()=>{
|
||||
let visitedViews = await TagsViewStore.delAllViews()
|
||||
await TagsViewStore.goHome()
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.more{
|
||||
background-color: $primaryColor;
|
||||
color: white;
|
||||
.tags-view-item{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,329 +1,166 @@
|
|||
<template>
|
||||
<div class="tags-wrap-container">
|
||||
<div class="tags-view" ref="scrollContainer">
|
||||
<better-scroll :options="{ scrollX: true, scrollY: false }" ref="bsScroll">
|
||||
<div class="tags-scroll-inner">
|
||||
<div
|
||||
v-for="tag in visitedViews"
|
||||
:ref="setTagRef"
|
||||
:path="tag.path"
|
||||
:data-id="tag.path"
|
||||
:fullPath="tag.fullPath"
|
||||
:to="{ path: tag.path, query: tag.query, fullPath: tag.fullPath }"
|
||||
:key="tag.path"
|
||||
class="item-tag-wrap"
|
||||
:class="isActive(tag) ? 'active' : ''"
|
||||
@click.stop="routerGo(tag)"
|
||||
>
|
||||
<div class="tags-view-item">{{ tag.title }}</div>
|
||||
<el-icon
|
||||
v-if="!isAffix(tag)"
|
||||
@click.prevent.stop="(e) => closeSelectedTag(e, tag)" class="tag-icon">
|
||||
<circle-close-filled
|
||||
/></el-icon>
|
||||
</div>
|
||||
</div>
|
||||
</better-scroll>
|
||||
<div class="tags-view">
|
||||
<el-tabs
|
||||
v-model="activeTabsValue"
|
||||
type="card"
|
||||
@tab-click="tabClick"
|
||||
@tab-remove="removeTab"
|
||||
>
|
||||
<el-tab-pane
|
||||
v-for="item in visitedViews"
|
||||
:key="item.path"
|
||||
:path="item.path"
|
||||
:label="item.title"
|
||||
:name="item.path"
|
||||
:closable="!(item.meta&&item.meta.affix)"
|
||||
>
|
||||
<template #label>
|
||||
<el-icon class="tabs-icon" v-if="item.icon">
|
||||
<component :is="item.icon"></component>
|
||||
</el-icon>
|
||||
{{ item.title }}
|
||||
</template>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</div>
|
||||
<div class="right-btn">
|
||||
<MoreButton/>
|
||||
</div>
|
||||
<el-dropdown trigger="click">
|
||||
<div class="item-tag-wrap more">
|
||||
<div class="tags-view-item">更多 <el-icon class="el-icon--right"><arrow-down /></el-icon></div>
|
||||
</div>
|
||||
<template #dropdown>
|
||||
<el-dropdown-menu>
|
||||
<el-dropdown-item @click="refresh">刷新当页</el-dropdown-item>
|
||||
<el-dropdown-item @click="closeCurrentTab">关闭当前</el-dropdown-item>
|
||||
<el-dropdown-item @click="closeOtherTab">关闭其他</el-dropdown-item>
|
||||
<el-dropdown-item @click="closeAllTab">关闭所有</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</template>
|
||||
</el-dropdown>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { computed, nextTick, onMounted, reactive, ref, watch } from 'vue'
|
||||
import betterScroll from './betterScroll.vue'
|
||||
import { useRoute, useRouter } from 'vue-router'
|
||||
import {computed, watch, ref, onMounted} from "vue";
|
||||
import { useRoute, useRouter } from "vue-router";
|
||||
import { TabsPaneContext } from "element-plus";
|
||||
import MoreButton from './components/MoreButton'
|
||||
import path from 'path-browserify'
|
||||
import {useTagsViewStore} from "@/store/modules/tagsView"
|
||||
import {usePermissionStore} from "@/store/modules/permission"
|
||||
|
||||
import {useSettingStore} from "@/store/modules/setting"
|
||||
import {useTagsViewStore} from "@/store/modules/tagsView"
|
||||
import {usePermissionStore} from "@/store/modules/permission"
|
||||
const route = useRoute()
|
||||
const router = useRouter()
|
||||
const TagsViewStore = useTagsViewStore()
|
||||
const PermissionStore = usePermissionStore()
|
||||
const visitedViews = computed(() => TagsViewStore.visitedViews)
|
||||
const routes = computed(() => PermissionStore.routes)
|
||||
|
||||
import path from 'path-browserify'
|
||||
const route = useRoute()
|
||||
const router = useRouter()
|
||||
const SettingStore = useSettingStore()
|
||||
const TagsViewStore = useTagsViewStore()
|
||||
const PermissionStore = usePermissionStore()
|
||||
|
||||
const refresh = () => {
|
||||
SettingStore.setReload()
|
||||
const addTags = () => {
|
||||
const { name } = route
|
||||
if (name === 'Login') {
|
||||
return
|
||||
}
|
||||
|
||||
const routes = computed(() => PermissionStore.routes)
|
||||
|
||||
const visitedViews = computed(() => TagsViewStore.visitedViews)
|
||||
|
||||
const bsScroll = ref<Expose.BetterScroll>()
|
||||
let obj = new WeakMap()
|
||||
|
||||
let affixTags = ref([])
|
||||
const tags = ref(new Map())
|
||||
// 多个ref 添加tag
|
||||
const setTagRef = (el) => {
|
||||
if (el) {
|
||||
if (!obj.get(el)) {
|
||||
tags.value.set(el.dataset['id'], el)
|
||||
}
|
||||
obj.set(el, el)
|
||||
}
|
||||
if (name) {
|
||||
TagsViewStore.addView(route)
|
||||
}
|
||||
|
||||
const rollPane = ref()
|
||||
const scrollContainer = ref()
|
||||
|
||||
function filterAffixTags(routes, basePath = '/') {
|
||||
let tags = []
|
||||
routes.forEach((route) => {
|
||||
if (route.meta && route.meta.affix) {
|
||||
const tagPath = path.resolve(basePath, route.path)
|
||||
tags.push({
|
||||
fullPath: tagPath,
|
||||
path: tagPath,
|
||||
name: route.name,
|
||||
meta: { ...route.meta },
|
||||
})
|
||||
}
|
||||
if (route.children) {
|
||||
const tempTags = filterAffixTags(route.children, route.path)
|
||||
if (tempTags.length >= 1) {
|
||||
tags = [...tags, ...tempTags]
|
||||
}
|
||||
}
|
||||
})
|
||||
return tags
|
||||
}
|
||||
|
||||
const initTags = () => {
|
||||
let routesNew = routes.value
|
||||
let affixTag = (affixTags.value = filterAffixTags(routesNew))
|
||||
for (const tag of affixTag) {
|
||||
if (tag.name) {
|
||||
TagsViewStore.addVisitedView(tag)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const isActive = (rou) => {
|
||||
return rou.path === route.path
|
||||
}
|
||||
const isAffix = (tag) => {
|
||||
return tag.meta && tag.meta.affix
|
||||
}
|
||||
const addTags = () => {
|
||||
const { name } = route
|
||||
if (name === 'Login') {
|
||||
return
|
||||
}
|
||||
if (name) {
|
||||
TagsViewStore.addView(route)
|
||||
}
|
||||
return false
|
||||
}
|
||||
|
||||
function toLastView(visitedViews, view) {
|
||||
const latestView = visitedViews.slice(-1)[0]
|
||||
if (latestView) {
|
||||
router.push(latestView.fullPath)
|
||||
} else {
|
||||
if (view.name === 'home') {
|
||||
router.replace({ path: '/redirect' + view.fullPath })
|
||||
} else {
|
||||
router.push('/')
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const closeSelectedTag = async (event, view) => {
|
||||
if (tags.value.get(view.path)) {
|
||||
tags.value.delete(view.path)
|
||||
}
|
||||
let { visitedViews } = await TagsViewStore.delView(view)
|
||||
if (isActive(view)) {
|
||||
toLastView(visitedViews, view)
|
||||
}
|
||||
}
|
||||
|
||||
// 关闭当前
|
||||
const closeCurrentTab = (event)=>{
|
||||
closeSelectedTag(event,route)
|
||||
}
|
||||
|
||||
// 关闭其他
|
||||
const closeOtherTab= async ()=>{
|
||||
const { name } = route
|
||||
for(let item of visitedViews.value){
|
||||
if(item.name!==name){
|
||||
await closeSelectedTag(null,item)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 关闭所有 去首页
|
||||
const closeAllTab = async ()=>{
|
||||
let visitedViews = await TagsViewStore.delAllViews()
|
||||
toLastView(visitedViews,route)
|
||||
}
|
||||
|
||||
const routerGo = (tag) => {
|
||||
router.push({
|
||||
path: tag.path,
|
||||
query: tag.query,
|
||||
})
|
||||
}
|
||||
|
||||
function handleScrollAction(currentTag) {
|
||||
const scrollContainerRect = scrollContainer.value.getBoundingClientRect()
|
||||
let { left: currx, width: currentWidth } = currentTag.getBoundingClientRect()
|
||||
const clientX = currx + currentWidth / 2
|
||||
const currentX = clientX - scrollContainerRect.left
|
||||
const deltaX = currentX - scrollContainerRect.width / 2
|
||||
if (bsScroll.value) {
|
||||
const { maxScrollX, x: leftX } = bsScroll.value.instance
|
||||
const rightX = maxScrollX - leftX
|
||||
const update = deltaX > 0 ? Math.max(-deltaX, rightX) : Math.min(-deltaX, -leftX)
|
||||
bsScroll.value?.instance.scrollBy(update, 0, 300)
|
||||
}
|
||||
}
|
||||
|
||||
function moveToCurrentTag() {
|
||||
nextTick(() => {
|
||||
for (const [key, tag] of tags.value) {
|
||||
let path = tag.attributes.path.value
|
||||
if (path === route.path) {
|
||||
let fullPath = tag.attributes.fullPath.value
|
||||
// 移动
|
||||
handleScrollAction(tag, tags.value)
|
||||
if (fullPath !== route.fullPath) {
|
||||
TagsViewStore.updateVisitedView(route)
|
||||
}
|
||||
break
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
initTags()
|
||||
addTags()
|
||||
nextTick(() => {
|
||||
setTimeout(() => {
|
||||
moveToCurrentTag()
|
||||
}, 50)
|
||||
})
|
||||
|
||||
watch(route, () => {
|
||||
addTags()
|
||||
nextTick(() => {
|
||||
setTimeout(() => {
|
||||
moveToCurrentTag()
|
||||
}, 100)
|
||||
return false
|
||||
}
|
||||
let affixTags = ref([])
|
||||
function filterAffixTags(routes, basePath = '/') {
|
||||
let tags = []
|
||||
routes.forEach((route) => {
|
||||
if (route.meta && route.meta.affix) {
|
||||
const tagPath = path.resolve(basePath, route.path)
|
||||
tags.push({
|
||||
fullPath: tagPath,
|
||||
path: tagPath,
|
||||
name: route.name,
|
||||
meta: { ...route.meta },
|
||||
})
|
||||
})
|
||||
|
||||
router.beforeEach(async (to, from, next) => {
|
||||
if (
|
||||
(from.fullPath === '/error/404' || from.fullPath === '/error/401') &&
|
||||
to.fullPath === '/home'
|
||||
) {
|
||||
let whiteList = ['/error/404', '/error/401']
|
||||
await TagsViewStore.removeView(whiteList)
|
||||
}
|
||||
if (route.children) {
|
||||
const tempTags = filterAffixTags(route.children, route.path)
|
||||
if (tempTags.length >= 1) {
|
||||
tags = [...tags, ...tempTags]
|
||||
}
|
||||
next()
|
||||
})
|
||||
}
|
||||
})
|
||||
</script>
|
||||
return tags
|
||||
}
|
||||
const initTags = () => {
|
||||
let routesNew = routes.value
|
||||
let affixTag = (affixTags.value = filterAffixTags(routesNew))
|
||||
for (const tag of affixTag) {
|
||||
if (tag.name) {
|
||||
TagsViewStore.addVisitedView(tag)
|
||||
}
|
||||
}
|
||||
}
|
||||
onMounted(()=>{
|
||||
initTags()
|
||||
addTags()
|
||||
})
|
||||
watch(route, () => {
|
||||
addTags()
|
||||
})
|
||||
let tabIndex = 2
|
||||
const activeTabsValue = computed({
|
||||
get: () => {
|
||||
return TagsViewStore.activeTabsValue;
|
||||
},
|
||||
set: val => {
|
||||
TagsViewStore.setTabsMenuValue(val);
|
||||
}
|
||||
});
|
||||
function toLastView(activeTabPath) {
|
||||
let index = visitedViews.value.findIndex(item=>item.path===activeTabPath)
|
||||
const nextTab = visitedViews.value[index + 1] || visitedViews.value[index - 1];
|
||||
if (!nextTab) return;
|
||||
router.push(nextTab.path);
|
||||
TagsViewStore.addVisitedView(nextTab)
|
||||
}
|
||||
// Tab Click
|
||||
const tabClick = (tabItem: TabsPaneContext) => {
|
||||
let path = tabItem.props.name as string;
|
||||
router.push(path);
|
||||
};
|
||||
|
||||
const isActive = (path) => {
|
||||
return path === route.path
|
||||
}
|
||||
const removeTab = async (activeTabPath: string) => {
|
||||
if (isActive(activeTabPath)) {
|
||||
toLastView(activeTabPath)
|
||||
}
|
||||
await TagsViewStore.delView(activeTabPath)
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.tags-wrap-container {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding-left: 10px;
|
||||
.tags-view {
|
||||
height: 30px;
|
||||
background: white;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex: 1;
|
||||
box-sizing: border-box;
|
||||
overflow: hidden;
|
||||
}
|
||||
.refresh {
|
||||
//margin-left: 20px;
|
||||
cursor: pointer;
|
||||
font-size: 22px;
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
.refresh-inner {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 50px;
|
||||
height: 100%;
|
||||
}
|
||||
//box-shadow: 0 3px 6px -4px #0000001f, 0 6px 16px #00000014, 0 9px 28px 8px #0000000d;
|
||||
}
|
||||
//padding-right: 10px;
|
||||
.tags-wrap-container{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding-left: 10px;
|
||||
padding-right: 10px;
|
||||
.right-btn{
|
||||
height: 100%;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.item-tag-wrap {
|
||||
position: relative;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
padding: 4px 12px;
|
||||
font-size: 14px;
|
||||
cursor: pointer;
|
||||
margin-right: 10px;
|
||||
border: 1px solid #d8dce5;
|
||||
&.active .tag-icon {
|
||||
display: block;
|
||||
}
|
||||
.tags-view {
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.tags-view{
|
||||
.el-tabs--card :deep(.el-tabs__header){
|
||||
box-sizing: border-box;
|
||||
height: 40px;
|
||||
padding: 0 10px;
|
||||
margin: 0;
|
||||
}
|
||||
:deep(.el-tabs){
|
||||
.el-tabs__nav {
|
||||
border: none;
|
||||
}
|
||||
&.active {
|
||||
background-color: $primaryColor;
|
||||
color: #fff;
|
||||
border-color: $primaryColor;
|
||||
}
|
||||
}
|
||||
.item-tag-wrap:hover {
|
||||
border-color: $primaryColor;
|
||||
}
|
||||
.tags-scroll-inner {
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
}
|
||||
.tag-icon {
|
||||
margin-left: 6px;
|
||||
}
|
||||
.tags-view-item {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
white-space: nowrap;
|
||||
font-size: 12px;
|
||||
.tags-inner {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
.more{
|
||||
background-color: $primaryColor;
|
||||
color: white;
|
||||
.tags-view-item{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.el-tabs__header .el-tabs__item {
|
||||
border: none;
|
||||
}
|
||||
.el-tabs__header .el-tabs__item.is-active {
|
||||
color: $primaryColor;
|
||||
border-bottom:2px solid $primaryColor;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,317 @@
|
|||
<template>
|
||||
<div class="tags-wrap-container">
|
||||
<div class="tags-view" ref="scrollContainer">
|
||||
<better-scroll :options="{ scrollX: true, scrollY: false }" ref="bsScroll">
|
||||
<div class="tags-scroll-inner">
|
||||
<div
|
||||
v-for="tag in visitedViews"
|
||||
:ref="setTagRef"
|
||||
:path="tag.path"
|
||||
:data-id="tag.path"
|
||||
:fullPath="tag.fullPath"
|
||||
:to="{ path: tag.path, query: tag.query, fullPath: tag.fullPath }"
|
||||
:key="tag.path"
|
||||
class="item-tag-wrap"
|
||||
:class="isActive(tag) ? 'active' : ''"
|
||||
@click.stop="routerGo(tag)"
|
||||
>
|
||||
<div class="tags-view-item">{{ tag.title }}</div>
|
||||
<el-icon
|
||||
v-if="!isAffix(tag)"
|
||||
@click.prevent.stop="(e) => closeSelectedTag(e, tag)" class="tag-icon">
|
||||
<circle-close-filled
|
||||
/></el-icon>
|
||||
</div>
|
||||
</div>
|
||||
</better-scroll>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { computed, nextTick, onMounted, reactive, ref, watch } from 'vue'
|
||||
import betterScroll from './betterScroll.vue'
|
||||
import { useRoute, useRouter } from 'vue-router'
|
||||
|
||||
import {useSettingStore} from "@/store/modules/setting"
|
||||
import {useTagsViewStore} from "@/store/modules/tagsView"
|
||||
import {usePermissionStore} from "@/store/modules/permission"
|
||||
|
||||
import path from 'path-browserify'
|
||||
const route = useRoute()
|
||||
const router = useRouter()
|
||||
const SettingStore = useSettingStore()
|
||||
const TagsViewStore = useTagsViewStore()
|
||||
const PermissionStore = usePermissionStore()
|
||||
|
||||
const refresh = () => {
|
||||
SettingStore.setReload()
|
||||
}
|
||||
|
||||
const routes = computed(() => PermissionStore.routes)
|
||||
|
||||
const visitedViews = computed(() => TagsViewStore.visitedViews)
|
||||
|
||||
const bsScroll = ref<Expose.BetterScroll>()
|
||||
let obj = new WeakMap()
|
||||
|
||||
let affixTags = ref([])
|
||||
const tags = ref(new Map())
|
||||
// 多个ref 添加tag
|
||||
const setTagRef = (el) => {
|
||||
if (el) {
|
||||
if (!obj.get(el)) {
|
||||
tags.value.set(el.dataset['id'], el)
|
||||
}
|
||||
obj.set(el, el)
|
||||
}
|
||||
}
|
||||
|
||||
const rollPane = ref()
|
||||
const scrollContainer = ref()
|
||||
|
||||
function filterAffixTags(routes, basePath = '/') {
|
||||
let tags = []
|
||||
routes.forEach((route) => {
|
||||
if (route.meta && route.meta.affix) {
|
||||
const tagPath = path.resolve(basePath, route.path)
|
||||
tags.push({
|
||||
fullPath: tagPath,
|
||||
path: tagPath,
|
||||
name: route.name,
|
||||
meta: { ...route.meta },
|
||||
})
|
||||
}
|
||||
if (route.children) {
|
||||
const tempTags = filterAffixTags(route.children, route.path)
|
||||
if (tempTags.length >= 1) {
|
||||
tags = [...tags, ...tempTags]
|
||||
}
|
||||
}
|
||||
})
|
||||
return tags
|
||||
}
|
||||
|
||||
const initTags = () => {
|
||||
let routesNew = routes.value
|
||||
let affixTag = (affixTags.value = filterAffixTags(routesNew))
|
||||
for (const tag of affixTag) {
|
||||
if (tag.name) {
|
||||
TagsViewStore.addVisitedView(tag)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const isActive = (rou) => {
|
||||
return rou.path === route.path
|
||||
}
|
||||
const isAffix = (tag) => {
|
||||
return tag.meta && tag.meta.affix
|
||||
}
|
||||
const addTags = () => {
|
||||
const { name } = route
|
||||
if (name === 'Login') {
|
||||
return
|
||||
}
|
||||
if (name) {
|
||||
TagsViewStore.addView(route)
|
||||
}
|
||||
return false
|
||||
}
|
||||
|
||||
function toLastView(visitedViews, view) {
|
||||
const latestView = visitedViews.slice(-1)[0]
|
||||
if (latestView) {
|
||||
router.push(latestView.fullPath)
|
||||
} else {
|
||||
if (view.name === 'home') {
|
||||
router.replace({ path: '/redirect' + view.fullPath })
|
||||
} else {
|
||||
router.push('/')
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const closeSelectedTag = async (event, view) => {
|
||||
if (tags.value.get(view.path)) {
|
||||
tags.value.delete(view.path)
|
||||
}
|
||||
let { visitedViews } = await TagsViewStore.delView(view)
|
||||
if (isActive(view)) {
|
||||
toLastView(visitedViews, view)
|
||||
}
|
||||
}
|
||||
|
||||
// 关闭当前
|
||||
const closeCurrentTab = (event)=>{
|
||||
closeSelectedTag(event,route)
|
||||
}
|
||||
|
||||
// 关闭其他
|
||||
const closeOtherTab= async ()=>{
|
||||
const { name } = route
|
||||
for(let item of visitedViews.value){
|
||||
if(item.name!==name){
|
||||
await closeSelectedTag(null,item)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 关闭所有 去首页
|
||||
const closeAllTab = async ()=>{
|
||||
let visitedViews = await TagsViewStore.delAllViews()
|
||||
toLastView(visitedViews,route)
|
||||
}
|
||||
|
||||
const routerGo = (tag) => {
|
||||
router.push({
|
||||
path: tag.path,
|
||||
query: tag.query,
|
||||
})
|
||||
}
|
||||
|
||||
function handleScrollAction(currentTag) {
|
||||
const scrollContainerRect = scrollContainer.value.getBoundingClientRect()
|
||||
let { left: currx, width: currentWidth } = currentTag.getBoundingClientRect()
|
||||
const clientX = currx + currentWidth / 2
|
||||
const currentX = clientX - scrollContainerRect.left
|
||||
const deltaX = currentX - scrollContainerRect.width / 2
|
||||
if (bsScroll.value) {
|
||||
const { maxScrollX, x: leftX } = bsScroll.value.instance
|
||||
const rightX = maxScrollX - leftX
|
||||
const update = deltaX > 0 ? Math.max(-deltaX, rightX) : Math.min(-deltaX, -leftX)
|
||||
bsScroll.value?.instance.scrollBy(update, 0, 300)
|
||||
}
|
||||
}
|
||||
|
||||
function moveToCurrentTag() {
|
||||
nextTick(() => {
|
||||
for (const [key, tag] of tags.value) {
|
||||
let path = tag.attributes.path.value
|
||||
if (path === route.path) {
|
||||
let fullPath = tag.attributes.fullPath.value
|
||||
// 移动
|
||||
handleScrollAction(tag, tags.value)
|
||||
if (fullPath !== route.fullPath) {
|
||||
TagsViewStore.updateVisitedView(route)
|
||||
}
|
||||
break
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
initTags()
|
||||
addTags()
|
||||
nextTick(() => {
|
||||
setTimeout(() => {
|
||||
moveToCurrentTag()
|
||||
}, 50)
|
||||
})
|
||||
|
||||
watch(route, () => {
|
||||
addTags()
|
||||
nextTick(() => {
|
||||
setTimeout(() => {
|
||||
moveToCurrentTag()
|
||||
}, 100)
|
||||
})
|
||||
})
|
||||
|
||||
router.beforeEach(async (to, from, next) => {
|
||||
if (
|
||||
(from.fullPath === '/error/404' || from.fullPath === '/error/401') &&
|
||||
to.fullPath === '/home'
|
||||
) {
|
||||
let whiteList = ['/error/404', '/error/401']
|
||||
await TagsViewStore.removeView(whiteList)
|
||||
}
|
||||
next()
|
||||
})
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.tags-wrap-container {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding-left: 10px;
|
||||
.tags-view {
|
||||
height: 30px;
|
||||
background: white;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex: 1;
|
||||
box-sizing: border-box;
|
||||
overflow: hidden;
|
||||
}
|
||||
.refresh {
|
||||
//margin-left: 20px;
|
||||
cursor: pointer;
|
||||
font-size: 22px;
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
.refresh-inner {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 50px;
|
||||
height: 100%;
|
||||
}
|
||||
//box-shadow: 0 3px 6px -4px #0000001f, 0 6px 16px #00000014, 0 9px 28px 8px #0000000d;
|
||||
}
|
||||
//padding-right: 10px;
|
||||
}
|
||||
.item-tag-wrap {
|
||||
position: relative;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
padding: 4px 12px;
|
||||
font-size: 14px;
|
||||
cursor: pointer;
|
||||
margin-right: 10px;
|
||||
border: 1px solid #d8dce5;
|
||||
&.active .tag-icon {
|
||||
display: block;
|
||||
}
|
||||
&.active {
|
||||
background-color: $primaryColor;
|
||||
color: #fff;
|
||||
border-color: $primaryColor;
|
||||
}
|
||||
}
|
||||
.item-tag-wrap:hover {
|
||||
border-color: $primaryColor;
|
||||
}
|
||||
.tags-scroll-inner {
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
}
|
||||
.tag-icon {
|
||||
margin-left: 6px;
|
||||
}
|
||||
.tags-view-item {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
white-space: nowrap;
|
||||
font-size: 12px;
|
||||
.tags-inner {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
.more{
|
||||
background-color: $primaryColor;
|
||||
color: white;
|
||||
.tags-view-item{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -8,7 +8,7 @@
|
|||
hideSliderLayout: mode === 'horizontal',
|
||||
}"
|
||||
>
|
||||
<div :style="{ height:`${showTag?80:50}px` }" v-if="SettingStore.themeConfig.fixedHeader"></div>
|
||||
<div :style="{ height:`${showTag?90:50}px` }" v-if="SettingStore.themeConfig.fixedHeader"></div>
|
||||
<u-header />
|
||||
<div class="m-container-content" :class="{ 'app-main-hide-tag': !showTag }">
|
||||
<u-main />
|
||||
|
|
|
|||
|
|
@ -1,11 +1,13 @@
|
|||
import {defineStore} from 'pinia'
|
||||
|
||||
import { useRouter } from "vue-router";
|
||||
const router = useRouter()
|
||||
|
||||
export const useTagsViewStore = defineStore({
|
||||
// id: 必须的,在所有 Store 中唯一
|
||||
id:'tagsViewState',
|
||||
// state: 返回对象的函数
|
||||
state: ()=>({
|
||||
activeTabsValue:'/home',
|
||||
visitedViews:[],
|
||||
cachedViews:[],
|
||||
|
||||
|
|
@ -13,6 +15,9 @@ export const useTagsViewStore = defineStore({
|
|||
getters: {},
|
||||
// 可以同步 也可以异步
|
||||
actions:{
|
||||
setTabsMenuValue(val){
|
||||
this.activeTabsValue = val
|
||||
},
|
||||
addView(view){
|
||||
this.addVisitedView(view)
|
||||
},
|
||||
|
|
@ -23,7 +28,9 @@ export const useTagsViewStore = defineStore({
|
|||
})
|
||||
},
|
||||
addVisitedView(view){
|
||||
this.setTabsMenuValue(view.path);
|
||||
if (this.visitedViews.some(v => v.path === view.path)) return
|
||||
|
||||
this.visitedViews.push(
|
||||
Object.assign({}, view, {
|
||||
title: view.meta.title || 'no-name'
|
||||
|
|
@ -32,11 +39,12 @@ export const useTagsViewStore = defineStore({
|
|||
if (view.meta.keepAlive) {
|
||||
this.cachedViews.push(view.name)
|
||||
}
|
||||
|
||||
},
|
||||
delView(view){
|
||||
delView(activeTabPath){
|
||||
return new Promise(resolve => {
|
||||
this.delVisitedView(view)
|
||||
this.delCachedView(view)
|
||||
this.delVisitedView(activeTabPath)
|
||||
this.delCachedView(activeTabPath)
|
||||
resolve({
|
||||
visitedViews: [...this.visitedViews],
|
||||
cachedViews: [...this.cachedViews]
|
||||
|
|
@ -44,13 +52,13 @@ export const useTagsViewStore = defineStore({
|
|||
})
|
||||
|
||||
},
|
||||
delVisitedView(view){
|
||||
delVisitedView(path){
|
||||
return new Promise(resolve => {
|
||||
this.visitedViews = this.visitedViews.filter(v=>{
|
||||
return (v.path !== view.path||v.meta.affix)
|
||||
return (v.path !== path||v.meta.affix)
|
||||
})
|
||||
this.cachedViews = this.cachedViews.filter(v=>{
|
||||
return (v.path !== view.path||v.meta.affix)
|
||||
return (v.path !== path||v.meta.affix)
|
||||
})
|
||||
resolve([...this.visitedViews])
|
||||
})
|
||||
|
|
@ -74,6 +82,10 @@ export const useTagsViewStore = defineStore({
|
|||
resolve([...this.visitedViews])
|
||||
})
|
||||
},
|
||||
async goHome() {
|
||||
router.push('/home');
|
||||
this.activeTabsValue = '/home';
|
||||
},
|
||||
updateVisitedView(view){
|
||||
for (let v of this.visitedViews) {
|
||||
if (v.path === view.path) {
|
||||
|
|
|
|||
|
|
@ -5,33 +5,33 @@ export const cityIconData = [
|
|||
value: [88.999903, 43.607078],
|
||||
},
|
||||
{
|
||||
adcode: 150000,
|
||||
// adcode: 150000,
|
||||
name: '内蒙古自治区',
|
||||
value: [119.24787, 42.205741],
|
||||
},
|
||||
,
|
||||
{
|
||||
adcode: 150000,
|
||||
// adcode: 150000,
|
||||
name: '内蒙古自治区',
|
||||
value: [110.627161, 41.16628],
|
||||
},
|
||||
{
|
||||
adcode: 540000,
|
||||
// adcode: 540000,
|
||||
name: '西藏自治区',
|
||||
value: [89.483714, 30.251951],
|
||||
},
|
||||
{
|
||||
adcode: 630000,
|
||||
// adcode: 630000,
|
||||
name: '青海省',
|
||||
value: [102.064693, 37.084008],
|
||||
},
|
||||
{
|
||||
adcode: 530000,
|
||||
// adcode: 530000,
|
||||
name: '云南省',
|
||||
value: [102.187665, 25.083688],
|
||||
},
|
||||
{
|
||||
adcode: 610000,
|
||||
// adcode: 610000,
|
||||
name: '陕西省',
|
||||
value: [109.20663, 35.018625],
|
||||
},
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
$dark_gray: #889aa4;
|
||||
::v-deep(input) {
|
||||
:deep(input) {
|
||||
background: transparent;
|
||||
border: 0;
|
||||
color: white;
|
||||
|
|
|
|||
Loading…
Reference in New Issue