优化页面

package.json

@@ -12,12 +12,11 @@
     "@babel/standalone": "7.14.8",
     "@element-plus/icons-vue": "^2.0.6",
     "@vitejs/plugin-legacy": "^1.8.2",
-    "@vueuse/core": "^8.7.5",
     "axios": "^0.27.2",
     "clipboard": "^2.0.11",
     "dayjs": "^1.10.6",
     "echarts": "^5.2.0",
-    "element-plus": "^2.2.6",
+    "element-plus": "^2.2.17",
     "file-saver": "^2.0.5",
     "jquery": "^3.6.0",
     "js-cookie": "^3.0.0",

src/App.vue

@@ -82,6 +82,21 @@ function getWindowSize() {
 </script>
 
 <style>
+html,
+body,
+#app {
+  height: 100%;
+  margin: 0;
+  padding: 0;
+}
+
+ul, li {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+
 .小手指 {
   cursor: pointer;
 }

src/components/MenuItem/RightClickMenu.vue

@@ -0,0 +1,106 @@
+<template>
+  <div ref="modalRef"
+       class="tabs_item 小手指"
+       v-if="modal"
+       :style="displayLocation">
+    <ul>
+      <li v-for="(item,index) in props.config" @click="handlingClickEvents(item.click)">
+        {{ item.name }}
+      </li>
+    </ul>
+  </div>
+</template>
+
+<script setup name='RightClickMenu'>
+import {ref} from "vue";
+import {onClickOutside} from '@vueuse/core'
+
+const props = defineProps({
+  config: {
+    type: Array,
+    default: [{
+      name: '请设置', click: () => {
+        console.warn('请先设置')
+      }
+    }]
+  },
+  mousePosition: {
+    type: Object,
+    default: {}
+  }
+})
+
+
+const modal = ref(false)
+const modalRef = ref(null)
+
+onClickOutside(modalRef, () => {
+  modal.value = false
+})
+
+let displayLocation = $ref({
+  left: '0px',
+  top: '0px'
+})
+
+const handlingClickEvents = (cb) => {
+  cb(props.mousePosition.data, props.mousePosition.index)
+  modal.value = false
+}
+
+watch(() => props.mousePosition, () => {
+  modal.value = true
+  nextTick(() => {
+    calculateTheLocation(props.mousePosition.event.pageX, props.mousePosition.event.pageY)
+  })
+})
+
+const calculateTheLocation = (x, y) => {
+
+  const {innerWidth: windowWidth, innerHeight: windowHeight} = window;
+
+  const menu = modalRef.value;
+  const menuHeight = menu.offsetHeight;
+  const menuWidth = menu.offsetWidth
+
+
+  if (menuWidth + x + 20 >= windowWidth) {
+    displayLocation.left = x - menuWidth + 'px';
+  } else {
+    displayLocation.left = x + 'px';
+  }
+
+  if (menuHeight + y + 20 >= windowHeight) {
+    displayLocation.top = y - menuHeight + 'px'
+  } else {
+    displayLocation.top = y + 'px';
+  }
+}
+
+</script>
+
+<style scoped lang="scss">
+.tabs_item {
+  position: fixed;
+  text-align: center;
+  margin: 5px;
+  padding: 5px;
+  z-index: 99999;
+  background-color: white;
+  box-shadow: 2px 2px 3px 0 rgb(4 4 4);
+  border-radius: 5px;
+
+  li {
+    margin: 3px 0;
+    border-radius: 5px;
+    font-size: 14px;
+    padding: 5px;
+    line-height: 20px;
+
+    &:hover {
+      background-color: rgba(78, 80, 84, 0.63);
+      color: white;
+    }
+  }
+}
+</style>

src/layout/Menu/index.vue

@@ -1,23 +1,22 @@
 <template>
   <el-menu
-    :class="isCollapse ? 'collapse' : ''"
-    :collapse="isCollapse"
-    :collapse-transition="false"
-    :default-active="activeMenu"
-    :unique-opened="expandOneMenu"
-    active-text-color="var(--system-primary-color)"
-    background-color="var(--system-menu-background)"
-    class="layout-menu system-scrollbar"
-    text-color="var(--system-menu-text-color)"
-  >
-    <menu-item v-for="(menu, key) in allRoutes" :key="key" :menu="menu" />
+      :class="isCollapse ? 'collapse' : ''"
+      :collapse="isCollapse"
+      :collapse-transition="false"
+      :default-active="activeMenu"
+      :unique-opened="expandOneMenu"
+      active-text-color="var(--system-primary-color)"
+      background-color="var(--system-menu-background)"
+      class="layout-menu system-scrollbar"
+      text-color="var(--system-menu-text-color)">
+    <menu-item v-for="(menu, key) in allRoutes" :key="key" :menu="menu"/>
   </el-menu>
 </template>
 
 <script>
-import { computed, defineComponent } from 'vue'
-import { useRoute } from 'vue-router'
-import { useStore } from 'vuex'
+import {computed, defineComponent} from 'vue'
+import {useRoute} from 'vue-router'
+import {useStore} from 'vuex'
 import MenuItem from './MenuItem.vue'
 
 export default defineComponent({
@@ -31,7 +30,7 @@ export default defineComponent({
     const allRoutes = computed(() => store.state.user.routes)
     const route = useRoute()
     const activeMenu = computed(() => {
-      const { meta, path } = route
+      const {meta, path} = route
       if (meta.activeMenu) {
         return meta.activeMenu
       }

src/layout/Tabs/index.vue

@@ -1,195 +1,392 @@
 <template>
   <div class="tabs-box">
-    <el-scrollbar ref="scrollbarDom" class="tab">
-      <div class="scrollbar-flex-content">
-        <Item v-for="menu in menuList" :key="menu.meta.title" :active="activeMenu === menu.path" :menu="menu"
-              @close="delMenu(menu)"/>
+    <right-click-menu :mouse-position="mousePosition"
+                      :config="opt"/>
+    <el-icon class="小手指" v-show="withScrollBar" @click="moveToTheLeft">
+      <ArrowLeft/>
+    </el-icon>
+    <div class="tag" ref="tagRef">
+      <div class="home_fixed" ref="homeRef" @click="backToTheHomepage">
+        <el-tag effect="dark" size="default" class="小手指"
+                :type="router.currentRoute.value.path === '/dashboard' ? 'success': ''">
+          首页
+        </el-tag>
       </div>
-    </el-scrollbar>
-    <div class="handle">
-      <el-dropdown placement="bottom">
-        <div class="el-dropdown-link">
-          <el-icon>
-            <ArrowDown/>
-          </el-icon>
-        </div>
-        <template #dropdown>
-          <el-dropdown-menu>
-            <el-dropdown-item :disabled="currentDisabled" icon="CircleClose" @click="closeCurrentRoute"> 关闭当前标签
-            </el-dropdown-item>
-            <el-dropdown-item :disabled="menuList.length < 3" icon="CircleClose" @click="closeOtherRoute"> 关闭其他标签
-            </el-dropdown-item>
-            <el-dropdown-item :disabled="menuList.length <= 1" icon="CircleClose" @click="closeAllRoute"> 关闭所有标签
-            </el-dropdown-item>
-          </el-dropdown-menu>
-        </template>
-      </el-dropdown>
+      <div style="display: inline-block;height: 100%" :style="{width: homeRef?.clientWidth + 3 + 'px'}"/>
+      <el-tag v-for="(item,index) in menuList"
+              :key="item.path"
+              effect="dark"
+              closable
+              @close="closeItem(index,item.path)"
+              @contextmenu.prevent="contextmenuItem(item,index,$event)"
+              size="default"
+              :type="routingHighlight(item,index)"
+              @click="jump(item.path)"
+              class="小手指">
+        {{ item.meta.title }}
+      </el-tag>
     </div>
+    <el-icon class="小手指" v-show="withScrollBar" @click="moveToTheRight">
+      <ArrowRight/>
+    </el-icon>
   </div>
 </template>
 
-<script name="tabs" setup>
-import Item from './item.vue'
-import {computed, nextTick, ref, watch} from 'vue'
-import {useStore} from 'vuex'
-import {useRoute, useRouter} from 'vue-router'
-import tabsHook from './tabsHook'
-import {getScrollTop} from "@/utils/el-table-scroll";
-
-const store = useStore()
-const route = useRoute()
-const router = useRouter()
-const scrollbarDom = ref(null)
-const defaultMenu = {
-  path: '/dashboard',
-  meta: {title: '首页', hideClose: true},
-}
-const currentDisabled = computed(() => route.path === defaultMenu.path)
 
-const activeMenu = ref('')
+<script setup name="tabs">
+import {ref} from 'vue'
+import tabsHook from "@/layout/Tabs/tabsHook";
+import router from '@/router'
+import RightClickMenu from "@/components/MenuItem/RightClickMenu.vue";
+
+
 let menuList = ref(tabsHook.getItem())
-if (menuList.value.length === 0) {
-  // 判断之前有没有调用过
-  addMenu(defaultMenu)
-}
-watch(menuList.value, (newVal) => {
-  tabsHook.setItem(newVal)
-})
-watch(menuList, (newVal) => {
-  tabsHook.setItem(newVal)
-})
-router.afterEach(() => {
-  addMenu(route)
-  initMenu(route)
+const itemKey = ref(tabsHook.getItemKey())
+
+const tagRef = ref(null)
+const withScrollBar = ref(false)
+const homeRef = ref(null)
+
+const modal = ref(false)
+
+
+const opt = [
+  {
+    name: '关闭', click: (data, index) => {
+      closeItem(index, data.path)
+    }
+  },
+  {
+    name: '关闭其他选项卡', click: (data, index) => {
+      router.push(data.path)
+      setLabel([data])
+    }
+  },
+  {
+    name: '关闭所有选项卡', click: (data, index) => {
+      menuList.value = []
+      itemKey.value = []
+      backToTheHomepage()
+    }
+  },
+  {
+    name: '关闭左侧选项卡', click: (data, index) => {
+      if (index === 0) return
+      if (index > pageIndex) {
+        router.push(data.path)
+      }
+      let temp = []
+      for (let i = index; i < menuList.value.length; i++) {
+        temp.push(menuList.value[i])
+      }
+      setLabel(temp)
+    }
+  },
+  {
+    name: '关闭右侧选项卡', click: (data, index) => {
+      if (index + 1 === menuList.value.length) return
+      if (index < pageIndex) {
+        router.push(data.path)
+      }
+      let temp = []
+      for (let i = 0; i < index + 1; i++) {
+        temp.push(menuList.value[i])
+      }
+      setLabel(temp)
+    }
+  }
+]
+
+watch(() => menuList.value, () => {
+  tabsHook.setItem(menuList.value)
+  nextTick(() => {
+    withScrollBar.value = tagRef.value.scrollWidth > tagRef.value.clientWidth
+  })
+}, {
+  deep: true, immediate: true
 })
 
-// 关闭当前标签，首页不关闭
-function closeCurrentRoute() {
-  if (route.path !== defaultMenu.path) {
-    delMenu(route)
+const handleScrolling = () => {
+  if (withScrollBar.value) {
+    let itemData = tagRef.value.querySelectorAll('.el-tag')
+    let scroll = 0;
+
+    for (let i = 0; i < pageIndex; i++) {
+      let item = itemData[i]
+      scroll += item.scrollWidth
+    }
+    tagRef.value.scrollTo({top: 0, left: scroll, behavior: 'smooth'})
   }
 }
 
-// 关闭除了当前标签之外的所有标签
-function closeOtherRoute() {
-  menuList.value = [defaultMenu]
-  if (route.path !== defaultMenu.path) {
-    addMenu(route)
+let pageIndex = -1;
+const routingHighlight = (data, index) => {
+  if (data.path === router.currentRoute.value.meta.activeMenu) {
+    pageIndex = index
+    return "success";
+  } else if (data.path === router.currentRoute.value.path) {
+    pageIndex = index
+    return "success";
   }
-  setKeepAliveData()
 }
 
-// 关闭所有的标签，除了首页
-function closeAllRoute() {
-  menuList.value = [defaultMenu]
-  setKeepAliveData()
-  router.push(defaultMenu.path)
+const backToTheHomepage = () => {
+  router.push('/dashboard')
 }
 
-// 添加新的菜单项
-function addMenu(menu) {
-  let {path, meta, name} = menu
-  if (meta.activeMenu) {
-    let a = menuList.value.some((obj) => {
-      return obj.path === meta.activeMenu
-    })
-    if (!a) {
-      menuList.value.push({
-        path: meta.activeMenu,
-        meta: {title: meta.parentName},
-      })
-    }
-    return
-  } else if (meta.hideTabs) {
-    return
-  }
-  let hasMenu = menuList.value.some((obj) => {
-    return obj.path === path || obj.path === meta.activeMenu
-  })
-  if (!hasMenu) {
-    menuList.value.push({
-      path,
-      meta,
-      name,
-    })
+const handleAddingTags = (data) => {
+  if (!data) return
+
+  let value = {
+    path: data.path,
+    meta: data.meta
   }
-}
 
-// 删除菜单项
-function delMenu(menu) {
-  if (!menu.meta.hideClose) {
-    if (menu.meta.cache && menu.name) {
-      store.commit('keepAlive/delKeepAliveComponentsName', menu.name)
+  if (data.meta.activeMenu) {
+    value = {
+      path: data.meta.activeMenu,
+      meta: {
+        title: data.meta.parentName
+      }
     }
-    menuList.value.splice(
-        menuList.value.findIndex((item) => item.path === menu.path),
-        1
-    )
+  } else if (data.meta.hideTabs) {
+    return;
   }
-  if (menu.path === activeMenu.value) {
-    router.push(defaultMenu.path)
+  if (typeof value.meta.title === 'undefined') {
+    return;
   }
-}
 
-// 初始化activeMenu
-function initMenu(menu) {
-  if (menu.meta.activeMenu) {
-    activeMenu.value = menu.meta.activeMenu
-  } else {
-    activeMenu.value = menu.path
+  let temp = JSON.stringify(value);
+
+  if (!itemKey.value.includes(temp)) {
+    menuList.value.push(value)
+    itemKey.value.push(temp)
   }
+}
+
+watch(() => router.currentRoute.value, () => {
+  handleAddingTags(router.currentRoute.value)
   nextTick(() => {
-    try {
-      setPosition()
-    } catch (e) {
-      console.log(e)
-    }
+    handleScrolling()
   })
+}, {immediate: true})
+
+
+const mousePosition = ref()
+const contextmenuItem = async (item, index, event) => {
+  mousePosition.value = {
+    event,
+    data: item,
+    index
+  }
 }
 
-// 设置当前滚动条应该在的位置
-function setPosition() {
-  if (scrollbarDom.value) {
-    const domBox = {
-      scrollbar: scrollbarDom.value.$el.querySelector('.el-scrollbar__wrap '),
-      activeDom: scrollbarDom.value.$el.querySelector('.active'),
-      activeFather: scrollbarDom.value.$el.querySelector('.el-scrollbar__view'),
-    }
-    for (let key in domBox) {
-      if (!domBox[key]) {
-        return
-      }
-    }
-    const domData = {
-      scrollbar: domBox.scrollbar.getBoundingClientRect(),
-      activeDom: domBox.activeDom.getBoundingClientRect(),
-      activeFather: domBox.activeFather.getBoundingClientRect(),
+const closeItem = (index, data) => {
+
+  menuList.value.splice(index, 1)
+  itemKey.value.splice(index, 1)
+
+  if (menuList.value.length === 0) {
+    router.push('/dashboard')
+  } else {
+    if (router.currentRoute.value.path === data) {
+      let temp = index === menuList.value.length ? menuList.value.length - 1 : index
+      router.push(menuList.value[temp]?.path)
     }
-    scrollbarDom.value.scrollTo({
-      top: 0,
-      left: domData.activeDom.x - domData.activeFather.x + (1 / 2) * domData.activeDom.width - (1 / 2) * domData.scrollbar.width,
-      behavior: 'smooth',
-    })
-    // domBox.scrollbar.scrollLeft = domData.activeDom.x - domData.activeFather.x + (1 / 2) * domData.activeDom.width - (1 / 2) * domData.scrollbar.width
   }
+
 }
 
-function setKeepAliveData() {
-  let keepAliveNames = []
-  menuList.value.forEach((menu) => {
-    menu.meta && menu.meta.cache && menu.name && keepAliveNames.push(menu.name)
-  })
-  store.commit('keepAlive/setKeepAliveComponentsName', keepAliveNames)
+
+const setLabel = (data) => {
+  menuList.value = data
+  itemKey.value = []
+  for (let i = 0, len = menuList.value.length; i < len; i++) {
+    itemKey.value.push(JSON.stringify(menuList.value[i]))
+  }
+}
+
+const jump = (path) => {
+  router.push(path)
+}
+
+const moveToTheLeft = () => {
+  tagRef.value.scrollTo({top: 0, left: 0, behavior: 'smooth'})
 }
 
-addMenu(route)
-initMenu(route)
+const moveToTheRight = () => {
+  tagRef.value.scrollTo({top: 0, left: tagRef.value.clientWidth, behavior: 'smooth'})
+}
+
+
 </script>
 
+<!--<script name="tabs" setup>-->
+<!--import Item from './item.vue'-->
+<!--import {computed, nextTick, ref, watch} from 'vue'-->
+<!--import {useStore} from 'vuex'-->
+<!--import {useRoute, useRouter} from 'vue-router'-->
+<!--import tabsHook from './tabsHook'-->
+<!--import {getScrollTop} from "@/utils/el-table-scroll";-->
+
+<!--const store = useStore()-->
+<!--const route = useRoute()-->
+<!--const router = useRouter()-->
+<!--const scrollbarDom = ref(null)-->
+<!--const defaultMenu = {-->
+<!--  path: '/dashboard',-->
+<!--  meta: {title: '首页', hideClose: true},-->
+<!--}-->
+<!--const currentDisabled = computed(() => route.path === defaultMenu.path)-->
+
+<!--const activeMenu = ref('')-->
+<!--let menuList = ref(tabsHook.getItem())-->
+<!--if (menuList.value.length === 0) {-->
+<!--  // 判断之前有没有调用过-->
+<!--  addMenu(defaultMenu)-->
+<!--}-->
+<!--console.log(menuList)-->
+<!--watch(menuList.value, (newVal) => {-->
+<!--  tabsHook.setItem(newVal)-->
+<!--})-->
+<!--watch(menuList, (newVal) => {-->
+<!--  tabsHook.setItem(newVal)-->
+<!--})-->
+<!--router.afterEach(() => {-->
+<!--  addMenu(route)-->
+<!--  initMenu(route)-->
+<!--})-->
+
+<!--// 关闭当前标签，首页不关闭-->
+<!--function closeCurrentRoute() {-->
+<!--  if (route.path !== defaultMenu.path) {-->
+<!--    delMenu(route)-->
+<!--  }-->
+<!--}-->
+
+<!--// 关闭除了当前标签之外的所有标签-->
+<!--function closeOtherRoute() {-->
+<!--  menuList.value = [defaultMenu]-->
+<!--  if (route.path !== defaultMenu.path) {-->
+<!--    addMenu(route)-->
+<!--  }-->
+<!--  setKeepAliveData()-->
+<!--}-->
+
+<!--// 关闭所有的标签，除了首页-->
+<!--function closeAllRoute() {-->
+<!--  menuList.value = [defaultMenu]-->
+<!--  setKeepAliveData()-->
+<!--  router.push(defaultMenu.path)-->
+<!--}-->
+
+<!--// 添加新的菜单项-->
+<!--function addMenu(menu) {-->
+<!--  let {path, meta, name} = menu-->
+<!--  if (meta.activeMenu) {-->
+<!--    let a = menuList.value.some((obj) => {-->
+<!--      return obj.path === meta.activeMenu-->
+<!--    })-->
+<!--    if (!a) {-->
+<!--      menuList.value.push({-->
+<!--        path: meta.activeMenu,-->
+<!--        meta: {title: meta.parentName},-->
+<!--      })-->
+<!--    }-->
+<!--    return-->
+<!--  } else if (meta.hideTabs) {-->
+<!--    return-->
+<!--  }-->
+<!--  let hasMenu = menuList.value.some((obj) => {-->
+<!--    return obj.path === path || obj.path === meta.activeMenu-->
+<!--  })-->
+<!--  if (!hasMenu) {-->
+<!--    menuList.value.push({-->
+<!--      path,-->
+<!--      meta,-->
+<!--      name,-->
+<!--    })-->
+<!--  }-->
+<!--}-->
+
+<!--// 删除菜单项-->
+<!--function delMenu(menu) {-->
+<!--  if (!menu.meta.hideClose) {-->
+<!--    if (menu.meta.cache && menu.name) {-->
+<!--      store.commit('keepAlive/delKeepAliveComponentsName', menu.name)-->
+<!--    }-->
+<!--    menuList.value.splice(-->
+<!--        menuList.value.findIndex((item) => item.path === menu.path),-->
+<!--        1-->
+<!--    )-->
+<!--  }-->
+<!--  if (menu.path === activeMenu.value) {-->
+<!--    router.push(defaultMenu.path)-->
+<!--  }-->
+<!--}-->
+
+<!--// 初始化activeMenu-->
+<!--function initMenu(menu) {-->
+<!--  if (menu.meta.activeMenu) {-->
+<!--    activeMenu.value = menu.meta.activeMenu-->
+<!--  } else {-->
+<!--    activeMenu.value = menu.path-->
+<!--  }-->
+<!--  nextTick(() => {-->
+<!--    try {-->
+<!--      setPosition()-->
+<!--    } catch (e) {-->
+<!--      console.log(e)-->
+<!--    }-->
+<!--  })-->
+<!--}-->
+
+<!--// 设置当前滚动条应该在的位置-->
+<!--function setPosition() {-->
+<!--  if (scrollbarDom.value) {-->
+<!--    const domBox = {-->
+<!--      scrollbar: scrollbarDom.value.$el.querySelector('.el-scrollbar__wrap '),-->
+<!--      activeDom: scrollbarDom.value.$el.querySelector('.active'),-->
+<!--      activeFather: scrollbarDom.value.$el.querySelector('.el-scrollbar__view'),-->
+<!--    }-->
+<!--    for (let key in domBox) {-->
+<!--      if (!domBox[key]) {-->
+<!--        return-->
+<!--      }-->
+<!--    }-->
+<!--    const domData = {-->
+<!--      scrollbar: domBox.scrollbar.getBoundingClientRect(),-->
+<!--      activeDom: domBox.activeDom.getBoundingClientRect(),-->
+<!--      activeFather: domBox.activeFather.getBoundingClientRect(),-->
+<!--    }-->
+<!--    scrollbarDom.value.scrollTo({-->
+<!--      top: 0,-->
+<!--      left: domData.activeDom.x - domData.activeFather.x + (1 / 2) * domData.activeDom.width - (1 / 2) * domData.scrollbar.width,-->
+<!--      behavior: 'smooth',-->
+<!--    })-->
+<!--    // domBox.scrollbar.scrollLeft = domData.activeDom.x - domData.activeFather.x + (1 / 2) * domData.activeDom.width - (1 / 2) * domData.scrollbar.width-->
+<!--  }-->
+<!--}-->
+
+<!--function setKeepAliveData() {-->
+<!--  let keepAliveNames = []-->
+<!--  menuList.value.forEach((menu) => {-->
+<!--    menu.meta && menu.meta.cache && menu.name && keepAliveNames.push(menu.name)-->
+<!--  })-->
+<!--  store.commit('keepAlive/setKeepAliveComponentsName', keepAliveNames)-->
+<!--}-->
+
+<!--addMenu(route)-->
+<!--initMenu(route)-->
+<!--</script>-->
+
 <style lang="scss" scoped>
+
+
 .tabs-box {
+  position: relative;
   display: flex;
-  justify-content: space-between;
+  justify-content: center;
   align-items: center;
   height: 40px;
   background: var(--system-header-background);
@@ -197,71 +394,127 @@ initMenu(route)
   border-top: 1px solid var(--system-header-border-color);
   box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.1);
 
-  .tab {
-    width: calc(100% - 40px);
-  }
+  .tag {
+    width: calc(100% - 60px);
+    overflow-x: auto;
+    white-space: nowrap;
+    margin: 0 5px;
 
-  .handle {
-    min-width: 35px;
-    height: 100%;
-    background-color: rgb(234, 233, 233);
-    display: flex;
-    align-items: center;
-
-    .el-dropdown-link {
-      margin-top: 5px;
-      border-left: 1px solid var(--system-header-border-color);
-      height: 25px;
-      width: 40px;
-      display: flex;
-      justify-content: center;
-      align-items: center;
+    .home_fixed {
+      display: inline-block;
+      position: fixed;
+      background-color: white
     }
 
-    i {
-      color: var(--system-header-text-color);
+    span {
+      margin: 0 3px;
     }
-  }
-}
 
-.scroll-container {
-  white-space: nowrap;
-  position: relative;
-  overflow: hidden;
-  width: 100%;
-}
+  }
 
-:deep(.scroll-container .el-scrollbar__bar) {
-  bottom: 0;
 }
 
-:deep(.scroll-container .el-scrollbar__wrap) {
-  height: 49px;
+.tag::-webkit-scrollbar {
+  height: 5px;
+  background-color: #fff;
 }
 
-.tags-view-container {
-  height: 34px;
-  flex: 1;
-  width: 100%;
-  display: flex;
+.tag:hover ::-webkit-scrollbar-track-piece {
+  /*鼠标移动上去再显示滚动条*/
+  background-color: #fff;
+  /* 滚动条的背景颜色 */
+  border-radius: 6px;
+  /* 滚动条的圆角宽度 */
 }
 
-.el-icon-full-screen {
-  cursor: pointer;
-
-  &:hover {
-    background: rgba(0, 0, 0, 0.025);
-  }
 
-  &:focus {
-    outline: none;
-  }
+.tag:hover::-webkit-scrollbar-thumb { /*滚动条里面小方块*/
+  border-radius: 10px;
+  -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
+  background: #535353;
 }
 
-
-.scrollbar-flex-content {
-  display: flex;
-  width: calc(100% - 50px);
-  //overflow-x: scroll;
+.tag:hover::-webkit-scrollbar-track { /*滚动条里面轨道*/
+  -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
+  border-radius: 10px;
+  background: #EDEDED;
 }
+
+//.tabs-box {
+//  display: flex;
+//  justify-content: space-between;
+//  align-items: center;
+//  height: 40px;
+//  background: var(--system-header-background);
+//  border-bottom: 1px solid var(--system-header-border-color);
+//  border-top: 1px solid var(--system-header-border-color);
+//  box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.1);
+//
+//  .tab {
+//    width: calc(100% - 40px);
+//  }
+//
+//  .handle {
+//    min-width: 35px;
+//    height: 100%;
+//    background-color: rgb(234, 233, 233);
+//    display: flex;
+//    align-items: center;
+//
+//    .el-dropdown-link {
+//      margin-top: 5px;
+//      border-left: 1px solid var(--system-header-border-color);
+//      height: 25px;
+//      width: 40px;
+//      display: flex;
+//      justify-content: center;
+//      align-items: center;
+//    }
+//
+//    i {
+//      color: var(--system-header-text-color);
+//    }
+//  }
+//}
+//
+//.scroll-container {
+//  white-space: nowrap;
+//  position: relative;
+//  overflow: hidden;
+//  width: 100%;
+//}
+//
+//:deep(.scroll-container .el-scrollbar__bar) {
+//  bottom: 0;
+//}
+//
+//:deep(.scroll-container .el-scrollbar__wrap) {
+//  height: 49px;
+//}
+//
+//.tags-view-container {
+//  height: 34px;
+//  flex: 1;
+//  width: 100%;
+//  display: flex;
+//}
+//
+//.el-icon-full-screen {
+//  cursor: pointer;
+//
+//  &:hover {
+//    background: rgba(0, 0, 0, 0.025);
+//  }
+//
+//  &:focus {
+//    outline: none;
+//  }
+//}
+//
+//
+//.scrollbar-flex-content {
+//  display: flex;
+//  width: calc(100% - 50px);
+//  //overflow-x: scroll;
+//}
 </style>

src/layout/Tabs/tabsHook.js

@@ -1,9 +1,19 @@
+import {clone} from "@/utils/clone";
+
 const tabsHook = {
-  setItem: function (arr) {
-    localStorage.setItem('tabs', JSON.stringify(arr))
-  },
-  getItem: function () {
-    return JSON.parse(localStorage.getItem('tabs') || '[]')
-  },
+    setItem: function (arr) {
+        localStorage.setItem('tabs', JSON.stringify(arr))
+    },
+    getItem: function () {
+        return clone(JSON.parse(localStorage.getItem('tabs') || '[]'))
+    },
+    getItemKey: function () {
+        let data = this.getItem()
+        let temp = []
+        for (let i = 0; i < data.length; i++) {
+            temp.push(JSON.stringify(data[i]))
+        }
+        return temp
+    }
 }
 export default tabsHook

src/layout/index.vue

@@ -1,20 +1,22 @@
 <template>
   <el-container style="height: 100vh">
     <div class="mask" v-show="!isCollapse && !contentFullScreen" @click="hideMenu"></div>
-    <el-aside :width="isCollapse ? '60px' : '250px'" :class="isCollapse ? 'hide-aside' : 'show-side'" v-show="!contentFullScreen">
-      <Logo v-if="showLogo" />
-      <Menu />
+    <el-aside :width="isCollapse ? '60px' : '250px'"
+              :class="isCollapse ? 'hide-aside' : 'show-side'"
+              v-show="!contentFullScreen">
+      <Logo v-if="showLogo"/>
+      <Menu/>
     </el-aside>
     <el-container>
       <el-header v-show="!contentFullScreen" style="height: 60px; display: block">
-        <Header />
+        <Header/>
       </el-header>
-      <Tabs v-show="showTabs" />
+      <Tabs v-show="showTabs"/>
       <el-main>
         <router-view v-slot="{ Component }">
           <transition name="fade-transform" mode="out-in">
             <keep-alive>
-              <component :is="Component" />
+              <component :is="Component"/>
             </keep-alive>
           </transition>
         </router-view>
@@ -23,58 +25,44 @@
   </el-container>
 </template>
 
-<script>
-import { defineComponent, computed, onMounted } from 'vue'
-import { useStore } from 'vuex'
+<script setup>
+import {computed, onMounted} from 'vue'
+import {useStore} from 'vuex'
 import Menu from './Menu/index.vue'
 import Logo from './Logo/index.vue'
 import Header from './Header/index.vue'
 import Tabs from './Tabs/index.vue'
-import { useRouter } from 'vue-router'
-import { initWebSocket } from '@/utils/websocket'
+import {useRouter} from 'vue-router'
+import {initWebSocket} from '@/utils/websocket'
 
-export default defineComponent({
-  components: {
-    Menu,
-    Logo,
-    Header,
-    Tabs,
-  },
-  setup() {
-    const store = useStore()
-    const isCollapse = computed(() => store.state.app.isCollapse)
-    const contentFullScreen = computed(() => store.state.app.contentFullScreen)
-    const showLogo = computed(() => store.state.app.showLogo)
-    const showTabs = computed(() => store.state.app.showTabs)
+const store = useStore()
+const isCollapse = computed(() => store.state.app.isCollapse)
+const contentFullScreen = computed(() => store.state.app.contentFullScreen)
+const showLogo = computed(() => store.state.app.showLogo)
+const showTabs = computed(() => store.state.app.showTabs)
 
-    const hideMenu = () => {
-      store.commit('app/isCollapseChange', true)
-    }
 
-    const router = useRouter()
-    const initSocket = () => {
-      const sid = store.getters['user/sid']
-      if (sid && sid !== 'undefined') {
-        initWebSocket(sid)
-      } else {
-        router.push('/login')
-      }
-    }
-    onMounted(() => {
-      if (store.getters['user/token']) {
-        initSocket()
-      }
-    })
 
-    return {
-      isCollapse,
-      showLogo,
-      showTabs,
-      contentFullScreen,
-      hideMenu,
-    }
-  },
+
+const hideMenu = () => {
+  store.commit('app/isCollapseChange', true)
+}
+
+const router = useRouter()
+const initSocket = () => {
+  const sid = store.getters['user/sid']
+  if (sid && sid !== 'undefined') {
+    initWebSocket(sid)
+  } else {
+    router.push('/login')
+  }
+}
+onMounted(() => {
+  if (store.getters['user/token']) {
+    initSocket()
+  }
 })
+
 </script>
 
 <style lang="scss" scoped>

src/router/modules/dashboard.js

@@ -28,7 +28,7 @@ const route = [
             {
                 path: 'dashboard',
                 component: createNameComponent(() => import('@/views/dashboard/index.vue')),
-                meta: {title: '首页', icon: 'el-icon-menu', hideClose: true},
+                meta: {title: '首页', icon: 'el-icon-menu', hideClose: true, hideTabs: true},
             },
         ],
     }, // 这里以下都是临时新加的
@@ -138,17 +138,17 @@ const route = [
             {
                 path: 'statistical/cssybJsTj',
                 component: createNameComponent(() => import('@/views/medical-insurance/statistical/CssybJsTj.vue')),
-                meta: {title: '市医保决算统计', icon: 'iconfont icon-zhuyuanqingdan' },
+                meta: {title: '市医保决算统计', icon: 'iconfont icon-zhuyuanqingdan'},
             },
             {
                 path: 'statistical/cssybCsTj',
                 component: createNameComponent(() => import('@/views/medical-insurance/statistical/CssybCsTj.vue')),
-                meta: {title: '市医保测算统计', icon: 'iconfont icon-zhuyuanqingdan' },
+                meta: {title: '市医保测算统计', icon: 'iconfont icon-zhuyuanqingdan'},
             },
             {
                 path: 'statistical/cssybBzTj',
                 component: createNameComponent(() => import('@/views/medical-insurance/statistical/CssybBzTj.vue')),
-                meta: {title: '市医保病种统计', icon: 'iconfont icon-zhuyuanqingdan' },
+                meta: {title: '市医保病种统计', icon: 'iconfont icon-zhuyuanqingdan'},
             },
         ],
     },

src/utils/request.js

@@ -119,6 +119,7 @@ service.interceptors.response.use(
             type: 'error',
             duration: 2500,
             showClose: true,
+            grouping: true,
         })
         store.commit('app/setJdt', {title: '', isOpen: false, closeButton: true})
         return Promise.reject(error)

src/views/hospitalization/zhu-yuan-yi-sheng/yi-zhu-lu-ru/YiZhuLuRu.vue

@@ -10,9 +10,7 @@
           size="small"
           start-placeholder="开始日期"
           style="width: 220px"
-          type="daterange"
-      >
-      </el-date-picker>
+          type="daterange"/>
       医嘱名称：
       <el-select v-model="orderName" :remote-method="remoteMethodChargeCode" clearable filterable remote
                  style="width: 120px">
@@ -76,7 +74,7 @@
               {{ scope.row.actOrderNo }}
             </el-tag>
             <span v-html="getFeeInfor(scope.row.actOrderNo)">
-                  </span>
+                        </span>
           </template>
         </el-table-column>
         <el-table-column fixed="left" width="20">
@@ -144,6 +142,8 @@
         </el-table-column>
       </xc-table>
     </el-main>
+
+
     <el-dialog v-model="yiZhuChaoZuoDialog" :close-on-click-modal="false" :close-on-press-escape="false"
                :show-close="false" :title="yiZhuChaoZuoBiaoTi" top="25%" width="30%">
       <div v-if="chaoZuoBiaoZhi === 2">
@@ -444,13 +444,6 @@ onMounted(async () => {
   zkList.value = await getTheTransferList()
 })
 
-onActivated(() => {
-  getServerDateApi().then((res) => {
-    dateRange.value[0] = getFormatDatetime(res, 'YYYY-MM-DD')
-    dateRange.value[1] = getFormatDatetime(res, 'YYYY-MM-DD')
-    chaXunYiZhuClick(0)
-  })
-})
 
 watch(
     () => huanZheXinXi.value,
@@ -461,14 +454,6 @@ watch(
       })
 
       getServerDateApi().then((res) => {
-        if (dateRange.value === null) {
-          dateRange.value = []
-          dateRange.value.push(getFormatDatetime(res, 'YYYY-MM-DD'))
-          dateRange.value.push(getFormatDatetime(res, 'YYYY-MM-DD'))
-        } else {
-          dateRange.value[0] = getFormatDatetime(res, 'YYYY-MM-DD')
-          dateRange.value[1] = getFormatDatetime(res, 'YYYY-MM-DD')
-        }
         chaXunYiZhuClick(0)
       })
     }