diff --git a/frontend/src/api/system/datasource.js b/frontend/src/api/system/datasource.js
index 8588a7fac0..647cb4445b 100644
--- a/frontend/src/api/system/datasource.js
+++ b/frontend/src/api/system/datasource.js
@@ -148,4 +148,11 @@ export function updateDriver(data) {
   })
 }
 
-export default { dsGrid, addDs, editDs, delDs, validateDs, listDatasource, getSchema }
+export function getDatasourceDetail(id) {
+  return request({
+    url: `/datasource/get/${id}`,
+    loading: true,
+    method: 'post',
+  })
+}
+export default { getDatasourceDetail, dsGrid, addDs, editDs, delDs, validateDs, listDatasource, getSchema }
diff --git a/frontend/src/lang/en.js b/frontend/src/lang/en.js
index aba06b6985..5afe4982aa 100644
--- a/frontend/src/lang/en.js
+++ b/frontend/src/lang/en.js
@@ -520,7 +520,7 @@ export default {
     left_to_edit: 'Select the data table on the left to edit',
     cannot_be_duplicate: 'The dataset name cannot be duplicate',
     set_saved_successfully: 'Data set saved successfully',
-    to_start_using: 'Browse the contents of your database, tables, and columns. Select a database to start using.',
+    to_start_using: 'Browse the contents of your database, tables and columns. Choose a database to get started.',
     to_run_query: 'Click to run query',
     the_running_results: 'You can view the running results'
   },
diff --git a/frontend/src/views/dataset/add/AddApi.vue b/frontend/src/views/dataset/add/AddApi.vue
index 6573acc53d..a7835741d1 100644
--- a/frontend/src/views/dataset/add/AddApi.vue
+++ b/frontend/src/views/dataset/add/AddApi.vue
@@ -32,7 +32,6 @@
         clearable
       />
       <div class="table-checkbox-list">
-        <!-- <div class="item" v-for="(ele, index) in tableData"> -->
         <el-checkbox-group v-model="checkTableList" size="small">
           <el-tooltip
             :disabled="t.enableCheck"
@@ -58,7 +57,6 @@
             </div>
           </el-tooltip>
         </el-checkbox-group>
-        <!-- </div> -->
       </div>
     </div>
     <div class="table-detail">
diff --git a/frontend/src/views/dataset/add/AddDB.vue b/frontend/src/views/dataset/add/AddDB.vue
index a28198e1d8..06d5c82607 100644
--- a/frontend/src/views/dataset/add/AddDB.vue
+++ b/frontend/src/views/dataset/add/AddDB.vue
@@ -33,7 +33,6 @@
         clearable
       />
       <div class="table-checkbox-list">
-        <!-- <div class="item" v-for="(ele, index) in tableData"> -->
         <el-checkbox-group v-model="checkTableList" size="small">
           <el-tooltip
             :disabled="t.enableCheck"
@@ -59,7 +58,6 @@
             </div>
           </el-tooltip>
         </el-checkbox-group>
-        <!-- </div> -->
       </div>
     </div>
     <div class="table-detail">
diff --git a/frontend/src/views/dataset/add/AddExcel.vue b/frontend/src/views/dataset/add/AddExcel.vue
index d3c7147383..53a47627d9 100644
--- a/frontend/src/views/dataset/add/AddExcel.vue
+++ b/frontend/src/views/dataset/add/AddExcel.vue
@@ -1,11 +1,5 @@
 <template>
   <div class="dataset-excel">
-    <!-- <el-button size="mini" @click="cancel">
-            {{ $t('dataset.cancel') }}
-          </el-button>
-          <el-button size="mini" type="primary" @click="save">
-            {{ $t('dataset.confirm') }}
-          </el-button> -->
     <p v-if="!showLeft" @click="showLeft = true" class="arrow-right">
       <i class="el-icon-d-arrow-right"></i>
     </p>
@@ -260,15 +254,6 @@ export default {
       defaultCheckedKeys: []
     }
   },
