feat(数据集): 添加DB，DB curd

2026-05-23 13:58:26 +08:00 · 2021-02-23 18:23:56 +08:00
parent 318ff15944
commit 73bf229464
18 changed files with 1448 additions and 28 deletions
--- a/frontend/src/business/components/dataset/data/AddDB.vue
+++ b/frontend/src/business/components/dataset/data/AddDB.vue
@@ -81,9 +81,23 @@ export default {
    },

    save() {
-      console.log(this.checkTableList);
-      console.log(this.scene);
-      this.$store.commit('setSceneData',new Date().getTime());
+      // console.log(this.checkTableList);
+      // console.log(this.scene);
+      let sceneId = this.scene.id;
+      let dataSourceId = this.dataSource;
+      let tables = [];
+      this.checkTableList.forEach(function (name) {
+        tables.push({
+          name: name,
+          sceneId: sceneId,
+          dataSourceId: dataSourceId,
+          type: 'db'
+        })
+      });
+      this.$post('/dataset/table/batchAdd', tables, response => {
+        this.$store.commit('setSceneData', new Date().getTime());
+        this.cancel();
+      });
    },

    cancel() {
--- a/frontend/src/business/components/dataset/data/TabDataPreview.vue
+++ b/frontend/src/business/components/dataset/data/TabDataPreview.vue
@@ -0,0 +1,64 @@
+<template>
+<el-col>
+  <el-table
+    size="mini"
+    :data="tableData"
+    border
+    style="width: 100%">
+    <el-table-column
+      prop="date"
+      label="日期"
+      width="180">
+    </el-table-column>
+    <el-table-column
+      prop="name"
+      label="姓名"
+      width="180">
+    </el-table-column>
+    <el-table-column
+      prop="address"
+      label="地址">
+    </el-table-column>
+  </el-table>
+</el-col>
+</template>
+
+<script>
+export default {
+  name: "TabDataPreview",
+  data() {
+    return {
+      tableData: [{
+        date: '2016-05-02',
+        name: '王小虎',
+        address: '上海市普陀区金沙江路 1518 弄'
+      }, {
+        date: '2016-05-04',
+        name: '王小虎',
+        address: '上海市普陀区金沙江路 1517 弄'
+      }, {
+        date: '2016-05-01',
+        name: '王小虎',
+        address: '上海市普陀区金沙江路 1519 弄'
+      }, {
+        date: '2016-05-03',
+        name: '王小虎',
+        address: '上海市普陀区金沙江路 1516 弄'
+      }]
+    }
+  },
+  computed: {},
+  created() {
+  },
+  mounted() {
+  },
+  activated() {
+  },
+  methods: {},
+  watch: {}
+}
+</script>
+
+<style scoped>
+
+</style>
--- a/frontend/src/business/components/dataset/data/ViewTable.vue
+++ b/frontend/src/business/components/dataset/data/ViewTable.vue
@@ -0,0 +1,94 @@
+<template>
+<el-col>
+  <el-row>
+    <el-row style="height: 26px;">
+      <span v-show="false">{{tableId}}</span>
+      <span style="line-height: 26px;">
+        {{table.name}}
+      </span>
+      <el-row style="float: right">
+        <el-button size="mini">
+          {{$t('dataset.edit')}}
+        </el-button>
+        <el-button size="mini">
+          {{$t('dataset.create_view')}}
+        </el-button>
+      </el-row>
+    </el-row>
+    <el-divider/>
+
+    <el-tabs v-model="tabActive">
+      <el-tab-pane :label="$t('dataset.data_preview')" name="dataPreview">
+        <tab-data-preview/>
+      </el-tab-pane>
+      <el-tab-pane label="tab2" name="tab2">
+        tab2
+      </el-tab-pane>
+      <el-tab-pane label="tab3" name="tab3">
+        tab3
+      </el-tab-pane>
+      <el-tab-pane label="tab4" name="tab4">
+        tab4
+      </el-tab-pane>
+    </el-tabs>
+  </el-row>
+</el-col>
+</template>
+
+<script>
+import TabDataPreview from "./TabDataPreview";
+
+export default {
+  name: "ViewTable",
+  components: {TabDataPreview},
+  data() {
+    return {
+      table: {
+        name: ''
+      },
+      tabActive: 'dataPreview'
+    }
+  },
+  computed: {
+    tableId() {
+      this.initTable(this.$store.state.dataset.table);
+      return this.$store.state.dataset.table;
+    }
+  },
+  created() {
+    this.resetTable();
+  },
+  mounted() {
+    this.resetTable();
+  },
+  activated() {
+    this.resetTable();
+  },
+  methods: {
+    initTable(id) {
+      if (id !== null) {
+        this.$post('/dataset/table/get/' + id, null, response => {
+          this.table = response.data;
+        })
+      }
+    },
+
+    resetTable() {
+      this.table = {
+        name: ''
+      }
+    }
+  },
+  watch: {}
+}
+</script>
+
+<style scoped>
+  .el-divider--horizontal {
+    margin: 12px 0;
+  }
+
+  .form-item {
+    margin-bottom: 6px;
+  }
+</style>
--- a/frontend/src/business/components/dataset/group/Group.vue
+++ b/frontend/src/business/components/dataset/group/Group.vue
@@ -164,20 +164,15 @@
      </el-form>
    </el-row>
    <span v-show="false">{{sceneData}}</span>
-    <!-- todo el-tree -->
    <el-tree
-      :data="null"
+      :data="tableData"
      node-key="id"
      :expand-on-click-node="true"
      @node-click="sceneClick">
        <span class="custom-tree-node" slot-scope="{ node, data }">
          <span>
-            <span v-if="data.type === 'scene'">
-              <el-button
-                icon="el-icon-folder"
-                type="text"
-                size="mini">
-              </el-button>
+            <span>
+              ({{data.type}})
            </span>
            <span style="margin-left: 6px">{{ data.name }}</span>
          </span>
@@ -192,13 +187,13 @@
                  </el-button>
                </span>
                <el-dropdown-menu slot="dropdown">
-                  <el-dropdown-item icon="el-icon-edit-outline" :command="beforeClickMore('rename',data,node)">
+                  <el-dropdown-item icon="el-icon-edit-outline" :command="beforeClickMore('renameTable',data,node)">
                    {{$t('dataset.rename')}}
                  </el-dropdown-item>
                  <!--                  <el-dropdown-item icon="el-icon-right" :command="beforeClickMore('move',data,node)">-->
                  <!--                    {{$t('dataset.move_to')}}-->
                  <!--                  </el-dropdown-item>-->
-                  <el-dropdown-item icon="el-icon-delete" :command="beforeClickMore('delete',data,node)">
+                  <el-dropdown-item icon="el-icon-delete" :command="beforeClickMore('deleteTable',data,node)">
                    {{$t('dataset.delete')}}
                  </el-dropdown-item>
                </el-dropdown-menu>
@@ -207,6 +202,19 @@
          </span>
        </span>
    </el-tree>
+
+    <el-dialog :title="$t('dataset.table')" :visible="editTable" :show-close="false" width="30%">
+      <el-form :model="tableForm" :rules="tableFormRules" ref="tableForm">
+        <el-form-item :label="$t('commons.name')" prop="name">
+          <el-input v-model="tableForm.name"></el-input>
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="closeTable()" size="mini">{{$t('dataset.cancel')}}</el-button>
+        <el-button type="primary" @click="saveTable(tableForm)" size="mini">{{$t('dataset.confirm')}}</el-button>
+      </div>
+    </el-dialog>
+
  </el-col>
 </el-col>
 </template>
@@ -220,7 +228,9 @@ export default {
      dialogTitle: '',
      search: '',
      editGroup: false,
-      data: null,
+      editTable: false,
+      data: [],
+      tableData: [],
      currGroup: null,
      expandedArray: [],
      groupForm: {
@@ -231,25 +241,37 @@ export default {
        children: [],
        sort: 'type desc,name asc'
      },
+      tableForm: {
+        name: '',
+        sort: 'type asc,create_time desc,name asc'
+      },
      groupFormRules: {
        name: [
          {required: true, message: this.$t('commons.input_content'), trigger: 'blur'},
        ],
+      },
+      tableFormRules: {
+        name: [
+          {required: true, message: this.$t('commons.input_content'), trigger: 'blur'},
+        ],
      }
    }
  },
  computed: {
    sceneData: function () {
      console.log(this.$store.state.dataset.sceneData + ' do post');
+      this.tableTree();
      return this.$store.state.dataset.sceneData;
    }
  },
  mounted() {
    this.tree(this.groupForm);
+    this.tableTree();
    this.$router.push('/dataset');
  },
  activated() {
    this.tree(this.groupForm);
+    this.tableTree();
    this.$router.push('/dataset');
  },
  watch: {
@@ -275,11 +297,11 @@ export default {
    },

    clickMore(param) {
-      // console.log(param);
+      console.log(param);
      switch (param.type) {
        case 'rename':
          this.add(param.data.type);
-          this.groupForm = param.data;
+          this.groupForm = JSON.parse(JSON.stringify(param.data));
          break;
        case 'move':

@@ -287,6 +309,13 @@ export default {
        case 'delete':
          this.delete(param.data);
          break;
+        case 'renameTable':
+          this.editTable = true;
+          this.tableForm = JSON.parse(JSON.stringify(param.data));
+          break;
+        case 'deleteTable':
+          this.deleteTable(param.data);
+          break;
      }
    },

@@ -335,6 +364,32 @@ export default {
      });
    },

+    saveTable(table) {
+      console.log(table);
+      this.$refs['tableForm'].validate((valid) => {
+        if (valid) {
+          this.$post("/dataset/table/update", table, response => {
+            this.closeTable();
+            this.$message({
+              message: this.$t('commons.save_success'),
+              type: 'success',
+              showClose: true,
+            });
+            this.tableTree();
+            this.$router.push('/dataset/home');
+            this.$store.commit('setTable', null);
+          })
+        } else {
+          this.$message({
+            message: this.$t('commons.input_content'),
+            type: 'error',
+            showClose: true,
+          });
+          return false;
+        }
+      });
+    },
+
    delete(data) {
      this.$confirm(this.$t('dataset.confirm_delete'), this.$t('dataset.tips'), {
        confirmButtonText: this.$t('dataset.confirm'),
@@ -353,6 +408,26 @@ export default {
      });
    },

+    deleteTable(data) {
+      this.$confirm(this.$t('dataset.confirm_delete'), this.$t('dataset.tips'), {
+        confirmButtonText: this.$t('dataset.confirm'),
+        cancelButtonText: this.$t('dataset.cancel'),
+        type: 'warning'
+      }).then(() => {
+        this.$post("/dataset/table/delete/" + data.id, null, response => {
+          this.$message({
+            type: 'success',
+            message: this.$t('dataset.delete_success'),
+            showClose: true,
+          });
+          this.tableTree();
+          this.$router.push('/dataset/home');
+          this.$store.commit('setTable', null);
+        });
+      }).catch(() => {
+      });
+    },
+
    close() {
      this.editGroup = false;
      this.groupForm = {
@@ -365,12 +440,31 @@ export default {
      }
    },

+    closeTable() {
+      this.editTable = false;
+      this.tableForm = {
+        name: '',
+      }
+    },
+
    tree(group) {
      this.$post("/dataset/group/tree", group, response => {
        this.data = response.data;
      })
    },

+    tableTree() {
+      this.tableData = [];
+      if (this.currGroup) {
+        this.$post('/dataset/table/list', {
+          sort: 'type asc,create_time desc,name asc',
+          sceneId: this.currGroup.id
+        }, response => {
+          this.tableData = response.data;
+        });
+      }
+    },
+
    nodeClick(data, node) {
      // console.log(data);
      // console.log(node);
@@ -418,10 +512,6 @@ export default {
      }
    },

-    sceneClick() {
-
-    },
-
    addDB() {
      this.$router.push({
        name: 'add_db',
@@ -429,8 +519,20 @@ export default {
          scene: this.currGroup
        }
      })
-    }
-  }
+    },
+
+    sceneClick(data, node) {
+      // console.log(data);
+      this.$store.commit('setTable', data.id);
+      this.$router.push({
+        name: 'table',
+        params: {
+          table: data
+        }
+      });
+    },
+
+  },
 }
 </script>

