feat: choose tables, save table and field

Author: XiaJunjie2020

backend/apps/datasource/api/datasource.py

@@ -1,10 +1,11 @@
 from fastapi import APIRouter
 from ..crud.datasource import get_datasource_list, check_status, create_ds, update_ds, delete_ds, getTables, getFields, \
-    execSql, update_table_and_fields, getTablesByDs
+    execSql, update_table_and_fields, getTablesByDs, chooseTables
 from common.core.deps import SessionDep
-from ..models.datasource import CoreDatasource, CreateDatasource, EditObj
+from ..models.datasource import CoreDatasource, CreateDatasource, EditObj, CoreTable
 from ..crud.table import get_tables_by_ds_id
 from ..crud.field import get_fields_by_table_id
+from typing import List
 
 router = APIRouter(tags=["datasource"], prefix="/datasource")
 
@@ -24,6 +25,11 @@ async def add(session: SessionDep, ds: CreateDatasource):
     return create_ds(session, ds)
 
 
+@router.post("/chooseTables/{id}")
+async def choose_tables(session: SessionDep, id: int, tables: List[CoreTable]):
+    chooseTables(session, id, tables)
+
+
 @router.post("/update", response_model=CoreDatasource)
 async def update(session: SessionDep, ds: CoreDatasource):
     return update_ds(session, ds)
@@ -54,12 +60,12 @@ async def exec_sql(session: SessionDep, id: int, sql: str):
     return execSql(session, id, sql)
 
 
-@router.get("/tableList/{id}")
+@router.post("/tableList/{id}")
 async def table_list(session: SessionDep, id: int):
     return get_tables_by_ds_id(session, id)
 
 
-@router.get("/fieldList/{id}")
+@router.post("/fieldList/{id}")
 async def field_list(session: SessionDep, id: int):
     return get_fields_by_table_id(session, id)
 

backend/apps/datasource/crud/datasource.py

@@ -50,6 +50,11 @@ def create_ds(session: SessionDep, create_ds: CreateDatasource):
     return ds
 
 
+def chooseTables(session: SessionDep, id: int, tables: List[CoreTable]):
+    ds = session.query(CoreDatasource).filter(CoreDatasource.id == id).first()
+    sync_table(session, ds, tables)
+
+
 def update_ds(session: SessionDep, ds: CoreDatasource):
     ds.id = int(ds.id)
     status = check_status(session, ds)

frontend/src/api/datasource.ts

@@ -10,4 +10,6 @@ export const datasourceApi = {
   getTablesByConf: (data: any) => request.post('/datasource/getTablesByConf', data),
   getFields: (id: Number, table_name: string) => request.post(`/datasource/getFields/${id}/${table_name}`),
   execSql: (id: Number, sql: string) => request.post(`/datasource/execSql/${id}/${sql}`),
+  chooseTables: (id: Number, data: any) => request.post(`/datasource/chooseTables/${id}`, data),
+  tableList: (id: Number) => request.post(`/datasource/tableList/${id}`)
 }

frontend/src/views/ds/form.vue

@@ -61,7 +61,7 @@
     <div style="display: flex;justify-content: flex-end;margin-top: 20px;">
       <el-button @click="close">Cancel</el-button>
       <el-button v-show="!isCreate && !isEditTable" @click="check">Test Connect</el-button>
-      <el-button v-show="active === 1 && isCreate" type="primary" @click="next">Next</el-button>
+      <el-button v-show="active === 1 && isCreate" type="primary" @click="next(dsFormRef)">Next</el-button>
       <el-button v-show="active === 2 && isCreate" @click="preview">Preview</el-button>
       <el-button v-show="active === 2 || !isCreate" type="primary" @click="save(dsFormRef)">Save</el-button>
     </div>
