From a927e4368fd85b77b19298e613c5cb7cccf9454e Mon Sep 17 00:00:00 2001
From: junjie <junjie.xia@fit2cloud.com>
Date: Thu, 1 Jul 2021 10:47:28 +0800
Subject: [PATCH] =?UTF-8?q?refactor:=20=E5=89=8D=E7=AB=AFtree=E7=BB=84?=
 =?UTF-8?q?=E4=BB=B6=E4=BB=A5=E5=8F=8A=E6=8B=89=E5=AE=BD=E7=BA=BF=E4=BC=98?=
 =?UTF-8?q?=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/views/chart/group/Group.vue      |  7 ++++++-
 frontend/src/views/chart/index.vue            |  2 +-
 .../src/views/chart/view/TableSelector.vue    |  1 +
 .../common/DatasetGroupSelectorTree.vue       | 20 ++++++++++++++++---
 .../views/dataset/common/DatasetTableData.vue |  6 ++++--
 frontend/src/views/dataset/group/Group.vue    |  7 ++++++-
 frontend/src/views/dataset/index.vue          |  2 +-
 .../src/views/system/datasource/DsMain.vue    |  2 +-
 .../src/views/system/datasource/DsTree.vue    |  7 ++++++-
 9 files changed, 43 insertions(+), 11 deletions(-)

diff --git a/frontend/src/views/chart/group/Group.vue b/frontend/src/views/chart/group/Group.vue
index 2aafc83748..ed22f81813 100644
--- a/frontend/src/views/chart/group/Group.vue
+++ b/frontend/src/views/chart/group/Group.vue
@@ -1,5 +1,5 @@
 <template xmlns:el-col="http://www.w3.org/1999/html">
-  <el-col>
+  <el-col class="tree-style">
     <!-- group -->
     <el-col v-if="!sceneMode">
       <el-row class="title-css">
