feat: datasource table

Author: XiaJunjie2020

backend/apps/datasource/crud/datasource.py

@@ -183,6 +183,10 @@ def sync_table(session: SessionDep, ds: CoreDatasource, tables: List[CoreTable])
         session.query(CoreField).filter(and_(CoreField.ds_id == ds.id, CoreField.table_id.not_in(id_list))).delete(
             synchronize_session=False)
         session.commit()
+    else:  # delete all tables and fields in this ds
+        session.query(CoreTable).filter(CoreTable.ds_id == ds.id).delete(synchronize_session=False)
+        session.query(CoreField).filter(CoreField.ds_id == ds.id).delete(synchronize_session=False)
+        session.commit()
 
 
 def sync_fields(session: SessionDep, ds: CoreDatasource, table: CoreTable, fields: List[ColumnSchema]):

frontend/src/i18n/en.json

@@ -227,7 +227,9 @@
     "cannot_be_deleted": "The chart of the dashboard uses this data source and cannot be deleted.",
     "got_it": "Got it",
     "field_original_notes": "Field original notes",
-    "field_notes_1": "Field notes"
+    "field_notes_1": "Field notes",
+    "no_table":"No Table",
+    "go_add":"Add"
   },
   "model": {
     "default_model": "Default model",

frontend/src/i18n/zh-CN.json

@@ -230,7 +230,9 @@
     "cannot_be_deleted": "仪表板的图表使用了该数据源，不可删除。",
     "got_it": "知道了",
     "field_original_notes": "字段原始备注",
-    "field_notes_1": "字段备注"
+    "field_notes_1": "字段备注",
+    "no_table":"暂无数据表",
+    "go_add":"去添加"
   },
   "model": {
     "default_model": "默认模型",

frontend/src/views/ds/DataTable.vue

@@ -8,6 +8,7 @@ import EmptyBackground from '@/views/dashboard/common/EmptyBackground.vue'
 import edit from '@/assets/svg/icon_edit_outlined.svg'
 import { useI18n } from 'vue-i18n'
 import ParamsForm from './ParamsForm.vue'
+import icon_add_outlined from '@/assets/svg/icon_add_outlined.svg'
 
 interface Table {
   name: string
@@ -53,6 +54,7 @@ const { t } = useI18n()
 const paramsFormRef = ref()
 const tableList = ref([] as any[])
 const loading = ref(false)
+const initLoading = ref(false)
 const keywords = ref('')
 const tableListWithSearch = computed(() => {
   if (!keywords.value) return tableList.value
@@ -67,11 +69,13 @@ const ds = ref<any>({})
 const btnSelect = ref('d')
 
 const init = () => {
+  initLoading.value = true
   datasourceApi.getDs(props.info.id).then((res) => {
     ds.value = res
     fieldList.value = []
     datasourceApi.tableList(props.info.id).then((res) => {
       tableList.value = res
+      initLoading.value = false
     })
   })
 }
@@ -213,7 +217,7 @@ const back = () => {
           </template>
         </el-input>
 
-        <div class="list-content">
+        <div v-loading="initLoading" class="list-content">
           <div
             v-for="ele in tableListWithSearch"
             :key="ele.table_name"
@@ -233,6 +237,16 @@ const back = () => {
             img-type="tree"
             style="width: 100%; margin-top: 100px"
           />
+          <div v-else-if="!initLoading && !tableListWithSearch.length" class="no-data">
+            <div class="no-data-msg">
+              <div>
+                {{ $t('datasource.no_table') }}
+              </div>
+              <el-button type="primary" link @click="handleSelectTableList">
+                {{ $t('datasource.go_add') }}
+              </el-button>
+            </div>
+          </div>
         </div>
       </div>
 
@@ -447,6 +461,20 @@ const back = () => {
           }
         }
       }
+
+      .no-data {
+        height: 100%;
+        text-align: center;
+        display: flex;
+        align-items: center;
+        width: 100%;
+        .no-data-msg {
+          display: inline;
+          width: 100%;
+          color: var(--ed-text-color-secondary);
+          font-size: var(--ed-font-size-base);
+        }
+      }
     }
     .info-table {
       position: absolute;