-  watch: {
-    defaultCheckedKeys(val) {
-      const excelNum = this.excelData.map((ele) => ele.id)
-      this.$emit(
-        'setTableNum',
-        val.filter((ele) => !excelNum.includes(ele)).length
-      )
-    }
-  },
   mounted() {
     window.onresize = () => {
       this.calHeight()
@@ -297,7 +282,9 @@ export default {
         this.defaultCheckedKeys.splice(index, 1)
       }
       this.validateName()
-      this.$emit('setTableNum', this.defaultCheckedKeys.length)
+      const labelList = this.$refs.tree.getCheckedNodes().map(ele => ele.excelLable)
+      const excelList = this.excelData.map(ele => ele.excelLable);
+      this.$emit('setTableNum', labelList.filter(ele => !excelList.includes(ele)).length)
     },
     nameExsitValidator(ele, checkList) {
       this.$set(
@@ -309,7 +296,9 @@ export default {
       )
     },
     validateName() {
-      const checkList = this.$refs.tree.getCheckedNodes().map(ele => ele.datasetName)
+      const checkList = this.$refs.tree
+        .getCheckedNodes()
+        .map((ele) => ele.datasetName)
       this.excelData
         .reduce((pre, next) => pre.concat(next.sheets), [])
         .forEach((ele, index) => {
@@ -343,7 +332,7 @@ export default {
           }
         }
       }
-      this.validateName();
+      this.validateName()
     },
     calHeight() {
       const that = this
diff --git a/frontend/src/views/dataset/add/AddSQL.vue b/frontend/src/views/dataset/add/AddSQL.vue
index ff1a4db8c1..39f9293e2c 100644
--- a/frontend/src/views/dataset/add/AddSQL.vue
+++ b/frontend/src/views/dataset/add/AddSQL.vue
@@ -1,14 +1,5 @@
 <template>
   <div class="dataset-sql" @mouseup="mouseupDrag">
-    <!-- <el-input v-model="name" size="mini" :placeholder="$t('commons.name')"/> -->
-
-    <!-- <el-button size="mini" @click="cancel">
-            {{ $t('dataset.cancel') }}
-          </el-button>
-          <el-button size="mini" type="primary" @click="save">
-            {{ $t('dataset.confirm') }}
-          </el-button> -->
-
     <div class="sql-editer">
       <el-row>
         <el-col :span="12">
@@ -264,11 +255,6 @@
                       icon-class="field_value"
                       class="field-icon-value"
                     />
-                    <!-- <svg-icon
-                    v-if="scope.row.deType === 5"
-                    icon-class="field_location"
-                    class="field-icon-location"
-                  /> -->
                   </span>
                 </template>
               </el-table-column>
@@ -641,18 +627,18 @@ export default {
         this.openMessageSuccess('dataset.pls_slc_data_source', 'error')
         return
       }
-      if (!this.table.name || this.table.name === '') {
+      if (!this.param.name || this.param.name === '') {
         this.openMessageSuccess('dataset.pls_input_name', 'error')
         return
       }
-      if (this.table.name.length > 50) {
+      if (this.param.name.length > 50) {
         this.openMessageSuccess('dataset.char_can_not_more_50', 'error')
         return
       }
       this.parseVariable()
       const table = {
         id: this.param.tableId,
-        name: this.table.name,
+        name: this.param.name,
         sceneId: this.param.id,
         dataSourceId: this.dataSource,
         type: 'sql',
@@ -688,7 +674,7 @@ export default {
 
     resetComponent() {
       this.dataSource = ''
-      this.table.name = ''
+      this.param.name = ''
       this.sql = ''
       this.data = []
       this.fields = []
diff --git a/frontend/src/views/dataset/add/AddUnion.vue b/frontend/src/views/dataset/add/AddUnion.vue
index f97e268a30..e7deb93c6f 100644
--- a/frontend/src/views/dataset/add/AddUnion.vue
+++ b/frontend/src/views/dataset/add/AddUnion.vue
@@ -1,15 +1,5 @@
 <template>
   <div class="dataset-union" @mouseup="mouseupDrag">
-    <!-- <el-form :inline="true" style="display: flex;align-items: center;justify-content: space-between;">
-        <el-form-item class="form-item" :label="$t('commons.name')">
-          <el-input v-model="name" size="mini" :placeholder="$t('commons.name')" clearable />
-        </el-form-item>
-        <el-form-item class="form-item">
-          <el-button :disabled="dataset.length === 0" size="mini" @click="previewData">
-            {{ $t('dataset.preview_result') }}
-          </el-button>
-        </el-form-item>
-      </el-form> -->
     <div :style="{ height: unionHeight + 'px' }" class="unio-editer-container">
       <!--添加第一个数据集按钮-->
       <div v-if="dataset.length === 0">
diff --git a/frontend/src/views/dataset/data/FieldEdit.vue b/frontend/src/views/dataset/data/FieldEdit.vue
index f436fc42fd..13ae6bae6c 100644
--- a/frontend/src/views/dataset/data/FieldEdit.vue
+++ b/frontend/src/views/dataset/data/FieldEdit.vue
@@ -1,16 +1,5 @@
 <template>
   <div :style="{ height: maxHeight, overflow: 'auto' }">
-    <!--    <el-row style="height: 26px;">-->
-    <!--      <span style="line-height: 26px;">-->
-    <!--        {{ $t('dataset.field_edit') }}-->
-    <!--        <span>{{ param.name }}</span>-->
-    <!--      </span>-->
-    <!--      <el-row style="float: right">-->
-    <!--        <el-button size="mini" @click="closeEdit">{{ $t('dataset.cancel') }}</el-button>-->
-    <!--        <el-button type="primary" size="mini" @click="saveEdit">{{ $t('dataset.confirm') }}</el-button>-->
-    <!--      </el-row>-->
-    <!--    </el-row>-->
-    <!--    <el-divider />-->
     <el-row style="margin: 6px 0 16px 0">
       <el-col :span="12">
         <deBtn
@@ -187,7 +176,6 @@
                     icon-class="field_text"
                     class="field-icon-text"
                   />
-                  <!-- <span class="field-class">{{ $t("dataset.text") }}</span> -->
                 </span>
                 <span v-if="scope.row.deType === 1">
                   <svg-icon
@@ -195,7 +183,6 @@
                     icon-class="field_time"
                     class="field-icon-time"
                   />
-                  <!-- <span class="field-class">{{ $t("dataset.time") }}</span> -->
                 </span>
                 <span v-if="scope.row.deType === 2 || scope.row.deType === 3">
                   <svg-icon
@@ -203,12 +190,6 @@
                     icon-class="field_value"
                     class="field-icon-value"
                   />
-                  <!-- <span v-if="scope.row.deType === 2" class="field-class">{{
-                    $t("dataset.value")
-                  }}</span>
-                  <span v-if="scope.row.deType === 3" class="field-class">{{
-                    $t("dataset.value") + "(" + $t("dataset.float") + ")"
-                  }}</span> -->
                 </span>
                 <span v-if="scope.row.deType === 5">
                   <svg-icon
@@ -216,7 +197,6 @@
                     icon-class="field_location"
                     class="field-icon-location"
                   />
-                  <!-- <span class="field-class">{{ $t("dataset.location") }}</span> -->
                 </span>
               </span>
             </template>
@@ -310,14 +290,6 @@
               </span>
             </template>
           </el-table-column>
-          <!--          <el-table-column property="groupType" :label="$t('dataset.field_group_type')" width="180">-->
-          <!--            <template slot-scope="scope">-->
-          <!--              <el-radio-group v-model="scope.row.groupType" size="mini">-->
-          <!--                <el-radio-button label="d">{{ $t('chart.dimension') }}</el-radio-button>-->
-          <!--                <el-radio-button label="q">{{ $t('chart.quota') }}</el-radio-button>-->
-          <!--              </el-radio-group>-->
-          <!--            </template>-->
-          <!--          </el-table-column>-->
           <el-table-column min-width="182" :label="$t('dataset.operator')">
             <template slot-scope="scope">
               <el-button
@@ -522,7 +494,6 @@
                     icon-class="field_text"
                     class="field-icon-text"
                   />
-                  <!-- <span class="field-class">{{ $t("dataset.text") }}</span> -->
                 </span>
                 <span v-if="scope.row.deType === 1">
                   <svg-icon
@@ -530,7 +501,6 @@
                     icon-class="field_time"
                     class="field-icon-time"
                   />
-                  <!-- <span class="field-class">{{ $t("dataset.time") }}</span> -->
                 </span>
                 <span v-if="scope.row.deType === 2 || scope.row.deType === 3">
                   <svg-icon
@@ -538,12 +508,6 @@
                     icon-class="field_value"
                     class="field-icon-value"
                   />
-                  <!-- <span v-if="scope.row.deType === 2" class="field-class">{{
-                    $t("dataset.value")
-                  }}</span>
-                  <span v-if="scope.row.deType === 3" class="field-class">{{
-                    $t("dataset.value") + "(" + $t("dataset.float") + ")"
-                  }}</span> -->
                 </span>
                 <span v-if="scope.row.deType === 5">
                   <svg-icon
@@ -551,7 +515,6 @@
                     icon-class="field_location"
                     class="field-icon-location"
                   />
-                  <!-- <span class="field-class">{{ $t("dataset.location") }}</span> -->
                 </span>
               </span>
             </template>
@@ -637,29 +600,6 @@
               </span>
             </template>
           </el-table-column>
-          <!--          <el-table-column property="groupType" :label="$t('dataset.field_group_type')" width="180">-->
-          <!--            <template slot-scope="scope">-->
-          <!--              <el-radio-group v-model="scope.row.groupType" size="mini">-->
-          <!--                <el-radio-button label="d">{{ $t('chart.dimension') }}</el-radio-button>-->
-          <!--                <el-radio-button label="q">{{ $t('chart.quota') }}</el-radio-button>-->
-          <!--              </el-radio-group>-->
-          <!--            </template>-->
-          <!--          </el-table-column>-->
-          <!-- <el-table-column
-            property="groupType"
-            :label="$t('dataset.d_q_trans')"
-            width="120"
-          >
-            <template slot-scope="scope">
-              <el-button
-                icon="el-icon-sort"
-                size="mini"
-                circle
-                :disabled="!hasDataPermission('manage', param.privileges)"
-                @click="dqTrans(scope.row, 'q')"
-              />
-            </template>
-          </el-table-column> -->
           <el-table-column
             min-width="182"
             property=""
@@ -734,7 +674,7 @@
 
     <el-dialog
       :visible.sync="editCalcField"
-      class="de-dialog-form"
+      class="de-dialog-form de-center-dialog"
       width="980px"
       :title="
         currEditField.id
@@ -841,11 +781,6 @@ export default {
       })
     },
     saveEdit(item) {
-      // const list = this.tableFields.dimensionListData.concat(this.tableFields.quotaListData)
-      // batchEdit(list).then(response => {
-      //   // this.closeEdit()
-      //   this.initField()
-      // })
       if (item.name && item.name.length > 50) {
         this.$message.error(this.$t('dataset.field_name_less_50'))
         return
@@ -1153,3 +1088,14 @@ span {
   border-bottom: 0 solid #e6ebf5 !important;
 }
 </style>
+
+<style lang="scss">
+.de-center-dialog {
+  .el-dialog {
+    margin: 0 !important;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+  }
+}
+</style>
\ No newline at end of file
diff --git a/frontend/src/views/dataset/data/UpdateInfo.vue b/frontend/src/views/dataset/data/UpdateInfo.vue
index 9578815e64..b04f9e1b77 100644
--- a/frontend/src/views/dataset/data/UpdateInfo.vue
+++ b/frontend/src/views/dataset/data/UpdateInfo.vue
@@ -185,15 +185,6 @@
       </grid-table>
     </div>
 
-    <!-- <el-row>
-      <el-button v-if="hasDataPermission('manage',param.privileges) && enableUpdate" icon="el-icon-setting" size="mini" @click="showConfig">
-        {{ $t('dataset.update_setting') }}
-      </el-button>
-      <el-button icon="el-icon-refresh" size="mini" @click="refreshLog">
-        {{ $t('commons.refresh') }}
-      </el-button>
-    </el-row> -->
-
     <el-dialog
       v-dialogDrag
       :title="$t('dataset.detail')"
@@ -305,7 +296,7 @@
         </el-form-item>
         <div class="add-scope-cont" v-if="taskForm.type === 'add_scope'">
           <el-form-item
-            prop="incrementalUpdateType"
+            prop="type"
             :label="$t('dataset.incremental_update_type')"
           >
             <el-radio-group
@@ -451,13 +442,11 @@
           </el-form-item>
         </div>
       </el-form>
-      <div class="de-foot-layout">
-        <!-- <div class="cont">
-          <deBtn secondary @click="closeTask">{{ $t("dataset.cancel") }}</deBtn>
-          <deBtn type="primary" @click="saveTask(taskForm)">{{
-            $t("dataset.confirm")
-          }}</deBtn>
-        </div> -->
+      <div class="de-foot">
+        <deBtn secondary @click="closeTask">{{ $t('dataset.cancel') }}</deBtn>
+        <deBtn type="primary" @click="saveTask(taskForm)">{{
+          $t('dataset.confirm')
+        }}</deBtn>
       </div>
     </el-drawer>
   </el-col>
@@ -707,11 +696,7 @@ export default {
     showConfig() {
       this.userDrawer = true
       this.listTaskLog()
-      // this.getIncrementalConfig()
     },
-    // refreshLog() {
-    //   this.listTaskLog();
-    // },
     showErrorMassage(massage) {
       this.show_error_massage = true
       this.error_massage = massage
@@ -857,47 +842,6 @@ export default {
           this.initSearch(false)
         })
     },
-    // getIncrementalConfig() {
-    //   post("/dataset/table/incrementalConfig", { tableId: this.table.id }).then(
-    //     (response) => {
-    //       this.incrementalConfig = response.data;
-    //       if (
-    //         this.incrementalConfig.incrementalAdd.length === 0 &&
-    //         this.incrementalConfig.incrementalDelete.length === 0
-    //       ) {
-    //         this.incrementalUpdateType = "incrementalAdd";
-    //         this.sql = "";
-    //         return;
-    //       }
-    //       if (this.incrementalConfig.incrementalAdd.length > 0) {
-    //         this.incrementalUpdateType = "incrementalAdd";
-    //         this.sql = this.incrementalConfig.incrementalAdd;
-    //       } else {
-    //         this.incrementalUpdateType = "incrementalDelete";
-    //         this.sql = this.incrementalConfig.incrementalDelete;
-    //       }
-    //     }
-    //   );
-    // },
-    // saveIncrementalConfig() {
-    //   if (this.incrementalUpdateType === "incrementalAdd") {
-    //     this.incrementalConfig.incrementalAdd = this.sql;
-    //   } else {
-    //     this.incrementalConfig.incrementalDelete = this.sql;
-    //   }
-    //   this.incrementalConfig.tableId = this.table.id;
-    //   post(
-    //     "/dataset/table/save/incrementalConfig",
-    //     this.incrementalConfig
-    //   ).then((response) => {
-    //     this.$message({
-    //       message: this.$t("dataset.save_success"),
-    //       type: "success",
-    //       showClose: true,
-    //     });
-    //     this.update_setting = false;
-    //   });
-    // },
     saveTask(task) {
       this.$refs.taskForm.validate((valid) => {
         if (valid) {
@@ -1203,7 +1147,7 @@ export default {
 
     .codemirror-cont {
       box-sizing: border-box;
-      width: 560px;
+      width: 100%;
       height: 200px;
       background: #ffffff;
       border: 1px solid #bbbfc4;
diff --git a/frontend/src/views/dataset/data/ViewTable.vue b/frontend/src/views/dataset/data/ViewTable.vue
index 6f1fce6145..16eac3aeb2 100644
--- a/frontend/src/views/dataset/data/ViewTable.vue
+++ b/frontend/src/views/dataset/data/ViewTable.vue
@@ -102,8 +102,7 @@
       <el-tab-pane
         v-if="
           table.mode === 1 &&
-          (table.type === 'excel' ||
-            table.type === 'db' ||
+          (table.type === 'db' ||
             table.type === 'sql' ||
             table.type === 'api')
         "
diff --git a/frontend/src/views/dataset/form.vue b/frontend/src/views/dataset/form.vue
index 2e72272ffb..ee25963638 100644
--- a/frontend/src/views/dataset/form.vue
+++ b/frontend/src/views/dataset/form.vue
@@ -173,6 +173,13 @@ export default {
             trigger: 'change'
           },
           { required: true, trigger: 'blur', validator: this.nameValidator }
+        ],
+        id: [
+          {
+            required: true,
+            message: this.$t('fu.search_bar.please_select'),
+            trigger: 'blur'
+          },
         ]
       }
     }
@@ -204,7 +211,7 @@ export default {
   },
   methods: {
     back() {
-      this.$router.back()
+      this.$router.push('/dataset/index')
     },
     nameBlur() {
       this.nameExsitValidator()
@@ -340,7 +347,7 @@ export default {
     switchComponent(c) {
       let type = ''
       if (['db', 'excel', 'api'].includes(c)) {
-        this.datasetFormRules = {}
+        this.$delete(this.datasetFormRules, 'name')
       }
       switch (c) {
         case 'db':
diff --git a/frontend/src/views/dataset/group/Group.vue b/frontend/src/views/dataset/group/Group.vue
index 8de1f2799a..a69cb97e2d 100644
--- a/frontend/src/views/dataset/group/Group.vue
+++ b/frontend/src/views/dataset/group/Group.vue
@@ -113,7 +113,6 @@
                 class="child"
               >
                 <span v-if="data.modelInnerType === 'group'" @click.stop>
-                  <!-- <el-dropdown trigger="click" size="small" @command="clickAdd"> -->
                   <el-dropdown
                     size="small"
                     placement="bottom-start"
@@ -528,6 +527,9 @@ export default {
       this.$refs.datasetTreeRef.filter(this.filterText)
     }
   },
+  activated() {
+    this.nodeClick(this.$refs.datasetTreeRef.getCurrentNode())
+  },
   created() {
     this.kettleState()
     engineMode().then((res) => {
diff --git a/frontend/src/views/dataset/index.vue b/frontend/src/views/dataset/index.vue
index 161ef94347..2aa38bba0c 100644
--- a/frontend/src/views/dataset/index.vue
+++ b/frontend/src/views/dataset/index.vue
@@ -5,16 +5,15 @@
     <de-aside-container type="dataset">
       <group :save-status="saveStatus" @switchComponent="switchComponent" />
     </de-aside-container>
-
-    <de-main-container>
-      <component
-        :is="component"
-        ref="dynamic_component"
-        :param="param"
-        @switchComponent="switchComponent"
-        @saveSuccess="saveSuccess"
-      />
-    </de-main-container>
+      <de-main-container>
+        <component
+          :is="component"
+          ref="dynamic_component"
+          :param="param"
+          @switchComponent="switchComponent"
+          @saveSuccess="saveSuccess"
+        />
+      </de-main-container>
   </de-container>
 </template>
 
diff --git a/frontend/src/views/system/datasource/DsConfiguration.vue b/frontend/src/views/system/datasource/DsConfiguration.vue
index 705f2e4e45..7738935aa2 100644
--- a/frontend/src/views/system/datasource/DsConfiguration.vue
+++ b/frontend/src/views/system/datasource/DsConfiguration.vue
@@ -11,81 +11,91 @@
     >
       <template v-if="form.type == 'api'">
         <div class="de-row-rules flex-space">
-          <span>{{ $t("datasource.data_table") }}</span>
+          <span>{{ $t('datasource.data_table') }}</span>
           <deBtn
             icon="el-icon-plus"
             type="primary"
             @click="addApiItem(undefined)"
-            >{{ $t("commons.add") }}</deBtn
+            >{{ $t('commons.add') }}</deBtn
           >
         </div>
-        <el-empty :image="noneImg" v-if="!form.apiConfiguration.length" :description="$t('datasource.no_data_table')"></el-empty>
+        <el-empty
+          :image="noneImg"
+          v-if="!form.apiConfiguration.length"
+          :description="$t('datasource.no_data_table')"
+        ></el-empty>
         <template v-else>
           <div
-          v-for="api in form.apiConfiguration"
-          :key="api.id"
-          class="api-card"
-        >
-          <el-row>
-            <el-col :span="12">
-              <span class="name">{{ api.name }}</span>
-              <span
-                v-if="api.status === 'Error'"
-                class="de-tag"
-                style="color: #646a73; background: rgba(31, 35, 41, 0.1)"
-                >{{ $t("datasource.invalid") }}</span
-              >
-              <span
-                v-if="api.status === 'Success'"
-                class="de-tag"
-                style="color: green; background: rgba(52, 199, 36, 0.2)"
-                >{{ $t("datasource.valid") }}</span
-              >
-            </el-col>
-            <el-col style="text-align: right" :span="12">
-              <svg-icon
-                @click="copyItem(api)"
-                icon-class="de-copy"
-                class="de-copy-icon"
-              />
-
-              <el-popover
-                placement="top"
-                width="200"
-                :ref="'apiTable' + api.name"
-                popper-class="api-table-delete"
-                trigger="click"
-              >
-                <i class="el-icon-warning"></i>
-                <div class="tips">{{ $t("datasource.delete_this_item") }}</div>
-                <div class="foot">
-                  <deBtn class="small" @click="cancelItem(api)" secondary>{{
-                    $t("fu.search_bar.cancel")
-                  }}</deBtn>
-                  <deBtn
-                    class="small"
-                    @click="deleteItem(api)"
-                    type="primary"
-                    >{{ $t("fu.search_bar.ok") }}</deBtn
-                  >
-                </div>
+            v-for="api in form.apiConfiguration"
+            :key="api.id"
+            @click="addApiItem(api)"
+            :style="{ cursor: disabled ? 'not-allowed': 'pointer'}"
+            class="api-card"
+          >
+            <el-row>
+              <el-col :span="12">
+                <span class="name">{{ api.name }}</span>
+                <span
+                  v-if="api.status === 'Error'"
+                  class="de-tag"
+                  style="color: #646a73; background: rgba(31, 35, 41, 0.1)"
+                  >{{ $t('datasource.invalid') }}</span
+                >
+                <span
+                  v-if="api.status === 'Success'"
+                  class="de-tag"
+                  style="color: green; background: rgba(52, 199, 36, 0.2)"
+                  >{{ $t('datasource.valid') }}</span
+                >
+              </el-col>
+              <el-col style="text-align: right" :span="12">
                 <svg-icon
-                  slot="reference"
-                  icon-class="de-delete"
-                  class="de-delete-icon"
+                  @click.stop="copyItem(api)"
+                  icon-class="de-copy"
+                  class="de-copy-icon"
                 />
-              </el-popover>
-            </el-col>
-          </el-row>
-          <div class="req-title">
-            <span>{{ $t("datasource.method") }}</span>
-            <span>{{ $t("datasource.url") }}</span>
+
+                <span @click.stop>
+                  <el-popover
+                    placement="top"
+                    width="200"
+                    :ref="`apiTable${api.name}`"
+                    popper-class="api-table-delete"
+                    trigger="click"
+                  >
+                    <i class="el-icon-warning"></i>
+                    <div class="tips">
+                      {{ $t('datasource.delete_this_item') }}
+                    </div>
+                    <div class="foot">
+                      <deBtn class="small" @click="cancelItem(api)" secondary>{{
+                        $t('fu.search_bar.cancel')
+                      }}</deBtn>
+                      <deBtn
+                        class="small"
+                        @click="deleteItem(api)"
+                        type="primary"
+                        >{{ $t('fu.search_bar.ok') }}</deBtn
+                      >
+                    </div>
+                    <svg-icon
+                      slot="reference"
+                      icon-class="de-delete"
+                      class="de-delete-icon"
+                    />
+                  </el-popover>
+                </span>
+              </el-col>
+            </el-row>
+            <div class="req-title">
+              <span>{{ $t('datasource.method') }}</span>
+              <span>{{ $t('datasource.url') }}</span>
+            </div>
+            <div class="req-value">
+              <span>{{ api.method }}</span>
+              <span>{{ api.url }}</span>
+            </div>
           </div>
-          <div class="req-value">
-            <span>{{ api.method }}</span>
-            <span>{{ api.url }}</span>
-          </div>
-        </div>
         </template>
       </template>
 
@@ -94,7 +104,11 @@
         :label="$t('datasource.host')"
         prop="configuration.host"
       >
-        <el-input :placeholder="$t('datasource._ip_address')" v-model="form.configuration.host" autocomplete="off" />
+        <el-input
+          :placeholder="$t('datasource._ip_address')"
+          v-model="form.configuration.host"
+          autocomplete="off"
+        />
       </el-form-item>
 
       <el-form-item
@@ -114,7 +128,11 @@
         :label="$t('datasource.data_base')"
         prop="configuration.dataBase"
       >
-        <el-input :placeholder="$t('datasource.please_input_data_base')" v-model="form.configuration.dataBase" autocomplete="off" />
+        <el-input
+          :placeholder="$t('datasource.please_input_data_base')"
+          v-model="form.configuration.dataBase"
+          autocomplete="off"
+        />
       </el-form-item>
 
       <el-form-item
@@ -123,13 +141,13 @@
         prop="configuration.connectionType"
       >
         <el-radio v-model="form.configuration.connectionType" label="sid"
-          >{{ $t("datasource.oracle_sid") }}
+          >{{ $t('datasource.oracle_sid') }}
         </el-radio>
         <el-radio
           v-model="form.configuration.connectionType"
           label="serviceName"
         >
-          {{ $t("datasource.oracle_service_name") }}
+          {{ $t('datasource.oracle_service_name') }}
         </el-radio>
       </el-form-item>
 
@@ -164,7 +182,7 @@
       >
         <dePwd v-model="form.configuration.password" />
         <p>
-          {{ $t("datasource.kerbers_info") }}
+          {{ $t('datasource.kerbers_info') }}
         </p>
       </el-form-item>
 
@@ -183,7 +201,11 @@
         "
         :label="$t('datasource.user_name')"
       >
-        <el-input :placeholder="$t('components.one_user_name')" v-model="form.configuration.username" autocomplete="off" />
+        <el-input
+          :placeholder="$t('components.one_user_name')"
+          v-model="form.configuration.username"
+          autocomplete="off"
+        />
       </el-form-item>
 
       <el-form-item
@@ -194,21 +216,31 @@
         "
         :label="$t('datasource.password')"
       >
-        <dePwd :placeholder="$t('components.input_a_password')" v-model="form.configuration.password" />
+        <dePwd
+          :placeholder="$t('components.input_a_password')"
+          v-model="form.configuration.password"
+        />
       </el-form-item>
 
       <el-form-item
         v-if="form.type === 'es'"
         :label="$t('datasource.user_name')"
       >
-        <el-input :placeholder="$t('components.one_user_name')" v-model="form.configuration.esUsername" autocomplete="off" />
+        <el-input
+          :placeholder="$t('components.one_user_name')"
+          v-model="form.configuration.esUsername"
+          autocomplete="off"
+        />
       </el-form-item>
 
       <el-form-item
         v-if="form.type === 'es'"
         :label="$t('datasource.password')"
       >
-        <dePwd :placeholder="$t('components.input_a_password')" v-model="form.configuration.esPassword" />
+        <dePwd
+          :placeholder="$t('components.input_a_password')"
+          v-model="form.configuration.esPassword"
+        />
       </el-form-item>
 
       <el-form-item
@@ -235,17 +267,19 @@
       </el-form-item>
 
       <el-form-item
-        v-if="['oracle', 'sqlServer', 'pg', 'redshift', 'db2'].includes(form.type)"
+        v-if="
+          ['oracle', 'sqlServer', 'pg', 'redshift', 'db2'].includes(form.type)
+        "
         class="schema-label"
       >
         <template slot="label">
-          {{ $t("datasource.schema") }}
+          {{ $t('datasource.schema') }}
           <el-button
             type="text"
             icon="el-icon-plus"
             size="small"
             @click="getSchema()"
-            >{{ $t("datasource.get_schema") }}
+            >{{ $t('datasource.get_schema') }}
           </el-button>
         </template>
         <el-select
@@ -305,7 +339,7 @@
         v-if="!['es', 'api', 'mongo'].includes(form.type)"
         @click="showPriority = !showPriority"
         class="de-expand de-mar0"
-        >{{ $t("datasource.priority")
+        >{{ $t('datasource.priority')
         }}<i v-if="showPriority" class="el-icon-arrow-up"></i>
         <i v-else class="el-icon-arrow-down"></i
       ></span>
@@ -369,7 +403,7 @@
                 type="number"
                 :min="0"
               >
-                <template slot="append">{{ $t("panel.second") }}</template>
+                <template slot="append">{{ $t('panel.second') }}</template>
               </el-input>
             </el-form-item>
           </el-col>
@@ -408,7 +442,7 @@
           :rules="rule"
         >
           <div class="row-rules">
-            <span>{{ $t("datasource.base_info") }}</span>
+            <span>{{ $t('datasource.base_info') }}</span>
           </div>
           <el-form-item :label="$t('commons.name')" prop="name">
             <el-input v-model="apiItem.name" autocomplete="off" />
@@ -439,7 +473,7 @@
 
           <div v-loading="loading">
             <div class="row-rules mr40">
-              <span>{{ $t("datasource.req_param") }}</span>
+              <span>{{ $t('datasource.req_param') }}</span>
             </div>
             <!-- HTTP 请求参数 -->
             <el-form-item>
@@ -462,7 +496,7 @@
           :rules="rule"
         >
           <div class="row-rules">
-            <span>{{ $t("datasource.column_info") }}</span>
+            <span>{{ $t('datasource.column_info') }}</span>
           </div>
           <div class="table-container">
             <el-table
@@ -490,7 +524,8 @@
               </el-table-column>
               <el-table-column prop="name" :label="$t('dataset.field_rename')">
                 <template slot-scope="scope">
-                  <el-input :disabled="scope.row.children"
+                  <el-input
+                    :disabled="scope.row.children"
                     size="mini"
                     type="text"
                     v-model="scope.row.name"
@@ -504,7 +539,8 @@
                 :label="$t('dataset.field_type')"
               >
                 <template slot-scope="scope">
-                  <el-select :disabled="scope.row.children"
+                  <el-select
+                    :disabled="scope.row.children"
                     v-model="scope.row.deExtractType"
                     size="mini"
                     style="display: inline-block; width: 120px"
@@ -540,7 +576,7 @@
           </div>
 
           <div class="row-rules">
-            <span>{{ $t("dataset.data_preview") }}</span>
+            <span>{{ $t('dataset.data_preview') }}</span>
           </div>
 
           <ux-grid
@@ -587,7 +623,7 @@
       </el-row>
       <div class="foot">
         <el-button class="btn normal" @click="closeEditItem">{{
-          $t("commons.cancel")
+          $t('commons.cancel')
         }}</el-button>
         <el-button
           class="btn"
@@ -595,21 +631,21 @@
           @click="next"
           :disabled="disabledNext"
           v-show="active === 1"
-          >{{ $t("fu.steps.next") }}
+          >{{ $t('fu.steps.next') }}
         </el-button>
         <el-button
           class="btn"
           type="primary"
           @click="before"
           v-show="active === 2"
-          >{{ $t("fu.steps.prev") }}
+          >{{ $t('fu.steps.prev') }}
         </el-button>
         <el-button
           class="btn"
           type="primary"
           @click="saveItem"
           v-show="active === 2"
-          >{{ $t("commons.save") }}
+          >{{ $t('commons.save') }}
         </el-button>
       </div>
     </el-drawer>
@@ -617,24 +653,24 @@
 </template>
 
 <script>
-import i18n from "@/lang";
-import { checkApiDatasource, getSchema } from "@/api/system/datasource";
-import ApiHttpRequestForm from "@/views/system/datasource/ApiHttpRequestForm";
-import dePwd from "@/components/deCustomCm/dePwd.vue";
-import msgCfm from "@/components/msgCfm";
+import i18n from '@/lang'
+import { checkApiDatasource, getSchema } from '@/api/system/datasource'
+import ApiHttpRequestForm from '@/views/system/datasource/ApiHttpRequestForm'
+import dePwd from '@/components/deCustomCm/dePwd.vue'
+import msgCfm from '@/components/msgCfm'
 export default {
-  name: "DsConfiguration",
+  name: 'DsConfiguration',
   mixins: [msgCfm],
   components: {
     ApiHttpRequestForm,
-    dePwd,
+    dePwd
   },
   props: {
     disabled: {
       type: Boolean,
       default() {
-        return false;
-      },
+        return false
+      }
     },
     method: String,
     request: {},
@@ -642,7 +678,7 @@ export default {
     datasourceType: {},
     showScript: {
       type: Boolean,
-      default: true,
+      default: true
     },
     form: {
       type: Object,
@@ -650,19 +686,19 @@ export default {
         return {
           configuration: {
             initialPoolSize: 5,
-            extraParams: "",
+            extraParams: '',
             minPoolSize: 5,
             maxPoolSize: 50,
             maxIdleTime: 30,
             acquireIncrement: 5,
             idleConnectionTestPeriod: 5,
             connectTimeout: 5,
-            queryTimeout: 30,
+            queryTimeout: 30
           },
-          apiConfiguration: [],
-        };
-      },
-    },
+          apiConfiguration: []
+        }
+      }
+    }
   },
   data() {
     return {
@@ -672,172 +708,172 @@ export default {
         name: [
           {
             required: true,
-            message: i18n.t("datasource.input_name"),
-            trigger: "blur",
-          },
+            message: i18n.t('datasource.input_name'),
+            trigger: 'blur'
+          }
         ],
         desc: [
           {
             min: 2,
             max: 50,
-            message: i18n.t("datasource.input_limit_2_50"),
-            trigger: "blur",
-          },
+            message: i18n.t('datasource.input_limit_2_50'),
+            trigger: 'blur'
+          }
         ],
         type: [
           {
             required: true,
-            message: i18n.t("datasource.please_choose_type"),
-            trigger: "blur",
-          },
+            message: i18n.t('datasource.please_choose_type'),
+            trigger: 'blur'
+          }
         ],
-        "configuration.dataBase": [
+        'configuration.dataBase': [
           {
             required: true,
-            message: i18n.t("datasource.please_input_data_base"),
-            trigger: "blur",
-          },
+            message: i18n.t('datasource.please_input_data_base'),
+            trigger: 'blur'
+          }
         ],
-        "configuration.connectionType": [
+        'configuration.connectionType': [
           {
             required: true,
-            message: i18n.t("datasource.please_select_oracle_type"),
-            trigger: "blur",
-          },
+            message: i18n.t('datasource.please_select_oracle_type'),
+            trigger: 'blur'
+          }
         ],
-        "configuration.username": [
+        'configuration.username': [
           {
             required: true,
-            message: i18n.t("datasource.please_input_user_name"),
-            trigger: "blur",
-          },
+            message: i18n.t('datasource.please_input_user_name'),
+            trigger: 'blur'
+          }
         ],
-        "configuration.password": [
+        'configuration.password': [
           {
             required: true,
-            message: i18n.t("datasource.please_input_password"),
-            trigger: "blur",
-          },
+            message: i18n.t('datasource.please_input_password'),
+            trigger: 'blur'
+          }
         ],
-        "configuration.host": [
+        'configuration.host': [
           {
             required: true,
-            message: i18n.t("datasource.please_input_host"),
-            trigger: "blur",
-          },
+            message: i18n.t('datasource.please_input_host'),
+            trigger: 'blur'
+          }
         ],
-        "configuration.url": [
+        'configuration.url': [
           {
             required: true,
-            message: i18n.t("datasource.please_input_url"),
-            trigger: "blur",
-          },
+            message: i18n.t('datasource.please_input_url'),
+            trigger: 'blur'
+          }
         ],
-        "configuration.port": [
+        'configuration.port': [
           {
             required: true,
-            message: i18n.t("datasource.please_input_port"),
-            trigger: "blur",
-          },
+            message: i18n.t('datasource.please_input_port'),
+            trigger: 'blur'
+          }
         ],
-        "configuration.initialPoolSize": [
+        'configuration.initialPoolSize': [
           {
             required: true,
-            message: i18n.t("datasource.please_input_initial_pool_size"),
-            trigger: "blur",
-          },
+            message: i18n.t('datasource.please_input_initial_pool_size'),
+            trigger: 'blur'
+          }
         ],
-        "configuration.minPoolSize": [
+        'configuration.minPoolSize': [
           {
             required: true,
-            message: i18n.t("datasource.please_input_min_pool_size"),
-            trigger: "blur",
-          },
+            message: i18n.t('datasource.please_input_min_pool_size'),
+            trigger: 'blur'
+          }
         ],
-        "configuration.maxPoolSize": [
+        'configuration.maxPoolSize': [
           {
             required: true,
-            message: i18n.t("datasource.please_input_max_pool_size"),
-            trigger: "blur",
-          },
+            message: i18n.t('datasource.please_input_max_pool_size'),
+            trigger: 'blur'
+          }
         ],
-        "configuration.maxIdleTime": [
+        'configuration.maxIdleTime': [
           {
             required: true,
-            message: i18n.t("datasource.please_input_max_idle_time"),
-            trigger: "blur",
-          },
+            message: i18n.t('datasource.please_input_max_idle_time'),
+            trigger: 'blur'
+          }
         ],
-        "configuration.acquireIncrement": [
+        'configuration.acquireIncrement': [
           {
             required: true,
-            message: i18n.t("datasource.please_input_acquire_increment"),
-            trigger: "blur",
-          },
+            message: i18n.t('datasource.please_input_acquire_increment'),
+            trigger: 'blur'
+          }
         ],
-        "configuration.queryTimeout": [
+        'configuration.queryTimeout': [
           {
             required: true,
-            message: i18n.t("datasource.please_input_query_timeout"),
-            trigger: "blur",
-          },
+            message: i18n.t('datasource.please_input_query_timeout'),
+            trigger: 'blur'
+          }
         ],
-        "configuration.connectTimeout": [
+        'configuration.connectTimeout': [
           {
             required: true,
-            message: i18n.t("datasource.please_input_connect_timeout"),
-            trigger: "blur",
-          },
+            message: i18n.t('datasource.please_input_connect_timeout'),
+            trigger: 'blur'
+          }
         ],
         url: [
           {
             required: true,
-            message: i18n.t("datasource.please_input_url"),
-            trigger: "blur",
-          },
+            message: i18n.t('datasource.please_input_url'),
+            trigger: 'blur'
+          }
         ],
         dataPath: [
           {
             required: true,
-            message: i18n.t("datasource.please_input_dataPath"),
-            trigger: "blur",
-          },
-        ],
+            message: i18n.t('datasource.please_input_dataPath'),
+            trigger: 'blur'
+          }
+        ]
       },
-      api_table_title: "",
+      api_table_title: '',
       schemas: [],
       canEdit: false,
       edit_api_item: false,
       add_api_item: true,
       active: 0,
       defaultApiItem: {
-        name: "",
-        url: "",
-        method: "GET",
+        name: '',
+        url: '',
+        method: 'GET',
         request: {
           headers: [{}],
           body: {
-            type: "",
-            raw: "",
-            kvs: [],
-          },
+            type: '',
+            raw: '',
+            kvs: []
+          }
         },
-        fields: [],
+        fields: []
       },
       apiItem: {
-        status: "",
-        name: "",
-        url: "",
-        method: "GET",
-        dataPath: "",
+        status: '',
+        name: '',
+        url: '',
+        method: 'GET',
+        dataPath: '',
         request: {
           headers: [],
           body: {
-            type: "",
-            raw: "",
-            kvs: [],
+            type: '',
+            raw: '',
+            kvs: []
           },
-          authManager: {},
+          authManager: {}
         },
         fields: [],
         jsonFields: [
@@ -845,57 +881,57 @@ export default {
             deType: 0,
             size: 65535,
             children: null,
-            name: "comments",
+            name: 'comments',
             checked: false,
             extField: 0,
-            jsonPath: "$[*].comments",
-            type: "STRING",
-            originName: "comments",
-            deExtractType: 0,
-          },
-        ],
+            jsonPath: '$[*].comments',
+            type: 'STRING',
+            originName: 'comments',
+            deExtractType: 0
+          }
+        ]
       },
       reqOptions: [
-        { id: "GET", label: "GET" },
-        { id: "POST", label: "POST" },
+        { id: 'GET', label: 'GET' },
+        { id: 'POST', label: 'POST' }
       ],
       loading: false,
-      responseData: { type: "HTTP", responseResult: {}, subRequestResults: [] },
-      api_step2_active_name: "first",
+      responseData: { type: 'HTTP', responseResult: {}, subRequestResults: [] },
+      api_step2_active_name: 'first',
       fieldTypes: [
-        { label: this.$t("dataset.text"), value: 0 },
-        { label: this.$t("dataset.time"), value: 1 },
-        { label: this.$t("dataset.value"), value: 2 },
+        { label: this.$t('dataset.text'), value: 0 },
+        { label: this.$t('dataset.time'), value: 1 },
+        { label: this.$t('dataset.value'), value: 2 },
         {
           label:
-            this.$t("dataset.value") + "(" + this.$t("dataset.float") + ")",
-          value: 3,
+            this.$t('dataset.value') + '(' + this.$t('dataset.float') + ')',
+          value: 3
         },
-        { label: this.$t("dataset.location"), value: 5 },
+        { label: this.$t('dataset.location'), value: 5 }
       ],
       height: 500,
       disabledNext: false,
       authMethodList: [
         {
-          id: "passwd",
-          label: i18n.t("datasource.passwd"),
+          id: 'passwd',
+          label: i18n.t('datasource.passwd')
         },
         {
-          id: "kerberos",
-          label: "Kerberos",
-        },
+          id: 'kerberos',
+          label: 'Kerberos'
+        }
       ],
       fieldOptions: [
-        { label: this.$t("dataset.text"), value: 0 },
-        { label: this.$t("dataset.value"), value: 2 },
+        { label: this.$t('dataset.text'), value: 0 },
+        { label: this.$t('dataset.value'), value: 2 },
         {
           label:
-            this.$t("dataset.value") + "(" + this.$t("dataset.float") + ")",
-          value: 3,
-        },
+            this.$t('dataset.value') + '(' + this.$t('dataset.float') + ')',
+          value: 3
+        }
       ],
-      certinKey: false,
-    };
+      certinKey: false
+    }
   },
   created() {},
   watch: {},
@@ -903,87 +939,87 @@ export default {
     getSchema() {
       this.$refs.DsConfig.validate((valid) => {
         if (valid) {
-          const data = JSON.parse(JSON.stringify(this.form));
-          data.configuration = JSON.stringify(data.configuration);
+          const data = JSON.parse(JSON.stringify(this.form))
+          data.configuration = JSON.stringify(data.configuration)
           getSchema(data).then((res) => {
-            this.schemas = res.data;
-            this.$success(i18n.t("commons.success"));
-          });
+            this.schemas = res.data
+            this.$success(i18n.t('commons.success'))
+          })
         } else {
-          return false;
+          return false
         }
-      });
+      })
     },
     next() {
       if (this.active === 1) {
-        let hasRepeatName = false;
+        let hasRepeatName = false
         this.form.apiConfiguration.forEach((item) => {
           if (
             item.name === this.apiItem.name &&
             item.serialNumber !== this.apiItem.serialNumber
           ) {
-            hasRepeatName = true;
+            hasRepeatName = true
           }
-        });
+        })
         if (hasRepeatName) {
-          this.$message.error(i18n.t("datasource.has_repeat_name"));
-          return;
+          this.$message.error(i18n.t('datasource.has_repeat_name'))
+          return
         }
         this.$refs.apiItemBasicInfo.validate((valid) => {
           if (valid) {
-            const data = JSON.parse(JSON.stringify(this.apiItem));
-            this.loading = true;
-            this.disabledNext = true;
+            const data = JSON.parse(JSON.stringify(this.apiItem))
+            this.loading = true
+            this.disabledNext = true
             checkApiDatasource(data)
               .then((res) => {
-                this.loading = false;
-                this.disabledNext = false;
-                this.apiItem.status = "Success";
-                this.$success(i18n.t("commons.success"));
-                this.active++;
-                this.apiItem.jsonFields = res.data.jsonFields;
-                this.apiItem.fields = [];
-                this.handleFiledChange();
-                this.previewData();
+                this.loading = false
+                this.disabledNext = false
+                this.apiItem.status = 'Success'
+                this.$success(i18n.t('commons.success'))
+                this.active++
+                this.apiItem.jsonFields = res.data.jsonFields
+                this.apiItem.fields = []
+                this.handleFiledChange()
+                this.previewData()
               })
               .catch((res) => {
-                this.loading = false;
-                this.disabledNext = false;
-              });
+                this.loading = false
+                this.disabledNext = false
+              })
           } else {
-            this.apiItem.fields = [];
-            return false;
+            this.apiItem.fields = []
+            return false
           }
-        });
+        })
       }
     },
     before() {
-      this.active--;
+      this.active--
     },
     closeEditItem() {
-      this.active = 0;
-      this.$refs.apiItemBasicInfo.clearValidate();
-      this.edit_api_item = false;
+      this.active = 0
+      this.$refs.apiItemBasicInfo.clearValidate()
+      this.edit_api_item = false
     },
     saveItem() {
       if (this.apiItem.fields.length === 0) {
-        this.$message.warning(i18n.t("datasource.api_field_not_empty"));
-        return;
+        this.$message.warning(i18n.t('datasource.api_field_not_empty'))
+        return
       }
       for (var i = 0; i < this.apiItem.fields.length - 1; i++) {
         for (var j = i + 1; j < this.apiItem.fields.length; j++) {
           if (this.apiItem.fields[i].name === this.apiItem.fields[j].name) {
             this.$message.error(
               this.apiItem.fields[i].name +
-                ", " +
-                i18n.t("datasource.has_repeat_field_name")
-            );
-            return;
+                ', ' +
+                i18n.t('datasource.has_repeat_field_name')
+            )
+            return
           }
         }
       }
