refactor: 前端tree组件以及拉宽线优化

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>

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;
   }

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 {

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>

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.$nextTick(() => {
-    this.initData()
+      this.height = document.getElementById('dsData').parentNode.offsetHeight - 16 - 14 - 5
+      this.initData()
+    })
   },
   methods: {
     initData() {

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>

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;
   }

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>

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>