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

2022-09-23 11:17:18 +08:00 · 2022-09-23 11:17:18 +08:00 · ffc8271611
commit ffc8271611
parent 0f563f4feb
9 changed files with 88 additions and 102 deletions
--- a/frontend/src/App.vue
+++ b/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>
--- a/frontend/src/views/dataset/add/AddApi.vue
+++ b/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 = []
--- a/frontend/src/views/dataset/add/AddDB.vue
+++ b/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 = []
--- a/frontend/src/views/dataset/add/AddExcel.vue
+++ b/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 = []
--- a/frontend/src/views/dataset/add/AddSQL.vue
+++ b/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 || ''
    },
--- a/frontend/src/views/dataset/add/AddUnion.vue
+++ b/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
    },
--- a/frontend/src/views/dataset/add/cancelMix.js
+++ b/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()
+            }
+        }
+    }
+}
--- a/frontend/src/views/dataset/group/Group.vue
+++ b/frontend/src/views/dataset/group/Group.vue
@ -222,10 +222,7 @@
                  />
                </span>
                <span
-                  v-if="
-                    data.modelInnerType === 'db' ||
-                    data.modelInnerType === 'sql'
-                  "
+                  v-if="['db', 'sql'].includes(data.modelInnerType)"
                >
                  <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 {
-  padding: 12px 0;
+.de-fill-block {
+  margin-left: 35px !important;
 }

 .custom-tree-container {
--- a/frontend/src/views/system/datasource/dsTable.vue
+++ b/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"
-        :columns="[]"
-        :pagination="paginationConfig"
-        @size-change="handleSizeChange"
-        @current-change="handleCurrentChange"
+        :data="filterTable"
+        :style="{ width: '100%' }"
      >
        <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: {
-        currentPage: 1,
-        pageSize: 10,
-        total: 0,
-      },
-      dsTableData: [{date: 1}],
-      tableData: [{ name: 1 }],
+      dsTableData: [],
+      tableData: [],
+      filterTable: []
    };
  },
  created() {
-    post('/datasource/getTables/' + this.params.id, {}).then((response) => {
-      this.tableData = response.data
-    })
+    this.search()
  },
  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 = {
-        conditions: [],
-      };
-      if (this.nikeName) {
-        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;
+      post('/datasource/getTables/' + this.params.id, {}).then((response) => {
+        this.tableData = response.data
+        this.initSearch()
+      }).finally(() => {
        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;