--- a/frontend/src/business/components/dataset/router.js
+++ b/frontend/src/business/components/dataset/router.js
@@ -1,6 +1,7 @@
 const DataSet = () => import('@/business/components/dataset/DataSet');
 const DataSetHome = () => import('@/business/components/dataset/data/DataHome');
 const DataSetAddDB = () => import('@/business/components/dataset/data/AddDB');
+const DataSetTable = () => import('@/business/components/dataset/data/ViewTable');
 // const PerformanceTestHome = () => import('@/business/components/performance/home/PerformanceTestHome')
 // const EditPerformanceTest = () => import('@/business/components/performance/test/EditPerformanceTest')
 // const PerformanceTestList = () => import('@/business/components/performance/test/PerformanceTestList')
@@ -26,6 +27,11 @@ export default {
      name: 'add_db',
      component: DataSetAddDB,
    },
+    {
+      path: 'table',
+      name: 'table',
+      component: DataSetTable,
+    },
    // {
    //   path: 'test/create',
    //   name: "createPerTest",
--- a/frontend/src/business/store.js
+++ b/frontend/src/business/store.js
@@ -5,11 +5,15 @@ Vue.use(Vuex);

 const Dataset = {
  state: {
-    sceneData: ""
+    sceneData: "",
+    table: ""
  },
  mutations: {
    setSceneData(state, sceneData) {
      state.sceneData = sceneData;
+    },
+    setTable(state, table) {
+      state.table = table;
    }
  }
 }