-      this.active = 0;
-      this.edit_api_item = false;
+      this.active = 0
+      this.edit_api_item = false
       if (!this.add_api_item) {
         for (var i = 0; i < this.form.apiConfiguration.length; i++) {
           if (
@@ -992,71 +1028,75 @@ export default {
           ) {
             this.form.apiConfiguration[i] = JSON.parse(
               JSON.stringify(this.apiItem)
-            );
-            this.certinKey = !this.certinKey;
+            )
+            this.certinKey = !this.certinKey
           }
         }
       } else {
-        this.form.apiConfiguration.push(this.apiItem);
+        this.form.apiConfiguration.push(this.apiItem)
       }
     },
     copyItem(item) {
-      var newItem = JSON.parse(JSON.stringify(item));
+      var newItem = JSON.parse(JSON.stringify(item))
       newItem.serialNumber =
         this.form.apiConfiguration[this.form.apiConfiguration.length - 1]
-          .serialNumber + 1;
-      var reg = new RegExp(item.name + "_copy_" + "([0-9]*)", "gim");
-      var number = 0;
+          .serialNumber + 1
+      var reg = new RegExp(item.name + '_copy_' + '([0-9]*)', 'gim')
+      var number = 0
       for (var i = 1; i < this.form.apiConfiguration.length; i++) {
-        var match = this.form.apiConfiguration[i].name.match(reg);
+        var match = this.form.apiConfiguration[i].name.match(reg)
         if (match !== null) {
           var num = match[0].substring(
             this.form.apiConfiguration[i].name.length + 5,
             match[0].length - 1
-          );
+          )
           if (parseInt(num) != NaN && parseInt(num) > number) {
-            number = parseInt(num);
+            number = parseInt(num)
           }
         }
       }
