bugfix: 体验问题修复 TencentBlueKing#1461

hLinx · Nov 17, 2022 · 3a3e10f · 3a3e10f
1 parent 8645112
commit 3a3e10f
Show file tree

Hide file tree

Showing 8 changed files with 45 additions and 25 deletions.
diff --git a/src/frontend/package.json b/src/frontend/package.json
@@ -19,7 +19,7 @@
     "@vue/composition-api": "^1.5.0",
     "ace-builds": "^1.13.0",
     "axios": "^0.27.2",
-    "bk-magic-vue": "2.5.3-beta.4",
+    "bk-magic-vue": "2.5.3-beta.5",
     "core-js": "^3.26.1",
     "cron-parser-custom": "^2.13.0",
     "diff": "^5.0.0",

diff --git a/src/frontend/src/components/ip-selector/entry.vue b/src/frontend/src/components/ip-selector/entry.vue
@@ -187,8 +187,8 @@
         refresh () {
             viewsRef.value && viewsRef.value.refresh();
         },
-        collapseToggle () {
-            viewsRef.value && viewsRef.value.collapseToggle();
+        collapseToggle (toggle) {
+            viewsRef.value && viewsRef.value.collapseToggle(toggle);
         },
     });
 </script>

diff --git a/...ews-box/components/collapse-box/index.vue → ...tor/views-box/components/collapse-box.vue b/...ews-box/components/collapse-box/index.vue → ...tor/views-box/components/collapse-box.vue
@@ -24,7 +24,13 @@
 <script setup>
   import { ref } from 'vue';
 
-  import IpSelectorIcon from '../../../common/ip-selector-icon';
+  import IpSelectorIcon from '../../common/ip-selector-icon';
+
+  const props = defineProps({
+    name: {
+        type: String,
+    },
+  });
 
   const isShow = ref(true);
 
@@ -33,8 +39,16 @@
   };
 
   defineExpose({
-    toggle () {
-        handleToggle();
+    toggle (lastStatus) {
+        if (lastStatus === undefined) {
+            handleToggle();
+        } else if (lastStatus === false) {
+            isShow.value = false;
+        } else if (lastStatus === true) {
+            isShow.value = true;
+        } else if (Array.isArray(lastStatus) && props.name && lastStatus.includes(props.name)) {
+            isShow.value = true;
+        }
     },
   });
 </script>

diff --git a/src/frontend/src/components/ip-selector/views-box/components/search-host.vue b/src/frontend/src/components/ip-selector/views-box/components/search-host.vue
@@ -88,7 +88,7 @@
         groupHostList,
     } from '../../utils';
 
-    import CollapseBox from './collapse-box/index.vue';
+    import CollapseBox from './collapse-box.vue';
 
     const props = defineProps({
         data: {
@@ -175,7 +175,7 @@
             isInnerChange = false;
             return;
         }
-        
+
         if (props.data.length > 0) {
             fetchData();
         } else {
@@ -238,7 +238,7 @@
     };
 </script>
 <style lang="postcss">
-    @import "../../styles/table.mixin.css";
+    @import url("../../styles/table.mixin.css");
 
     .ip-selector-view-host {
         @include table;

diff --git a/src/frontend/src/components/ip-selector/views-box/dynamic-group.vue b/src/frontend/src/components/ip-selector/views-box/dynamic-group.vue
@@ -2,7 +2,9 @@
     <div
         v-bkloading="{ isLoading }"
         class="ip-selector-view-dynamic-group">
-        <collapse-box ref="collapseBoxRef">
+        <collapse-box
+            ref="collapseBoxRef"
+            name="dynamicGroup">
             <template #title>
                 <span style="font-weight: bold;">【动态分组】</span>
                 <span>
@@ -113,7 +115,7 @@
     } from '../utils';
 
     import RenderAgentStatistics from './components/agent-statistics.vue';
-    import CollapseBox from './components/collapse-box/index.vue';
+    import CollapseBox from './components/collapse-box.vue';
     import HostList from './components/dynamic-group-host-list.vue';
 
     const props = defineProps({
@@ -266,8 +268,8 @@
         refresh () {
             fetchData();
         },
-        collapseToggle () {
-            collapseBoxRef.value.toggle();
+        collapseToggle (toggle) {
+            collapseBoxRef.value.toggle(toggle);
         },
     });
 </script>

diff --git a/src/frontend/src/components/ip-selector/views-box/host.vue b/src/frontend/src/components/ip-selector/views-box/host.vue
@@ -2,7 +2,9 @@
     <div
         v-bkloading="{ isLoading }"
         class="ip-selector-view-host">
-        <collapse-box ref="collapseBoxRef">
+        <collapse-box
+            ref="collapseBoxRef"
+            name="host">
             <template #title>
                 <span style="font-weight: bold;">【静态拓扑】</span>
                 <span>
@@ -95,7 +97,7 @@
         isAliveHost,
     } from '../utils';
 
-    import CollapseBox from './components/collapse-box/index.vue';
+    import CollapseBox from './components/collapse-box.vue';
 
     const props = defineProps({
         data: {
@@ -292,8 +294,8 @@
         refresh () {
             fetchData();
         },
-        collapseToggle () {
-            collapseBoxRef.value.toggle();
+        collapseToggle (toggle) {
+            collapseBoxRef.value.toggle(toggle);
         },
     });
 </script>

diff --git a/src/frontend/src/components/ip-selector/views-box/index.vue b/src/frontend/src/components/ip-selector/views-box/index.vue
@@ -136,10 +136,10 @@
             nodeRef.value && nodeRef.value.refresh();
             dynamicGroupRef.value && dynamicGroupRef.value.refresh();
         },
-        collapseToggle () {
-            hostRef.value && hostRef.value.collapseToggle();
-            nodeRef.value && nodeRef.value.collapseToggle();
-            dynamicGroupRef.value && dynamicGroupRef.value.collapseToggle();
+        collapseToggle (toggle) {
+            hostRef.value && hostRef.value.collapseToggle(toggle);
+            nodeRef.value && nodeRef.value.collapseToggle(toggle);
+            dynamicGroupRef.value && dynamicGroupRef.value.collapseToggle(toggle);
         },
     });
 </script>

diff --git a/src/frontend/src/components/ip-selector/views-box/node.vue b/src/frontend/src/components/ip-selector/views-box/node.vue
@@ -2,7 +2,9 @@
     <div
         v-bkloading="{ isLoading }"
         class="ip-selector-view-node">
-        <collapse-box ref="collapseBoxRef">
+        <collapse-box
+            ref="collapseBoxRef"
+            name="node">
             <template #title>
                 <span style="font-weight: bold;">【动态拓扑】</span>
                 <span>
@@ -114,7 +116,7 @@
     } from '../utils';
 
     import RenderAgentStatistics from './components/agent-statistics.vue';
-    import CollapseBox from './components/collapse-box/index.vue';
+    import CollapseBox from './components/collapse-box.vue';
     import NodeHostList from './components/node-host-list.vue';
 
     const props = defineProps({
@@ -288,8 +290,8 @@
         refresh () {
             fetchData();
         },
-        collapseToggle () {
-            collapseBoxRef.value.toggle();
+        collapseToggle (toggle) {
+            collapseBoxRef.value.toggle(toggle);
         },
     });
 </script>