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

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

@ -58,7 +58,11 @@ limitations under the License. -->
function clickGrid(item: LayoutConfig, event: Event) {
dashboardStore.activeGridItem(item.i);
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);
}
}