-      number = number + 1;
-      newItem.name = item.name + "_copy_" + number;
-      this.form.apiConfiguration.push(newItem);
-      this.openMessageSuccess("datasource.success_copy");
+      number = number + 1
+      newItem.name = item.name + '_copy_' + number
+      this.form.apiConfiguration.push(newItem)
+      this.openMessageSuccess('datasource.success_copy')
     },
     addApiItem(item) {
+      if (this.disabled) {
+        return
+      }
       if (item) {
-        this.add_api_item = false;
-        this.api_table_title = this.$t("datasource.edit_api_table");
-        this.apiItem = JSON.parse(JSON.stringify(item));
+        this.add_api_item = false
+        this.api_table_title = this.$t('datasource.edit_api_table')
+        this.apiItem = JSON.parse(JSON.stringify(item))
       } else {
-        this.add_api_item = true;
-        this.apiItem = JSON.parse(JSON.stringify(this.defaultApiItem));
+        this.add_api_item = true
+        this.apiItem = JSON.parse(JSON.stringify(this.defaultApiItem))
         this.apiItem.serialNumber =
           this.form.apiConfiguration.length > 0
             ? this.form.apiConfiguration[this.form.apiConfiguration.length - 1]
                 .serialNumber + 1
-            : 0;
-        this.api_table_title = this.$t("datasource.add_api_table");
+            : 0
+        this.api_table_title = this.$t('datasource.add_api_table')
       }
-      this.active = 1;
-      this.edit_api_item = true;
+      this.active = 1
+      this.edit_api_item = true
     },
     deleteItem(item) {
       this.form.apiConfiguration.splice(
         this.form.apiConfiguration.indexOf(item),
         1
-      );
-      this.openMessageSuccess("commons.delete_success");
+      )
+      this.$refs[`apiTable${item.name}`][0].doClose()
+      this.openMessageSuccess('commons.delete_success')
     },
     cancelItem({ name }) {
-      this.$refs["apiTable" + name].doClose();
+      this.$refs[`apiTable${name}`][0].doClose()
     },
     handleCheckAllChange(row) {
-      this.handleCheckChange(row);
-      this.apiItem.fields = [];
-      this.handleFiledChange(row);
-      this.previewData();
+      this.handleCheckChange(row)
+      this.apiItem.fields = []
+      this.handleFiledChange(row)
+      this.previewData()
     },
     handleFiledChange() {
       for (var i = 0; i < this.apiItem.jsonFields.length; i++) {
@@ -1064,10 +1104,10 @@ export default {
           this.apiItem.jsonFields[i].checked &&
           this.apiItem.jsonFields[i].children === undefined
         ) {
-          this.apiItem.fields.push(this.apiItem.jsonFields[i]);
+          this.apiItem.fields.push(this.apiItem.jsonFields[i])
         }
         if (this.apiItem.jsonFields[i].children !== undefined) {
-          this.handleFiledChange2(this.apiItem.jsonFields[i].children);
+          this.handleFiledChange2(this.apiItem.jsonFields[i].children)
         }
       }
     },
