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

30
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,11 +155,7 @@ 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);
async function init() {
await queryExpressions();
dashboardStore.setActiveTabIndex(activeTabIndex);
if (dashboardStore.layout[l].children.length) { if (dashboardStore.layout[l].children.length) {
const tab = dashboardStore.layout[l].children[activeTabIndex.value]; const tab = dashboardStore.layout[l].children[activeTabIndex.value];
dashboardStore.setCurrentTabItems( dashboardStore.setCurrentTabItems(
@ -167,9 +163,10 @@ limitations under the License. -->
); );
dashboardStore.setActiveTabIndex(activeTabIndex.value, props.data.i); 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);
}
watch(
() => (props.data.children || []).map((d: any) => d.expression),
async (old: string[], data: string[]) => {
if (JSON.stringify(data) === JSON.stringify(old)) {
return;
}
await queryExpressions();
if ((props.data.children || [])[activeTabIndex.value]?.enable === false) { if ((props.data.children || [])[activeTabIndex.value]?.enable === false) {
const index = (props.data.children || []).findIndex((tab: any) => tab.enable !== false) || 0; const index = (props.data.children || []).findIndex((tab: any) => tab.enable !== false) || 0;
const items = ((props.data.children || [])[index] || {}).children; const items = ((props.data.children || [])[index] || {}).children;
dashboardStore.setCurrentTabItems(items || []); dashboardStore.setCurrentTabItems(items || []);
dashboardStore.activeGridItem(0); dashboardStore.activeGridItem(0);
activeTabIndex.value = index; activeTabIndex.value = index;
dashboardStore.setActiveTabIndex(activeTabIndex.value);
needQuery.value = true; needQuery.value = true;
} }
}
watch(
() => (props.data.children || []).map((d: any) => d.expression),
(old: string[], data: string[]) => {
if (JSON.stringify(data) === JSON.stringify(old)) {
return;
}
queryExpressions();
}, },
); );
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);
} }
} }