fix: 数据集创建 返回对应的数据集 数据源bug 路由切换bug

frontend/src/App.vue

@@ -3,7 +3,7 @@
     <keep-alive>
       <router-view v-if="['/dataset/index', '/system/system-settings/appearance'].includes(key)"></router-view>
     </keep-alive>
-    <router-view v-if="!['/dataset/index', '/system/system-settings/appearance'].includes(key)"></router-view>
+    <router-view :key="key" v-if="!['/dataset/index', '/system/system-settings/appearance'].includes(key)"></router-view>
     <plugin-com v-show="false" ref="de-theme" component-name="ThemeSetting" />
   </div>
 </template>

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

@@ -1,9 +1,9 @@
 <template>
   <div class="dataset-api">
-    <p v-if="!showLeft" class="arrow-right" @click="showLeft = true">
+    <p v-show="!showLeft" class="arrow-right" @click="showLeft = true">
       <i class="el-icon-d-arrow-right" />
     </p>
-    <div v-else class="table-list">
+    <div v-show="showLeft" class="table-list">
       <p class="select-ds">
         {{ $t('deDataset.select_data_source') }}
         <i class="el-icon-d-arrow-left" @click="showLeft = false" />
@@ -153,9 +153,11 @@
 <script>
 import { listApiDatasource, post, isKettleRunning } from '@/api/dataset/dataset'
 import { dbPreview, engineMode } from '@/api/system/engine'