@@ -1077,36 +1117,36 @@ export default {
           for (var j = 0; j < this.apiItem.fields.length; j++) {
             if (this.apiItem.fields[j].name === jsonFields[i].name) {
               this.$nextTick(() => {
-                jsonFields[i].checked = false;
-              });
+                jsonFields[i].checked = false
+              })
               this.$message.error(
                 jsonFields[i].name +
-                  ", " +
-                  i18n.t("datasource.has_repeat_field_name")
-              );
-              return;
+                  ', ' +
+                  i18n.t('datasource.has_repeat_field_name')
+              )
+              return
             }
           }
-          this.apiItem.fields.push(jsonFields[i]);
+          this.apiItem.fields.push(jsonFields[i])
         }
         if (jsonFields[i].children !== undefined) {
-          this.handleFiledChange2(jsonFields[i].children);
+          this.handleFiledChange2(jsonFields[i].children)
         }
       }
     },
     previewData() {
-      let datas = [];
-      let maxPreviewNum = 0;
+      let datas = []
+      let maxPreviewNum = 0
       for (let j = 0; j < this.apiItem.fields.length; j++) {
         if (
           this.apiItem.fields[j].value &&
           this.apiItem.fields[j].value.length > maxPreviewNum
         ) {
-          maxPreviewNum = this.apiItem.fields[j].value.length;
+          maxPreviewNum = this.apiItem.fields[j].value.length
         }
       }
       for (let i = 0; i < maxPreviewNum; i++) {
-        datas.push({});
+        datas.push({})
       }
       for (let i = 0; i < this.apiItem.fields.length; i++) {
         for (let j = 0; j < this.apiItem.fields[i].value.length; j++) {
@@ -1114,25 +1154,25 @@ export default {
             datas[j],
             this.apiItem.fields[i].name,
             this.apiItem.fields[i].value[j]
-          );
+          )
         }
-        this.$refs.plxTable.reloadData(datas);
+        this.$refs.plxTable.reloadData(datas)
       }
     },
     handleCheckChange(node) {
       if (node.children !== undefined) {
         node.children.forEach((item) => {
-          item.checked = node.checked;
-          this.handleCheckChange(item);
-        });
+          item.checked = node.checked
+          this.handleCheckChange(item)
+        })
       }
     },
     fieldNameChange(row) {
-      this.previewData();
+      this.previewData()
     },
-    fieldTypeChange(row) {},
-  },
-};
+    fieldTypeChange(row) {}
+  }
+}
 </script>
 
 <style lang="scss">
@@ -1215,7 +1255,7 @@ export default {
     padding-left: 10px;
     margin: 24px 0 16px 0;
     &::before {
-      content: "";
+      content: '';
       position: absolute;
       left: 0;
       top: 50%;
@@ -1296,7 +1336,7 @@ export default {
     display: none;
   }
   .el-form-item.is-required:not(.is-no-asterisk) > .el-form-item__label::after {
-    content: "*";
+    content: '*';
     color: #f54a45;
     margin-left: 2px;
   }
diff --git a/frontend/src/views/system/datasource/DsForm.vue b/frontend/src/views/system/datasource/DsForm.vue
index d6225c3e21..f74a99a5db 100644
--- a/frontend/src/views/system/datasource/DsForm.vue
+++ b/frontend/src/views/system/datasource/DsForm.vue
@@ -7,18 +7,18 @@
           params &&
           params.id &&
           params.showModel &&
-          params.showModel === "show" &&
+          params.showModel === 'show' &&
           !canEdit
-            ? $t("datasource.show_info")
-            : formType == "add"
-            ? $t("datasource.create")
-            : $t("datasource.modify")
+            ? $t('datasource.show_info')
+            : formType == 'add'
+            ? $t('datasource.create')
+            : $t('datasource.modify')
         }}
       </span>
       <div class="apply">
         <template v-if="canEdit">
           <deBtn secondary @click="backToList"
-            >{{ $t("commons.cancel") }}
+            >{{ $t('commons.cancel') }}
           </deBtn>
           <deBtn
             secondary
@@ -27,7 +27,7 @@
               hasDataPermission('manage', params.privileges)
             "
             @click="validaDatasource"
-            >{{ $t("commons.validate") }}
+            >{{ $t('commons.validate') }}
           </deBtn>
           <deBtn
             v-if="
@@ -36,7 +36,7 @@
             "
             type="primary"
             @click="save"
-            >{{ $t("commons.save") }}
+            >{{ $t('commons.save') }}
           </deBtn>
         </template>
         <template v-else>
@@ -47,7 +47,7 @@
                 : hasDataPermission('manage', params.privileges)
             "
             @click="validaDatasource"
-            >{{ $t("commons.validate") }}
+            >{{ $t('commons.validate') }}
           </deBtn>
           <deBtn
             v-if="
@@ -56,7 +56,7 @@
             "
             type="primary"
             @click="changeEdit"
-            >{{ $t("commons.edit") }}
+            >{{ $t('commons.edit') }}
           </deBtn>
         </template>
       </div>
@@ -142,7 +142,7 @@
 </template>
 
 <script>
-import LayoutContent from "@/components/business/LayoutContent";
+import LayoutContent from '@/components/business/LayoutContent'
 import {
   addDs,
   editDs,
@@ -151,24 +151,25 @@ import {
   validateDsById,
   checkApiDatasource,
   listDriverByType,
-} from "@/api/system/datasource";
-import { $confirm } from "@/utils/message";
-import i18n from "@/lang/index";
-import ApiHttpRequestForm from "@/views/system/datasource/ApiHttpRequestForm";
-import DsConfiguration from "@/views/system/datasource/DsConfiguration";
-import PluginCom from "@/views/system/plugin/PluginCom";
-import { listDatasourceType, listDatasource } from "@/api/system/datasource";
-import deTextarea from "@/components/deCustomCm/deTextarea.vue";
-import msgCfm from "@/components/msgCfm";
+  getDatasourceDetail
+} from '@/api/system/datasource'
+import { $confirm } from '@/utils/message'
+import i18n from '@/lang/index'
+import ApiHttpRequestForm from '@/views/system/datasource/ApiHttpRequestForm'
+import DsConfiguration from '@/views/system/datasource/DsConfiguration'
+import PluginCom from '@/views/system/plugin/PluginCom'
+import { listDatasourceType, listDatasource } from '@/api/system/datasource'
+import deTextarea from '@/components/deCustomCm/deTextarea.vue'
+import msgCfm from '@/components/msgCfm'
 export default {
-  name: "DsForm",
+  name: 'DsForm',
   mixins: [msgCfm],
   components: {
     DsConfiguration,
     LayoutContent,
     ApiHttpRequestForm,
     PluginCom,
-    deTextarea,
+    deTextarea
   },
   data() {
     return {
@@ -176,154 +177,154 @@ export default {
       form: {
         configuration: {
           initialPoolSize: 5,
-          extraParams: "",
+          extraParams: '',
           minPoolSize: 5,
           maxPoolSize: 50,
           maxIdleTime: 30,
           acquireIncrement: 5,
           idleConnectionTestPeriod: 5,
           connectTimeout: 5,
-          customDriver: "default",
+          customDriver: 'default',
           queryTimeout: 30,
-          host: "",
+          host: ''
         },
-        apiConfiguration: [],
+        apiConfiguration: []
       },
       datasourceType: {},
       rule: {
         name: [
           {
             required: true,
-            message: i18n.t("datasource.input_name"),
-            trigger: "blur",
+            message: i18n.t('datasource.input_name'),
+            trigger: 'blur'
           },
           {
             min: 2,
             max: 25,
-            message: i18n.t("datasource.input_limit_2_25", [2, 25]),
-            trigger: "blur",
-          },
+            message: i18n.t('datasource.input_limit_2_25', [2, 25]),
+            trigger: 'blur'
+          }
         ],
         desc: [
           {
             min: 2,
             max: 50,
-            message: i18n.t("datasource.input_limit_2_50"),
-            trigger: "blur",
-          },
+            message: i18n.t('datasource.input_limit_2_50'),
+            trigger: 'blur'
+          }
         ],
         type: [
           {
             required: true,
-            message: i18n.t("datasource.please_choose_type"),
-            trigger: "blur",
-          },
+            message: i18n.t('datasource.please_choose_type'),
+            trigger: 'blur'
+          }
         ],
-        "configuration.dataBase": [
+        'configuration.dataBase': [
           {
             required: true,
-            message: i18n.t("datasource.please_input_data_base"),
-            trigger: "blur",
-          },
+            message: i18n.t('datasource.please_input_data_base'),
+            trigger: 'blur'
+          }
         ],
-        "configuration.connectionType": [
+        'configuration.connectionType': [
           {
             required: true,
-            message: i18n.t("datasource.please_select_oracle_type"),
-            trigger: "blur",
-          },
+            message: i18n.t('datasource.please_select_oracle_type'),
+            trigger: 'blur'
+          }
         ],
-        "configuration.username": [
+        'configuration.username': [
           {
             required: true,
-            message: i18n.t("datasource.please_input_user_name"),
-            trigger: "blur",
-          },
+            message: i18n.t('datasource.please_input_user_name'),
+            trigger: 'blur'
+          }
         ],
-        "configuration.password": [
+        'configuration.password': [
           {
             required: true,
-            message: i18n.t("datasource.please_input_password"),
-            trigger: "blur",
-          },
+            message: i18n.t('datasource.please_input_password'),
+            trigger: 'blur'
+          }
         ],
-        "configuration.host": [
+        'configuration.host': [
           {
             required: true,
-            message: i18n.t("datasource.please_input_host"),
-            trigger: "blur",
-          },
+            message: i18n.t('datasource.please_input_host'),
+            trigger: 'blur'
+          }
         ],
-        "configuration.url": [
+        'configuration.url': [
           {
             required: true,
-            message: i18n.t("datasource.please_input_url"),
-            trigger: "blur",
-          },
+            message: i18n.t('datasource.please_input_url'),
+            trigger: 'blur'
+          }
         ],
-        "configuration.port": [
+        'configuration.port': [
           {
             required: true,
-            message: i18n.t("datasource.please_input_port"),
-            trigger: "blur",
-          },
+            message: i18n.t('datasource.please_input_port'),
+            trigger: 'blur'
+          }
         ],
-        "configuration.initialPoolSize": [
+        'configuration.initialPoolSize': [
           {
             required: true,
-            message: i18n.t("datasource.please_input_initial_pool_size"),
-            trigger: "blur",
-          },
+            message: i18n.t('datasource.please_input_initial_pool_size'),
+            trigger: 'blur'
+          }
         ],
-        "configuration.minPoolSize": [
+        'configuration.minPoolSize': [
           {
             required: true,
-            message: i18n.t("datasource.please_input_min_pool_size"),
-            trigger: "blur",
-          },
+            message: i18n.t('datasource.please_input_min_pool_size'),
+            trigger: 'blur'
+          }
         ],
-        "configuration.maxPoolSize": [
+        'configuration.maxPoolSize': [
           {
             required: true,
-            message: i18n.t("datasource.please_input_max_pool_size"),
-            trigger: "blur",
-          },
+            message: i18n.t('datasource.please_input_max_pool_size'),
+            trigger: 'blur'
+          }
         ],
-        "configuration.maxIdleTime": [
+        'configuration.maxIdleTime': [
           {
             required: true,
-            message: i18n.t("datasource.please_input_max_idle_time"),
-            trigger: "blur",
-          },
+            message: i18n.t('datasource.please_input_max_idle_time'),
+            trigger: 'blur'
+          }
         ],
-        "configuration.acquireIncrement": [
+        'configuration.acquireIncrement': [
           {
             required: true,
-            message: i18n.t("datasource.please_input_acquire_increment"),
-            trigger: "blur",
-          },
+            message: i18n.t('datasource.please_input_acquire_increment'),
+            trigger: 'blur'
+          }
         ],
-        "configuration.connectTimeout": [
+        'configuration.connectTimeout': [
           {
             required: true,
-            message: i18n.t("datasource.please_input_connect_timeout"),
-            trigger: "blur",
-          },
+            message: i18n.t('datasource.please_input_connect_timeout'),
+            trigger: 'blur'
+          }
         ],
         url: [
           {
             required: true,
-            message: i18n.t("datasource.please_input_url"),
-            trigger: "blur",
-          },
+            message: i18n.t('datasource.please_input_url'),
+            trigger: 'blur'
+          }
         ],
         dataPath: [
           {
             required: true,
-            message: i18n.t("datasource.please_input_dataPath"),
-            trigger: "blur",
-          },
-        ],
+            message: i18n.t('datasource.please_input_dataPath'),
+            trigger: 'blur'
+          }
+        ]
       },
       schemas: [],
       canEdit: false,