@@ -1040,4 +1040,9 @@ export default {
   .father:hover .child {
     display: inline;
   }
+  .tree-style {
+    padding: 10px 15px;
+    height: 100%;
+    overflow-y: auto;
+  }
 </style>
diff --git a/frontend/src/views/chart/index.vue b/frontend/src/views/chart/index.vue
index e6eb53f69c..dc2f2ac653 100644
--- a/frontend/src/views/chart/index.vue
+++ b/frontend/src/views/chart/index.vue
@@ -57,7 +57,7 @@ export default {
 <style scoped>
   .ms-aside-container {
     height: calc(100vh - 56px);
-    padding: 10px 15px;
+    padding: 0 0;
     min-width: 260px;
     max-width: 460px;
   }
diff --git a/frontend/src/views/chart/view/TableSelector.vue b/frontend/src/views/chart/view/TableSelector.vue
index 9986e4575c..23ea6955b2 100644
--- a/frontend/src/views/chart/view/TableSelector.vue
+++ b/frontend/src/views/chart/view/TableSelector.vue
@@ -55,6 +55,7 @@ export default {
     height: 50vh;
     min-width: 180px;
     max-width: 280px;
+    padding: 0 0;
   }
 
   .ms-main-container {
diff --git a/frontend/src/views/dataset/common/DatasetGroupSelectorTree.vue b/frontend/src/views/dataset/common/DatasetGroupSelectorTree.vue
index 7f5904dda5..f79495330d 100644
--- a/frontend/src/views/dataset/common/DatasetGroupSelectorTree.vue
+++ b/frontend/src/views/dataset/common/DatasetGroupSelectorTree.vue
@@ -1,5 +1,5 @@
 <template>
-  <el-col>
+  <el-col class="tree-style">
     <!-- group -->
     <el-col v-if="!sceneMode" v-loading="dsLoading">
       <el-row class="title-css">
@@ -24,7 +24,7 @@
       </el-row>
 
       <el-col class="custom-tree-container">
-        <div class="block">
+        <div class="block" :style="treeStyle">
           <el-tree
             :default-expanded-keys="expandedArray"
             :data="data"
@@ -80,6 +80,11 @@ import { authModel } from '@/api/system/sysAuth'
 export default {
   name: 'DatasetGroupSelectorTree',
   props: {
+    fixHeight: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
     customType: {
       type: Array,
       required: false,
@@ -141,7 +146,11 @@ export default {
         id: 'id',
         parentId: 'pid'
       },
-      isTreeSearch: false
+      isTreeSearch: false,
+      treeStyle: this.fixHeight ? {
+        height: '200px',
+        overflow: 'auto'
+      } : {}
     }
   },
   computed: {},
@@ -520,4 +529,9 @@ export default {
     white-space: nowrap;
     text-overflow: ellipsis;
   }
+  .tree-style {
+    padding: 10px;
+    height: 100%;
+    overflow-y: auto;
+  }
 </style>
diff --git a/frontend/src/views/dataset/common/DatasetTableData.vue b/frontend/src/views/dataset/common/DatasetTableData.vue
index 08527b46e8..52bba4540c 100644
--- a/frontend/src/views/dataset/common/DatasetTableData.vue
+++ b/frontend/src/views/dataset/common/DatasetTableData.vue
@@ -60,8 +60,10 @@ export default {
     //   })()
     // }
     // this.height = window.innerHeight / 3
-    this.height = document.getElementById('dsData').parentNode.offsetHeight - 16 - 14 - 5
-    this.initData()
+    this.$nextTick(() => {
+      this.height = document.getElementById('dsData').parentNode.offsetHeight - 16 - 14 - 5
+      this.initData()
+    })
   },
   methods: {
     initData() {
diff --git a/frontend/src/views/dataset/group/Group.vue b/frontend/src/views/dataset/group/Group.vue
index e5e9bff173..f9eb349c62 100644
--- a/frontend/src/views/dataset/group/Group.vue
+++ b/frontend/src/views/dataset/group/Group.vue
@@ -1,5 +1,5 @@
 <template>
-  <el-col>
+  <el-col class="tree-style">
     <!-- group -->
     <el-col v-if="!sceneMode">
       <el-row class="title-css">
@@ -996,4 +996,9 @@ export default {
     align-items: center;
     width: 100%
   }
+  .tree-style {
+    padding: 10px 15px;
+    height: 100%;
+    overflow-y: auto;
+  }
 </style>
diff --git a/frontend/src/views/dataset/index.vue b/frontend/src/views/dataset/index.vue
index a7eea67c1a..364e3e1fd9 100644
--- a/frontend/src/views/dataset/index.vue
+++ b/frontend/src/views/dataset/index.vue
@@ -78,7 +78,7 @@ export default {
 <style scoped>
   .ms-aside-container {
     height: calc(100vh - 56px);
-    padding: 10px 15px;
+    padding: 0 0;
     min-width: 260px;
     max-width: 460px;
   }
diff --git a/frontend/src/views/system/datasource/DsMain.vue b/frontend/src/views/system/datasource/DsMain.vue
index 2e6abf0701..87f68ca22c 100644
--- a/frontend/src/views/system/datasource/DsMain.vue
+++ b/frontend/src/views/system/datasource/DsMain.vue
@@ -1,6 +1,6 @@
 <template>
   <de-container v-loading="$store.getters.loadingMap[$store.getters.currentPath]">
-    <de-aside-container style="padding: 10px 15px;">
+    <de-aside-container style="padding: 0 0;">
       <ds-tree ref="dsTree" @switch-main="switchMain" />
     </de-aside-container>
     <de-main-container>
diff --git a/frontend/src/views/system/datasource/DsTree.vue b/frontend/src/views/system/datasource/DsTree.vue
index a071f833d6..599d3fee78 100644
--- a/frontend/src/views/system/datasource/DsTree.vue
+++ b/frontend/src/views/system/datasource/DsTree.vue
@@ -1,5 +1,5 @@
 <template xmlns:el-col="http://www.w3.org/1999/html">
-  <el-col>
+  <el-col class="tree-style">
     <el-col>
       <el-row class="title-css">
         <span class="title-text">
@@ -301,4 +301,9 @@ export default {
   .father:hover .child {
     display: inline;
   }
+  .tree-style {
+    padding: 10px 15px;
+    height: 100%;
+    overflow-y: auto;
+  }
 </style>