修改预检测实时数据详情展示
This commit is contained in:
guanj
@@ -1,84 +1,83 @@
|
||||
<template>
|
||||
<Maximize v-show="maximize" />
|
||||
<Tabs v-if="tabs && showMenuFlag" />
|
||||
<el-main>
|
||||
<router-view v-slot="{ Component, route }" style="height:100%;">
|
||||
<!-- {{ keepAliveName}} -->
|
||||
<!-- <transition name="slide-right" mode="out-in"> -->
|
||||
<keep-alive :include="tabsMenuList" >
|
||||
<component :is="Component" :key="route.fullPath" />
|
||||
</keep-alive>
|
||||
<!-- </transition> -->
|
||||
</router-view>
|
||||
</el-main>
|
||||
<el-footer>
|
||||
<Footer />
|
||||
</el-footer>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, onBeforeUnmount, provide, watch, computed } from "vue";
|
||||
import { storeToRefs } from "pinia";
|
||||
import { useDebounceFn } from "@vueuse/core";
|
||||
import { useGlobalStore } from "@/stores/modules/global";
|
||||
import { useKeepAliveStore } from "@/stores/modules/keepAlive";
|
||||
import Maximize from "./components/Maximize.vue";
|
||||
import Tabs from "@/layouts/components/Tabs/index.vue";
|
||||
import Footer from "@/layouts/components/Footer/index.vue";
|
||||
import { useAuthStore } from "@/stores/modules/auth";
|
||||
import { useTabsStore } from '@/stores/modules/tabs'
|
||||
const tabStore = useTabsStore()
|
||||
const globalStore = useGlobalStore();
|
||||
const tabsMenuList = computed(() => tabStore.tabsMenuList.map(item => item.name))
|
||||
const authStore = useAuthStore();
|
||||
const { maximize, isCollapse, layout, tabs, footer } = storeToRefs(globalStore);
|
||||
const keepAliveStore = useKeepAliveStore();
|
||||
const { keepAliveName } = storeToRefs(keepAliveStore);
|
||||
// console.log("🚀 ~ keepAliveName:", keepAliveName)
|
||||
//是否显示导航栏
|
||||
const showMenuFlag = computed(() => authStore.showMenuFlagGet);
|
||||
// 注入刷新页面方法
|
||||
const isRouterShow = ref(true);
|
||||
const refreshCurrentPage = (val: boolean) => (isRouterShow.value = val);
|
||||
provide("refresh", refreshCurrentPage);
|
||||
|
||||
// 监听当前页面是否最大化，动态添加 class
|
||||
watch(
|
||||
() => maximize.value,
|
||||
() => {
|
||||
const app = document.getElementById("app") as HTMLElement;
|
||||
if (maximize.value) app.classList.add("main-maximize");
|
||||
else app.classList.remove("main-maximize");
|
||||
},
|
||||
{ immediate: true }
|
||||
);
|
||||
|
||||
// 监听布局变化，在 body 上添加相对应的 layout class
|
||||
watch(
|
||||
() => layout.value,
|
||||
() => {
|
||||
const body = document.body as HTMLElement;
|
||||
body.setAttribute("class", layout.value);
|
||||
},
|
||||
{ immediate: true }
|
||||
);
|
||||
|
||||
|
||||
// 监听窗口大小变化，折叠侧边栏
|
||||
const screenWidth = ref(0);
|
||||
const listeningWindow = useDebounceFn(() => {
|
||||
screenWidth.value = document.body.clientWidth;
|
||||
if (!isCollapse.value && screenWidth.value < 1200)
|
||||
globalStore.setGlobalState("isCollapse", true);
|
||||
if (isCollapse.value && screenWidth.value > 1200)
|
||||
globalStore.setGlobalState("isCollapse", false);
|
||||
}, 100);
|
||||
window.addEventListener("resize", listeningWindow, false);
|
||||
onBeforeUnmount(() => {
|
||||
window.removeEventListener("resize", listeningWindow);
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import "./index.scss";
|
||||
</style>
|
||||
<template>
|
||||
<Maximize v-show="maximize" />
|
||||
<Tabs v-if="tabs && showMenuFlag" />
|
||||
<el-main>
|
||||
<router-view v-slot="{ Component, route }" style="height:100%;">
|
||||
<!-- {{ keepAliveName}} -->
|
||||
<!-- <transition name="slide-right" mode="out-in"> -->
|
||||
<keep-alive :include="tabsMenuList" >
|
||||
<component :is="Component" :key="route.fullPath" />
|
||||
</keep-alive>
|
||||
<!-- </transition> -->
|
||||
</router-view>
|
||||
</el-main>
|
||||
<el-footer>
|
||||
<Footer />
|
||||
</el-footer>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, onBeforeUnmount, provide, watch, computed } from "vue";
|
||||
import { storeToRefs } from "pinia";
|
||||
import { useDebounceFn } from "@vueuse/core";
|
||||
import { useGlobalStore } from "@/stores/modules/global";
|
||||
import { useKeepAliveStore } from "@/stores/modules/keepAlive";
|
||||
import Maximize from "./components/Maximize.vue";
|
||||
import Tabs from "@/layouts/components/Tabs/index.vue";
|
||||
import Footer from "@/layouts/components/Footer/index.vue";
|
||||
import { useAuthStore } from "@/stores/modules/auth";
|
||||
import { useTabsStore } from '@/stores/modules/tabs'
|
||||
const tabStore = useTabsStore()
|
||||
const globalStore = useGlobalStore();
|
||||
const tabsMenuList = computed(() => tabStore.tabsMenuList.map(item => item.name))
|
||||
const authStore = useAuthStore();
|
||||
const { maximize, isCollapse, layout, tabs, footer } = storeToRefs(globalStore);
|
||||
const keepAliveStore = useKeepAliveStore();
|
||||
const { keepAliveName } = storeToRefs(keepAliveStore);
|
||||
//是否显示导航栏
|
||||
const showMenuFlag = computed(() => authStore.showMenuFlagGet);
|
||||
// 注入刷新页面方法
|
||||
const isRouterShow = ref(true);
|
||||
const refreshCurrentPage = (val: boolean) => (isRouterShow.value = val);
|
||||
provide("refresh", refreshCurrentPage);
|
||||
|
||||
// 监听当前页面是否最大化，动态添加 class
|
||||
watch(
|
||||
() => maximize.value,
|
||||
() => {
|
||||
const app = document.getElementById("app") as HTMLElement;
|
||||
if (maximize.value) app.classList.add("main-maximize");
|
||||
else app.classList.remove("main-maximize");
|
||||
},
|
||||
{ immediate: true }
|
||||
);
|
||||
|
||||
// 监听布局变化，在 body 上添加相对应的 layout class
|
||||
watch(
|
||||
() => layout.value,
|
||||
() => {
|
||||
const body = document.body as HTMLElement;
|
||||
body.setAttribute("class", layout.value);
|
||||
},
|
||||
{ immediate: true }
|
||||
);
|
||||
|
||||
|
||||
// 监听窗口大小变化，折叠侧边栏
|
||||
const screenWidth = ref(0);
|
||||
const listeningWindow = useDebounceFn(() => {
|
||||
screenWidth.value = document.body.clientWidth;
|
||||
if (!isCollapse.value && screenWidth.value < 1200)
|
||||
globalStore.setGlobalState("isCollapse", true);
|
||||
if (isCollapse.value && screenWidth.value > 1200)
|
||||
globalStore.setGlobalState("isCollapse", false);
|
||||
}, 100);
|
||||
window.addEventListener("resize", listeningWindow, false);
|
||||
onBeforeUnmount(() => {
|
||||
window.removeEventListener("resize", listeningWindow);
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import "./index.scss";
|
||||
</style>
|
||||
|
||||
@@ -1,122 +1,121 @@
|
||||
<template>
|
||||
<div class="tabs-box">
|
||||
<div class="tabs-menu">
|
||||
<el-tabs v-model="tabsMenuValue" type="card" @tab-click="tabClick" @tab-remove="tabRemove">
|
||||
<el-tab-pane
|
||||
v-for="item in tabsMenuList"
|
||||
:key="item.path"
|
||||
:label="item.title"
|
||||
:name="item.path"
|
||||
:closable="item.close"
|
||||
>
|
||||
<template #label>
|
||||
<el-icon v-show="item.icon && tabsIcon" class="tabs-icon">
|
||||
<component :is="item.icon"></component>
|
||||
</el-icon>
|
||||
{{ item.title }}
|
||||
</template>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
<MoreButton />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import Sortable from 'sortablejs'
|
||||
import { ref, computed, watch, onMounted } from 'vue'
|
||||
import { useRoute, useRouter } from 'vue-router'
|
||||
import { useGlobalStore } from '@/stores/modules/global'
|
||||
import { useTabsStore } from '@/stores/modules/tabs'
|
||||
import { useAuthStore } from '@/stores/modules/auth'
|
||||
import { TabsPaneContext, TabPaneName } from 'element-plus'
|
||||
import MoreButton from './components/MoreButton.vue'
|
||||
|
||||
const route = useRoute()
|
||||
const router = useRouter()
|
||||
const tabStore = useTabsStore()
|
||||
const authStore = useAuthStore()
|
||||
const globalStore = useGlobalStore()
|
||||
|
||||
const tabsMenuValue = ref(route.fullPath)
|
||||
const tabsMenuList = computed(() => tabStore.tabsMenuList)
|
||||
const tabsIcon = computed(() => globalStore.tabsIcon)
|
||||
|
||||
onMounted(() => {
|
||||
tabsDrop()
|
||||
initTabs()
|
||||
})
|
||||
|
||||
// 监听路由的变化（防止浏览器后退/前进不变化 tabsMenuValue）
|
||||
watch(
|
||||
() => route.fullPath,
|
||||
() => {
|
||||
if (route.meta.isFull) return
|
||||
if (route.meta.hideTab) {
|
||||
tabsMenuValue.value = route.meta.parentPath as string
|
||||
} else {
|
||||
tabsMenuValue.value = route.fullPath
|
||||
const tabsParams = {
|
||||
icon: route.meta.icon as string,
|
||||
title: route.meta.title as string,
|
||||
path: route.fullPath,
|
||||
name: route.name as string,
|
||||
close: !route.meta.isAffix,
|
||||
isKeepAlive: route.meta.isKeepAlive as boolean
|
||||
}
|
||||
tabStore.addTabs(tabsParams)
|
||||
}
|
||||
},
|
||||
{ immediate: true }
|
||||
)
|
||||
|
||||
// 初始化需要固定的 tabs
|
||||
const initTabs = () => {
|
||||
authStore.flatMenuListGet.forEach(item => {
|
||||
if (item.meta.isAffix && !item.meta.isHide && !item.meta.isFull) {
|
||||
const tabsParams = {
|
||||
icon: item.meta.icon,
|
||||
title: item.meta.title,
|
||||
path: item.path,
|
||||
name: item.name,
|
||||
close: !item.meta.isAffix,
|
||||
isKeepAlive: item.meta.isKeepAlive,
|
||||
unshift: true
|
||||
}
|
||||
tabStore.addTabs(tabsParams)
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
// tabs 拖拽排序
|
||||
const tabsDrop = () => {
|
||||
Sortable.create(document.querySelector('.el-tabs__nav') as HTMLElement, {
|
||||
draggable: '.el-tabs__item',
|
||||
animation: 300,
|
||||
onEnd({ newIndex, oldIndex }) {
|
||||
const tabsList = [...tabStore.tabsMenuList]
|
||||
const currRow = tabsList.splice(oldIndex as number, 1)[0]
|
||||
tabsList.splice(newIndex as number, 0, currRow)
|
||||
tabStore.setTabs(tabsList)
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
// Tab Click
|
||||
const tabClick = (tabItem: TabsPaneContext) => {
|
||||
const fullPath = tabItem.props.name as string
|
||||
// console.log("🚀 ~ tabClick ~ fullPath:", tabItem)
|
||||
router.push(fullPath)
|
||||
}
|
||||
|
||||
// Remove Tab
|
||||
const tabRemove = (fullPath: TabPaneName) => {
|
||||
|
||||
|
||||
tabStore.removeTabs(fullPath as string, fullPath == route.fullPath || '/machine/testScriptAdd' == route.fullPath)
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import './index.scss';
|
||||
</style>
|
||||
<template>
|
||||
<div class="tabs-box">
|
||||
<div class="tabs-menu">
|
||||
<el-tabs v-model="tabsMenuValue" type="card" @tab-click="tabClick" @tab-remove="tabRemove">
|
||||
<el-tab-pane
|
||||
v-for="item in tabsMenuList"
|
||||
:key="item.path"
|
||||
:label="item.title"
|
||||
:name="item.path"
|
||||
:closable="item.close"
|
||||
>
|
||||
<template #label>
|
||||
<el-icon v-show="item.icon && tabsIcon" class="tabs-icon">
|
||||
<component :is="item.icon"></component>
|
||||
</el-icon>
|
||||
{{ item.title }}
|
||||
</template>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
<MoreButton />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import Sortable from 'sortablejs'
|
||||
import { ref, computed, watch, onMounted } from 'vue'
|
||||
import { useRoute, useRouter } from 'vue-router'
|
||||
import { useGlobalStore } from '@/stores/modules/global'
|
||||
import { useTabsStore } from '@/stores/modules/tabs'
|
||||
import { useAuthStore } from '@/stores/modules/auth'
|
||||
import { TabsPaneContext, TabPaneName } from 'element-plus'
|
||||
import MoreButton from './components/MoreButton.vue'
|
||||
|
||||
const route = useRoute()
|
||||
const router = useRouter()
|
||||
const tabStore = useTabsStore()
|
||||
const authStore = useAuthStore()
|
||||
const globalStore = useGlobalStore()
|
||||
|
||||
const tabsMenuValue = ref(route.fullPath)
|
||||
const tabsMenuList = computed(() => tabStore.tabsMenuList)
|
||||
const tabsIcon = computed(() => globalStore.tabsIcon)
|
||||
|
||||
onMounted(() => {
|
||||
tabsDrop()
|
||||
initTabs()
|
||||
})
|
||||
|
||||
// 监听路由的变化（防止浏览器后退/前进不变化 tabsMenuValue）
|
||||
watch(
|
||||
() => route.fullPath,
|
||||
() => {
|
||||
if (route.meta.isFull) return
|
||||
if (route.meta.hideTab) {
|
||||
tabsMenuValue.value = route.meta.parentPath as string
|
||||
} else {
|
||||
tabsMenuValue.value = route.fullPath
|
||||
const tabsParams = {
|
||||
icon: route.meta.icon as string,
|
||||
title: route.meta.title as string,
|
||||
path: route.fullPath,
|
||||
name: route.name as string,
|
||||
close: !route.meta.isAffix,
|
||||
isKeepAlive: route.meta.isKeepAlive as boolean
|
||||
}
|
||||
tabStore.addTabs(tabsParams)
|
||||
}
|
||||
},
|
||||
{ immediate: true }
|
||||
)
|
||||
|
||||
// 初始化需要固定的 tabs
|
||||
const initTabs = () => {
|
||||
authStore.flatMenuListGet.forEach(item => {
|
||||
if (item.meta.isAffix && !item.meta.isHide && !item.meta.isFull) {
|
||||
const tabsParams = {
|
||||
icon: item.meta.icon,
|
||||
title: item.meta.title,
|
||||
path: item.path,
|
||||
name: item.name,
|
||||
close: !item.meta.isAffix,
|
||||
isKeepAlive: item.meta.isKeepAlive,
|
||||
unshift: true
|
||||
}
|
||||
tabStore.addTabs(tabsParams)
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
// tabs 拖拽排序
|
||||
const tabsDrop = () => {
|
||||
Sortable.create(document.querySelector('.el-tabs__nav') as HTMLElement, {
|
||||
draggable: '.el-tabs__item',
|
||||
animation: 300,
|
||||
onEnd({ newIndex, oldIndex }) {
|
||||
const tabsList = [...tabStore.tabsMenuList]
|
||||
const currRow = tabsList.splice(oldIndex as number, 1)[0]
|
||||
tabsList.splice(newIndex as number, 0, currRow)
|
||||
tabStore.setTabs(tabsList)
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
// Tab Click
|
||||
const tabClick = (tabItem: TabsPaneContext) => {
|
||||
const fullPath = tabItem.props.name as string
|
||||
router.push(fullPath)
|
||||
}
|
||||
|
||||
// Remove Tab
|
||||
const tabRemove = (fullPath: TabPaneName) => {
|
||||
|
||||
|
||||
tabStore.removeTabs(fullPath as string, fullPath == route.fullPath || '/machine/testScriptAdd' == route.fullPath)
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import './index.scss';
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user