微调-调整日期组件

frontend/src/layouts/components/Tabs/index.vue

@@ -1,11 +1,12 @@
 <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">
+  <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 v-show='item.icon && tabsIcon' class='tabs-icon'>
+              <component :is='item.icon'></component>
             </el-icon>
             {{ item.title }}
           </template>
@@ -16,49 +17,54 @@
   </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";
+<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 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);
+const tabsMenuValue = ref(route.fullPath)
+const tabsMenuList = computed(() => tabStore.tabsMenuList)
+const tabsIcon = computed(() => globalStore.tabsIcon)
 
 onMounted(() => {
-  tabsDrop();
-  initTabs();
-});
+  tabsDrop()
+  initTabs()
+})
+
 
 // 监听路由的变化（防止浏览器后退/前进不变化 tabsMenuValue）
 watch(
   () => route.fullPath,
   () => {
-    if (route.meta.isFull) return;
-    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);
+    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 }
-);
+  { immediate: true },
+)
 
 // 初始化需要固定的 tabs
 const initTabs = () => {
@@ -70,39 +76,39 @@ const initTabs = () => {
         path: item.path,
         name: item.name,
         close: !item.meta.isAffix,
-        isKeepAlive: item.meta.isKeepAlive
-      };
-      tabStore.addTabs(tabsParams);
+        isKeepAlive: item.meta.isKeepAlive,
+      }
+      tabStore.addTabs(tabsParams)
     }
-  });
-};
+  })
+}
 
 // tabs 拖拽排序
 const tabsDrop = () => {
-  Sortable.create(document.querySelector(".el-tabs__nav") as HTMLElement, {
-    draggable: ".el-tabs__item",
+  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);
-    }
-  });
-};
+      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);
-};
+  const fullPath = tabItem.props.name as string
+  router.push(fullPath)
+}
 
 // Remove Tab
 const tabRemove = (fullPath: TabPaneName) => {
-  tabStore.removeTabs(fullPath as string, fullPath == route.fullPath);
-};
+  tabStore.removeTabs(fullPath as string, fullPath == route.fullPath)
+}
 </script>
 
-<style scoped lang="scss">
+<style scoped lang='scss'>
 @import "./index.scss";
 </style>