From b43d3069e1ec731e339ed28c17325620f1fe9a6e Mon Sep 17 00:00:00 2001
From: 黄小民 <DesignHhuang@users.noreply.github.com>
Date: 星期二, 10 十月 2023 20:58:40 +0800
Subject: [PATCH] fix: #2744tabs选项卡渲染问题，以及完善路由中affix=true时处理逻辑。 (#3127)
---
src/layouts/default/tabs/useMultipleTabs.ts | 9 ++++++---
src/layouts/default/tabs/index.vue | 2 +-
src/layouts/default/header/MultipleHeader.vue | 5 ++++-
3 files changed, 11 insertions(+), 5 deletions(-)
diff --git a/src/layouts/default/header/MultipleHeader.vue b/src/layouts/default/header/MultipleHeader.vue
index 7244221..bca0489 100644
--- a/src/layouts/default/header/MultipleHeader.vue
+++ b/src/layouts/default/header/MultipleHeader.vue
@@ -2,7 +2,7 @@
<div :style="getPlaceholderDomStyle" v-if="getIsShowPlaceholderDom"></div>
<div :style="getWrapStyle" :class="getClass">
<LayoutHeader v-if="getShowInsetHeaderRef" />
- <MultipleTabs v-if="getShowTabs" />
+ <MultipleTabs v-if="getShowTabs" :key="tabStore.getLastDragEndIndex" />
</div>
</template>
<script lang="ts">
@@ -18,6 +18,7 @@
import { useAppInject } from '/@/hooks/web/useAppInject';
import { useDesign } from '/@/hooks/web/useDesign';
import { useLayoutHeight } from '../content/useContentViewHeight';
+ import { useMultipleTabStore } from '/@/store/modules/multipleTab';
const HEADER_HEIGHT = 48;
@@ -27,6 +28,7 @@
components: { LayoutHeader, MultipleTabs },
setup() {
const { setHeaderHeight } = useLayoutHeight();
+ const tabStore = useMultipleTabStore();
const { prefixCls } = useDesign('layout-multiple-header');
const { getCalcContentWidth, getSplit } = useMenuSetting();
@@ -101,6 +103,7 @@
getIsShowPlaceholderDom,
getShowTabs,
getShowInsetHeaderRef,
+ tabStore,
};
},
});
diff --git a/src/layouts/default/tabs/index.vue b/src/layouts/default/tabs/index.vue
index 3b487bb..a5195cd 100644
--- a/src/layouts/default/tabs/index.vue
+++ b/src/layouts/default/tabs/index.vue
@@ -8,7 +8,7 @@
:tabBarGutter="3"
:activeKey="activeKeyRef"
@change="handleChange"
- @edit="handleEdit"
+ @edit="(e) => handleEdit(`${e}`)"
>
<template v-for="item in getTabsState" :key="item.query ? item.fullPath : item.path">
<TabPane :closable="!(item && item.meta && item.meta.affix)">
diff --git a/src/layouts/default/tabs/useMultipleTabs.ts b/src/layouts/default/tabs/useMultipleTabs.ts
index 71b9029..d02e3e3 100644
--- a/src/layouts/default/tabs/useMultipleTabs.ts
+++ b/src/layouts/default/tabs/useMultipleTabs.ts
@@ -6,6 +6,9 @@
import { isNullAndUnDef } from '/@/utils/is';
import projectSetting from '/@/settings/projectSetting';
import { useRouter } from 'vue-router';
+import { useI18n } from '/@/hooks/web/useI18n';
+
+const { t } = useI18n();
export function initAffixTabs(): string[] {
const affixList = ref<RouteLocationNormalized[]>([]);
@@ -60,10 +63,10 @@
`.${prefixCls} .ant-tabs-nav-wrap > div`,
)?.[0] as HTMLElement;
const { initSortable } = useSortable(el, {
- filter: (e: ChangeEvent) => {
- const text = e?.target?.innerText;
+ filter: (_evt, target: HTMLElement) => {
+ const text = target.innerText;
if (!text) return false;
- return affixTextList.includes(text);
+ return affixTextList.map((res) => t(res)).includes(text);
},
onEnd: (evt) => {
const { oldIndex, newIndex } = evt;
--
Gitblit v1.8.0