修改他不删除后编辑检测监本还存在问题

This commit is contained in:
GGJ
2025-03-14 16:23:27 +08:00
parent 68934060e6
commit 230c68f454

View File

@@ -1,23 +1,28 @@
<template> <template>
<div class='tabs-box'> <div class="tabs-box">
<div class='tabs-menu'> <div class="tabs-menu">
<el-tabs v-model='tabsMenuValue' type='card' @tab-click='tabClick' @tab-remove='tabRemove'> <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' <el-tab-pane
:closable='item.close'> v-for="item in tabsMenuList"
<template #label> :key="item.path"
<el-icon v-show='item.icon && tabsIcon' class='tabs-icon'> :label="item.title"
<component :is='item.icon'></component> :name="item.path"
</el-icon> :closable="item.close"
{{ item.title }} >
</template> <template #label>
</el-tab-pane> <el-icon v-show="item.icon && tabsIcon" class="tabs-icon">
</el-tabs> <component :is="item.icon"></component>
<MoreButton /> </el-icon>
{{ item.title }}
</template>
</el-tab-pane>
</el-tabs>
<MoreButton />
</div>
</div> </div>
</div>
</template> </template>
<script setup lang='ts'> <script setup lang="ts">
import Sortable from 'sortablejs' import Sortable from 'sortablejs'
import { ref, computed, watch, onMounted } from 'vue' import { ref, computed, watch, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router' import { useRoute, useRouter } from 'vue-router'
@@ -38,79 +43,80 @@ const tabsMenuList = computed(() => tabStore.tabsMenuList)
const tabsIcon = computed(() => globalStore.tabsIcon) const tabsIcon = computed(() => globalStore.tabsIcon)
onMounted(() => { onMounted(() => {
tabsDrop() tabsDrop()
initTabs() initTabs()
}) })
// 监听路由的变化(防止浏览器后退/前进不变化 tabsMenuValue // 监听路由的变化(防止浏览器后退/前进不变化 tabsMenuValue
watch( watch(
() => route.fullPath, () => route.fullPath,
() => { () => {
if (route.meta.isFull) return if (route.meta.isFull) return
if (route.meta.hideTab){ if (route.meta.hideTab) {
tabsMenuValue.value = route.meta.parentPath as string tabsMenuValue.value = route.meta.parentPath as string
}else{ } else {
tabsMenuValue.value = route.fullPath tabsMenuValue.value = route.fullPath
const tabsParams = { const tabsParams = {
icon: route.meta.icon as string, icon: route.meta.icon as string,
title: route.meta.title as string, title: route.meta.title as string,
path: route.fullPath, path: route.fullPath,
name: route.name as string, name: route.name as string,
close: !route.meta.isAffix, close: !route.meta.isAffix,
isKeepAlive: route.meta.isKeepAlive as boolean, isKeepAlive: route.meta.isKeepAlive as boolean
} }
tabStore.addTabs(tabsParams) tabStore.addTabs(tabsParams)
} }
}, },
{ immediate: true }, { immediate: true }
) )
// 初始化需要固定的 tabs // 初始化需要固定的 tabs
const initTabs = () => { const initTabs = () => {
authStore.flatMenuListGet.forEach(item => { authStore.flatMenuListGet.forEach(item => {
if (item.meta.isAffix && !item.meta.isHide && !item.meta.isFull) { if (item.meta.isAffix && !item.meta.isHide && !item.meta.isFull) {
const tabsParams = { const tabsParams = {
icon: item.meta.icon, icon: item.meta.icon,
title: item.meta.title, title: item.meta.title,
path: item.path, path: item.path,
name: item.name, name: item.name,
close: !item.meta.isAffix, close: !item.meta.isAffix,
isKeepAlive: item.meta.isKeepAlive, isKeepAlive: item.meta.isKeepAlive,
unshift:true unshift: true
} }
tabStore.addTabs(tabsParams) tabStore.addTabs(tabsParams)
} }
}) })
} }
// tabs 拖拽排序 // tabs 拖拽排序
const tabsDrop = () => { const tabsDrop = () => {
Sortable.create(document.querySelector('.el-tabs__nav') as HTMLElement, { Sortable.create(document.querySelector('.el-tabs__nav') as HTMLElement, {
draggable: '.el-tabs__item', draggable: '.el-tabs__item',
animation: 300, animation: 300,
onEnd({ newIndex, oldIndex }) { onEnd({ newIndex, oldIndex }) {
const tabsList = [...tabStore.tabsMenuList] const tabsList = [...tabStore.tabsMenuList]
const currRow = tabsList.splice(oldIndex as number, 1)[0] const currRow = tabsList.splice(oldIndex as number, 1)[0]
tabsList.splice(newIndex as number, 0, currRow) tabsList.splice(newIndex as number, 0, currRow)
tabStore.setTabs(tabsList) tabStore.setTabs(tabsList)
}, }
}) })
} }
// Tab Click // Tab Click
const tabClick = (tabItem: TabsPaneContext) => { const tabClick = (tabItem: TabsPaneContext) => {
const fullPath = tabItem.props.name as string const fullPath = tabItem.props.name as string
// console.log("🚀 ~ tabClick ~ fullPath:", tabItem) // console.log("🚀 ~ tabClick ~ fullPath:", tabItem)
router.push(fullPath) router.push(fullPath)
} }
// Remove Tab // Remove Tab
const tabRemove = (fullPath: TabPaneName) => { const tabRemove = (fullPath: TabPaneName) => {
tabStore.removeTabs(fullPath as string, fullPath == route.fullPath)
tabStore.removeTabs(fullPath as string, fullPath == route.fullPath || '/machine/testScriptAdd' == route.fullPath)
} }
</script> </script>
<style scoped lang='scss'> <style scoped lang="scss">
@import "./index.scss"; @import './index.scss';
</style> </style>