@@ -113,46 +113,58 @@ const close = () => {
   isCreate.value = true
   active.value = 1
   isEditTable.value = false
+  checkList.value = []
+  tableList.value = []
 }
 
 const open = (item: any, editTable: boolean = false) => {
-  if (editTable) {
-    active.value = 2
-    isEditTable.value = true
+  isEditTable.value = false
+  if (item) {
     isCreate.value = false
-    // request tables
+    form.value.id = item.id
+    form.value.name = item.name
+    form.value.description = item.description
+    form.value.type = item.type
+    form.value.configuration = item.configuration
+    if(item.configuration) {
+      const configuration = JSON.parse(decrypted(item.configuration))
+      config.value.host = configuration.host
+      config.value.port = configuration.port
+      config.value.username = configuration.username
+      config.value.password = configuration.password
+      config.value.database = configuration.database
+    }
+
+    if (editTable) {
+      active.value = 2
+      isEditTable.value = true
+      isCreate.value = false
+      // request tables and check tables
+      datasourceApi.tableList(item.id).then((res) => {
+        checkList.value = res.map((ele:any) => {return ele.table_name})
+        datasourceApi.getTablesByConf(form.value).then((res) => {
+          tableList.value = res
+        })
+      })
+    }
   } else {
+    isCreate.value = true
     isEditTable.value = false
-    if (item) {
-      isCreate.value = false
-      form.value.id = item.id
-      form.value.name = item.name
-      form.value.description = item.description
-      form.value.type = item.type
-      if(item.configuration) {
-        const configuration = JSON.parse(decrypted(item.configuration))
-        config.value.host = configuration.host
-        config.value.port = configuration.port
-        config.value.username = configuration.username
-        config.value.password = configuration.password
-        config.value.database = configuration.database
-      }
-    } else {
-      isCreate.value = true
-      form.value = {
-        name:'',
-        description:'',
-        type:'mysql',
-        configuration: ''
-      }
-      config.value = {
-        driver:'',
-        host:'',
-        port:0,
-        username:'',
-        password:'',
-        database:'',
-      }
+    checkList.value = []
+    tableList.value = []
+    form.value = {
+      name:'',
+      description:'',
+      type:'mysql',
+      configuration: ''
+    }
+    config.value = {
+      driver:'',
+      host:'',
+      port:0,
+      username:'',
+      password:'',
+      database:'',
     }
   }
   dialogVisible.value = true
@@ -162,6 +174,10 @@ const save = async(formEl: FormInstance | undefined) => {
   if(!formEl) return
   await formEl.validate((valid) => {
     if (valid) {
+      const list = tableList.value
+          .filter((ele: any) => {return checkList.value.includes(ele.tableName)})
+          .map((ele: any) => {return {"table_name": ele.tableName, "table_comment": ele.tableComment}})
+
       form.value.configuration = encrypted(JSON.stringify({
         host:config.value.host,
         port:config.value.port,
@@ -179,9 +195,12 @@ const save = async(formEl: FormInstance | undefined) => {
           })
         } else {
           // save table and field
+          datasourceApi.chooseTables(form.value.id, list).then(() => {
+            close()
+          })
         }
       } else {
-        form.value.tables = [{"table_name":"core_dataset_table"},{"table_name":"pre_user"}]// todo test
+        form.value.tables = list
         datasourceApi.add(form.value).then((res: any) => {
           console.log(res)
           close()
@@ -215,15 +234,20 @@ const check = () => {
   })
 }
 
-const next = () => {
-  // check status if success do next
-  buildConf()
-  datasourceApi.check(form.value).then((res: boolean) => {
-    if(res) {
-      active.value++
-      // request tables
-      datasourceApi.getTablesByConf(form.value).then((res) => {
-        tableList.value = res
+const next = async(formEl: FormInstance | undefined) => {
+  if(!formEl) return
+  await formEl.validate((valid) => {
+    if (valid) {
+      // check status if success do next
+      buildConf()
+      datasourceApi.check(form.value).then((res: boolean) => {
+        if(res) {
+          active.value++
+          // request tables
+          datasourceApi.getTablesByConf(form.value).then((res) => {
+            tableList.value = res
+          })
+        }
       })
     }
   })

frontend/src/views/ds/index.vue

@@ -36,6 +36,7 @@
         <div class="connection-status" :class="`${getStatus(ds.status)}`">{{ ds.status }}</div>
         <div class="connection-actions">
           <el-button class="action-btn" circle @click="getTables(ds.id, ds.name)" :icon="List" />
+          <el-button class="action-btn" circle @click="editTables(ds)" :icon="CreditCard" />
           <el-button type="primary" class="action-btn" circle @click="editDs(ds)" :icon="IconOpeEdit"/>
           <el-button type="danger" class="action-btn" circle @click="deleteDs(ds)" :icon="IconOpeDelete"/>
         </div>
@@ -48,7 +49,7 @@
 import IconOpeAdd from '@/assets/svg/operate/ope-add.svg'
 import IconOpeEdit from '@/assets/svg/operate/ope-edit.svg'
 import IconOpeDelete from '@/assets/svg/operate/ope-delete.svg'
-import { Search, List } from '@element-plus/icons-vue'
+import { Search, List, CreditCard } from '@element-plus/icons-vue'
 import { ref, onMounted } from 'vue'
 import DsForm from './form.vue'
 import { datasourceApi } from '@/api/datasource'
@@ -97,6 +98,10 @@ const editDs = (item: any) => {
   dsForm.value.open(item)
 }
 
+const editTables = (item: any) => {
+  dsForm.value.open(item, true)
+}
+
 const deleteDs = (item: any) => {
   ElMessageBox.confirm(
     'Delete this datasource?',