+import cancelMix from './cancelMix'
 
 export default {
   name: 'AddApi',
+  mixins: [cancelMix],
   props: {
     param: {
       type: Object,
@@ -350,17 +352,12 @@ export default {
       post('/dataset/table/batchAdd', tables)
         .then((response) => {
           this.openMessageSuccess('deDataset.set_saved_successfully')
-          this.cancel()
+          this.cancel(response.data)
         })
         .finally(() => {
           this.loading = false
         })
     },
-
-    cancel() {
-      this.$router.push('/dataset/index')
-    },
-
     dataReset() {
       this.searchTable = ''
       this.options = []

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

@@ -1,9 +1,9 @@
 <template>
   <div class="dataset-db" v-loading="loading">
-    <p v-if="!showLeft" @click="showLeft = true" class="arrow-right">
+    <p v-show="!showLeft" @click="showLeft = true" class="arrow-right">
       <i class="el-icon-d-arrow-right"></i>
     </p>
-    <div class="table-list" v-else>
+    <div class="table-list" v-show="showLeft">
       <p class="select-ds">
         {{ $t('deDataset.select_data_source') }}
         <i @click="showLeft = false" class="el-icon-d-arrow-left"></i>
@@ -158,10 +158,10 @@
 import { listDatasource, post, isKettleRunning } from '@/api/dataset/dataset'
 import { engineMode, dbPreview } from '@/api/system/engine'
 import msgCfm from '@/components/msgCfm/index'
-
+import cancelMix from './cancelMix'
 export default {
   name: 'AddDB',
-  mixins: [msgCfm],
+  mixins: [ msgCfm, cancelMix],
   props: {
     param: {
       type: Object,
@@ -368,16 +368,12 @@ export default {
       post('/dataset/table/batchAdd', tables)
         .then((response) => {
           this.openMessageSuccess('deDataset.set_saved_successfully')
-          this.cancel()
+          this.cancel(response.data)
         })
         .finally(() => {
           this.loading = false
         })
     },
-
-    cancel() {
-      this.$router.back()
-    },
     dataReset() {
       this.searchTable = ''
       this.options = []

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

@@ -1,9 +1,9 @@
 <template>
   <div class="dataset-excel" v-loading="loading">
-    <p v-if="!showLeft" @click="showLeft = true" class="arrow-right">
+    <p v-show="!showLeft" @click="showLeft = true" class="arrow-right">
       <i class="el-icon-d-arrow-right"></i>
     </p>
-    <div v-else class="table-list">
+    <div v-show="showLeft" class="table-list">
       <p class="select-ds">
         <span
           >{{ $t('deDataset.select_data_table ') }}
@@ -192,12 +192,13 @@ import i18n from '@/lang'
 import { $alert, $confirm } from '@/utils/message'
 import store from '@/store'
 import msgCfm from '@/components/msgCfm/index'
+import cancelMix from './cancelMix'
 
 const token = getToken()
 
 export default {
   name: 'AddExcel',
-  mixins: [msgCfm],
+  mixins: [ msgCfm, cancelMix],
   props: {
     param: {
       type: Object,
@@ -500,7 +501,7 @@ export default {
             this.loading = true
             post('/dataset/table/update', table).then((response) => {
               this.openMessageSuccess('deDataset.set_saved_successfully')
-              this.cancel()
+              this.cancel(response.data)
             })
           })
           .catch((action) => {
@@ -512,7 +513,7 @@ export default {
             post('/dataset/table/update', table)
               .then((response) => {
                 this.openMessageSuccess('deDataset.set_saved_successfully')
-                this.cancel()
+                this.cancel(response.data)
               })
               .finally(() => {
                 this.loading = false
@@ -526,16 +527,13 @@ export default {
         post('/dataset/table/update', table)
           .then((response) => {
             this.openMessageSuccess('deDataset.set_saved_successfully')
-            this.cancel()
+            this.cancel(response.data)
           })
           .finally(() => {
             this.loading = false
           })
       }
     },
-    cancel() {
-      this.$router.back()
-    },
     dataReset() {
       this.searchTable = ''
       this.options = []

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

@@ -371,11 +371,12 @@ 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 cancelMix from './cancelMix'
 import _ from 'lodash'
 export default {
   name: 'AddSQL',
   components: { codemirror },
-  mixins: [msgCfm],
+  mixins: [ msgCfm, cancelMix],
   props: {
     param: {
       type: Object,
@@ -656,17 +657,12 @@ export default {
       post('/dataset/table/update', table)
         .then((response) => {
           this.openMessageSuccess('deDataset.set_saved_successfully')
-          this.cancel()
+          this.cancel(response.data)
         })
         .finally(() => {
           this.loading = false
         })
     },
-
-    cancel() {
-      this.$router.push('/dataset/index')
-    },
-
     showSQL(val) {
       this.sql = val || ''
     },

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

@@ -107,8 +107,10 @@ import datasetTree from '@/views/dataset/common/datasetTree'
 import UnionEdit from '@/views/dataset/add/union/UnionEdit'
 import { post } from '@/api/dataset/dataset'
 import UnionPreview from '@/views/dataset/add/union/UnionPreview'
+import cancelMix from './cancelMix'
 export default {
   name: 'AddUnion',
+  mixins: [cancelMix],
   components: {
     UnionPreview,
     UnionEdit,
@@ -218,14 +220,11 @@ export default {
       }
       post('/dataset/table/update', table).then((response) => {
         this.$emit('saveSuccess', table)
-        this.cancel()
+        this.cancel(response.data)
       }).finally(() => {
         this.loading = false;
       }) 
     },
-    cancel() {
-      this.$router.back()
-    },
     selectDs() {
       this.selectDsDialog = true
     },

frontend/src/views/dataset/add/cancelMix.js

@@ -0,0 +1,19 @@
+export default {
+    methods: {
+        cancel(arr = []) {
+            if (arr.length === 1) {
+                const [dataset] = arr;
+                const { id, name } = dataset;
+                this.$router.push({
+                    name: 'dataset',
+                    params: {
+                        id,
+                        name
+                    }
+                })
+            } else {
+                this.$router.back()
+            }
+        }
+    }
+}

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

@@ -222,10 +222,7 @@
                   />
                 </span>
                 <span
-                  v-if="
+                  v-if="['db', 'sql'].includes(data.modelInnerType)"
-                    data.modelInnerType === 'db' ||
-                    data.modelInnerType === 'sql'
-                  "
                 >
                   <span v-if="data.mode === 0" style="margin-left: 6px"
                     ><i class="el-icon-s-operation"
@@ -241,6 +238,7 @@
                     overflow: hidden;
                     text-overflow: ellipsis;
                   "
+                  :class="[{ 'de-fill-block': !['db', 'sql'].includes(data.modelInnerType)}]"
                   :title="data.name"
                   >{{ data.name }}</span
                 >
@@ -498,6 +496,7 @@ export default {
       },
       isTreeSearch: false,
       kettleRunning: false,
+      pageCreated: false,
       engineMode: 'local',
       searchPids: [], // 查询命中的pid
       filterText: '',
@@ -528,13 +527,17 @@ export default {
     }
   },
   activated() {
+    if (!this.pageCreated) return;
     const dataset = this.$refs.datasetTreeRef?.getCurrentNode()
+    const { id, name } = this.$route.params
     queryAuthModel({ modelType: 'dataset' }, true).then((res) => {
       localStorage.setItem('dataset-tree', JSON.stringify(res.data))
       this.tData = res.data
       this.$nextTick(() => {
         this.$refs.datasetTreeRef?.filter(this.filterText)
-        if (dataset) {
+        if (id && name.includes(this.filterText)) {
+          this.dfsTableData(this.tData, id)
+        } else if (dataset) {
           this.$refs.datasetTreeRef?.setCurrentNode(dataset)
           this.nodeClick(dataset)
         }
@@ -542,6 +545,7 @@ export default {
     })
   },
   created() {
+    this.pageCreated = true;
     this.kettleState()
     engineMode().then((res) => {
       this.engineMode = res.data
@@ -552,6 +556,19 @@ export default {
     this.refresh()
   },
   methods: {
+    dfsTableData(arr, id) {
+      arr.some(ele => {
+        if(ele.id === id) {
+          this.$refs.datasetTreeRef?.setCurrentNode(ele)
+          this.nodeClick(ele)
+          this.expandedArray.push(id)
+          return true
+        } else if (ele.children?.length) {
+          this.dfsTableData(ele.children, id)
+        }
+        return false
+      });
+    },
     nameRepeat(value) {
       if (!this.fileList || this.fileList.length === 0) {
         return false
@@ -978,8 +995,8 @@ export default {
 </script>
 
 <style scoped lang="scss">
-.search-input {
+.de-fill-block {
-  padding: 12px 0;
+  margin-left: 35px !important;
 }
 
 .custom-tree-container {

frontend/src/views/system/datasource/dsTable.vue

@@ -20,13 +20,10 @@
       </el-col>
     </el-row>
     <div class="table-container">
-      <grid-table
+      <el-table
         v-loading="loading"
-        :tableData="tableData"
+        :data="filterTable"
-        :columns="[]"
+        :style="{ width: '100%' }"
-        :pagination="paginationConfig"
-        @size-change="handleSizeChange"
-        @current-change="handleCurrentChange"
       >
         <el-table-column
           key="name"
@@ -34,28 +31,20 @@
           :label="$t('datasource.table_name')"
         />
         <el-table-column
-          slot="__operation"
           :label="$t('commons.operating')"
-          key="__operation"
           fixed="right"
-          width="168"
+          width="108"
         >
           <template slot-scope="scope">
-            <el-button
-              @click="createtDataset(scope.row)"
-              class="text-btn mar3 mar6"
-              type="text"
-              >{{ $t("datasource.create_dataset") }}</el-button
-            >
             <el-button
               @click="selectDataset(scope.row)"
-              class="text-btn"
+              class="de-text-btn mar3"
               type="text"
               >{{ $t("dataset.detail") }}</el-button
             >
           </template>
         </el-table-column>
-      </grid-table>
+      </el-table>
     </div>
     <el-drawer
       :title="$t('dataset.detail')"
@@ -106,11 +95,9 @@
 
 <script>
 import keyEnter from "@/components/msgCfm/keyEnter.js";
-import GridTable from "@/components/gridTable/index.vue";
 import {dsTable, post} from "@/api/dataset/dataset";
 export default {
   mixins: [keyEnter],
-  components: { GridTable },
   props: {
     params: {
       type: Object,
@@ -123,22 +110,18 @@ export default {
       dsTableDetail: {},
       nikeName: "",
       loading: false,
-      paginationConfig: {
+      dsTableData: [],
-        currentPage: 1,
+      tableData: [],
-        pageSize: 10,
+      filterTable: []
-        total: 0,
-      },
-      dsTableData: [{date: 1}],
-      tableData: [{ name: 1 }],
     };
   },
   created() {
-    post('/datasource/getTables/' + this.params.id, {}).then((response) => {
+    this.search()
-      this.tableData = response.data
-    })
   },
   methods: {
-    createtDataset(row) {},
+    initSearch() {
+      this.filterTable = this.tableData.filter(ele => ele.name.includes(this.nikeName))
+    },
     selectDataset(row) {
       this.dsTableDetail = row;
       this.userDrawer = true;
@@ -148,36 +131,14 @@ export default {
         this.dsTableData = response.data
       })
     },
-    handleSizeChange(pageSize) {
-      this.paginationConfig.currentPage = 1;
-      this.paginationConfig.pageSize = pageSize;
-      this.search();
-    },
-    handleCurrentChange(currentPage) {
-      this.paginationConfig.currentPage = currentPage;
-      this.search();
-    },
-    initSearch() {
-      this.handleCurrentChange(1);
-    },
     search() {
       this.loading = true;
-      const param = {
+      post('/datasource/getTables/' + this.params.id, {}).then((response) => {
-        conditions: [],
+        this.tableData = response.data
-      };
+        this.initSearch()
-      if (this.nikeName) {
+      }).finally(() => {
-        param.conditions.push({
-          field: `dataset_table_task.name`,
-          operator: "like",
-          value: this.nikeName,
-        });
-      }
-      const { currentPage, pageSize } = this.paginationConfig;
-      dsTable(currentPage, pageSize, this.params.id).then((response) => {
-        this.tableData = response.data.listObject;
-        this.paginationConfig.total = response.data.itemCount;
         this.loading = false;
-      });
+      })
     },
   },
 };
@@ -204,6 +165,9 @@ export default {
   height: 100%;
   padding: 10px 14px;
   box-sizing: border-box;
+  .mar3 {
+    margin-left: -5px;
+  }
   .table-name {
     font-family: PingFang SC;
     font-size: 16px;