github/skywalking-booster-ui
2
0
Fork 1
mirror of https://github.com/apache/skywalking-booster-ui.git synced 2025-05-12 15:52:57 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix: active tab

Browse Source
This commit is contained in:
Fine 2023-12-20 16:42:25 +08:00
parent c91e30a4c3
commit 562737432e
2 changed files with 26 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

44
src/views/dashboard/controls/Tab.vue
View File

@ -68,7 +68,7 @@ limitations under the License. -->
<div class="operations" v-if="dashboardStore.editMode"> <div class="operations" v-if="dashboardStore.editMode">
<el-dropdown placement="bottom" trigger="click" :width="200"> <el-dropdown placement="bottom" trigger="click" :width="200">
<span class="icon-operation"> <span class="icon-operation">
<Icon iconName="ellipsis_v" size="middle" /> <Icon class="icon-tool" iconName="ellipsis_v" size="middle" />
</span> </span>
<template #dropdown> <template #dropdown>
<el-dropdown-menu> <el-dropdown-menu>
@ -155,21 +155,18 @@ limitations under the License. -->
const needQuery = ref<boolean>(false); const needQuery = ref<boolean>(false);
const l = dashboardStore.layout.findIndex((d: LayoutConfig) => d.i === props.data.i); const l = dashboardStore.layout.findIndex((d: LayoutConfig) => d.i === props.data.i);
init(); dashboardStore.setActiveTabIndex(activeTabIndex.value);
if (dashboardStore.layout[l].children.length) {
async function init() { const tab = dashboardStore.layout[l].children[activeTabIndex.value];
await queryExpressions(); dashboardStore.setCurrentTabItems(
dashboardStore.setActiveTabIndex(activeTabIndex); tab.enable === false ? [] : dashboardStore.layout[l].children[activeTabIndex.value].children,
if (dashboardStore.layout[l].children.length) { );
const tab = dashboardStore.layout[l].children[activeTabIndex.value]; dashboardStore.setActiveTabIndex(activeTabIndex.value, props.data.i);
dashboardStore.setCurrentTabItems(
tab.enable === false ? [] : dashboardStore.layout[l].children[activeTabIndex.value].children,
);
dashboardStore.setActiveTabIndex(activeTabIndex.value, props.data.i);
}
} }
queryExpressions();
function clickTabs(e: Event, idx: number) { function clickTabs(e: Event, idx: number) {
console.log(idx);
e.stopPropagation(); e.stopPropagation();
activeTabIndex.value = idx; activeTabIndex.value = idx;
dashboardStore.activeGridItem(props.data.i); dashboardStore.activeGridItem(props.data.i);
@ -275,23 +272,24 @@ limitations under the License. -->
} }
dashboardStore.setConfigs(tabsProps); dashboardStore.setConfigs(tabsProps);
if ((props.data.children || [])[activeTabIndex.value]?.enable === false) {
const index = (props.data.children || []).findIndex((tab: any) => tab.enable !== false) || 0;
const items = ((props.data.children || [])[index] || {}).children;
dashboardStore.setCurrentTabItems(items || []);
dashboardStore.activeGridItem(0);
activeTabIndex.value = index;
dashboardStore.setActiveTabIndex(activeTabIndex.value);
needQuery.value = true;
}
} }
watch( watch(
() => (props.data.children || []).map((d: any) => d.expression), () => (props.data.children || []).map((d: any) => d.expression),
async (old: string[], data: string[]) => { (old: string[], data: string[]) => {
if (JSON.stringify(data) === JSON.stringify(old)) { if (JSON.stringify(data) === JSON.stringify(old)) {
return; return;
} }
await queryExpressions(); queryExpressions();
if ((props.data.children || [])[activeTabIndex.value]?.enable === false) {
const index = (props.data.children || []).findIndex((tab: any) => tab.enable !== false) || 0;
const items = ((props.data.children || [])[index] || {}).children;
dashboardStore.setCurrentTabItems(items || []);
dashboardStore.activeGridItem(0);
activeTabIndex.value = index;
needQuery.value = true;
}
}, },
); );
watch( watch(

6
src/views/dashboard/panel/Layout.vue
View File

@ -58,7 +58,11 @@ limitations under the License. -->
function clickGrid(item: LayoutConfig, event: Event) { function clickGrid(item: LayoutConfig, event: Event) {
dashboardStore.activeGridItem(item.i); dashboardStore.activeGridItem(item.i);
dashboardStore.selectWidget(item); dashboardStore.selectWidget(item);
if (item.type === "Tab" && (event.target as HTMLDivElement)?.className !== "tab-layout") { if (
item.type === "Tab" &&
(event.target as HTMLDivElement)?.className !== "tab-layout" &&
(event.target as HTMLDivElement)?.classList[2] !== "icon-tool"
) {
dashboardStore.setActiveTabIndex(0); dashboardStore.setActiveTabIndex(0);
} }
} }