新的菜单设置

src/layout/HeaderV2/router-tabs/RouteNavigation.vue

@@ -4,13 +4,17 @@
       :config="opt"/>
   <div class="route_navigation_main"
        ref="tagRef">
-    <div v-for="(item,index) in menuList"
-         :class="index === currentIndex ? 'active_text item' :  'item'"
-         :key="index"
-         @contextmenu.prevent="contextmenuItem(item,index,$event)"
-         @click="handleRouterPush(item)">
-      {{ item?.title }}
-      <el-icon @click.stop.prevent="closeRouter(index,item.path)">
+    <div
+        v-for="(item,index) in useTab.tabs.value"
+        :id="`router_tabs-${item.name}`"
+        class="item"
+        @contextmenu.prevent="contextmenuItem(item,index,$event)"
+        :class="{'active_text': useTab.isActive(item.name)}"
+        @click="useTab.routerPush(index)"
+    >
+      {{ item.title }}
+      <el-icon
+          @click.stop.prevent="useTab.removeByIndex(index)">
         <Close/>
       </el-icon>
     </div>
@@ -19,65 +23,43 @@
 </template>
 
 <script setup lang="ts">
-import {ref} from "vue";
-import tabsHook from "@/layout/HeaderV2/tabs-hook";
+import {ref, watch} from "vue";
 import RightClickMenu from "@/components/menu-item/RightClickMenu.vue";
 import router from '@/router'
-import XEUtils from "xe-utils";
-import {stringIsBlank} from "@/utils/blank-utils";
+import {useTab} from "@/pinia/use-tabs";
 import {Close} from "@element-plus/icons-vue";
 
 const tagRef = ref<HTMLElement | null>(null)
