feat: 新增 项目详情多开与标签样式兼容

client/src/store/modules/tagsView.ts

@@ -2,7 +2,7 @@ import router from '@/router'
 import type { RouteLocationNormalizedLoaded } from 'vue-router'
 import { getRawRoute } from '@/utils/routerHelper'
 import { defineStore } from 'pinia'
-import { store } from '../index'
+import { store } from '@/store'
 import { findIndex } from '@/utils'
 
 export interface TagsViewState {
@@ -10,6 +10,22 @@ export interface TagsViewState {
   cachedViews: Set<string>
 }
 
+/**
+ * 判断是否为相同路由tag
+ * 判断path同时根据query确定是否相同（兼容详情页多开）
+ * @param currentTag
+ * @param TargetTag
+ */
+export const isSameRouteTag = (
+  currentTag: RouteLocationNormalizedLoaded,
+  TargetTag: RouteLocationNormalizedLoaded
+): boolean => {
+  return (
+    currentTag.path === TargetTag.path &&
+    JSON.stringify(currentTag?.query ?? {}) === JSON.stringify(TargetTag?.query ?? {})
+  )
+}
+
 export const useTagsViewStore = defineStore('tagsView', {
   state: (): TagsViewState => ({
     visitedViews: [],
@@ -31,7 +47,7 @@ export const useTagsViewStore = defineStore('tagsView', {
     },
     // 新增tag
     addVisitedView(view: RouteLocationNormalizedLoaded) {
-      if (this.visitedViews.some((v) => v.path === view.path)) return
+      if (this.visitedViews.some((v) => isSameRouteTag(v, view))) return
       if (view.meta?.noTagsView) return
       this.visitedViews.push(
         Object.assign({}, view, {

client/src/views/OaSystem/oaLayout/tagList.vue

@@ -61,29 +61,29 @@
             `${prefixCls}__item`,
             item?.meta?.affix ? `${prefixCls}__item--affix` : '',
             {
-              'is-active': isActive(item)
+              'is-route-tag-active': isActive(item)
             }
           ]"
           @visible-change="visibleChange"
         >
           <li>
-            <router-link :to="{ ...item }" exact v-slot="{ navigate }" v-if="index == 0">
+            <router-link :to="{ ...item }" exact v-slot="{ navigate }" v-if="index === 0">
               <div class="homeBox" @click="navigate">
-                <div @click="tagsHomeClick()" class="tagsFlex">
-                  <Icon :icon="item.meta.icon || ''" />
-                  <p>{{ item.meta.title }}</p>
-                </div>
+                <Icon :icon="item.meta.icon || ''" />
+                <p>{{ item.meta.title }}</p>
               </div>
             </router-link>
             <router-link :to="{ ...item }" exact v-slot="{ navigate }" v-else>
               <div class="fhomeBox" @click="navigate">
-                <div class="tagsFlex">
-                  <div class="pBox">
-                    <p>{{ item.meta.title }}</p>
-                  </div>
-                  <div @click.stop.prevent="closeSelectedTag(item)" class="close">
-                    <span>×</span>
-                  </div>
+                <div class="pBox">
+                  <p>
+                    {{ item.meta.title }}
+                    <!-- 用于多开页面的区分展示（例如详情页）-->
+                    {{ (item?.query?.name ?? '') !== '' ? `(${item?.query?.name})` : '' }}
+                  </p>
+                </div>
+                <div @click.stop.prevent="closeSelectedTag(item)" class="close">
+                  <span>×</span>
                 </div>
               </div>
             </router-link>
@@ -94,16 +94,18 @@
   </div>
 </template>
 <script setup lang="ts">
+import { computed, onMounted, nextTick, ref, watch } from 'vue'
 import { Icon } from '@/components/Icon'
 import type { RouteLocationNormalizedLoaded } from 'vue-router'
 import { useRouter } from 'vue-router'
 import { usePermissionStore } from '@/store/modules/permission'
-import { useTagsViewStore } from '@/store/modules/tagsView'
+import { isSameRouteTag, useTagsViewStore } from '@/store/modules/tagsView'
 import { filterAffixTags } from './helper'
 import { useTemplateRefsList } from '@vueuse/core'
 import { ContextMenu, ContextMenuExpose } from '@/layout/components/ContextMenu'
 import { useI18n } from '@/hooks/web/useI18n'
 import { useDesign } from '@/hooks/web/useDesign'
+
 const { getPrefixCls } = useDesign()
 const prefixCls = getPrefixCls('tags-view')
 const { t } = useI18n()
@@ -165,7 +167,7 @@ const closeLeftTags = () => {
 const closeRightTags = () => {
   tagsViewStore.delRightViews(unref(selectedTag) as RouteLocationNormalizedLoaded)
 }
-const tagsHomeClick = () => {}
+
 // 新增tag
 const addTags = () => {
   const { name } = unref(currentRoute)
@@ -186,7 +188,7 @@ const closeSelectedTag = (view: RouteLocationNormalizedLoaded) => {
 
 // 是否是当前tag
 const isActive = (route: RouteLocationNormalizedLoaded): boolean => {
-  return route.path === unref(currentRoute).path
+  return isSameRouteTag(route, unref(currentRoute))
 }
 
 // 跳转到最后一个
@@ -233,6 +235,7 @@ ul,
 li {
   box-sizing: border-box;
 }
+
 ._tagList {
   width: 100%;
   height: 36px;
@@ -240,20 +243,25 @@ li {
   align-items: center;
   background: rgba(255, 255, 255, 1);
   border-radius: 10px;
+
   .tag-view {
     width: 100%;
     height: 100%;
+
     ul {
       width: 100%;
       height: 100%;
       display: flex;
       align-items: center;
+
       li {
+        width: 100%;
         height: 100%;
         cursor: pointer;
+
         a {
+          width: 100%;
           display: block;
-          width: auto;
           height: 100%;
           border-radius: 10px;
           color: inherit;
@@ -261,6 +269,7 @@ li {
           padding: 2px;
           box-sizing: border-box;
         }
+
         .homeBox {
           width: 70px;
           height: 16px;
@@ -268,53 +277,52 @@ li {
           display: flex;
           align-items: center;
           justify-content: center;
-          .tagsFlex {
-            width: 100%;
-            height: 100%;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-          }
+
           p {
             margin-left: 5px;
             font-size: 16px;
           }
         }
+
         .fhomeBox {
+          width: 100%;
           height: 16px;
           display: flex;
           align-items: center;
           justify-content: space-between;
-          padding: 0 15px;
+          padding: 0 10px;
           border-right: 2px solid rgb(209, 197, 197);
-          .tagsFlex {
-            width: 100%;
-            height: 100%;
-            display: flex;
-            align-items: center;
-            justify-content: space-between;
-          }
+
           .pBox {
+            width: calc(100% - 17px);
             display: flex;
             align-items: center;
             justify-content: center;
+
             p {
+              overflow: hidden;
               font-size: 16px;
+              text-overflow: ellipsis;
+              white-space: nowrap;
             }
           }
+
           .close {
             display: flex;
             align-items: center;
             justify-content: center;
+            flex-shrink: 0;
             width: 12px;
             height: 12px;
             background-color: #878b91;
             border-radius: 50%;
-            margin-left: 10px;
+            margin-left: 5px;
+
             span {
               color: #fff;
             }
           }
+
           img {
             cursor: pointer;
             margin-top: 4px;
@@ -326,20 +334,29 @@ li {
   }
 }
 
-::v-deep .router-link-active {
-  // border: 2px solid #2e77e6;
+.is-route-tag-active {
   p {
     color: #2e77e6;
     font-weight: 600;
   }
+
   .el-icon {
     color: #2e77e6;
   }
+
   .close {
     background-color: #2e77e6 !important;
   }
 }
 
+.el-dropdown {
+  min-width: 60px;
+
+  &.v-tags-view__item--affix {
+    flex-shrink: 0;
+  }
+}
+
 .el-dropdown:hover {
   p {
     color: #2e77e6;
@@ -354,6 +371,7 @@ li {
         border-left: 2px solid rgb(209, 197, 197);
       }
     }
+
     .el-dropdown:last-child {
       .fhomeBox {
         border-right: 0;

client/src/views/OaSystem/projectCenter/projectBook/myProject.vue

@@ -219,7 +219,7 @@ const handleCurrentChange = (pageNo: number) => {
 const operateClick = (row: any) => {
   router.push({
     path: 'projectDetail',
-    query: { id: row.id }
+    query: { id: row.id, name: row.xmmc }
   })
 }
 const tableData = ref<Array<any>>([])