@@ -332,236 +333,242 @@ export default {
       add_api_item: true,
       active: 0,
       defaultApiItem: {
-        name: "",
-        url: "",
-        method: "GET",
+        name: '',
+        url: '',
+        method: 'GET',
         request: {
           headers: [{}],
           body: {
-            type: "",
-            raw: "",
-            kvs: [],
-          },
+            type: '',
+            raw: '',
+            kvs: []
+          }
         },
-        fields: [],
+        fields: []
       },
       apiItem: {
-        status: "",
-        name: "",
-        url: "",
-        method: "GET",
-        dataPath: "",
+        status: '',
+        name: '',
+        url: '',
+        method: 'GET',
+        dataPath: '',
         request: {
           headers: [],
           body: {
-            type: "",
-            raw: "",
-            kvs: [],
+            type: '',
+            raw: '',
+            kvs: []
           },
-          authManager: {},
+          authManager: {}
         },
-        fields: [],
+        fields: []
       },
       reqOptions: [
-        { id: "GET", label: "GET" },
-        { id: "POST", label: "POST" },
+        { id: 'GET', label: 'GET' },
+        { id: 'POST', label: 'POST' }
       ],
       loading: false,
-      responseData: { type: "HTTP", responseResult: {}, subRequestResults: [] },
-      api_table_title: "",
-      api_step2_active_name: "first",
+      responseData: { type: 'HTTP', responseResult: {}, subRequestResults: [] },
+      api_table_title: '',
+      api_step2_active_name: 'first',
       fieldTypes: [
-        { label: this.$t("dataset.text"), value: 0 },
-        { label: this.$t("dataset.time"), value: 1 },
-        { label: this.$t("dataset.value"), value: 2 },
+        { label: this.$t('dataset.text'), value: 0 },
+        { label: this.$t('dataset.time'), value: 1 },
+        { label: this.$t('dataset.value'), value: 2 },
         {
           label:
-            this.$t("dataset.value") + "(" + this.$t("dataset.float") + ")",
-          value: 3,
+            this.$t('dataset.value') + '(' + this.$t('dataset.float') + ')',
+          value: 3
         },
-        { label: this.$t("dataset.location"), value: 5 },
+        { label: this.$t('dataset.location'), value: 5 }
       ],
       height: 500,
       disabledNext: false,
       driverList: [],
       tData: [],
       dsTypes: [],
-      msgNodeId: "",
+      msgNodeId: '',
       params: {},
-      formType: "add",
-    };
+      formType: 'add'
+    }
   },
   async created() {
-    await this.datasourceTypes();
-    this.queryTreeDatas();
-    const { id, showModel, msgNodeId, type } = this.$route.params;
-    this.params = this.$route.params;
+    await this.datasourceTypes()
+    this.queryTreeDatas()
+    const { id, showModel, msgNodeId, type } = this.$route.query
+    this.params = this.$route.query
     if (id) {
-      this.edit(this.params);
-      this.changeType(true);
+      await this.getDatasourceDetail(id, showModel)
+      this.edit(this.params)
+      this.changeType(true)
     } else {
-      this.canEdit = true;
-      this.disabled = false;
+      this.canEdit = true
+      this.disabled = false
       if (type) {
-        this.setType();
-        this.changeType();
+        this.setType()
+        this.changeType()
       }
     }
-    this.disabled = Boolean(id) && showModel === "show" && !this.canEdit;
+    this.disabled = Boolean(id) && showModel === 'show' && !this.canEdit
   },
   methods: {
     datasourceTypes() {
       return listDatasourceType().then((res) => {
-        this.dsTypes = res.data || [];
-      });
+        this.dsTypes = res.data || []
+      })
+    },
+    getDatasourceDetail(id, showModel) {
+      return getDatasourceDetail(id).then((res) => {
+        this.params = {...res.data, showModel}
+      })
     },
     queryTreeDatas() {
       listDatasource().then((res) => {
-        this.tData = this.buildTree(res.data);
-      });
+        this.tData = this.buildTree(res.data)
+      })
     },
     buildTree(array) {
-      const types = {};
-      const newArr = [];
+      const types = {}
+      const newArr = []
       for (let index = 0; index < array.length; index++) {
-        const element = array[index];
+        const element = array[index]
         if (this.msgNodeId) {
           if (element.id === this.msgNodeId) {
-            element.msgNode = true;
+            element.msgNode = true
           }
         }
         if (!(element.type in types)) {
-          types[element.type] = [];
+          types[element.type] = []
           // newArr.push(...element, ...{ children: types[element.type] })
           newArr.push({
             id: element.type,
             name: element.typeDesc,
-            type: "folder",
-            children: types[element.type],
-          });
+            type: 'folder',
+            children: types[element.type]
+          })
         }
-        types[element.type].push(element);
+        types[element.type].push(element)
         // newArr.children.push({ id: element.id, label: element.name })
       }
-      return newArr;
+      return newArr
     },
     setType() {
-      this.form.type = this.params.type;
+      this.form.type = this.params.type
       this.form.configuration = {
         initialPoolSize: 5,
-        extraParams: "",
+        extraParams: '',
         minPoolSize: 5,
         maxPoolSize: 50,
         maxIdleTime: 30,
         acquireIncrement: 5,
         idleConnectionTestPeriod: 5,
         connectTimeout: 5,
-        customDriver: "default",
-        queryTimeout: 30,
-      };
+        customDriver: 'default',
+        queryTimeout: 30
+      }
     },
     changeEdit() {
-      this.canEdit = true;
-      this.formType = "modify";
+      this.canEdit = true
+      this.formType = 'modify'
       this.disabled =
         this.params &&
         this.params.id &&
         this.params.showModel &&
-        this.params.showModel === "show" &&
-        !this.canEdit;
+        this.params.showModel === 'show' &&
+        !this.canEdit
     },
     edit(row) {
-      this.formType = "modify";
-      this.form = JSON.parse(JSON.stringify(row));
-      if (row.type === "api") {
+      this.formType = 'modify'
+      this.form = JSON.parse(JSON.stringify(row))
+      if (row.type === 'api') {
         this.originConfiguration = JSON.parse(
           JSON.stringify(this.form.apiConfiguration)
-        );
+        )
         this.originConfiguration.forEach((item) => {
-          delete item.status;
-        });
-        this.originConfiguration = JSON.stringify(this.originConfiguration);
+          delete item.status
+        })
+        this.originConfiguration = JSON.stringify(this.originConfiguration)
       } else {
-        this.form.configuration = JSON.parse(this.form.configuration);
-        this.originConfiguration = JSON.stringify(this.form.configuration);
+        this.form.configuration = JSON.parse(this.form.configuration)
+        this.originConfiguration = JSON.stringify(this.form.configuration)
       }
       this.disabled =
         this.params &&
         this.params.id &&
         this.params.showModel &&
-        this.params.showModel === "show" &&
-        !this.canEdit;
+        this.params.showModel === 'show' &&
+        !this.canEdit
     },
     reset() {
-      this.$refs.dsForm.resetFields();
+      this.$refs.dsForm.resetFields()
     },
     save() {
       if (
         !this.form.configuration.schema &&
-        (this.form.type === "oracle" ||
-          this.form.type === "sqlServer" ||
-          this.form.type === "pg" ||
-          this.form.type === "redshift" ||
-          this.form.type === "db2")
+        (this.form.type === 'oracle' ||
+          this.form.type === 'sqlServer' ||
+          this.form.type === 'pg' ||
+          this.form.type === 'redshift' ||
+          this.form.type === 'db2')
       ) {
-        this.$message.error(i18n.t("datasource.please_choose_schema"));
-        return;
+        this.$message.error(i18n.t('datasource.please_choose_schema'))
+        return
       }
       if (
-        this.form.type !== "es" &&
-        this.form.type !== "api" &&
+        this.form.type !== 'es' &&
+        this.form.type !== 'api' &&
         this.form.configuration.port <= 0
       ) {
-        this.$message.error(i18n.t("datasource.port_no_less_then_0"));
-        return;
+        this.$message.error(i18n.t('datasource.port_no_less_then_0'))
+        return
       }
       if (
         this.form.configuration.initialPoolSize < 0 ||
         this.form.configuration.minPoolSize < 0 ||
         this.form.configuration.maxPoolSize < 0
       ) {
-        this.$message.error(i18n.t("datasource.no_less_then_0"));
-        return;
+        this.$message.error(i18n.t('datasource.no_less_then_0'))
+        return
       }
-      let repeat = false;
-      const repeatDsName = [];
+      let repeat = false
+      const repeatDsName = []
       if (!this.datasourceType.isPlugin) {
         this.tData.forEach((item) => {
           if (item.id === this.form.type) {
             item.children.forEach((child) => {
-              if (this.formType === "modify" && child.id === this.form.id) {
-                return;
+              if (this.formType === 'modify' && child.id === this.form.id) {
+                return
               }
-              const configuration = JSON.parse(child.configuration);
+              const configuration = JSON.parse(child.configuration)
               if (!configuration) {
-                return;
+                return
               }
               switch (this.form.type) {
-                case "mysql":
-                case "TiDB":
-                case "StarRocks":
-                case "hive":
-                case "mariadb":
-                case "ds_doris":
-                case "ck":
-                case "mongo":
-                case "mariadb":
-                case "impala":
+                case 'mysql':
+                case 'TiDB':
+                case 'StarRocks':
+                case 'hive':
+                case 'mariadb':
+                case 'ds_doris':
+                case 'ck':
+                case 'mongo':
+                case 'mariadb':
+                case 'impala':
                   if (
                     configuration.host == this.form.configuration.host &&
                     configuration.dataBase ==
                       this.form.configuration.dataBase &&
                     configuration.port == this.form.configuration.port
                   ) {
-                    repeat = true;
-                    repeatDsName.push(child.name);
+                    repeat = true
+                    repeatDsName.push(child.name)
                   }
-                  break;
-                case "pg":
-                case "sqlServer":
-                case "redshift":
-                case "oracle":
-                case "db2":
+                  break
+                case 'pg':
+                case 'sqlServer':
+                case 'redshift':
+                case 'oracle':
+                case 'db2':
                   if (
                     configuration.host == this.form.configuration.host &&
                     configuration.dataBase ==
@@ -569,33 +576,33 @@ export default {
                     configuration.port == this.form.configuration.port &&
                     configuration.schema == this.form.configuration.schema
                   ) {
-                    repeatDsName.push(child.name);
-                    repeat = true;
+                    repeatDsName.push(child.name)
+                    repeat = true
                   }
-                  break;
-                case "es":
+                  break
+                case 'es':
                   if (configuration.url == this.form.configuration.url) {
-                    repeatDsName.push(child.name);
-                    repeat = true;
+                    repeatDsName.push(child.name)
+                    repeat = true
                   }
-                  break;
+                  break
                 default:
-                  break;
+                  break
               }
-            });
+            })
           }
-        });
+        })
       } else {
         if (this.datasourceType.isJdbc) {
           this.tData.forEach((item) => {
             if (item.id === this.form.type) {
               item.children.forEach((child) => {
-                if (this.formType === "modify" && child.id === this.form.id) {
-                  return;
+                if (this.formType === 'modify' && child.id === this.form.id) {
+                  return
                 }
-                const configuration = JSON.parse(child.configuration);
+                const configuration = JSON.parse(child.configuration)
                 if (!configuration) {
-                  return;
+                  return
                 }
                 if (configuration.schema != null) {
                   if (
@@ -605,8 +612,8 @@ export default {
                       this.form.configuration.dataBase &&
                     configuration.port == this.form.configuration.port
                   ) {
-                    repeat = true;
-                    repeatDsName.push(child.name);
+                    repeat = true
+                    repeatDsName.push(child.name)
                   }
                 } else {
                   if (
@@ -615,330 +622,330 @@ export default {
                       this.form.configuration.dataBase &&
                     configuration.port == this.form.configuration.port
                   ) {
-                    repeat = true;
-                    repeatDsName.push(child.name);
+                    repeat = true
+                    repeatDsName.push(child.name)
                   }
                 }
-              });
+              })
             }
-          });
+          })
         }
       }
