feat:cancel selected widgets

src/views/dashboard/Edit.vue

@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License. -->
 <template>
   <Tool />
-  <div class="ds-main">
+  <div class="ds-main" @click="handleClick">
     <grid-layout />
     <el-dialog
       v-model="dashboardStore.showConfig"
@@ -36,7 +36,7 @@ import { useDashboardStore } from "@/store/modules/dashboard";
 
 const dashboardStore = useDashboardStore();
 // fetch layout data from serve side
-const layout: LayoutConfig[] = [
+const layout: any[] = [
   { x: 0, y: 0, w: 4, h: 12, i: "0" },
   { x: 4, y: 0, w: 4, h: 12, i: "1" },
   { x: 8, y: 0, w: 4, h: 15, i: "2" },
@@ -54,6 +54,12 @@ const layout: LayoutConfig[] = [
   { x: 8, y: 27, w: 4, h: 15, i: "16" },
 ];
 // dashboardStore.setLayout(layout);
+function handleClick(e: any) {
+  e.stopPropagation();
+  if (e.target.className === "ds-main") {
+    dashboardStore.activeGridItem("");
+  }
+}
 </script>
 <style lang="scss" scoped>
 .ds-main {

src/views/dashboard/controls/Tab.vue

@@ -19,10 +19,10 @@ limitations under the License. -->
         v-for="(child, idx) in data.children || []"
         :key="idx"
         :class="{ active: activeTabIndex === idx }"
-        @click="clickTabs(idx)"
+        @click="clickTabs($event, idx)"
       >
         <input
-          @click="editTabName(idx)"
+          @click="editTabName($event, idx)"
           v-model="child.name"
           placeholder="Please input"
           class="tab-name"
@@ -102,7 +102,8 @@ const state = reactive<{
 function layoutUpdatedEvent(newLayout: LayoutConfig[]) {
   state.layout = newLayout;
 }
-function clickTabs(idx: number) {
+function clickTabs(e: Event, idx: number) {
+  e.stopPropagation();
   activeTabIndex.value = idx;
 }
 function removeTab() {
@@ -114,7 +115,8 @@ function deleteTabItem(idx: number) {
 function addTabItem() {
   dashboardStore.addTabItem(props.data);
 }
-function editTabName(index: number) {
+function editTabName(el: Event, index: number) {
+  el.stopPropagation();
   editTabIndex.value = index;
 }
 function handleClick(el: any) {
@@ -123,7 +125,7 @@ function handleClick(el: any) {
   }
   editTabIndex.value = NaN;
 }
-function addTabWidget(e: any) {
+function addTabWidget(e: Event) {
   e.stopPropagation();
   activeTabWidget.value = String(state.layout.length);
   dashboardStore.addTabWidget(activeTabIndex.value);
@@ -131,7 +133,7 @@ function addTabWidget(e: any) {
     `${props.data.i}-${activeTabIndex.value}-${activeTabWidget.value}`
   );
 }
-function clickTabGrid(e: any, item: LayoutConfig) {
+function clickTabGrid(e: Event, item: LayoutConfig) {
   e.stopPropagation();
   activeTabWidget.value = item.i;
   dashboardStore.activeGridItem(
@@ -146,6 +148,17 @@ watch(
     state.layout = data;
   }
 );
+watch(
+  () => dashboardStore.activedGridItem,
+  (data) => {
+    const i = data.split("-");
+    if (i[0] === props.data.i && activeTabIndex.value === Number(i[1])) {
+      activeTabWidget.value = i[2];
+    } else {
+      activeTabWidget.value = "";
+    }
+  }
+);
 </script>
 <style lang="scss" scoped>
 .tabs {

src/views/dashboard/panel/Layout.vue

@@ -55,7 +55,6 @@ export default defineComponent({
       dashboardStore.setLayout(newLayout);
     }
     function clickGrid(item: LayoutConfig) {
-      console.log(item);
       dashboardStore.activeGridItem(item.i);
     }
     return {