-
 const opt = [
   {
     name: '关闭', click: (data, index) => {
-      closeRouter(index, data.path)
+      useTab.removeByIndex(index)
     }
   },
   {
-    name: '关闭其他选项卡', click: (data, index) => {
+    name: '关闭其他选项卡', click: (data, index: number) => {
       router.push(data.path)
-      setLabel([data])
+      useTab.closeOther(index)
     }
   },
   {
     name: '关闭所有选项卡', click: (data, index) => {
-      menuList.value = []
-      menuKey.value = []
-      backToTheHomepage()
+      useTab.closeAll()
     }
   },
   {
     name: '关闭左侧选项卡', click: (data, index) => {
-      if (index === 0) return
-      if (index > currentIndex.value) {
-        router.push(data.path)
-      }
-      let temp = []
-      for (let i = index; i < menuList.value.length; i++) {
-        temp.push(menuList.value[i])
-      }
-      setLabel(temp)
+      useTab.closeLeft(index)
     }
   },
   {
     name: '关闭右侧选项卡', click: (data, index) => {
-      if (index + 1 === menuList.value.length) return
-      if (index < currentIndex.value) {
-        router.push(data.path)
-      }
-      let temp = []
-      for (let i = 0; i < index + 1; i++) {
-        temp.push(menuList.value[i])
-      }
-      setLabel(temp)
+      useTab.closeRight(index)
     }
   }
 ]
-
 const mousePosition = ref()
-const contextmenuItem = async (item, index, event) => {
+const contextmenuItem = (item, index, event) => {
   mousePosition.value = {
     event,
     data: item,
@@ -85,121 +67,36 @@ const contextmenuItem = async (item, index, event) => {
   }
 }
 
-const menuList = ref(tabsHook.getItem())
-const menuKey = ref(tabsHook.getItemKey())
-
-const currentPath = ref('')
-const currentIndex = ref(-1)
-
-const closeRouter = (index, path) => {
-  menuList.value.splice(index, 1)
-  menuKey.value.splice(index, 1)
-  if (menuList.value.length === 0) {
-    let data = {
-      path: '/dashboard',
-      title: '首页',
-    }
-    menuList.value.push(data)
-    menuKey.value.push(JSON.stringify(data))
-    router.push('/dashboard')
-  } else {
-    if (router.currentRoute.value.path === path || router.currentRoute.value.meta.activeMenu === path) {
-      let temp = index === menuList.value.length ? menuList.value.length - 1 : index
-      router.push(menuList.value[temp]?.path)
-    }
-  }
-}
-
-// 设置标签
-const setLabel = (data) => {
-  menuList.value = data
-  menuKey.value.value = []
-  for (let i = 0, len = menuList.value.length; i < len; i++) {
-    menuKey.value.value.push(JSON.stringify(menuList.value[i]))
-  }
-}
-
-// 回到首页
-const backToTheHomepage = () => {
-  router.push('/dashboard')
-}
+const selectedStyle = ref({})
 
-// 设置滚动条位置
-const handleScrolling = async (str) => {
-  currentIndex.value = menuList.value.findIndex((item) => {
-    return item.name === str.name
-  })
-  if (currentIndex.value === -1) return
-  let itemData = tagRef.value!.querySelectorAll('.item')
+async function handleScrolling() {
+  await nextTick()
+  const name = router.currentRoute.value.name
+  const itemData = tagRef.value!.querySelectorAll(`.item`)
   let scroll = 0;
-  for (let i = 0; i < currentIndex.value; i++) {
-    let item = itemData[i]
-    scroll += item.scrollWidth
-  }
-  selectedStyle.value = {
-    width: itemData[currentIndex.value].clientWidth + 'px',
-    transform: `translateX(${scroll}px)`
+  const key = `router_tabs-${name}`
+
+  for (let i = 0; i < itemData.length; i++) {
+    const item = itemData[i]
+    scroll += item.clientWidth
+    if (key === item.id) {
+      scroll -= item.clientWidth
+      selectedStyle.value.width = item.clientWidth + 'px'
+      selectedStyle.value.transform = `translateX(${scroll}px)`
+      break;
+    }
   }
   tagRef.value!.scrollTo({top: 0, left: scroll, behavior: 'smooth'})
 }
 
-const selectedStyle = ref({})
-
-function handleRouterPush(item) {
-  router.push({
-    name: item.name,
-    query: item.query
-  })
-}
-
-watch(() => menuList.value, () => {
-  tabsHook.setItem(menuList.value)
-  routingChanges(false)
-}, {deep: true})
-
-const createLabels = (str, data) => {
-  if (menuKey.value.indexOf(str) > -1) return
-  menuList.value.push(data)
-  tabsHook.setItem(menuList.value)
-  menuKey.value.push(str)
-}
-
-const routingChanges = (createTabs = true) => {
-  const currentRoute = router.currentRoute.value
-  currentPath.value = currentRoute.path
-
-  const data = {
-    path: currentRoute.path,
-    title: currentRoute.meta.title,
-    name: currentRoute.name,
-    query: currentRoute.query
-  }
-
-  const routerInfoToStr = JSON.stringify(data)
-
-  nextTick(() => {
-    handleScrolling(data)
-  })
-
-  if (XEUtils.get(currentRoute, 'meta.hideTabs', true)) {
-    return;
-  }
-
-  if (stringIsBlank(currentRoute.name)) {
-    return;
-  }
-
-  if (createTabs) {
-    createLabels(routerInfoToStr, data)
-  }
-}
-
 watch(() => router.currentRoute.value, () => {
-  routingChanges()
-}, {immediate: true})
+  useTab.tabsAdd(router.currentRoute.value)
+  handleScrolling()
+}, {deep: true, immediate: true})
+
 </script>
 
-<style scoped lang="scss">
+<style lang="scss">
 $item-height: 40px;
 
 .route_navigation_main {

src/layout/HeaderV2/router-tabs/index.ts

@@ -1,23 +0,0 @@
-import {useLocalStorage} from "@vueuse/core";
-import {defineStore} from "pinia";
-
-declare type Tabs = {
-    name: string,
-    query: any
-    title: string
-}
-
-const useLocalTabs = defineStore('tabs', {
-    state: () => useLocalStorage<Tabs[]>('tabs', []).value,
-    actions: {
-        remove(index: number) {
-
-        }
-    }
-})
-
-const useRouterTabs = () => {
-    
-}
-
-export default useRouterTabs;

src/pinia/medins-store.ts

@@ -1,4 +1,5 @@
 import {defineStore} from 'pinia';
+// @ts-ignore
 import {baseinfo} from "@/data/inpatient";
 
 declare interface medinsAttr {

src/pinia/use-tabs.ts

@@ -0,0 +1,128 @@
+import {Ref, computed, watch} from "vue";
+import {useLocalStorage} from "@vueuse/core";
+import router from "@/router";
+import XEUtils from "xe-utils";
+import {RouteLocationNormalizedLoaded} from "vue-router";
+import {eachAndReturnList} from "@/utils/cyRefList";
+// @ts-ignore
+import {stringIsBlank} from "@/utils/blank-utils";
+
+// 定义Tabs类型
+export interface Tab {
+    name: string;
+    query: any;
+    title: string;
+    path: string
+}
+
+// 导出tabs对象
+export const tabs = useLocalStorage<Tab[]>("tabs", [])
+
+function useTabs() {
+
+    const tabsKeys = computed(() => {
+        return eachAndReturnList(tabs, (item) => {
+            return item.name
+        })
+    })
+
+    function routerPush(index: number) {
+        if (XEUtils.has(tabs.value, index)) {
+            const pushInfo = tabs.value[index]
+            router.push({
+                name: pushInfo.name,
+                query: pushInfo.query
+            }).then(r => {
+
+            })
+        } else {
+            router.push("/").then(() => {
+            })
+        }
+    }
+
+    function removeByIndex(index: number) {
+        const closeInfo = tabs.value[index]
+        const currentRouter = router.currentRoute.value
+        if (closeInfo.name === currentRouter.name) {
+            if (index > 0) {
+                routerPush(index - 1)
+            } else {
+                routerPush(index + 1)
+            }
+        }
+        tabs.value.splice(index, 1)
+    }
+
+    function tabsAdd(info: RouteLocationNormalizedLoaded) {
+        const hasIndex = tabsKeys.value.indexOf(info.name)
+
+        const tmp = {
+            path: info.path,
+            name: info.name,
+            query: info.query,
+            title: info.meta.title,
+        }
+
+        if (XEUtils.get(info, 'meta.hideTabs', true)) {
+            return
+        }
+
+        if (stringIsBlank(info.name)) {
+            return;
+        }
+
+        if (hasIndex > -1) {
+            tabs.value[hasIndex] = <Tab>tmp
+        } else {
+            tabs.value.push(<Tab>tmp)
+        }
+    }
+
+    function closeRight(index: number) {
+        const currentRouterIndex = tabsKeys.value.indexOf(router.currentRoute.value.name)
+        if (currentRouterIndex > -1 && index < currentRouterIndex) {
+            routerPush(index)
+        }
+        tabs.value.splice(index + 1, tabsKeys.value.length - 1);
+    }
+
+    function closeLeft(index: number) {
+        const currentRouterIndex = tabsKeys.value.indexOf(router.currentRoute.value.name)
+        if (currentRouterIndex > -1 && index > currentRouterIndex) {
+            routerPush(index)
+        }
+        tabs.value.splice(0, index - 1);
+    }
+
+    function closeAll() {
+        router.push("/").then(() => {
+        })
+        tabs.value.splice(0, tabsKeys.value.length - 1);
+    }
+
+
+    function isActive(name: string) {
+        return name === router.currentRoute.value.name
+    }
+
+    function closeOther(index: number) {
+        routerPush(index)
+        tabs.value = tabsKeys.value[index]
+    }
+
+    return {
+        tabs: tabs,
+        removeByIndex,
+        routerPush,
+        closeRight,
+        closeLeft,
+        closeAll,
+        isActive,
+        closeOther,
+        tabsAdd
+    }
+}
+
+
+export const useTab = useTabs()

src/views/clinic/chronicDisease/ChronicDiseaseQuestionnaire.vue

@@ -405,7 +405,6 @@ onDeactivated(() => {
   tempDocument = editor.editor.getDocument()
 })
 
-
 onActivated(async () => {
   const id = router.currentRoute.value.query.id as string
   if (id) {