fix: 预览数据 滚动条问题修复

frontend/src/views/dataset/add/AddApi.vue

@@ -281,7 +281,7 @@ export default {
       const that = this
       setTimeout(function() {
         const currentHeight = document.documentElement.clientHeight
-        that.height = currentHeight - 195 - 54
+        that.height = currentHeight - 56 - 64 - 75 - 32 - 24 - 16 - 10
       }, 10)
     },
     setActiveName({ name, datasourceId, enableCheck }) {

frontend/src/views/dataset/add/AddDB.vue

@@ -312,7 +312,7 @@ export default {
       const that = this
       setTimeout(function () {
         const currentHeight = document.documentElement.clientHeight
-        that.height = currentHeight - 195 - 54
+        that.height = currentHeight - 56 - 64 - 75 - 32 - 24 - 16 - 10
       }, 10)
     },
     setActiveName({ name, datasourceId, enableCheck }) {

frontend/src/views/dataset/add/AddSQL.vue

@@ -371,7 +371,7 @@ import 'codemirror/addon/hint/sql-hint'
 import 'codemirror/addon/hint/show-hint'
 import { engineMode } from '@/api/system/engine'
 import msgCfm from '@/components/msgCfm/index'
-
+import _ from 'lodash'
 export default {
   name: 'AddSQL',
   components: { codemirror },
@@ -488,6 +488,11 @@ export default {
       handler: function () {
         this.initTableInfo()
       }
+    },
+    sqlHeight: {
+      handler: function () {
+        this.calHeight()
+      }
     }
   },
   mounted() {
@@ -560,14 +565,11 @@ export default {
         this.tableData = response.data
       })
     },
-    calHeight() {
+    calHeight: _.debounce(function() {
-      const that = this
+      const sqlHeight = Math.max(this.sqlHeight, 248)
-      setTimeout(function () {
+      const currentHeight = document.documentElement.clientHeight
-        const currentHeight = document.documentElement.clientHeight
+      this.height = currentHeight - sqlHeight - 56 - 54 - 36 - 64
-        that.height =
+    }, 200),
-          currentHeight - 56 - 30 - 26 - 25 - 43 - 160 - 10 - 37 - 20 - 10 - 16
-      }, 10)
-    },
     initDataSource() {
       listDatasource().then((response) => {
         this.options = response.data.filter((item) => item.type !== 'api')
@@ -636,7 +638,7 @@ export default {
         return
       }
       this.parseVariable()
-      this.loading = true;
+      this.loading = true
       const table = {
         id: this.param.tableId,
         name: this.param.name,
@@ -651,12 +653,14 @@ export default {
           isBase64Encryption: true
         })
       }
-      post('/dataset/table/update', table).then((response) => {
+      post('/dataset/table/update', table)
-        this.openMessageSuccess('deDataset.set_saved_successfully')
+        .then((response) => {
-        this.cancel()
+          this.openMessageSuccess('deDataset.set_saved_successfully')
-      }).finally(() => {
+          this.cancel()
-        this.loading = false;
+        })
-      }) 
+        .finally(() => {
+          this.loading = false
+        })
     },
 
     cancel() {

frontend/src/views/dataset/add/AddUnion.vue

@@ -41,7 +41,7 @@
         }}</span>
         <span @mousedown="mousedownDrag" class="drag"></span>
       </div>
-      <union-preview :table="previewTable" :dataset="dataset" />
+      <union-preview :unionHeight="unionHeight" :table="previewTable" :dataset="dataset" />
     </div>
     <!--选择数据集-->
     <el-drawer

frontend/src/views/dataset/add/union/UnionPreview.vue

@@ -4,7 +4,7 @@
       ref="plxTable"
       size="mini"
       style="width: 100%"
-      height="100%"
+      :height="height"
       :checkbox-config="{ highlight: true }"
       :width-resize="true"
     >
@@ -22,6 +22,7 @@
 
 <script>
 import { post } from '@/api/dataset/dataset'
+import _ from 'lodash'
 
 export default {
   name: 'UnionPreview',
@@ -33,11 +34,15 @@ export default {
     dataset: {
       type: Array,
       required: true
-    }
+    },
+    unionHeight: {
+      type: Number,
+      default: 298
+    },
   },
   data() {
     return {
-      height: 'auto',
+      height: 200,
       fields: [],
       data: []
     }
@@ -45,12 +50,26 @@ export default {
   watch: {
     table: function () {
       this.initPreview()
+    },
+    unionHeight: {
+      handler: function () {
+        this.calHeight()
+      }
     }
   },
   mounted() {
     this.initPreview()
+    this.calHeight()
+    window.onresize = () => {
+      this.calHeight()
+    }
   },
   methods: {
+    calHeight: _.debounce(function() {
+      const unionHeight = Math.max(this.unionHeight, 298)
+      const currentHeight = document.documentElement.clientHeight
+      this.height = currentHeight - unionHeight - 56 - 54 - 36
+    }, 200),
     initPreview() {
       if (this.dataset && this.dataset.length > 0) {
         post('/dataset/table/unionPreview', this.table).then((response) => {

frontend/src/views/dataset/group/Group.vue

@@ -529,7 +529,6 @@ export default {
   },
   activated() {
     const dataset = this.$refs.datasetTreeRef?.getCurrentNode()
-    if (!dataset) return
     queryAuthModel({ modelType: 'dataset' }, true).then((res) => {
       localStorage.setItem('dataset-tree', JSON.stringify(res.data))
       this.tData = res.data