-      let status = null;
+      let status = null
       if (this.datasourceType.isPlugin) {
-        status = this.$refs["pluginDsConfig"].callPluginInner({
-          methodName: "validate",
-        });
+        status = this.$refs['pluginDsConfig'].callPluginInner({
+          methodName: 'validate'
+        })
       } else {
-        this.$refs["dsConfig"].$refs["DsConfig"].validate((valid) => {
-          status = valid;
-        });
+        this.$refs['dsConfig'].$refs['DsConfig'].validate((valid) => {
+          status = valid
+        })
       }
       if (!status) {
-        return;
+        return
       }
       this.$refs.dsForm.validate((valid) => {
         if (!valid) {
-          return false;
+          return false
         }
-        const method = this.formType === "add" ? addDs : editDs;
-        const form = JSON.parse(JSON.stringify(this.form));
-        if (form.type === "api") {
+        const method = this.formType === 'add' ? addDs : editDs
+        const form = JSON.parse(JSON.stringify(this.form))
+        if (form.type === 'api') {
           if (this.form.apiConfiguration.length < 1) {
-            this.$message.error(i18n.t("datasource.api_table_not_empty"));
-            return;
+            this.$message.error(i18n.t('datasource.api_table_not_empty'))
+            return
           }
           form.apiConfiguration.forEach((item) => {
-            delete item.status;
-          });
-          form.configuration = JSON.stringify(form.apiConfiguration);
+            delete item.status
+          })
+          form.configuration = JSON.stringify(form.apiConfiguration)
         } else {
-          form.configuration = JSON.stringify(form.configuration);
+          form.configuration = JSON.stringify(form.configuration)
         }
         if (
-          this.formType === "modify" &&
+          this.formType === 'modify' &&
           this.originConfiguration !== form.configuration
         ) {
           if (repeat) {
             $confirm(
-              i18n.t("datasource.repeat_datasource_msg") +
-                "[" +
-                repeatDsName.join(",") +
-                "], " +
-                i18n.t("datasource.confirm_save"),
+              i18n.t('datasource.repeat_datasource_msg') +
+                '[' +
+                repeatDsName.join(',') +
+                '], ' +
+                i18n.t('datasource.confirm_save'),
               () => {
-                $confirm(i18n.t("datasource.edit_datasource_msg"), () => {
-                  this.method(method, form);
-                });
+                $confirm(i18n.t('datasource.edit_datasource_msg'), () => {
+                  this.method(method, form)
+                })
               }
-            );
+            )
           } else {
-            $confirm(i18n.t("datasource.edit_datasource_msg"), () => {
-              this.method(method, form);
-            });
+            $confirm(i18n.t('datasource.edit_datasource_msg'), () => {
+              this.method(method, form)
+            })
           }
-          return;
+          return
         }
         if (repeat) {
           $confirm(
-            i18n.t("datasource.repeat_datasource_msg") +
-              "[" +
-              repeatDsName.join(",") +
-              "], " +
-              i18n.t("datasource.confirm_save"),
+            i18n.t('datasource.repeat_datasource_msg') +
+              '[' +
+              repeatDsName.join(',') +
+              '], ' +
+              i18n.t('datasource.confirm_save'),
             () => {
-              this.method(method, form);
+              this.method(method, form)
             }
-          );
+          )
         } else {
-          this.method(method, form);
+          this.method(method, form)
         }
-      });
+      })
     },
     method(method, form) {
       method(form).then((res) => {
-        this.$success(i18n.t("commons.save_success"));
-        this.refreshType(form);
-        this.backToList();
-      });
+        this.$success(i18n.t('commons.save_success'))
+        this.refreshType(form)
+        this.backToList()
+      })
     },
     getSchema() {
       this.$refs.dsForm.validate((valid) => {
         if (valid) {
-          const data = JSON.parse(JSON.stringify(this.form));
-          data.configuration = JSON.stringify(data.configuration);
+          const data = JSON.parse(JSON.stringify(this.form))
+          data.configuration = JSON.stringify(data.configuration)
           getSchema(data).then((res) => {
-            this.schemas = res.data;
-            this.openMessageSuccess("commons.success");
-          });
+            this.schemas = res.data
+            this.openMessageSuccess('commons.success')
+          })
         } else {
-          return false;
+          return false
         }
-      });
+      })
     },
     validaDatasource() {
-      if (!this.form.configuration.schema && this.form.type === "oracle") {
-        this.openMessageSuccess("datasource.please_choose_schema","error");
-        return;
+      if (!this.form.configuration.schema && this.form.type === 'oracle') {
+        this.openMessageSuccess('datasource.please_choose_schema', 'error')
+        return
       }
       if (
-        this.form.type !== "es" &&
-        this.form.type !== "api" &&
+        this.form.type !== 'es' &&
+        this.form.type !== 'api' &&
         this.form.configuration.port <= 0
       ) {
-        this.openMessageSuccess("datasource.port_no_less_then_0","error");
-        return;
+        this.openMessageSuccess('datasource.port_no_less_then_0', 'error')
+        return
       }
-      let status = null;
+      let status = null
       if (this.datasourceType.isPlugin) {
-        status = this.$refs["pluginDsConfig"].callPluginInner({
-          methodName: "validate",
-        });
+        status = this.$refs['pluginDsConfig'].callPluginInner({
+          methodName: 'validate'
+        })
       } else {
-        this.$refs["dsConfig"].$refs["DsConfig"].validate((valid) => {
-          status = valid;
+        this.$refs['dsConfig'].$refs['DsConfig'].validate((valid) => {
+          status = valid
           if (!valid) {
-            return;
+            return
           }
-        });
+        })
       }
       if (!status) {
-        return;
+        return
       }
       this.$refs.dsForm.validate((valid) => {
         if (valid) {
-          const data = JSON.parse(JSON.stringify(this.form));
-          if (data.type === "api") {
-            data.configuration = JSON.stringify(data.apiConfiguration);
+          const data = JSON.parse(JSON.stringify(this.form))
+          if (data.type === 'api') {
+            data.configuration = JSON.stringify(data.apiConfiguration)
           } else {
-            data.configuration = JSON.stringify(data.configuration);
+            data.configuration = JSON.stringify(data.configuration)
           }
-          if (data.showModel === "show" && !this.canEdit) {
+          if (data.showModel === 'show' && !this.canEdit) {
             validateDsById(data.id).then((res) => {
               if (res.success) {
-                this.openMessageSuccess("datasource.validate_success");
+                this.openMessageSuccess('datasource.validate_success')
               } else {
                 if (res.message.length < 2500) {
-                  this.openMessageSuccess(res.message,"error");
+                  this.openMessageSuccess(res.message, 'error')
                 } else {
                   this.openMessageSuccess(
-                    res.message.substring(0, 2500) + "......",
-                    "danger"
-                  );
+                    res.message.substring(0, 2500) + '......',
+                    'danger'
+                  )
                 }
               }
-              this.refreshType(data);
-            });
+              this.refreshType(data)
+            })
           } else {
             validateDs(data)
               .then((res) => {
                 if (res.success) {
-                  this.$success(i18n.t("datasource.validate_success"));
+                  this.$success(i18n.t('datasource.validate_success'))
                 } else {
-                  if (data.type === "api") {
-                    this.form.apiConfiguration = res.data.apiConfiguration;
+                  if (data.type === 'api') {
+                    this.form.apiConfiguration = res.data.apiConfiguration
                   }
                   if (res.message.length < 2500) {
-                    this.openMessageSuccess(res.message,"error");
+                    this.openMessageSuccess(res.message, 'error')
                   } else {
                     this.openMessageSuccess(
-                      res.message.substring(0, 2500) + "......",
-                      "danger"
-                    );
+                      res.message.substring(0, 2500) + '......',
+                      'danger'
+                    )
                   }
                 }
               })
               .catch((res) => {
-                this.openMessageSuccess(res.message,"error");
-              });
+                this.openMessageSuccess(res.message, 'error')
+              })
           }
         } else {
-          return false;
+          return false
         }
-      });
+      })
     },
     changeType(init) {
       for (let i = 0; i < this.dsTypes.length; i++) {
         if (this.dsTypes[i].type === this.form.type) {
-          if (this.form.type !== "api" && !init) {
-            this.form.configuration.extraParams = this.dsTypes[i].extraParams;
-            this.form.configuration.customDriver = "default";
+          if (this.form.type !== 'api' && !init) {
+            this.form.configuration.extraParams = this.dsTypes[i].extraParams
+            this.form.configuration.customDriver = 'default'
           }
-          this.datasourceType = this.dsTypes[i];
+          this.datasourceType = this.dsTypes[i]
           if (this.datasourceType.isJdbc) {
             listDriverByType(this.datasourceType.type).then((res) => {
-              this.driverList = [];
+              this.driverList = []
               this.driverList.push({
-                id: "default",
-                name: "Default",
-                driverClass: "Default",
-              });
-              this.driverList = this.driverList.concat(res.data);
-            });
+                id: 'default',
+                name: 'Default',
+                driverClass: 'Default'
+              })
+              this.driverList = this.driverList.concat(res.data)
+            })
           }
         }
       }
     },
     backToList() {
-      this.$router.push("/datasource/index");
+      this.$router.push('/datasource/index')
     },
     refreshType(form) {
-      this.$emit("refresh-type", form);
+      this.$emit('refresh-type', form)
     },
     next() {
       if (this.active === 1) {
-        let hasRepeatName = false;
+        let hasRepeatName = false
         if (this.add_api_item) {
           this.form.apiConfiguration.forEach((item) => {
             if (item.name === this.apiItem.name) {
-              hasRepeatName = true;
+              hasRepeatName = true
             }
-          });
+          })
         } else {
-          const index = this.form.apiConfiguration.indexOf(this.apiItem);
+          const index = this.form.apiConfiguration.indexOf(this.apiItem)
           for (let i = 0; i < this.form.apiConfiguration.length; i++) {
             if (
               i !== index &&
               this.form.apiConfiguration[i].name === this.apiItem.name
             ) {
-              hasRepeatName = true;
+              hasRepeatName = true
             }
           }
         }
         if (hasRepeatName) {
-          this.$message.error(i18n.t("datasource.has_repeat_name"));
-          return;
+          this.$message.error(i18n.t('datasource.has_repeat_name'))
+          return
         }
         this.$refs.apiItem.validate((valid) => {
           if (valid) {
-            const data = JSON.parse(JSON.stringify(this.apiItem));
-            data.request = JSON.stringify(data.request);
-            this.loading = true;
-            this.disabledNext = true;
+            const data = JSON.parse(JSON.stringify(this.apiItem))
+            data.request = JSON.stringify(data.request)
+            this.loading = true
+            this.disabledNext = true
             checkApiDatasource(data)
               .then((res) => {
-                this.loading = false;
-                this.disabledNext = false;
-                this.apiItem.status = "Success";
-                this.$success(i18n.t("commons.success"));
-                this.active++;
-                this.apiItem.fields = res.data.fields;
-                this.$refs.plxTable.reloadData(res.data.datas);
+                this.loading = false
+                this.disabledNext = false
+                this.apiItem.status = 'Success'
+                this.$success(i18n.t('commons.success'))
+                this.active++
+                this.apiItem.fields = res.data.fields
+                this.$refs.plxTable.reloadData(res.data.datas)
               })
               .catch((res) => {
-                this.loading = false;
-                this.disabledNext = false;
-              });
+                this.loading = false
+                this.disabledNext = false
+              })
           } else {
-            this.apiItem.fields = [];
-            return false;
+            this.apiItem.fields = []
+            return false
           }
-        });
+        })
       }
     },
     before() {
-      this.active--;
+      this.active--
     },
     closeEditItem() {
-      this.active = 0;
-      this.edit_api_item = false;
+      this.active = 0
+      this.edit_api_item = false
     },
     saveItem() {
-      this.active = 0;
-      this.edit_api_item = false;
+      this.active = 0
+      this.edit_api_item = false
       if (this.add_api_item) {
-        this.form.apiConfiguration.push(this.apiItem);
+        this.form.apiConfiguration.push(this.apiItem)
       }
     },
     addApiItem(item) {
       this.$nextTick(() => {
-        this.$refs.apiItem.clearValidate();
-      });
+        this.$refs.apiItem.clearValidate()
+      })
       if (item) {
-        this.add_api_item = false;
-        this.api_table_title = this.$t("datasource.edit_api_table");
-        this.apiItem = item;
+        this.add_api_item = false
+        this.api_table_title = this.$t('datasource.edit_api_table')
+        this.apiItem = item
       } else {
-        this.add_api_item = true;
-        this.apiItem = JSON.parse(JSON.stringify(this.defaultApiItem));
-        this.api_table_title = this.$t("datasource.add_api_table");
+        this.add_api_item = true
+        this.apiItem = JSON.parse(JSON.stringify(this.defaultApiItem))
+        this.api_table_title = this.$t('datasource.add_api_table')
       }
-      this.active = 1;
-      this.edit_api_item = true;
+      this.active = 1
+      this.edit_api_item = true
     },
     deleteItem(item) {
       this.form.apiConfiguration.splice(
         this.form.apiConfiguration.indexOf(item),
         1
-      );
+      )
     },
     validateApi(item) {
       if (undefined) {
       } else {
         this.$refs.apiItem.validate((valid) => {
           if (valid) {
-            const data = JSON.parse(JSON.stringify(this.apiItem));
-            data.request = JSON.stringify(data.request);
-            this.loading = true;
+            const data = JSON.parse(JSON.stringify(this.apiItem))
+            data.request = JSON.stringify(data.request)
+            this.loading = true
             checkApiDatasource(data)
               .then((res) => {
-                this.loading = false;
-                this.$success(i18n.t("commons.success"));
-                this.apiItem.fields = res.data.fields;
-                this.$refs.plxTable.reloadData(res.data.datas);
+                this.loading = false
+                this.$success(i18n.t('commons.success'))
+                this.apiItem.fields = res.data.fields
+                this.$refs.plxTable.reloadData(res.data.datas)
               })
               .catch((res) => {
-                this.loading = false;
-              });
+                this.loading = false
+              })
           } else {
-            return false;
+            return false
           }
-        });
+        })
       }
     },
