mirror of https://gitee.com/xiaonuobase/snowy
【优化】前端路由设置带参数打开选中且不多打开标签，对窄屏幕增加部分适配
小诺
俞宝山
parent
9cd1fcea1d
commit
45ef6b6bda
|
|
@ -3,7 +3,7 @@
|
|||
<a-menu
|
||||
v-model:selectedKeys="selectedKeys"
|
||||
mode="horizontal"
|
||||
v-if="menu && menu.length > 1"
|
||||
v-if="menu && menu.length > 1 && !isMobile"
|
||||
class="module-menu"
|
||||
id="moduleMenu"
|
||||
>
|
||||
|
|
@ -22,7 +22,7 @@
|
|||
</a-menu>
|
||||
</div>
|
||||
<div v-else>
|
||||
<a-popover v-if="menu.length > 1" placement="bottomLeft">
|
||||
<a-popover v-if="menu.length > 1 && !isMobile" placement="bottomLeft">
|
||||
<template #content>
|
||||
<a-row :gutter="[0, 5]" class="module-row">
|
||||
<div v-for="item in menu" :key="item.id">
|
||||
|
|
@ -56,6 +56,9 @@
|
|||
const module = computed(() => {
|
||||
return store.module
|
||||
})
|
||||
const isMobile = computed(() => {
|
||||
return store.isMobile
|
||||
})
|
||||
// 监听目录是否折叠
|
||||
watch(moduleUnfoldOpen, (newValue) => {
|
||||
nextTick(() => {
|
||||
|
|
|
|||
|
|
@ -190,7 +190,7 @@
|
|||
},
|
||||
// 高亮tag
|
||||
isActive(route) {
|
||||
return route.fullPath === this.$route.fullPath
|
||||
return route.path === this.$route.path
|
||||
},
|
||||
// 关闭tag
|
||||
closeSelectedTag(tag, autoPushLatestView = true) {
|
||||
|
|
|
|||
|
|
@ -272,7 +272,7 @@
|
|||
// 展开的
|
||||
nextTick(() => {
|
||||
// 取得默认路由地址并设置展开
|
||||
const active = route.meta.active || route.fullPath
|
||||
const active = route.meta.active || route.path
|
||||
selectedKeys.value = new Array(active)
|
||||
const pidKey = getParentKeys(pMenu.value.children, active)
|
||||
const nextTickMenu = pMenu.value.children
|
||||
|
|
@ -316,6 +316,8 @@
|
|||
showThis()
|
||||
|
||||
onMounted(() => {
|
||||
onLayoutResize()
|
||||
window.addEventListener('resize', onLayoutResize)
|
||||
switchoverTopHeaderThemeColor()
|
||||
})
|
||||
watch(route, (newValue) => {
|
||||
|
|
|
|||
|
|
@ -18,11 +18,18 @@ export const viewTagsStore = defineStore({
|
|||
getters: {},
|
||||
actions: {
|
||||
pushViewTags(route) {
|
||||
const target = this.viewTags.find((item) => item.fullPath === route.fullPath)
|
||||
const target = this.viewTags.find((item) => item.path === route.path)
|
||||
const isName = route.name
|
||||
if (!target && isName) {
|
||||
this.viewTags.push(route)
|
||||
}
|
||||
if (target) {
|
||||
this.viewTags.forEach((item) => {
|
||||
if (item.path === route.path) {
|
||||
Object.assign(item, route)
|
||||
}
|
||||
})
|
||||
}
|
||||
},
|
||||
removeViewTags(route) {
|
||||
this.viewTags.forEach((item, index) => {
|
||||
|
|
|
|||
|
|
@ -7,7 +7,6 @@
|
|||
|
||||
<script setup name="exmNestRoutor">
|
||||
import { useRouter, useRoute } from 'vue-router'
|
||||
import { defineComponent, ref } from 'vue'
|
||||
|
||||
const router = useRouter()
|
||||
const route = useRoute()
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
<a-card :bordered="false">
|
||||
<template #title> 快捷方式 </template>
|
||||
<a-row :gutter="10">
|
||||
<a-col :span="6" :key="shortcut.id" v-for="shortcut in shortcutList">
|
||||
<a-col :span="6" :key="shortcut.id" v-for="shortcut in shortcutList" :xs="12" :sm="8" :md="6" :lg="8" :xl="6">
|
||||
<shortcutCard
|
||||
:icon="shortcut.icon ? shortcut.icon : 'menu-outlined'"
|
||||
:label="shortcut.title"
|
||||
|
|
@ -16,7 +16,7 @@
|
|||
<script setup name="shortcut">
|
||||
import router from '@/router'
|
||||
import userCenterApi from '@/api/sys/userCenterApi'
|
||||
import shortcutCard from '@/components/ShortcutCard/index.vue'
|
||||
import ShortcutCard from '@/components/ShortcutCard/index.vue'
|
||||
import { onMounted } from 'vue'
|
||||
const shortcutList = ref([])
|
||||
|
||||
|
|
|
|||
|
|
@ -12,7 +12,7 @@
|
|||
<span style="color: #6d737b; margin: 2px">{{ userInfo.orgName }} | {{ userInfo.positionName }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<span style="margin: 2px">
|
||||
<span class="snowy-index-userinfo-time">
|
||||
{{ currentTime }}
|
||||
</span>
|
||||
</div>
|
||||
|
|
@ -43,4 +43,12 @@
|
|||
flex-direction: column;
|
||||
justify-content: center;
|
||||
}
|
||||
.snowy-index-userinfo-time {
|
||||
margin: 2px
|
||||
}
|
||||
@media (max-width: 992px) {
|
||||
.snowy-index-userinfo-time {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,18 +1,18 @@
|
|||
<template>
|
||||
<a-row :gutter="10">
|
||||
<a-col :span="16">
|
||||
<a-col :span="16" :xs="24" :sm="24" :md="24" :lg="16" :xl="16">
|
||||
<userInfo class="mb-2" />
|
||||
<shortcut class="mb-2" />
|
||||
<a-row :gutter="10">
|
||||
<a-col :span="12">
|
||||
<a-col :span="12" :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
|
||||
<visLog class="mb-2" />
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<a-col :span="12" :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
|
||||
<opLog class="mb-2" />
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-col>
|
||||
<a-col :span="8">
|
||||
<a-col :span="8" :xs="24" :sm="24" :md="24" :lg="8" :xl="8">
|
||||
<carousel class="mb-2" />
|
||||
<schedule class="mb-2" />
|
||||
<miniMessage class="mb-2" />
|
||||
|
|
@ -21,12 +21,11 @@
|
|||
</template>
|
||||
|
||||
<script setup name="indexHome">
|
||||
import shortcutCard from '@/components/ShortcutCard/index.vue'
|
||||
import userInfo from './components/userInfo.vue'
|
||||
import shortcut from './components/shortcut.vue'
|
||||
import schedule from './components/schedule.vue'
|
||||
import miniMessage from './components/miniMessage.vue'
|
||||
import carousel from './components/carousel.vue'
|
||||
import visLog from './components/visLog.vue'
|
||||
import opLog from './components/opLog.vue'
|
||||
import UserInfo from './components/userInfo.vue'
|
||||
import Shortcut from './components/shortcut.vue'
|
||||
import Schedule from './components/schedule.vue'
|
||||
import MiniMessage from './components/miniMessage.vue'
|
||||
import Carousel from './components/carousel.vue'
|
||||
import VisLog from './components/visLog.vue'
|
||||
import OpLog from './components/opLog.vue'
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<template>
|
||||
<a-row>
|
||||
<a-col :span="5">
|
||||
<a-card class="cardImp" :bordered="false" :loading="cardLoading">
|
||||
<a-col :xs="24" :sm="24" :md="24" :lg="5" :xl="5">
|
||||
<a-card class="cardImp mb-3" :bordered="false" :loading="cardLoading">
|
||||
<a-tree
|
||||
v-if="treeData.length > 0"
|
||||
v-model:expandedKeys="defaultExpandedKeys"
|
||||
|
|
@ -13,7 +13,7 @@
|
|||
<a-empty v-else :image="Empty.PRESENTED_IMAGE_SIMPLE" />
|
||||
</a-card>
|
||||
</a-col>
|
||||
<a-col :span="19">
|
||||
<a-col :xs="24" :sm="24" :md="24" :lg="19" :xl="19">
|
||||
<a-card :bordered="false" style="margin-bottom: 10px">
|
||||
<a-form ref="searchFormRef" name="advanced_search" class="ant-advanced-search-form" :model="searchFormState">
|
||||
<a-row :gutter="24">
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<template>
|
||||
<a-row :gutter="24">
|
||||
<a-col :md="24" :lg="7" style="padding-right: 0px">
|
||||
<a-row :gutter="10">
|
||||
<a-col :xs="24" :sm="24" :md="7" :lg="7" :xl="7" class="mb-3">
|
||||
<a-card :bordered="false">
|
||||
<div class="account-center-avatarHolder">
|
||||
<div class="avatar">
|
||||
|
|
@ -32,8 +32,7 @@
|
|||
</div>
|
||||
</a-card>
|
||||
</a-col>
|
||||
|
||||
<a-col :md="24" :lg="17">
|
||||
<a-col :xs="24" :sm="24" :md="17" :lg="17" :xl="17">
|
||||
<a-card
|
||||
:bordered="false"
|
||||
style="width: 100%"
|
||||
|
|
|
|||
Loading…
Reference in New Issue