feat(datasource): datasource choose table

Author: XiaJunjie2020

backend/apps/datasource/api/datasource.py

@@ -9,7 +9,7 @@
 from apps.db.engine import create_table, get_data_engine, insert_data
 from common.core.deps import SessionDep, CurrentUser
 from ..crud.datasource import get_datasource_list, check_status, create_ds, update_ds, delete_ds, getTables, getFields, \
-    execSql, update_table_and_fields, getTablesByDs, chooseTables, preview, updateTable, updateField
+    execSql, update_table_and_fields, getTablesByDs, chooseTables, preview, updateTable, updateField, get_ds
 from ..crud.field import get_fields_by_table_id
 from ..crud.table import get_tables_by_ds_id
 from ..models.datasource import CoreDatasource, CreateDatasource, TableObj, CoreTable, CoreField
@@ -23,6 +23,11 @@ async def datasource_list(session: SessionDep):
     return get_datasource_list(session=session)
 
 
+@router.post("/get/{id}")
+async def get_datasource(session: SessionDep, id: int):
+    return get_ds(session, id)
+
+
 @router.post("/check")
 async def check(session: SessionDep, ds: CoreDatasource):
     return check_status(session, ds)

backend/apps/datasource/crud/datasource.py

@@ -24,6 +24,12 @@ def get_datasource_list(session: SessionDep):
     return datasource_list
 
 
+def get_ds(session: SessionDep, id: int):
+    statement = select(CoreDatasource).where(CoreDatasource.id == id)
+    datasource = session.exec(statement).first()
+    return datasource
+
+
 def check_status(session: SessionDep, ds: CoreDatasource):
     conn = get_engine(ds)
     try:

frontend/src/api/datasource.ts

@@ -16,5 +16,6 @@ export const datasourceApi = {
   edit: (data: any) => request.post('/datasource/editLocalComment', data),
   previewData: (id: Number, data: any) => request.post(`/datasource/previewData/${id}`, data),
   saveTable: (data: any) => request.post('/datasource/editTable', data),
-  saveField: (data: any) => request.post('/datasource/editField', data)
+  saveField: (data: any) => request.post('/datasource/editField', data),
+  getDs: (id: Number) => request.post(`/datasource/get/${id}`),
 }

frontend/src/views/ds/TableList.vue

@@ -9,7 +9,10 @@
     </div>
     <div class="container">
       <div class="left-side">
-        Tables
+        <div style="display: flex;justify-content: space-between;align-items: center;">
+          <span>Tables</span>
+          <el-button style="padding: 12px;" text @click="editTables(ds)" :icon="CreditCard"/>
+        </div>
         <el-input
           style="margin: 16px 0"
           v-model="searchValue"
@@ -134,6 +137,7 @@
       </div>
     </el-dialog>
   </div>
+  <DsForm ref="dsForm" @refresh="refresh"/>
 </template>
 
 <script lang="tsx" setup>
@@ -143,6 +147,8 @@ import { onMounted } from "vue";
 import { ArrowLeft } from "@element-plus/icons-vue";
 import type { TabsPaneContext } from "element-plus-secondary";
 import IconOpeEdit from '@/assets/svg/operate/ope-edit.svg'
+import {CreditCard} from '@element-plus/icons-vue'
+import DsForm from './form.vue'
 
 const props = defineProps({
   dsId: { type: [Number], required: true },
@@ -160,6 +166,8 @@ const previewData = ref<any>({});
 const activeName = ref("schema");
 const tableDialog = ref<boolean>(false)
 const fieldDialog = ref<boolean>(false)
+const dsForm = ref()
+const ds = ref<any>({})
 
 const buildData = () => {
   return { table: currentTable.value, fields: fieldList.value };
@@ -241,12 +249,27 @@ const handleClick = (tab: TabsPaneContext) => {
   }
 };
 
-onMounted(() => {
+const editTables = (item: any) => {
+  dsForm.value.open(item, true)
+}
+
+const refresh = () => {
+  init()
+}
+
+const init = () => {
   dsId.value = props.dsId;
-  fieldList.value = [];
-  datasourceApi.tableList(props.dsId).then((res) => {
-    tableList.value = res;
-  });
+  datasourceApi.getDs(dsId.value).then((res) => {
+    ds.value = res
+    fieldList.value = [];
+    datasourceApi.tableList(props.dsId).then((res) => {
+      tableList.value = res;
+    });
+  })
+}
+
+onMounted(() => {
+  init()
 });
 </script>
 

frontend/src/views/ds/form.vue

@@ -149,6 +149,7 @@
         >Preview</el-button
       >
       <el-button
+      :loading="saveLoading"
         v-show="active === 1 || !isCreate"
         type="primary"
         @click="save(dsFormRef)"
@@ -182,6 +183,7 @@ const token = wsCache.get("user.token");
 const headers = ref<any>({ "X-SQLBOT-TOKEN": `Bearer ${token}` });
 const dialogTitle = ref("");
 const getUploadURL = import.meta.env.VITE_API_BASE_URL + '/datasource/uploadExcel'
+const saveLoading = ref<boolean>(false)
 
 
 const rules = reactive<FormRules>({
@@ -236,6 +238,7 @@ const close = () => {
   checkList.value = [];
   tableList.value = [];
   excelUploadSuccess.value = false;
+  saveLoading.value = false
 };
 
 const open = (item: any, editTable: boolean = false) => {
@@ -327,6 +330,7 @@ const save = async (formEl: FormInstance | undefined) => {
   if (!formEl) return;
   await formEl.validate((valid) => {
     if (valid) {
+      saveLoading.value = true
       const list = tableList.value
         .filter((ele: any) => {
           return checkList.value.includes(ele.tableName);
@@ -348,6 +352,7 @@ const save = async (formEl: FormInstance | undefined) => {
           // save table and field
           datasourceApi.chooseTables(form.value.id, list).then(() => {
             close();
+            emit("refresh");
           });
         }
       } else {

frontend/src/views/ds/index.vue

@@ -26,7 +26,7 @@
         <DatasourceItemCard :ds="ds">
           <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 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>
@@ -40,7 +40,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, CreditCard} from '@element-plus/icons-vue'
+import {Search, List} from '@element-plus/icons-vue'
 import {ref, onMounted} from 'vue'
 import DsForm from './form.vue'
 import {datasourceApi} from '@/api/datasource'
@@ -83,9 +83,9 @@ const editDs = (item: any) => {
   dsForm.value.open(item)
 }
 
-const editTables = (item: any) => {
-  dsForm.value.open(item, true)
-}
+// const editTables = (item: any) => {
+//   dsForm.value.open(item, true)
+// }
 
 const deleteDs = (item: any) => {
   ElMessageBox.confirm(
@@ -108,17 +108,6 @@ const deleteDs = (item: any) => {
 }
 
 const getTables = (id: number, name: string) => {
-  // datasourceApi.getTables(id).then((res) => {
-  //   console.log(res)
-  // })
-
-  // datasourceApi.getFields(id,'core_dataset_table').then((res) => {
-  //   console.log(res)
-  // })
-
-  // datasourceApi.execSql(id,'select id,name,table_name from core_dataset_table limit 10').then((res) => {
-  //   console.log(res)
-  // })
   router.push(`/dsTable/${id}/${name}`)
 }