feat(数据集): 连接 数据源，读取 表名

backend/src/main/java/io/dataease/datasource/controller/DatasourceController.java

@@ -24,7 +24,7 @@ public class DatasourceController {
     }
 
     @PostMapping("/validate")
-    public void validate(@RequestBody Datasource datasource) throws Exception{
+    public void validate(@RequestBody Datasource datasource) throws Exception {
         datasourceService.validate(datasource);
     }
 
@@ -34,7 +34,7 @@ public class DatasourceController {
     }
 
     @PostMapping("/list/{goPage}/{pageSize}")
-    public Pager<List<Datasource>> getDatasourceList(@RequestBody Datasource request, @PathVariable int goPage, @PathVariable int pageSize) throws Exception{
+    public Pager<List<Datasource>> getDatasourceList(@RequestBody Datasource request, @PathVariable int goPage, @PathVariable int pageSize) throws Exception {
         Page<Object> page = PageHelper.startPage(goPage, pageSize, true);
         return PageUtils.setPageInfo(page, datasourceService.getDatasourceList(request));
     }
@@ -48,4 +48,9 @@ public class DatasourceController {
     public void updateDatasource(@RequestBody Datasource Datasource) {
         datasourceService.updateDatasource(Datasource);
     }
+
+    @PostMapping("/getTables")
+    public List<String> getTables(@RequestBody Datasource datasource) throws Exception {
+        return datasourceService.getTables(datasource);
+    }
 }

backend/src/main/java/io/dataease/datasource/service/DatasourceService.java

@@ -30,7 +30,7 @@ public class DatasourceService {
     public Datasource addDatasource(Datasource datasource) {
         DatasourceExample example = new DatasourceExample();
         example.createCriteria().andNameEqualTo(datasource.getName());
-        if(CollectionUtils.isNotEmpty(datasourceMapper.selectByExample(example))){
+        if (CollectionUtils.isNotEmpty(datasourceMapper.selectByExample(example))) {
             DEException.throwException("Exist data connection with the same name ");
         }
         long currentTimeMillis = System.currentTimeMillis();
@@ -41,7 +41,7 @@ public class DatasourceService {
         return datasource;
     }
 
-    public List<Datasource> getDatasourceList(Datasource request)throws Exception{
+    public List<Datasource> getDatasourceList(Datasource request) throws Exception {
         DatasourceExample example = new DatasourceExample();
         DatasourceExample.Criteria criteria = example.createCriteria();
         if (StringUtils.isNotBlank(request.getName())) {
@@ -64,13 +64,19 @@ public class DatasourceService {
         datasourceMapper.updateByPrimaryKeySelective(datasource);
     }
 
-    public void validate(Datasource datasource)throws Exception {
+    public void validate(Datasource datasource) throws Exception {
         DatasourceProvider datasourceProvider = ProviderFactory.getProvider(datasource.getType());
         DatasourceRequest datasourceRequest = new DatasourceRequest();
         datasourceRequest.setDatasource(datasource);
         datasourceProvider.test(datasourceRequest);
     }
 
-
+    public List<String> getTables(Datasource datasource) throws Exception {
+        Datasource ds = datasourceMapper.selectByPrimaryKey(datasource.getId());
+        DatasourceProvider datasourceProvider = ProviderFactory.getProvider(ds.getType());
+        DatasourceRequest datasourceRequest = new DatasourceRequest();
+        datasourceRequest.setDatasource(ds);
+        return datasourceProvider.getTables(datasourceRequest);
+    }
 
 }

frontend/src/business/components/dataset/DataSet.vue

@@ -33,7 +33,7 @@
 <style scoped>
   .ms-aside-container {
     height: calc(100vh - 40px);
-    padding: 20px;
+    padding: 15px;
     min-width: 300px;
     max-width: 500px;
   }

frontend/src/business/components/dataset/data/AddDB.vue

 <template>
 <el-col>
   <el-row>
-    111111
+    <el-row style="height: 26px;">
+      <span style="line-height: 26px;">
+        {{$t('dataset.add_db_table')}}
+      </span>
+      <el-row style="float: right">
+        <el-button size="mini" @click="cancel">
+          {{$t('dataset.cancel')}}
+        </el-button>
+        <el-button size="mini" type="primary" @click="save" :disabled="checkTableList.length < 1">
+          {{$t('dataset.confirm')}}
+        </el-button>
+      </el-row>
+    </el-row>
+    <el-divider/>
+    <el-row>
+      <el-form :inline="true">
+        <el-form-item class="form-item">
+          <el-select v-model="dataSource" filterable :placeholder="$t('dataset.pls_slc_data_source')" size="mini">
+            <el-option
+              v-for="item in options"
+              :key="item.id"
+              :label="item.name"
+              :value="item.id">
+            </el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item class="form-item" style="float: right;">
+          <el-input
+            size="mini"
+            :placeholder="$t('dataset.search')"
+            prefix-icon="el-icon-search"
+            v-model="searchTable"
+            clearable>
+          </el-input>
+        </el-form-item>
+      </el-form>
+    </el-row>
+    <el-row>
+      <el-checkbox-group v-model="checkTableList" size="small">
+        <el-checkbox
+          border
+          v-for="t in tables"
+          :label="t"
+          :key="t">
+        </el-checkbox>
+      </el-checkbox-group>
+    </el-row>
   </el-row>
 </el-col>
 </template>
@@ -10,16 +56,79 @@
 export default {
   name: "AddDB",
   data() {
-    return {}
+    return {
+      searchTable: '',
+      options: [],
+      dataSource: '',
+      tables: [],
+      checkTableList: [],
+      scene: null
+    }
   },
   mounted() {
+    this.initDataSource();
+    this.scene = this.$route.params.scene;
   },
   activated() {
+    this.initDataSource();
+    this.scene = this.$route.params.scene;
   },
-  methods: {}
+  methods: {
+    initDataSource() {
+      this.$get("/datasource/list", response => {
+        this.options = response.data;
+      })
+    },
+
+    save() {
+      console.log(this.checkTableList);
+      console.log(this.scene);
+      this.$store.commit('setSceneData',new Date().getTime());
+    },
+
+    cancel() {
+      this.dataReset();
+      this.$router.push("/dataset/home");
+    },
+
+    dataReset() {
+      this.searchTable = '';
+      this.options = [];
+      this.dataSource = '';
+      this.tables = [];
+      this.checkTableList = [];
+    }
+  },
+  watch: {
+    dataSource(val) {
+      if (val) {
+        this.$post("/datasource/getTables", {id: val}, response => {
+            this.tables = response.data;
+          }
+        )
+      }
+    }
+  },
+
 }
 </script>
 
 <style scoped>
+  .el-divider--horizontal {
+    margin: 12px 0;
+  }
+
+  .form-item {
+    margin-bottom: 6px;
+  }
+
+  .el-checkbox {
+    margin-bottom: 14px;
+    margin-left: 0;
+    margin-right: 14px;
+  }
 
+  .el-checkbox.is-bordered + .el-checkbox.is-bordered {
+    margin-left: 0;
+  }
 </style>

frontend/src/business/components/dataset/group/Group.vue

@@ -2,10 +2,13 @@
 <el-col>
   <!-- group -->
   <el-col v-if="!sceneMode">
-    <span>
-      {{ $t('dataset.datalist') }}
-    </span>
+    <el-row class="title-css">
+      <span class="title-text">
+        {{ $t('dataset.datalist') }}
+      </span>
+    </el-row>
     <el-divider/>
+
     <el-row>
       <el-button icon="el-icon-circle-plus" type="primary" size="mini" @click="add('group')">
         {{$t('dataset.add_group')}}
@@ -46,7 +49,7 @@
                 size="mini">
               </el-button>
             </span>
-            <span style="margin-left: 6px">{{ data.label }}</span>
+            <span style="margin-left: 6px">{{ data.name }}</span>
           </span>
           <span>
             <span @click.stop v-if="data.type ==='group'">
@@ -111,8 +114,8 @@
 
   <!--scene-->
   <el-col v-if="sceneMode">
-    <el-row>
-      <span>
+    <el-row class="title-css">
+      <span class="title-text">
         {{currGroup.name}}
       </span>
       <el-button icon="el-icon-back" size="mini" @click="back" style="float: right">
@@ -160,13 +163,13 @@
         </el-form-item>
       </el-form>
     </el-row>
-
+    <span v-show="false">{{sceneData}}</span>
     <!-- todo el-tree -->
     <el-tree
       :data="null"
       node-key="id"
       :expand-on-click-node="true"
-      @node-click="nodeClick">
+      @node-click="sceneClick">
         <span class="custom-tree-node" slot-scope="{ node, data }">
           <span>
             <span v-if="data.type === 'scene'">
@@ -176,7 +179,7 @@
                 size="mini">
               </el-button>
             </span>
-            <span style="margin-left: 6px">{{ data.label }}</span>
+            <span style="margin-left: 6px">{{ data.name }}</span>
           </span>
           <span>
             <span @click.stop style="margin-left: 12px;">
@@ -235,11 +238,19 @@ export default {
       }
     }
   },
+  computed: {
+    sceneData: function () {
+      console.log(this.$store.state.dataset.sceneData + ' do post');
+      return this.$store.state.dataset.sceneData;
+    }
+  },
   mounted() {
     this.tree(this.groupForm);
+    this.$router.push('/dataset');
   },
   activated() {
     this.tree(this.groupForm);
+    this.$router.push('/dataset');
   },
   watch: {
     // search(val){
@@ -384,19 +395,19 @@ export default {
     },
 
     clickAddData(param) {
-      console.log(param);
+      // console.log(param);
       switch (param.type) {
         case 'db':
           this.addDB();
           break;
         case 'sql':
-
+          this.$message(param.type);
           break;
         case 'excel':
-
+          this.$message(param.type);
           break;
         case 'custom':
-
+          this.$message(param.type);
           break;
       }
     },
@@ -407,8 +418,17 @@ export default {
       }
     },
 
+    sceneClick() {
+
+    },
+
     addDB() {
-      this.$router.push('/dataset/add_db');
+      this.$router.push({
+        name: 'add_db',
+        params: {
+          scene: this.currGroup
+        }
+      })
     }
   }
 }
@@ -443,4 +463,12 @@ export default {
   .form-item {
     margin-bottom: 0;
   }
+
+  .title-css {
+    height: 26px;
+  }
+
+  .title-text {
+    line-height: 26px;
+  }
 </style>

frontend/src/business/components/dataset/router.js

@@ -18,12 +18,12 @@ export default {
   children: [
     {
       path: 'home',
-      name: 'DataSetHome',
+      name: 'home',
       component: DataSetHome,
     },
     {
       path: 'add_db',
-      name: 'DataSetAddDB',
+      name: 'add_db',
       component: DataSetAddDB,
     },
     // {

frontend/src/business/store.js

@@ -3,6 +3,17 @@ import Vuex from 'vuex'
 
 Vue.use(Vuex);
 
+const Dataset = {
+  state: {
+    sceneData: ""
+  },
+  mutations: {
+    setSceneData(state, sceneData) {
+      state.sceneData = sceneData;
+    }
+  }
+}
+
 const Common = {
   state: {
     projectId: ""
@@ -56,5 +67,6 @@ export default new Vuex.Store({
     common: Common,
     switch: Switch,
     isReadOnly: IsReadOnly,
+    dataset: Dataset
   }
 })

frontend/src/i18n/en-US.js

@@ -1543,6 +1543,8 @@ export default {
     sql_data: 'SQL Data',
     excel_data: 'Excel Data',
     custom_data: 'Custom Data',
-    pls_slc_tbl_left:'Please select table from left'
+    pls_slc_tbl_left:'Please select table from left',
+    add_db_table:'Add Table',
+    pls_slc_data_source:'Select Data Source'
   }
 };

frontend/src/i18n/zh-CN.js

@@ -1552,7 +1552,9 @@ export default {
     sql_data: 'SQL数据集',
     excel_data: 'Excel数据集',
     custom_data: '自助数据集',
-    pls_slc_tbl_left:'请从左侧选择表'
+    pls_slc_tbl_left:'请从左侧选择表',
+    add_db_table:'添加数据库表',
+    pls_slc_data_source:'请选择数据库连接'
   },
   datasource: {
     create: '新建数据连接',

frontend/src/i18n/zh-TW.js

@@ -1544,6 +1544,8 @@ export default {
     sql_data: 'SQL數據集',
     excel_data: 'Excel數據集',
     custom_data: '自助數據集',
-    pls_slc_tbl_left:'請從左側選擇表'
+    pls_slc_tbl_left:'請從左側選擇表',
+    add_db_table:'添加數據庫表',
+    pls_slc_data_source:'請選擇數據庫連接'
   }
 };