--- a/frontend/src/i18n/en-US.js
+++ b/frontend/src/i18n/en-US.js
@@ -1545,6 +1545,10 @@ export default {
    custom_data: 'Custom Data',
    pls_slc_tbl_left:'Please select table from left',
    add_db_table:'Add Table',
-    pls_slc_data_source:'Select Data Source'
+    pls_slc_data_source:'Select Data Source',
+    table:'Table',
+    edit: 'Edit',
+    create_view: 'Create View',
+    data_preview:'Data Preview'
  }
 };
--- a/frontend/src/i18n/zh-CN.js
+++ b/frontend/src/i18n/zh-CN.js
@@ -1552,9 +1552,13 @@ export default {
    sql_data: 'SQL数据集',
    excel_data: 'Excel数据集',
    custom_data: '自助数据集',
-    pls_slc_tbl_left:'请从左侧选择表',
-    add_db_table:'添加数据库表',
-    pls_slc_data_source:'请选择数据库连接'
+    pls_slc_tbl_left: '请从左侧选择表',
+    add_db_table: '添加数据库表',
+    pls_slc_data_source: '请选择数据库连接',
+    table: '表',
+    edit: '编辑',
+    create_view: '创建试图',
+    data_preview:'数据预览'
  },
  datasource: {
    create: '新建数据连接',
--- a/frontend/src/i18n/zh-TW.js
+++ b/frontend/src/i18n/zh-TW.js
@@ -1546,6 +1546,10 @@ export default {
    custom_data: '自助數據集',
    pls_slc_tbl_left:'請從左側選擇表',
    add_db_table:'添加數據庫表',
-    pls_slc_data_source:'請選擇數據庫連接'
+    pls_slc_data_source:'請選擇數據庫連接',
+    table:'表',
+    edit: '編輯',
+    create_view: '創建試圖',
+    data_preview:'數據預覽'
  }
 };