-    handleClick(tab, event) {},
-  },
-};
+    handleClick(tab, event) {}
+  }
+}
 </script>
 <style lang="scss" scoped>
 .de-ds-form {
@@ -952,7 +959,7 @@ export default {
     padding: 12px 24px;
     box-shadow: 0px 2px 4px rgba(31, 35, 41, 0.08);
     .name {
-      font-family: "PingFang SC";
+      font-family: 'PingFang SC';
       font-style: normal;
       font-weight: 500;
       font-size: 16px;
diff --git a/frontend/src/views/system/datasource/DsMain.vue b/frontend/src/views/system/datasource/DsMain.vue
index 138d36be10..25d96e55e9 100644
--- a/frontend/src/views/system/datasource/DsMain.vue
+++ b/frontend/src/views/system/datasource/DsMain.vue
@@ -1,214 +1,164 @@
 <template>
-  <div class="ds-table de-serach-table">
-    <el-row class="top-operate">
-      <el-col :span="10">
-        <span class="table-name">{{ params.name }}</span>
-      </el-col>
-      <el-col :span="14" class="right-user">
-        <el-input
-          :placeholder="$t('system_parameter_setting.search_keywords')"
-          prefix-icon="el-icon-search"
-          class="name-email-search"
-          size="small"
-          clearable
-          ref="search"
-          v-model="nikeName"
-          @blur="initSearch"
-          @clear="initSearch"
-        >
-        </el-input>
-      </el-col>
-    </el-row>
-    <div class="table-container">
-      <grid-table
-        v-loading="loading"
-        :tableData="tableData"
-        :columns="[]"
-        :pagination="paginationConfig"
-        @size-change="handleSizeChange"
-        @current-change="handleCurrentChange"
-      >
-        <el-table-column
-          key="name"
-          prop="name"
-          :label="$t('datasource.table_name')"
-        />
-        <el-table-column
-          slot="__operation"
-          :label="$t('commons.operating')"
-          key="__operation"
-          fixed="right"
-          width="168"
-        >
-          <template slot-scope="scope">
-            <el-button
-              @click="createtDataset(scope.row)"
-              class="text-btn mar3 mar6"
-              type="text"
-              >{{ $t("datasource.create_dataset") }}</el-button
-            >
-            <el-button
-              @click="selectDataset(scope.row)"
-              class="text-btn"
-              type="text"
-              >{{ $t("dataset.detail") }}</el-button
-            >
-          </template>
-        </el-table-column>
-      </grid-table>
+  <div
+    class="de-ds-container"
+    :class="[{ 'is-driver-mgm': currentMgm === 'driverMgm' }]"
+    v-loading="$store.getters.loadingMap[$store.getters.currentPath]"
+  >
+    <div v-if="currentMgm === 'driverMgm'" class="dsr-route-title">
+      <div>
+        <i class="el-icon-arrow-left back-button" @click="jump" />
+        <span>{{ $t('driver.mgm') }}</span>
+      </div>
+      <deBtn type="primary" @click="addDriver" icon="el-icon-plus"
+        >{{ $t("driver.add") }}
+      </deBtn>
     </div>
-    <el-drawer
-      :title="$t('dataset.detail')"
-      :visible.sync="userDrawer"
-      custom-class="user-drawer-task ds-table-drawer"
-      size="840px"
-      v-closePress
-      direction="rtl"
+    <de-aside-container
+      style="padding: 0 0"
+      type="datasource"
     >
-      <el-row style="margin-top: 12px" :gutter="24">
-        <el-col :span="12">
-          <p class="table-name">
-            {{ $t("datasource.table_name") }}
-          </p>
-          <p class="table-value">
-            {{ dsTableDetail.name }}
-          </p>
-        </el-col>
-        <el-col :span="12">
-          <p class="table-name">
-            {{ $t("datasource.table_description") }}
-          </p>
-          <p class="table-value">
-            {{ dsTableDetail.remark || "-" }}
-          </p>
-        </el-col>
-      </el-row>
-      <el-table
-    :data="dsTableData"
-    stripe
-    style="width: 100%">
-    <el-table-column
-      prop="date"
-      :label="$t('panel.column_name')">
-    </el-table-column>
-    <el-table-column
-      prop="name"
-      :label="$t('dataset.field_type')">
-    </el-table-column>
-    <el-table-column
-      prop="name"
-      :label="$t('datasource.field_description')">
-    </el-table-column>
-  </el-table>
-    </el-drawer>
+      <ds-tree
+        @switch-mgm="switchMgm"
+        ref="dsTree"
+        :datasource="datasource"
+        @switch-main="switchMain"
+      />
+    </de-aside-container>
+    <de-main-container
+    >
+      <component
+        :is="component"
+        v-if="!!component"
+        :params="param"
+        :t-data="tData"
+        :ds-types="dsTypes"
+        @refresh-type="refreshType"
+        @switch-component="switchMain"
+      />
+      <el-empty v-else :image-size="125" :description="$t(`datasource.${swTips}`)" :image="image"></el-empty>
+    </de-main-container>
   </div>
 </template>
 
 <script>
-import keyEnter from "@/components/msgCfm/keyEnter.js";
-import GridTable from "@/components/gridTable/index.vue";
-import { dsTable } from "@/api/dataset/dataset";
+import DeMainContainer from "@/components/dataease/DeMainContainer";
+import DeAsideContainer from "@/components/dataease/DeAsideContainer";
+import DsTree from "./DsTree";
+import DsForm from "./DsForm";
+import dsTable from "./dsTable";
+import DriverForm from "./DriverFormDetail";
 export default {
-  mixins: [keyEnter],
-  components: { GridTable },
-  props: {
-    params: {
-      type: Object,
-      default: () => {},
-    },
-  },
+  name: "DsMain",
+  components: { DeMainContainer, DeAsideContainer, DsTree },
   data() {
     return {
-      userDrawer: false,
-      dsTableDetail: {},
-      nikeName: "",
-      loading: false,
-      paginationConfig: {
-        currentPage: 1,
-        pageSize: 10,
-        total: 0,
-      },
-      dsTableData: [{date: 1}],
-      tableData: [{ name: 1 }],
+      image: require('@/assets/None_Select_ds.png'),
+      component: '',
+      datasource: {},
+      param: null,
+      tData: null,
+      currentMgm: "dsMgm",
+      dsTypes: [],
     };
   },
-  created() {
-    // this.initSearch();
+  computed: {
+    swTips() {
+      return this.currentMgm === 'driverMgm' ? 'on_the_left' : 'on_the_left';
+    }
   },
   methods: {
-    createtDataset(row) {},
-    selectDataset(row) {
-      this.dsTableDetail = row;
-      this.userDrawer = true;
+    jump() {
+      this.$refs.dsTree.dsMgm();
+      this.switchMgm('dsMgm');
     },
-    handleSizeChange(pageSize) {
-      this.paginationConfig.currentPage = 1;
-      this.paginationConfig.pageSize = pageSize;
-      this.search();
+    switchMgm(type) {
+      this.currentMgm = type;
     },
-    handleCurrentChange(currentPage) {
-      this.paginationConfig.currentPage = currentPage;
-      this.search();
+    addDriver() {
+      this.$refs.dsTree.addDriver();
     },
-    initSearch() {
-      this.handleCurrentChange(1);
-    },
-    search() {
-      this.loading = true;
-      const param = {
-        conditions: [],
-      };
-      if (this.nikeName) {
-        param.conditions.push({
-          field: `dataset_table_task.name`,
-          operator: "like",
-          value: this.nikeName,
-        });
-      }
-      const { currentPage, pageSize } = this.paginationConfig;
-      dsTable(currentPage, pageSize, this.params.id).then((response) => {
-        this.tableData = response.data.listObject;
-        this.paginationConfig.total = response.data.itemCount;
-        this.loading = false;
+    // 切换main区内容
+    switchMain(param) {
+      const { component, componentParam, tData, dsTypes } = param;
+      this.component = '';
+      this.param = null;
+      this.$nextTick(() => {
+        switch (component) {
+          case "DsForm":
+            this.component = DsForm;
+            this.param = componentParam;
+            this.tData = tData;
+            this.dsTypes = dsTypes;
+            break;
+          case "DriverForm":
+            this.component = DriverForm;
+            this.param = componentParam;
+            this.tData = tData;
+            this.dsTypes = dsTypes;
+            break;
+          case "dsTable":
+            this.component = dsTable;
+            this.param = componentParam;
+            break;
+          default:
+            this.component = '';
+            this.param = null;
+            break;
+        }
       });
     },
+    refreshType(datasource) {
+      this.datasource = datasource;
+      this.$refs.dsTree && this.$refs.dsTree.refreshType(datasource);
+    },
+    msg2Current(sourceParam) {
+      this.$refs.dsTree && this.$refs.dsTree.markInvalid(sourceParam);
+    },
   },
 };
 </script>
 
-<style lang="scss">
-.ds-table-drawer {
-  .table-value,
-  .table-name {
-    font-family: PingFang SC;
-    font-size: 14px;
-    font-weight: 400;
-    margin: 0;
-  }
-  .table-name {
-    color: var(--deTextSecondary, #646a73);
-  }
-  .table-value {
-    margin: 4px 0 24px 0;
-    color: var(--deTextPrimary, #1f2329);
+<style scoped lang="scss">
+.de-ds-container {
+  height: 100%;
+  // height: calc(100vh - 56px);
+  width: 100%;
+  overflow: hidden;
+  flex-wrap: wrap;
+  display: flex;
+  box-sizing: border-box;
+  .el-empty {
+    height: 100%;
   }
 }
-.ds-table {
-  height: 100%;
-  padding: 10px 14px;
-  box-sizing: border-box;
-  .table-name {
-    font-family: PingFang SC;
-    font-size: 16px;
-    font-weight: 500;
-    line-height: 24px;
-    color: var(--deTextPrimary, #1f2329);
+.ms-aside-container {
+  height: calc(100vh - 56px);
+  padding: 0px;
+  min-width: 260px;
+  max-width: 460px;
+}
+.dsr-route-title {
+  width: 100%;
+  margin: -2px 0 22px 0;
+  display: flex;
+  justify-content: space-between;
+  align-content: center;
+}
+.is-driver-mgm {
+  background-color: var(--MainBG, #f5f6f7);
+  padding: 24px;
+  .ms-aside-container,
+  .ms-main-container {
+    height: calc(100vh - 170px);
+    background-color: var(--ContentBG, #ffffff);
+    .tree-style {
+      padding-top: 24px;
+    }
   }
-  .table-container {
-    height: calc(100% - 50px);
-  }
-  .el-table__fixed-right::before {
-    background: transparent;
+  .ms-main-container {
+    flex: 1;
+    position: relative;
+    padding: 24px 0 70px 24px;
   }
 }
 </style>
\ No newline at end of file
diff --git a/frontend/src/views/system/datasource/DsTree.vue b/frontend/src/views/system/datasource/DsTree.vue
index 7a8256f61e..ac396184f0 100644
--- a/frontend/src/views/system/datasource/DsTree.vue
+++ b/frontend/src/views/system/datasource/DsTree.vue
@@ -405,7 +405,6 @@ export default {
         }
         if (!(element.type in types)) {
           types[element.type] = [];
-          // newArr.push(...element, ...{ children: types[element.type] })
           newArr.push({
             id: element.type,
             name: element.typeDesc,
@@ -414,7 +413,6 @@ export default {
           });
         }
         types[element.type].push(element);
-        // newArr.children.push({ id: element.id, label: element.name })
       }
       return newArr;
     },
@@ -448,8 +446,8 @@ export default {
     },
     addDb({ type }) {
       this.$router.push({
-        name: "datasource-form",
-        params: { type },
+        path: "/ds-form",
+        query: { type },
       });
     },
     addFolderWithType(data) {
@@ -459,8 +457,8 @@ export default {
         this.editDriver = true;
       } else {
         this.$router.push({
-          name: "datasource-form",
-          params: { type: data.id },
+          path: "/ds-form",
+          query: { type: data.id },
         });
       }
     },
@@ -546,10 +544,13 @@ export default {
     },
     switchMain(component, componentParam, tData, dsTypes) {
       if (component === "DsForm") {
+        const { id, type, showModel } = componentParam;
         this.$router.push({
-          name: "datasource-form",
-          params: {
-            ...componentParam,
+          path: "/ds-form",
+          query: {
+            id,
+            type,
+            showModel,
             msgNodeId: this.msgNodeId,
           },
         });
diff --git a/frontend/src/views/system/task/filterUserRecord.vue b/frontend/src/views/system/task/filterUserRecord.vue
index b7ec0f0c78..3788b12815 100644
--- a/frontend/src/views/system/task/filterUserRecord.vue
+++ b/frontend/src/views/system/task/filterUserRecord.vue
@@ -200,6 +200,7 @@ export default {
       this.selectDatasets = [];
       this.datasetCahe = [];
       this.selectDatasetsCahe = [];
+      this.$refs.datasetTreeRef.filter();
       this.$emit("search", [], []);
     },
     clearOneFilter(index) {
@@ -211,6 +212,9 @@ export default {
         } else {
           this[ele] = [];
         }
+        if (ele === 'activeDataset') {
+          this.$refs.datasetTreeRef.filter();
+        }
       });
     },
     statusChange(value, type) {
diff --git a/frontend/src/views/system/task/form.vue b/frontend/src/views/system/task/form.vue
index 00e62591cc..1743dd271d 100644
--- a/frontend/src/views/system/task/form.vue
+++ b/frontend/src/views/system/task/form.vue
@@ -42,7 +42,7 @@
           </el-form-item>
           <div class="add-scope-cont" v-if="taskForm.type === 'add_scope'">
             <el-form-item
-              prop="incrementalUpdateType"
+              prop="type"
               :label="$t('dataset.incremental_update_type')"
             >
               <el-radio-group
@@ -315,12 +315,6 @@ export default {
             trigger: "change",
           },
         ],
-        incrementalUpdateType: [
-          {
-            required: true,
-            trigger: "change",
-          },
-        ],
       },
       cronEdit: false,
       sqlOption: {