feat(datasource): datasource UI

Author: XiaJunjie2020

frontend/src/views/ds/form.vue

@@ -1,7 +1,7 @@
 <template>
   <el-dialog
     v-model="dialogVisible"
-    title="Add Datasource"
+    :title="title"
     width="600"
     :destroy-on-close="true"
     :close-on-click-modal="false"
@@ -10,7 +10,7 @@
   >
     <template #header="{ close, titleId, titleClass }">
       <div style="display: flex">
-        <div style="margin-right: 24px">Add Datasource</div>
+        <div style="margin-right: 24px">{{ title }}</div>
         <el-steps
           v-show="isCreate"
           :active="active"
@@ -180,6 +180,7 @@ const excelUploadSuccess = ref(false);
 const tableListLoading = ref(true);
 const token = wsCache.get("user.token");
 const headers = ref<any>({ "X-SQLBOT-TOKEN": `Bearer ${token}` });
+const title = ref('')
 
 const rules = reactive<FormRules>({
   name: [
@@ -222,6 +223,7 @@ const close = () => {
 const open = (item: any, editTable: boolean = false) => {
   isEditTable.value = false;
   if (item) {
+    title.value = 'Edit Datasource'
     isCreate.value = false;
     form.value.id = item.id;
     form.value.name = item.name;
@@ -243,6 +245,7 @@ const open = (item: any, editTable: boolean = false) => {
     }
 
     if (editTable) {
+      title.value = 'Choose Tables'
       active.value = 1;
       isEditTable.value = true;
       isCreate.value = false;
@@ -275,6 +278,7 @@ const open = (item: any, editTable: boolean = false) => {
       });
     }
   } else {
+    title.value = 'Add Datasource'
     isCreate.value = true;
     isEditTable.value = false;
     checkList.value = [];