diff --git a/frontend/src/components/deCustomCm/DeTextarea.vue b/frontend/src/components/deCustomCm/DeTextarea.vue
index 1d8045e351..b624d7eea6 100644
--- a/frontend/src/components/deCustomCm/DeTextarea.vue
+++ b/frontend/src/components/deCustomCm/DeTextarea.vue
@@ -1,6 +1,6 @@
 <template>
   <el-input
-    v-count="{value, maxlength}"
+    v-count="{value, maxlength, buttonDisabled}"
     :placeholder="$t('fu.search_bar.please_input')"
     show-word-limit
     :disabled="disabled"
@@ -16,14 +16,16 @@ export default {
   directives: {
     count: {
       update: function(el, binding) {
-        const lg = binding.value.value?.length || 0
+        const { value, maxlength, buttonDisabled } = binding.value
+        if (buttonDisabled) return
+        const lg = value?.length || 0
         const count = el.querySelector('.el-input__count')
         if (!count) return
         if (!lg) {
           if (count?.classList?.contains('no-zore')) {
             count.classList.remove('no-zore')
           }
-          count.innerHTML = `0/${binding.value.maxlength || 200}`
+          count.innerHTML = `0/${maxlength || 200}`
           return
         }
         if (el.querySelector('.no-zore')) {
@@ -34,7 +36,7 @@ export default {
         const num = document.createElement('span')
         const total = document.createElement('span')
         num.style.color = '#1F2329'
-        total.innerHTML = `/${binding.value.maxlength || 200}`
+        total.innerHTML = `/${maxlength || 200}`
         num.innerHTML = lg
         if (!newCount) return
         newCount.classList.add('el-input__count', 'no-zore')
@@ -44,6 +46,11 @@ export default {
       }
     }
   },
+  inject: {
+    elForm: {
+      default: ''
+    }
+  },
   props: {
     disabled: Boolean,
     value: String,
@@ -52,6 +59,13 @@ export default {
       default: 200
     }
   },
+  computed: {
+    buttonDisabled() {
+      return Object.prototype.hasOwnProperty.call(this.$options.propsData, 'disabled')
+        ? this.disabled
+        : (this.elForm || {}).disabled
+    }
+  },
   methods: {
     handleChange(val) {
       this.$emit('input', val)
diff --git a/frontend/src/lang/en.js b/frontend/src/lang/en.js
index 8ff6d4a01d..e740fde2f8 100644
--- a/frontend/src/lang/en.js
+++ b/frontend/src/lang/en.js
@@ -1737,6 +1737,8 @@ export default {
     please_set_driverClass: 'Please specify driver class'
   },
   datasource: {
+    data_source_configuration: 'Data Source Configuration',
+    data_source_table: 'Data Source Table',
     auth_method: 'Auth method',
     passwd: 'UserName Password',
     kerbers_info: 'Please make sure krb5 Conf, KeyTab key, added to path: /opt/dataease/conf',
diff --git a/frontend/src/lang/tw.js b/frontend/src/lang/tw.js
index e4ce6b8e57..716cf1b6a9 100644
--- a/frontend/src/lang/tw.js
+++ b/frontend/src/lang/tw.js
@@ -1737,6 +1737,8 @@ export default {
     please_set_driverClass: '請指定驅動類'
   },
   datasource: {
+    data_source_configuration: '數據源配寘',
+    data_source_table: '數據源錶',
     auth_method: '認證方式',
     passwd: '用戶名密碼',
     kerbers_info: '請確保 krb5.Conf、Keytab Key，已經添加到路徑：/opt/dataease/conf',
diff --git a/frontend/src/lang/zh.js b/frontend/src/lang/zh.js
index 5ed1e27d35..f5868e3cbb 100644
--- a/frontend/src/lang/zh.js
+++ b/frontend/src/lang/zh.js
@@ -1736,6 +1736,8 @@ export default {
     please_set_driverClass: '请指定驱动类'
   },
   datasource: {
+    data_source_configuration: '数据源配置',
+    data_source_table: '数据源表',
     auth_method: '认证方式',
     passwd: '用户名密码',
     kerbers_info: '请确保 krb5.Conf、Keytab Key，已经添加到路径：/opt/dataease/conf',
diff --git a/frontend/src/views/dataset/add/AddSQL.vue b/frontend/src/views/dataset/add/AddSQL.vue
index 25123e4a26..abab83dd20 100644
--- a/frontend/src/views/dataset/add/AddSQL.vue
+++ b/frontend/src/views/dataset/add/AddSQL.vue
@@ -158,7 +158,7 @@
             @click="typeSwitch(ele)"
           >
             <span
-              :title="ele.name"
+              :title="ele.remark"
               class="name"
             >{{ ele.name }}</span>
             <i
@@ -180,7 +180,7 @@
             class="table-or-field field"
           >
             <span
-              :title="ele.fieldName"
+              :title="ele.remarks"
               class="name"
             >{{ ele.fieldName }}</span>
             <i
diff --git a/frontend/src/views/dataset/data/TabDataPreview.vue b/frontend/src/views/dataset/data/TabDataPreview.vue
index c53f5b1d72..38e487b89f 100644
--- a/frontend/src/views/dataset/data/TabDataPreview.vue
+++ b/frontend/src/views/dataset/data/TabDataPreview.vue
@@ -80,6 +80,7 @@
 </template>
 
 <script>
+import _ from 'lodash'
 export default {
   name: 'TabDataPreview',
   props: {
@@ -134,6 +135,10 @@ export default {
   },
   mounted() {
     this.init()
+    window.addEventListener('resize', this.calHeight)
+  },
+  beforeDestroy() {
+    window.removeEventListener('resize', this.calHeight)
   },
   methods: {
     searchRow() {
@@ -146,13 +151,10 @@ export default {
     cancel() {
       this.$refs.setCount.doClose()
     },
-    calHeight() {
-      const that = this
-      setTimeout(function() {
-        const currentHeight = document.documentElement.clientHeight
-        that.height = currentHeight - 215
-      }, 10)
-    },
+    calHeight: _.debounce(function() {
+      const currentHeight = document.documentElement.clientHeight
+      this.height = currentHeight - 215
+    }, 200),
     reSearch() {
       if (
         !this.form.row ||
diff --git a/frontend/src/views/system/datasource/DsForm.vue b/frontend/src/views/system/datasource/DsForm.vue
index e93c0794ef..3b0bccb9d3 100644
--- a/frontend/src/views/system/datasource/DsForm.vue
+++ b/frontend/src/views/system/datasource/DsForm.vue
@@ -12,17 +12,7 @@
           class="el-icon-arrow-left"
           @click="logOutTips"
         />
-        {{
-          params &&
-            params.id &&
-            params.showModel &&
-            params.showModel === 'show' &&
-            !canEdit
-            ? $t('datasource.show_info')
-            : formType == 'add'
-              ? `${$t('commons.create') + typeMap}${$t('commons.datasource')}`
-              : $t('datasource.modify')
-        }}
+        {{ tips }}
       </span>
       <div class="apply">
         <template v-if="canEdit">
@@ -32,19 +22,13 @@
           >{{ $t('commons.cancel') }}
           </deBtn>
           <deBtn
-            v-if="
-              formType === 'add' ||
-                hasDataPermission('manage', params.privileges)
-            "
+            v-if="addOrHasDataPermission"
             secondary
             @click="validaDatasource"
           >{{ $t('commons.validate') }}
           </deBtn>
           <deBtn
-            v-if="
-              formType === 'add' ||
-                hasDataPermission('manage', params.privileges)
-            "
+            v-if="addOrHasDataPermission"
             type="primary"
             @click="save"
           >{{ $t('commons.save') }}
@@ -52,257 +36,38 @@
         </template>
         <template v-else>
           <deBtn
-            v-if="
-              formType === 'add'
-                ? true
-                : hasDataPermission('manage', params.privileges)
-            "
+            v-if="addOrHasDataPermission"
             @click="validaDatasource"
           >{{ $t('commons.validate') }}
           </deBtn>
         </template>
       </div>
     </div>
-    <div class="de-ds-cont">
-      <div class="de-ds-inner">
-        <div class="w600">
-          <el-form
-            v-if="positionCheck('appMarket')"
-            ref="attachParamsForm"
-            :model="attachForm"
-            :rules="attachRule"
-            class="de-form-item"
-            label-width="180px"
-            label-position="right"
-          >
-            <div
-              class="de-row-rules"
-              style="margin: 0 0 16px 0;"
-            >
-              <span>{{ $t('datasource.basic_info') }}</span>
-            </div>
-            <el-form-item
-              :label="$t('app_template.panel_position')"
-              prop="panelGroupPid"
-            >
-              <treeselect
-                v-model="attachForm.panelGroupPid"
-                :disabled="baseInfoDisabledCheck(outerParams.panelPrivileges)"
-                :clearable="false"
-                :options="panelGroupList"
-                :normalizer="normalizer"
-                :placeholder="$t('chart.select_group')"
-                :no-children-text="$t('commons.treeselect.no_children_text')"
-                :no-options-text="$t('commons.treeselect.no_options_text')"
-                :no-results-text="$t('commons.treeselect.no_results_text')"
-              />
-            </el-form-item>
-            <el-form-item
-              :label="$t('app_template.panel_name')"
-              prop="panelName"
-            >
-              <el-input
-                v-model="attachForm.panelName"
-                :disabled="baseInfoDisabledCheck(outerParams.panelPrivileges)"
-              />
-            </el-form-item>
-            <el-form-item
-              :label="$t('app_template.dataset_group_position')"
-              prop="datasetGroupPid"
-            >
-              <treeselect
-                v-model="attachForm.datasetGroupPid"
-                :disabled="baseInfoDisabledCheck(outerParams.datasetPrivileges)"
-                :clearable="false"
-                :options="datasetGroupList"
-                :normalizer="normalizer"
-                :placeholder="$t('chart.select_group')"
-                :no-children-text="$t('commons.treeselect.no_children_text')"
-                :no-options-text="$t('commons.treeselect.no_options_text')"
-                :no-results-text="$t('commons.treeselect.no_results_text')"
-              />
-            </el-form-item>
-            <el-form-item
-              :label="$t('app_template.dataset_group_name')"
-              prop="datasetGroupName"
-            >
-              <el-input
-                v-model="attachForm.datasetGroupName"
-                :disabled="baseInfoDisabledCheck(outerParams.datasetPrivileges)"
-              />
-            </el-form-item>
-          </el-form>
-
-          <el-form
-            ref="dsForm"
-            :model="form"
-            :rules="rule"
-            size="small"
-            :disabled="disabled"
-            class="de-form-item"
-            label-width="180px"
-            label-position="right"
-          >
-            <div class="de-row-rules">
-              <span>{{
-                positionCheck('appMarket') ? $t('app_template.datasource_info') : $t('datasource.basic_info')
-              }}</span>
-            </div>
-            <el-form-item
-              :label="$t('datasource.display_name')"
-              prop="name"
-            >
-              <el-input
-                v-model="form.name"
-                autocomplete="off"
-                :placeholder="$t('datasource.input_name')"
-              />
-            </el-form-item>
-            <el-form-item
-              :label="$t('datasource.type')"
-              prop="type"
-            >
-              <el-select
-                v-model="form.type"
-                :placeholder="$t('datasource.please_choose_type')"
-                style="width: 100%"
-                disabled
-              >
-                <el-option
-                  v-for="item in dsTypes"
-                  :key="item.type"
-                  :label="item.name"
-                  :value="item.type"
-                />
-              </el-select>
-            </el-form-item>
-            <el-form-item
-              :label="$t('commons.description')"
-              prop="desc"
-            >
-              <deTextarea
-                v-model="form.desc"
-                :maxlength="50"
-                class="w100-textarea"
-              />
-            </el-form-item>
-
-            <el-form-item
-              v-if="datasourceType.isJdbc"
-              :label="$t('driver.driver')"
-            >
-              <el-select
-                v-model="form.configuration.customDriver"
-                :placeholder="$t('driver.please_choose_driver')"
-                class="select-width"
-                style="width: 100%"
-                filterable
-              >
-                <el-option
-                  v-for="item in driverList"
-                  :key="item.id"
-                  :label="item.name"
-                  :value="item.id"
-                  :disabled="!item.driverClass"
-                />
-              </el-select>
-            </el-form-item>
-
-            <ds-configuration
-              v-if="!datasourceType.isPlugin"
-              ref="dsConfig"
-              :datasource-type="datasourceType"
-              :form="form"
-              :disabled="disabled"
-            />
-            <plugin-com
-              v-if="datasourceType.isPlugin"
-              ref="pluginDsConfig"
-              :component-name="datasourceType.type"
-              :obj="{ form, disabled }"
-            />
-          </el-form>
-        </div>
-      </div>
-    </div>
-    <div
-      v-if="positionCheck('appMarket')"
-      class="de-ds-bottom"
-    >
-      <div
-        class="apply"
-        style="width: 100%"
-      >
-        <template v-if="canEdit">
-          <deBtn
-            secondary
-            @click="closeDraw"
-          >{{ $t('commons.cancel') }}
-          </deBtn>
-          <deBtn
-            v-if="
-              formType === 'add' ||
-                hasDataPermission('manage', params.privileges)
-            "
-            secondary
-            @click="validaDatasource"
-          >{{ $t('commons.validate') }}
-          </deBtn>
-          <deBtn
-            v-if="
-              formType === 'add' ||
-                hasDataPermission('manage', params.privileges)
-            "
-            type="primary"
-            @click="save"
-          >{{ $t('commons.save') }}
-          </deBtn>
-        </template>
-        <template v-else>
-          <deBtn
-            v-if="
-              formType === 'add'
-                ? true
-                : hasDataPermission('manage', params.privileges)
-            "
-            @click="validaDatasource"
-          >{{ $t('commons.validate') }}
-          </deBtn>
-        </template>
-      </div>
+    <div style="height: calc(100% - 56px)">
+      <DsFormContent
+        ref="DsFormContent"
+        :outer-params="outerParams"
+        :reference-position="referencePosition"
+        :form-type.sync="formType"
+        :type-map.sync="typeMap"
+        :can-edit.sync="canEdit"
+        :form-loading.sync="formLoading"
+        @refreshType="refreshType"
+        @closeDraw="closeDraw"
+        @setParams="setParams"
+      />
     </div>
   </div>
 </template>
 
 <script>
-import {
-  addDs,
-  editDs,
-  getSchema,
-  validateDs,
-  validateDsById,
-  checkApiDatasource,
-  listDriverByType,
-  getDatasourceDetail
-} from '@/api/system/datasource'
-import { $confirm } from '@/utils/message'
-import i18n from '@/lang/index'
-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 DsFormContent from './DsFormContent.vue'
 import msgCfm from '@/components/msgCfm'
-import { dsGroupTree } from '@/api/dataset/dataset'
-import { appApply, appEdit, groupTree } from '@/api/panel/panel'
-import { deepCopy } from '@/components/canvas/utils/utils'
-import { hasDataPermission } from '@/utils/permission'
 
 export default {
   name: 'DsForm',
   components: {
-    DsConfiguration,
-    PluginCom,
-    deTextarea
+    DsFormContent
   },
   mixins: [msgCfm],
   props: {
@@ -317,800 +82,48 @@ export default {
   },
   data() {
     return {
-      appMarketEdit: true,
-      attachRule: {
-        panelName: [
-          {
-            required: true,
-            min: 2,
-            max: 25,
-            message: i18n.t('datasource.input_limit_2_25', [2, 25]),
-            trigger: 'blur'
-          }
-        ],
-        datasetGroupName: [
-          {
-            required: true,
-            min: 2,
-            max: 25,
-            message: i18n.t('datasource.input_limit_2_25', [2, 25]),
-            trigger: 'blur'
-          }
-        ],
-        datasetGroupPid: [{ required: true, message: i18n.t('chart.select_group'), trigger: 'blur' }],
-        panelGroupPid: [{ required: true, message: i18n.t('chart.select_group'), trigger: 'blur' }]
-      },
-      panelGroupList: [],
-      datasetGroupList: [],
-      attachForm: {
-        appTemplateId: '',
-        panelGroupPid: null,
-        panelName: '',
-        datasetGroupPid: null,
-        datasetGroupId: null,
-        datasetGroupName: ''
-      },
-      disabled: false,
-      form: {
-        configuration: {
-          initialPoolSize: 5,
-          extraParams: '',
-          minPoolSize: 5,
-          maxPoolSize: 50,
-          maxIdleTime: 30,
-          acquireIncrement: 5,
-          idleConnectionTestPeriod: 5,
-          connectTimeout: 5,
-          customDriver: 'default',
-          queryTimeout: 30,
-          host: ''
-        },
-        apiConfiguration: []
-      },
-      datasourceType: {},
-      rule: {
-        name: [
-          {
-            required: true,
-            validator: this.nameRepeat,
-            message: i18n.t('datasource.input_name'),
-            trigger: 'blur'
-          },
-          {
-            min: 2,
-            max: 25,
-            message: i18n.t('datasource.input_limit_2_25', [2, 25]),
-            trigger: 'blur'
-          }
-        ],
-        desc: [
-          {
-            min: 0,
-            max: 50,
-            message: i18n.t('datasource.input_limit', { num: '0~50' }),
-            trigger: 'blur'
-          }
-        ],
-        type: [
-          {
-            required: true,
-            message: i18n.t('datasource.please_choose_type'),
-            trigger: 'blur'
-          }
-        ],
-        'configuration.dataBase': [
-          {
-            required: true,
-            message: i18n.t('datasource.please_input_data_base'),
-            trigger: 'blur'
-          }
-        ],
-        'configuration.connectionType': [
-          {
-            required: true,
-            message: i18n.t('datasource.please_select_oracle_type'),
-            trigger: 'blur'
-          }
-        ],
-        'configuration.username': [
-          {
-            required: true,
-            message: i18n.t('datasource.please_input_user_name'),
-            trigger: 'blur'
-          }
-        ],
-        'configuration.password': [
-          {
-            required: true,
-            message: i18n.t('datasource.please_input_password'),
-            trigger: 'blur'
-          }
-        ],
-        'configuration.host': [
-          {
-            required: true,
-            message: i18n.t('datasource.please_input_host'),
-            trigger: 'blur'
-          }
-        ],
-        'configuration.url': [
-          {
-            required: true,
-            message: i18n.t('datasource.please_input_url'),
-            trigger: 'blur'
-          }
-        ],
-        'configuration.port': [
-          {
-            required: true,
-            message: i18n.t('datasource.please_input_port'),
-            trigger: 'blur'
-          }
-        ],
-        'configuration.initialPoolSize': [
-          {
-            required: true,
-            message: i18n.t('datasource.please_input_initial_pool_size'),
-            trigger: 'blur'
-          }
-        ],
-        'configuration.minPoolSize': [
-          {
-            required: true,
-            message: i18n.t('datasource.please_input_min_pool_size'),
-            trigger: 'blur'
-          }
-        ],
-        'configuration.maxPoolSize': [
-          {
-            required: true,
-            message: i18n.t('datasource.please_input_max_pool_size'),
-            trigger: 'blur'
-          }
-        ],
-        'configuration.maxIdleTime': [
-          {
-            required: true,
-            message: i18n.t('datasource.please_input_max_idle_time'),
-            trigger: 'blur'
-          }
-        ],
-        'configuration.acquireIncrement': [
-          {
-            required: true,
-            message: i18n.t('datasource.please_input_acquire_increment'),
-            trigger: 'blur'
-          }
-        ],
-        'configuration.connectTimeout': [
-          {
-            required: true,
-            message: i18n.t('datasource.please_input_connect_timeout'),
-            trigger: 'blur'
-          }
-        ],
-        url: [
-          {
-            required: true,
-            message: i18n.t('datasource.please_input_url'),
-            trigger: 'blur'
-          }
-        ],
-        dataPath: [
-          {
-            required: true,
-            message: i18n.t('datasource.please_input_dataPath'),
-            trigger: 'blur'
-          }
-        ]
-      },
-      schemas: [],
       typeMap: '',
       canEdit: false,
-      originConfiguration: {},
-      edit_api_item: false,
-      add_api_item: true,
-      active: 0,
-      defaultApiItem: {
-        name: '',
-        url: '',
-        method: 'GET',
-        request: {
-          headers: [{}],
-          body: {
-            type: '',
-            raw: '',
-            kvs: []
-          }
-        },
-        fields: []
-      },
-      apiItem: {
-        status: '',
-        name: '',
-        url: '',
-        method: 'GET',
-        dataPath: '',
-        request: {
-          headers: [],
-          body: {
-            type: '',
-            raw: '',
-            kvs: []
-          },
-          authManager: {}
-        },
-        fields: []
-      },
-      reqOptions: [
-        { id: 'GET', label: 'GET' },
-        { id: 'POST', label: 'POST' }
-      ],
-      loading: false,
       formLoading: false,
-      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.value') + '(' + this.$t('dataset.float') + ')',
-          value: 3
-        },
-        { label: this.$t('dataset.location'), value: 5 }
-      ],
-      height: 500,
-      disabledNext: false,
-      driverList: [],
-      tData: [],
-      dsTypes: [],
-      msgNodeId: '',
       params: {},
       formType: 'add'
     }
   },
-  async created() {
-    await this.datasourceTypes()
-    this.queryTreeData()
-    let { id, showModel, type, name } = this.$route.query
-    this.params = this.$route.query
-    const appMarketCheck = this.positionCheck('appMarket')
-    if (appMarketCheck) {
-      this.appMarketEdit = this.outerParams.appMarketEdit === undefined ? true : this.outerParams.appMarketEdit
-      id = this.outerParams.datasourceId
-      showModel = this.outerParams.showModel
-      type = this.outerParams.datasourceType
-      name = this.outerParams.name
-      this.attachForm.appTemplateId = this.outerParams.appTemplateId
-      this.attachForm.panelGroupPid = this.outerParams.panelGroupPid
-      this.attachForm.panelId = this.outerParams.panelId
-      this.attachForm.panelName = this.outerParams.panelName
-      this.attachForm.datasetGroupPid = this.outerParams.datasetGroupPid ? this.outerParams.datasetGroupPid : '0'
-      this.attachForm.datasetGroupId = this.outerParams.datasetGroupId
-      this.attachForm.datasetGroupName = this.outerParams.datasetGroupName
-      this.params = {
-        id: this.outerParams.datasourceId,
-        showModel: this.outerParams.showModel,
-        type: this.outerParams.datasourceType,
-        name: this.outerParams.name,
-        privileges: this.outerParams.datasourcePrivileges
-      }
-      this.getPanelGroupTree()
-      this.getDatasetGroupTree()
+  computed: {
+    addOrHasDataPermission() {
+      return this.formType === 'add' || this.hasDataPermission('manage', this.params.privileges)
+    },
+    tips() {
+      const { id, showModel } = this.params
+      return id && showModel === 'show' && !this.canEdit
+        ? this.$t('datasource.show_info')
+        : this.formType === 'add'
+          ? `${this.$t('commons.create') + this.typeMap}${this.$t('commons.datasource')}`
+          : this.$t('datasource.modify')
     }
-    if (id) {
-      await this.getDatasourceDetail(id, showModel)
-      this.edit(this.params)
-      this.changeType(true)
-    } else {
-      this.canEdit = true
-      if (type) {
-        this.typeMap = name
-        this.setType()
-        this.changeType()
-      }
-    }
-    this.disabled = appMarketCheck ? !this.appMarketEdit : (Boolean(id) && showModel === 'show' && !this.canEdit)
   },
   methods: {
-    baseInfoDisabledCheck(privileges) {
-      return !(this.formType === 'add' ? true : hasDataPermission('manage', privileges))
+    closeDraw() {
+      this.$emit('closeDraw')
     },
-    normalizer(node) {
-      // 去掉children=null的属性
-      if (node.children === null || node.children === 'null') {
-        delete node.children
-      }
+    refreshType(form) {
+      this.$emit('refresh-type', form)
     },
-    getDatasetGroupTree() {
-      dsGroupTree({ nodeType: 'group', excludedId: this.attachForm.datasetGroupId }).then(res => {
-        this.datasetGroupList = [{
-          id: '0',
-          name: this.$t('dataset.dataset_group'),
-          label: this.$t('dataset.dataset_group'),
-          pid: '0',
-          privileges: 'grant,manage,use',
-          type: 'group',
-          children: res.data
-        }]
-      })
-    },
-    getPanelGroupTree() {
-      groupTree({ nodeType: 'folder' }).then(res => {
-        this.panelGroupList = res.data
-        if (!this.attachForm.panelGroupPid && this.panelGroupList && this.panelGroupList.length > 0) {
-          this.attachForm.panelGroupPid = this.panelGroupList[0].id
-        }
-      })
+    setParams(params) {
+      this.params = params
     },
     positionCheck(referencePosition) {
       return this.referencePosition === referencePosition
     },
-    datasourceTypes() {
-      return listDatasourceType().then((res) => {
-        this.dsTypes = res.data || []
-      })
-    },
-    getDatasourceDetail(id, showModel) {
-      this.formLoading = true
-      return getDatasourceDetail(id).then((res) => {
-        this.params = { ...res.data, showModel }
-      }).finally(() => {
-        this.formLoading = false
-      })
-    },
-    queryTreeData() {
-      listDatasource().then((res) => {
-        this.tData = this.buildTree(res.data)
-      })
-    },
-    buildTree(array) {
-      const types = {}
-      const newArr = []
-      for (let index = 0; index < array.length; index++) {
-        const element = array[index]
-        if (this.msgNodeId) {
-          if (element.id === this.msgNodeId) {
-            element.msgNode = true
-          }
-        }
-        if (!(element.type in types)) {
-          types[element.type] = []
-          // newArr.push(...element, ...{ children: types[element.type] })
-          newArr.push({
-            id: element.type,
-            name: element.typeDesc,
-            type: 'folder',
-            children: types[element.type]
-          })
-        }
-        types[element.type].push(element)
-        // newArr.children.push({ id: element.id, label: element.name })
-      }
-      return newArr
-    },
-    setType() {
-      this.$set(this.form, 'type', this.params.type)
-      this.form.configuration = {
-        initialPoolSize: 5,
-        extraParams: '',
-        minPoolSize: 5,
-        maxPoolSize: 50,
-        maxIdleTime: 30,
-        acquireIncrement: 5,
-        idleConnectionTestPeriod: 5,
-        connectTimeout: 5,
-        customDriver: 'default',
-        queryTimeout: 30
-      }
-      if (this.form.type === 'oracle') {
-        this.$set(this.form.configuration, 'charset', 'Default')
-        this.$set(this.form.configuration, 'targetCharset', 'Default')
-        this.$set(this.form.configuration, 'connectionType', 'sid')
-      }
-    },
-    changeEdit() {
-      this.canEdit = true
-      this.formType = 'modify'
-    },
-    edit(row) {
-      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)
-      } else {
-        this.form.configuration = JSON.parse(this.form.configuration)
-        this.originConfiguration = JSON.stringify(this.form.configuration)
-      }
-      this.changeEdit()
-    },
-    reset() {
-      this.$refs.dsForm.resetFields()
+    validaDatasource() {
+      this.$refs.DsFormContent.validaDatasource()
     },
     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.$message.error(i18n.t('datasource.please_choose_schema'))
-        return
-      }
-      if (
-        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
-      }
-      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
-      }
-      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
-              }
-              const configuration = JSON.parse(child.configuration)
-              if (!configuration) {
-                return
-              }
-              switch (this.form.type) {
-                case 'mysql':
-                case 'TiDB':
-                case 'StarRocks':
-                case 'hive':
-                case 'mariadb':
-                case 'ds_doris':
-                case 'ck':
-                case 'mongo':
-                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)
-                  }
-                  break
-                case 'pg':
-                case 'sqlServer':
-                case 'redshift':
-                case 'oracle':
-                case 'db2':
-                  if (
-                    configuration.host === this.form.configuration.host &&
-                    configuration.dataBase ===
-                    this.form.configuration.dataBase &&
-                    configuration.port === this.form.configuration.port &&
-                    configuration.schema === this.form.configuration.schema
-                  ) {
-                    repeatDsName.push(child.name)
-                    repeat = true
-                  }
-                  break
-                case 'es':
-                  if (configuration.url === this.form.configuration.url) {
-                    repeatDsName.push(child.name)
-                    repeat = true
-                  }
-                  break
-                default:
-                  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
-                }
-                const configuration = JSON.parse(child.configuration)
-                if (!configuration) {
-                  return
-                }
-                if (configuration.schema !== null) {
-                  if (
-                    configuration.schema === this.form.configuration.schema &&
-                    configuration.host === this.form.configuration.host &&
-                    configuration.dataBase ===
-                    this.form.configuration.dataBase &&
-                    configuration.port === this.form.configuration.port
-                  ) {
-                    repeat = true
-                    repeatDsName.push(child.name)
-                  }
-                } else {
-                  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)
-                  }
-                }
-              })
-            }
-          })
-        }
-      }
-      let status = null
-      if (this.datasourceType.isPlugin) {
-        status = this.$refs['pluginDsConfig'].callPluginInner({
-          methodName: 'validate'
-        })
-      } else {
-        this.$refs['dsConfig'].$refs['DsConfig'].validate((valid) => {
-          status = valid
-        })
-      }
-      if (!status) {
-        return
-      }
-      if (this.positionCheck('appMarket')) {
-        this.$refs.attachParamsForm.validate(valid => {
-          if (!valid) {
-            return false
-          }
-        }
-        )
-      }
-      this.$refs.dsForm.validate((valid) => {
-        if (!valid) {
-          return false
-        }
-        let 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
-          }
-          form.apiConfiguration.forEach((item) => {
-            delete item.status
-          })
-          form.configuration = JSON.stringify(form.apiConfiguration)
-        } else {
-          form.configuration = JSON.stringify(form.configuration)
-        }
-        const isAppMarket = this.positionCheck('appMarket')
-        let appApplyForm
-        if (isAppMarket) {
-          if (typeof form.desc === 'object') {
-            form.desc = ''
-          }
-          appApplyForm = {
-            ...this.attachForm,
-            datasourceList: [deepCopy(form)]
-          }
-          method = this.formType === 'add' ? appApply : appEdit
-        }
-        if (
-          this.formType === 'modify' &&
-          this.originConfiguration !== form.configuration
-        ) {
-          if (repeat && !isAppMarket) {
-            $confirm(
-              i18n.t('datasource.repeat_datasource_msg') +
-              '[' +
-              repeatDsName.join(',') +
-              '], ' +
-              i18n.t('datasource.confirm_save'),
-              () => {
-                $confirm(i18n.t('datasource.edit_datasource_msg'), () => {
-                  this.method(method, form)
-                })
-              }
-            )
-          } else {
-            $confirm(i18n.t('datasource.edit_datasource_msg'), () => {
-              isAppMarket ? this.appApplyMethod(method, appApplyForm) : this.method(method, form)
-            })
-          }
-          return
-        }
-        if (repeat && !isAppMarket) {
-          $confirm(
-            i18n.t('datasource.repeat_datasource_msg') +
-            '[' +
-            repeatDsName.join(',') +
-            '], ' +
-            i18n.t('datasource.confirm_save'),
-            () => {
-              this.method(method, form)
-            }
-          )
-        } else {
-          isAppMarket ? this.appApplyMethod(method, appApplyForm) : this.method(method, form)
-        }
-      })
-    },
-    appApplyMethod(method, form) {
-      this.formLoading = true
-      method(form).then((res) => {
-        this.$success(i18n.t('commons.save_success'))
-        if (this.formType === 'add') {
-          this.$router.push({ name: 'panel', params: res.data })
-        } else {
-          this.closeDraw()
-        }
-      }).finally(() => {
-        this.formLoading = false
-      })
-    },
-    method(method, form) {
-      this.formLoading = true
-      method(form).then((res) => {
-        this.$success(i18n.t('commons.save_success'))
-        this.refreshType(form)
-        this.backToList()
-      }).finally(() => {
-        this.formLoading = false
-      })
-    },
-    getSchema() {
-      this.$refs.dsForm.validate((valid) => {
-        if (valid) {
-          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')
-          })
-        } else {
-          return false
-        }
-      })
-    },
-    validaDatasource() {
-      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.configuration.port <= 0
-      ) {
-        this.openMessageSuccess('datasource.port_no_less_then_0', 'error')
-        return
-      }
-      let status = null
-      if (this.datasourceType.isPlugin) {
-        status = this.$refs['pluginDsConfig'].callPluginInner({
-          methodName: 'validate'
-        })
-      } else {
-        this.$refs['dsConfig'].$refs['DsConfig'].validate((valid) => {
-          status = valid
-          if (!valid) {
-            return
-          }
-        })
-      }
-      if (!status) {
-        return
-      }
-      if (this.positionCheck('appMarket')) {
-        this.$refs.attachParamsForm.validate(valid => {
-          if (!valid) {
-            return false
-          }
-        }
-        )
-      }
-      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)
-          } else {
-            data.configuration = JSON.stringify(data.configuration)
-          }
-          if (data.showModel === 'show' && !this.canEdit) {
-            validateDsById(data.id).then((res) => {
-              if (res.success) {
-                this.openMessageSuccess('datasource.validate_success')
-              } else {
-                if (res.message.length < 2500) {
-                  this.openMessageSuccess(res.message, 'error')
-                } else {
-                  this.openMessageSuccess(
-                    res.message.substring(0, 2500) + '......',
-                    'error'
-                  )
-                }
-              }
-              this.refreshType(data)
-            })
-          } else {
-            validateDs(data)
-              .then((res) => {
-                if (res.success) {
-                  this.$success(i18n.t('datasource.validate_success'))
-                } else {
-                  if (data.type === 'api') {
-                    this.form.apiConfiguration = res.data.apiConfiguration
-                  }
-                  if (res.message.length < 2500) {
-                    this.openMessageSuccess(res.message, 'error')
-                  } else {
-                    this.openMessageSuccess(
-                      res.message.substring(0, 2500) + '......',
-                      'error'
-                    )
-                  }
-                }
-              })
-              .catch((res) => {
-                this.openMessageSuccess(res.message, 'error')
-              })
-          }
-        } else {
-          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'
-          }
-          this.datasourceType = this.dsTypes[i]
-          if (this.datasourceType.isJdbc) {
-            listDriverByType(this.datasourceType.type).then((res) => {
-              this.driverList = []
-              this.driverList.push({
-                id: 'default',
-                name: 'Default',
-                driverClass: 'Default'
-              })
-              this.driverList = this.driverList.concat(res.data)
-            })
-          }
-        }
-      }
+      this.$refs.DsFormContent.save()
     },
     backToList() {
       this.$router.push('/datasource/index')
     },
-
-    closeDraw() {
-      this.$emit('closeDraw')
-    },
     logOutTips() {
       const options = {
         title: 'role.tips',
@@ -1122,119 +135,6 @@ export default {
         }
       }
       this.handlerConfirm(options)
-    },
-    refreshType(form) {
-      this.$emit('refresh-type', form)
-    },
-    next() {
-      if (this.active === 1) {
-        let hasRepeatName = false
-        if (this.add_api_item) {
-          this.form.apiConfiguration.forEach((item) => {
-            if (item.name === this.apiItem.name) {
-              hasRepeatName = true
-            }
-          })
-        } else {
-          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
-            }
-          }
-        }
-        if (hasRepeatName) {
-          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
-            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.data)
-              })
-              .catch((res) => {
-                this.loading = false
-                this.disabledNext = false
-              })
-          } else {
-            this.apiItem.fields = []
-            return false
-          }
-        })
-      }
-    },
-    before() {
-      this.active--
-    },
-    closeEditItem() {
-      this.active = 0
-      this.edit_api_item = false
-    },
-    saveItem() {
-      this.active = 0
-      this.edit_api_item = false
-      if (this.add_api_item) {
-        this.form.apiConfiguration.push(this.apiItem)
-      }
-    },
-    addApiItem(item) {
-      this.$nextTick(() => {
-        this.$refs.apiItem.clearValidate()
-      })
-      if (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.active = 1
-      this.edit_api_item = true
-    },
-    deleteItem(item) {
-      this.form.apiConfiguration.splice(
-        this.form.apiConfiguration.indexOf(item),
-        1
-      )
-    },
-    validateApi(item) {
-      this.$refs.apiItem.validate((valid) => {
-        if (valid) {
-          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.data)
-            })
-            .catch((res) => {
-              this.loading = false
-            })
-        } else {
-          return false
-        }
-      })
-    },
-    handleClick(tab, event) {
     }
   }
 }
@@ -1247,7 +147,7 @@ export default {
   .de-ds-cont {
     display: flex;
     width: 100%;
-    height: calc(100% - 56px);
+    height: 100%;
     overflow-y: auto;
     overflow-x: hidden;
     padding: 12px 24px 24px 24px;
@@ -1315,29 +215,5 @@ export default {
       cursor: pointer;
     }
   }
-
-  .de-ds-cont {
-    display: flex;
-    width: 100%;
-    height: calc(100% - 56px);
-    padding: 12px 24px 24px 24px;
-    background: #f5f6f7;
-
-    .de-ds-inner {
-      width: 100%;
-      height: 100;
-      background: #fff;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      overflow-y: auto;
-    }
-
-    .w600 {
-      width: 600px;
-      height: 100%;
-      padding-top: 24px;
-    }
-  }
 }
 </style>
diff --git a/frontend/src/views/system/datasource/DsFormContent.vue b/frontend/src/views/system/datasource/DsFormContent.vue
new file mode 100644
index 0000000000..9ec9e5fa07
--- /dev/null
+++ b/frontend/src/views/system/datasource/DsFormContent.vue
@@ -0,0 +1,1209 @@
+<template>
+  <div style="height: 100%">
+    <div class="de-ds-cont">
+      <div class="de-ds-inner">
+        <div class="w600">
+          <el-form
+            v-if="positionCheck('appMarket')"
+            ref="attachParamsForm"
+            :model="attachForm"
+            :rules="attachRule"
+            class="de-form-item"
+            label-width="180px"
+            label-position="right"
+          >
+            <div
+              class="de-row-rules"
+              style="margin: 0 0 16px 0;"
+            >
+              <span>{{ $t('datasource.basic_info') }}</span>
+            </div>
+            <el-form-item
+              :label="$t('app_template.panel_position')"
+              prop="panelGroupPid"
+            >
+              <treeselect
+                v-model="attachForm.panelGroupPid"
+                :disabled="baseInfoDisabledCheck(outerParams.panelPrivileges)"
+                :clearable="false"
+                :options="panelGroupList"
+                :normalizer="normalizer"
+                :placeholder="$t('chart.select_group')"
+                :no-children-text="$t('commons.treeselect.no_children_text')"
+                :no-options-text="$t('commons.treeselect.no_options_text')"
+                :no-results-text="$t('commons.treeselect.no_results_text')"
+              />
+            </el-form-item>
+            <el-form-item
+              :label="$t('app_template.panel_name')"
+              prop="panelName"
+            >
+              <el-input
+                v-model="attachForm.panelName"
+                :disabled="baseInfoDisabledCheck(outerParams.panelPrivileges)"
+              />
+            </el-form-item>
+            <el-form-item
+              :label="$t('app_template.dataset_group_position')"
+              prop="datasetGroupPid"
+            >
+              <treeselect
+                v-model="attachForm.datasetGroupPid"
+                :disabled="baseInfoDisabledCheck(outerParams.datasetPrivileges)"
+                :clearable="false"
+                :options="datasetGroupList"
+                :normalizer="normalizer"
+                :placeholder="$t('chart.select_group')"
+                :no-children-text="$t('commons.treeselect.no_children_text')"
+                :no-options-text="$t('commons.treeselect.no_options_text')"
+                :no-results-text="$t('commons.treeselect.no_results_text')"
+              />
+            </el-form-item>
+            <el-form-item
+              :label="$t('app_template.dataset_group_name')"
+              prop="datasetGroupName"
+            >
+              <el-input
+                v-model="attachForm.datasetGroupName"
+                :disabled="baseInfoDisabledCheck(outerParams.datasetPrivileges)"
+              />
+            </el-form-item>
+          </el-form>
+
+          <el-form
+            ref="dsForm"
+            :model="form"
+            :rules="rule"
+            size="small"
+            :disabled="disabled"
+            class="de-form-item"
+            label-width="180px"
+            label-position="right"
+          >
+            <div class="de-row-rules">
+              <span>{{
+                positionCheck('appMarket') ? $t('app_template.datasource_info') : $t('datasource.basic_info')
+              }}</span>
+            </div>
+            <el-form-item
+              :label="$t('datasource.display_name')"
+              prop="name"
+            >
+              <el-input
+                v-model="form.name"
+                autocomplete="off"
+                :placeholder="$t('datasource.input_name')"
+              />
+            </el-form-item>
+            <el-form-item
+              :label="$t('datasource.type')"
+              prop="type"
+            >
+              <el-select
+                v-model="form.type"
+                :placeholder="$t('datasource.please_choose_type')"
+                style="width: 100%"
+                disabled
+              >
+                <el-option
+                  v-for="item in dsTypes"
+                  :key="item.type"
+                  :label="item.name"
+                  :value="item.type"
+                />
+              </el-select>
+            </el-form-item>
+            <el-form-item
+              :label="$t('commons.description')"
+              prop="desc"
+            >
+              <deTextarea
+                v-model="form.desc"
+                :maxlength="50"
+                class="w100-textarea"
+              />
+            </el-form-item>
+
+            <el-form-item
+              v-if="datasourceType.isJdbc"
+              :label="$t('driver.driver')"
+            >
+              <el-select
+                v-model="form.configuration.customDriver"
+                :placeholder="$t('driver.please_choose_driver')"
+                class="select-width"
+                style="width: 100%"
+                filterable
+              >
+                <el-option
+                  v-for="item in driverList"
+                  :key="item.id"
+                  :label="item.name"
+                  :value="item.id"
+                  :disabled="!item.driverClass"
+                />
+              </el-select>
+            </el-form-item>
+
+            <ds-configuration
+              v-if="!datasourceType.isPlugin"
+              ref="dsConfig"
+              :datasource-type="datasourceType"
+              :form="form"
+              :disabled="disabled"
+            />
+            <plugin-com
+              v-if="datasourceType.isPlugin"
+              ref="pluginDsConfig"
+              :component-name="datasourceType.type"
+              :obj="{ form, disabled }"
+            />
+          </el-form>
+        </div>
+      </div>
+    </div>
+    <div
+      v-if="positionCheck('appMarket')"
+      class="de-ds-bottom"
+    >
+      <div
+        class="apply"
+        style="width: 100%"
+      >
+        <template v-if="canEdit">
+          <deBtn
+            secondary
+            @click="closeDraw"
+          >{{ $t('commons.cancel') }}
+          </deBtn>
+          <deBtn
+            v-if="
+              formType === 'add' ||
+                hasDataPermission('manage', params.privileges)
+            "
+            secondary
+            @click="validaDatasource"
+          >{{ $t('commons.validate') }}
+          </deBtn>
+          <deBtn
+            v-if="
+              formType === 'add' ||
+                hasDataPermission('manage', params.privileges)
+            "
+            type="primary"
+            @click="save"
+          >{{ $t('commons.save') }}
+          </deBtn>
+        </template>
+        <template v-else>
+          <deBtn
+            v-if="
+              formType === 'add'
+                ? true
+                : hasDataPermission('manage', params.privileges)
+            "
+            @click="validaDatasource"
+          >{{ $t('commons.validate') }}
+          </deBtn>
+        </template>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import {
+  addDs,
+  editDs,
+  getSchema,
+  validateDs,
+  validateDsById,
+  checkApiDatasource,
+  listDriverByType,
+  getDatasourceDetail
+} from '@/api/system/datasource'
+import { $confirm } from '@/utils/message'
+import i18n from '@/lang/index'
+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'
+import { dsGroupTree } from '@/api/dataset/dataset'
+import { appApply, appEdit, groupTree } from '@/api/panel/panel'
+import { deepCopy } from '@/components/canvas/utils/utils'
+import { hasDataPermission } from '@/utils/permission'
+
+export default {
+  name: 'DsForm',
+  components: {
+    DsConfiguration,
+    PluginCom,
+    deTextarea
+  },
+  mixins: [msgCfm],
+  props: {
+    referencePosition: {
+      type: String,
+      default: 'datasource'
+    },
+    outerParams: {
+      type: Object,
+      request: false
+    },
+    configFromTabs: {
+      type: Object,
+      default: () => {}
+    },
+    canEdit: {
+      type: Boolean,
+      default: false
+    },
+    formLoading: {
+      type: Boolean,
+      default: false
+    },
+    typeMap: {
+      type: String,
+      default: ''
+    },
+    formType: {
+      type: String,
+      default: ''
+    }
+  },
+  data() {
+    return {
+      appMarketEdit: true,
+      attachRule: {
+        panelName: [
+          {
+            required: true,
+            min: 2,
+            max: 25,
+            message: i18n.t('datasource.input_limit_2_25', [2, 25]),
+            trigger: 'blur'
+          }
+        ],
+        datasetGroupName: [
+          {
+            required: true,
+            min: 2,
+            max: 25,
+            message: i18n.t('datasource.input_limit_2_25', [2, 25]),
+            trigger: 'blur'
+          }
+        ],
+        datasetGroupPid: [{ required: true, message: i18n.t('chart.select_group'), trigger: 'blur' }],
+        panelGroupPid: [{ required: true, message: i18n.t('chart.select_group'), trigger: 'blur' }]
+      },
+      panelGroupList: [],
+      datasetGroupList: [],
+      attachForm: {
+        appTemplateId: '',
+        panelGroupPid: null,
+        panelName: '',
+        datasetGroupPid: null,
+        datasetGroupId: null,
+        datasetGroupName: ''
+      },
+      disabled: false,
+      form: {
+        configuration: {
+          initialPoolSize: 5,
+          extraParams: '',
+          minPoolSize: 5,
+          maxPoolSize: 50,
+          maxIdleTime: 30,
+          acquireIncrement: 5,
+          idleConnectionTestPeriod: 5,
+          connectTimeout: 5,
+          customDriver: 'default',
+          queryTimeout: 30,
+          host: ''
+        },
+        apiConfiguration: []
+      },
+      datasourceType: {},
+      rule: {
+        name: [
+          {
+            required: true,
+            validator: this.nameRepeat,
+            message: i18n.t('datasource.input_name'),
+            trigger: 'blur'
+          },
+          {
+            min: 2,
+            max: 25,
+            message: i18n.t('datasource.input_limit_2_25', [2, 25]),
+            trigger: 'blur'
+          }
+        ],
+        desc: [
+          {
+            min: 0,
+            max: 50,
+            message: i18n.t('datasource.input_limit', { num: '0~50' }),
+            trigger: 'blur'
+          }
+        ],
+        type: [
+          {
+            required: true,
+            message: i18n.t('datasource.please_choose_type'),
+            trigger: 'blur'
+          }
+        ],
+        'configuration.dataBase': [
+          {
+            required: true,
+            message: i18n.t('datasource.please_input_data_base'),
+            trigger: 'blur'
+          }
+        ],
+        'configuration.connectionType': [
+          {
+            required: true,
+            message: i18n.t('datasource.please_select_oracle_type'),
+            trigger: 'blur'
+          }
+        ],
+        'configuration.username': [
+          {
+            required: true,
+            message: i18n.t('datasource.please_input_user_name'),
+            trigger: 'blur'
+          }
+        ],
+        'configuration.password': [
+          {
+            required: true,
+            message: i18n.t('datasource.please_input_password'),
+            trigger: 'blur'
+          }
+        ],
+        'configuration.host': [
+          {
+            required: true,
+            message: i18n.t('datasource.please_input_host'),
+            trigger: 'blur'
+          }
+        ],
+        'configuration.url': [
+          {
+            required: true,
+            message: i18n.t('datasource.please_input_url'),
+            trigger: 'blur'
+          }
+        ],
+        'configuration.port': [
+          {
+            required: true,
+            message: i18n.t('datasource.please_input_port'),
+            trigger: 'blur'
+          }
+        ],
+        'configuration.initialPoolSize': [
+          {
+            required: true,
+            message: i18n.t('datasource.please_input_initial_pool_size'),
+            trigger: 'blur'
+          }
+        ],
+        'configuration.minPoolSize': [
+          {
+            required: true,
+            message: i18n.t('datasource.please_input_min_pool_size'),
+            trigger: 'blur'
+          }
+        ],
+        'configuration.maxPoolSize': [
+          {
+            required: true,
+            message: i18n.t('datasource.please_input_max_pool_size'),
+            trigger: 'blur'
+          }
+        ],
+        'configuration.maxIdleTime': [
+          {
+            required: true,
+            message: i18n.t('datasource.please_input_max_idle_time'),
+            trigger: 'blur'
+          }
+        ],
+        'configuration.acquireIncrement': [
+          {
+            required: true,
+            message: i18n.t('datasource.please_input_acquire_increment'),
+            trigger: 'blur'
+          }
+        ],
+        'configuration.connectTimeout': [
+          {
+            required: true,
+            message: i18n.t('datasource.please_input_connect_timeout'),
+            trigger: 'blur'
+          }
+        ],
+        url: [
+          {
+            required: true,
+            message: i18n.t('datasource.please_input_url'),
+            trigger: 'blur'
+          }
+        ],
+        dataPath: [
+          {
+            required: true,
+            message: i18n.t('datasource.please_input_dataPath'),
+            trigger: 'blur'
+          }
+        ]
+      },
+      schemas: [],
+      originConfiguration: {},
+      edit_api_item: false,
+      add_api_item: true,
+      active: 0,
+      defaultApiItem: {
+        name: '',
+        url: '',
+        method: 'GET',
+        request: {
+          headers: [{}],
+          body: {
+            type: '',
+            raw: '',
+            kvs: []
+          }
+        },
+        fields: []
+      },
+      apiItem: {
+        status: '',
+        name: '',
+        url: '',
+        method: 'GET',
+        dataPath: '',
+        request: {
+          headers: [],
+          body: {
+            type: '',
+            raw: '',
+            kvs: []
+          },
+          authManager: {}
+        },
+        fields: []
+      },
+      reqOptions: [
+        { id: 'GET', label: 'GET' },
+        { id: 'POST', label: 'POST' }
+      ],
+      loading: false,
+      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.value') + '(' + this.$t('dataset.float') + ')',
+          value: 3
+        },
+        { label: this.$t('dataset.location'), value: 5 }
+      ],
+      height: 500,
+      disabledNext: false,
+      driverList: [],
+      tData: [],
+      dsTypes: [],
+      msgNodeId: '',
+      params: {}
+    }
+  },
+  async created() {
+    await this.datasourceTypes()
+    this.queryTreeData()
+    const params = this.configFromTabs.id ? this.configFromTabs : this.$route.query
+    let { id, showModel, type, name } = params
+    this.params = params
+    const appMarketCheck = this.positionCheck('appMarket')
+    if (appMarketCheck) {
+      this.appMarketEdit = this.outerParams.appMarketEdit === undefined ? true : this.outerParams.appMarketEdit
+      id = this.outerParams.datasourceId
+      showModel = this.outerParams.showModel
+      type = this.outerParams.datasourceType
+      name = this.outerParams.name
+      this.attachForm.appTemplateId = this.outerParams.appTemplateId
+      this.attachForm.panelGroupPid = this.outerParams.panelGroupPid
+      this.attachForm.panelId = this.outerParams.panelId
+      this.attachForm.panelName = this.outerParams.panelName
+      this.attachForm.datasetGroupPid = this.outerParams.datasetGroupPid ? this.outerParams.datasetGroupPid : '0'
+      this.attachForm.datasetGroupId = this.outerParams.datasetGroupId
+      this.attachForm.datasetGroupName = this.outerParams.datasetGroupName
+      this.params = {
+        id: this.outerParams.datasourceId,
+        showModel: this.outerParams.showModel,
+        type: this.outerParams.datasourceType,
+        name: this.outerParams.name,
+        privileges: this.outerParams.datasourcePrivileges
+      }
+      this.getPanelGroupTree()
+      this.getDatasetGroupTree()
+    }
+    if (id) {
+      await this.getDatasourceDetail(id, showModel)
+      this.edit(this.params)
+      this.changeType(true)
+    } else {
+      this.$emit('update:canEdit', true)
+      if (type) {
+        this.$emit('update:typeMap', name)
+        this.setType()
+        this.changeType()
+      }
+    }
+    this.$emit('setParams', { ...this.params })
+    this.$nextTick(() => {
+      this.disabled = appMarketCheck ? !this.appMarketEdit : (Boolean(id) && showModel === 'show' && !this.canEdit)
+    })
+  },
+  methods: {
+    baseInfoDisabledCheck(privileges) {
+      return !(this.formType === 'add' ? true : hasDataPermission('manage', privileges))
+    },
+    normalizer(node) {
+      // 去掉children=null的属性
+      if (node.children === null || node.children === 'null') {
+        delete node.children
+      }
+    },
+    getDatasetGroupTree() {
+      dsGroupTree({ nodeType: 'group', excludedId: this.attachForm.datasetGroupId }).then(res => {
+        this.datasetGroupList = [{
+          id: '0',
+          name: this.$t('dataset.dataset_group'),
+          label: this.$t('dataset.dataset_group'),
+          pid: '0',
+          privileges: 'grant,manage,use',
+          type: 'group',
+          children: res.data
+        }]
+      })
+    },
+    getPanelGroupTree() {
+      groupTree({ nodeType: 'folder' }).then(res => {
+        this.panelGroupList = res.data
+        if (!this.attachForm.panelGroupPid && this.panelGroupList && this.panelGroupList.length > 0) {
+          this.attachForm.panelGroupPid = this.panelGroupList[0].id
+        }
+      })
+    },
+    positionCheck(referencePosition) {
+      return this.referencePosition === referencePosition
+    },
+    datasourceTypes() {
+      return listDatasourceType().then((res) => {
+        this.dsTypes = res.data || []
+      })
+    },
+    getDatasourceDetail(id, showModel) {
+      this.$emit('update:formLoading', true)
+      return getDatasourceDetail(id).then((res) => {
+        this.params = { ...res.data, showModel }
+        this.$emit('setParams', { ...this.params })
+      }).finally(() => {
+        this.$emit('update:formLoading', false)
+      })
+    },
+    queryTreeData() {
+      listDatasource().then((res) => {
+        this.tData = this.buildTree(res.data)
+      })
+    },
+    buildTree(array) {
+      const types = {}
+      const newArr = []
+      for (let index = 0; index < array.length; index++) {
+        const element = array[index]
+        if (this.msgNodeId) {
+          if (element.id === this.msgNodeId) {
+            element.msgNode = true
+          }
+        }
+        if (!(element.type in types)) {
+          types[element.type] = []
+          // newArr.push(...element, ...{ children: types[element.type] })
+          newArr.push({
+            id: element.type,
+            name: element.typeDesc,
+            type: 'folder',
+            children: types[element.type]
+          })
+        }
+        types[element.type].push(element)
+        // newArr.children.push({ id: element.id, label: element.name })
+      }
+      return newArr
+    },
+    setType() {
+      this.$set(this.form, 'type', this.params.type)
+      this.form.configuration = {
+        initialPoolSize: 5,
+        extraParams: '',
+        minPoolSize: 5,
+        maxPoolSize: 50,
+        maxIdleTime: 30,
+        acquireIncrement: 5,
+        idleConnectionTestPeriod: 5,
+        connectTimeout: 5,
+        customDriver: 'default',
+        queryTimeout: 30
+      }
+      if (this.form.type === 'oracle') {
+        this.$set(this.form.configuration, 'charset', 'Default')
+        this.$set(this.form.configuration, 'targetCharset', 'Default')
+        this.$set(this.form.configuration, 'connectionType', 'sid')
+      }
+    },
+    edit(row) {
+      this.$emit('update: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)
+      } else {
+        this.form.configuration = JSON.parse(this.form.configuration)
+        this.originConfiguration = JSON.stringify(this.form.configuration)
+      }
+      this.$emit('update:canEdit', true)
+    },
+    reset() {
+      this.$refs.dsForm.resetFields()
+    },
+    editDatasource() {
+      this.disabled = false
+    },
+    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.$message.error(i18n.t('datasource.please_choose_schema'))
+        return
+      }
+      if (
+        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
+      }
+      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
+      }
+      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
+              }
+              const configuration = JSON.parse(child.configuration)
+              if (!configuration) {
+                return
+              }
+              switch (this.form.type) {
+                case 'mysql':
+                case 'TiDB':
+                case 'StarRocks':
+                case 'hive':
+                case 'mariadb':
+                case 'ds_doris':
+                case 'ck':
+                case 'mongo':
+                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)
+                  }
+                  break
+                case 'pg':
+                case 'sqlServer':
+                case 'redshift':
+                case 'oracle':
+                case 'db2':
+                  if (
+                    configuration.host === this.form.configuration.host &&
+                    configuration.dataBase ===
+                    this.form.configuration.dataBase &&
+                    configuration.port === this.form.configuration.port &&
+                    configuration.schema === this.form.configuration.schema
+                  ) {
+                    repeatDsName.push(child.name)
+                    repeat = true
+                  }
+                  break
+                case 'es':
+                  if (configuration.url === this.form.configuration.url) {
+                    repeatDsName.push(child.name)
+                    repeat = true
+                  }
+                  break
+                default:
+                  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
+                }
+                const configuration = JSON.parse(child.configuration)
+                if (!configuration) {
+                  return
+                }
+                if (configuration.schema !== null) {
+                  if (
+                    configuration.schema === this.form.configuration.schema &&
+                    configuration.host === this.form.configuration.host &&
+                    configuration.dataBase ===
+                    this.form.configuration.dataBase &&
+                    configuration.port === this.form.configuration.port
+                  ) {
+                    repeat = true
+                    repeatDsName.push(child.name)
+                  }
+                } else {
+                  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)
+                  }
+                }
+              })
+            }
+          })
+        }
+      }
+      let status = null
+      if (this.datasourceType.isPlugin) {
+        status = this.$refs['pluginDsConfig'].callPluginInner({
+          methodName: 'validate'
+        })
+      } else {
+        this.$refs['dsConfig'].$refs['DsConfig'].validate((valid) => {
+          status = valid
+        })
+      }
+      if (!status) {
+        return
+      }
+      if (this.positionCheck('appMarket')) {
+        this.$refs.attachParamsForm.validate(valid => {
+          if (!valid) {
+            return false
+          }
+        }
+        )
+      }
+      this.$refs.dsForm.validate((valid) => {
+        if (!valid) {
+          return false
+        }
+        let 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
+          }
+          form.apiConfiguration.forEach((item) => {
+            delete item.status
+          })
+          form.configuration = JSON.stringify(form.apiConfiguration)
+        } else {
+          form.configuration = JSON.stringify(form.configuration)
+        }
+        const isAppMarket = this.positionCheck('appMarket')
+        let appApplyForm
+        if (isAppMarket) {
+          if (typeof form.desc === 'object') {
+            form.desc = ''
+          }
+          appApplyForm = {
+            ...this.attachForm,
+            datasourceList: [deepCopy(form)]
+          }
+          method = this.formType === 'add' ? appApply : appEdit
+        }
+        if (
+          this.formType === 'modify' &&
+          this.originConfiguration !== form.configuration
+        ) {
+          if (repeat && !isAppMarket) {
+            $confirm(
+              i18n.t('datasource.repeat_datasource_msg') +
+              '[' +
+              repeatDsName.join(',') +
+              '], ' +
+              i18n.t('datasource.confirm_save'),
+              () => {
+                $confirm(i18n.t('datasource.edit_datasource_msg'), () => {
+                  this.method(method, form)
+                })
+              }
+            )
+          } else {
+            $confirm(i18n.t('datasource.edit_datasource_msg'), () => {
+              isAppMarket ? this.appApplyMethod(method, appApplyForm) : this.method(method, form)
+            })
+          }
+          return
+        }
+        if (repeat && !isAppMarket) {
+          $confirm(
+            i18n.t('datasource.repeat_datasource_msg') +
+            '[' +
+            repeatDsName.join(',') +
+            '], ' +
+            i18n.t('datasource.confirm_save'),
+            () => {
+              this.method(method, form)
+            }
+          )
+        } else {
+          isAppMarket ? this.appApplyMethod(method, appApplyForm) : this.method(method, form)
+        }
+      })
+    },
+    appApplyMethod(method, form) {
+      this.$emit('update:formLoading', true)
+      method(form).then((res) => {
+        this.$success(i18n.t('commons.save_success'))
+        if (this.formType === 'add') {
+          this.$router.push({ name: 'panel', params: res.data })
+        } else {
+          this.closeDraw()
+        }
+      }).finally(() => {
+        this.$emit('update:formLoading', false)
+      })
+    },
+    method(method, form) {
+      this.$emit('update:formLoading', true)
+      method(form).then((res) => {
+        this.$success(i18n.t('commons.save_success'))
+        this.refreshType(form)
+        this.backToList()
+      }).finally(() => {
+        this.$emit('update:formLoading', false)
+      })
+    },
+    getSchema() {
+      this.$refs.dsForm.validate((valid) => {
+        if (valid) {
+          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')
+          })
+        } else {
+          return false
+        }
+      })
+    },
+    validaDatasource() {
+      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.configuration.port <= 0
+      ) {
+        this.openMessageSuccess('datasource.port_no_less_then_0', 'error')
+        return
+      }
+      let status = null
+      if (this.datasourceType.isPlugin) {
+        status = this.$refs['pluginDsConfig'].callPluginInner({
+          methodName: 'validate'
+        })
+      } else {
+        this.$refs['dsConfig'].$refs['DsConfig'].validate((valid) => {
+          status = valid
+          if (!valid) {
+            return
+          }
+        })
+      }
+      if (!status) {
+        return
+      }
+      if (this.positionCheck('appMarket')) {
+        this.$refs.attachParamsForm.validate(valid => {
+          if (!valid) {
+            return false
+          }
+        }
+        )
+      }
+      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)
+          } else {
+            data.configuration = JSON.stringify(data.configuration)
+          }
+          if (data.showModel === 'show' && !this.canEdit) {
+            validateDsById(data.id).then((res) => {
+              if (res.success) {
+                this.openMessageSuccess('datasource.validate_success')
+              } else {
+                if (res.message.length < 2500) {
+                  this.openMessageSuccess(res.message, 'error')
+                } else {
+                  this.openMessageSuccess(
+                    res.message.substring(0, 2500) + '......',
+                    'error'
+                  )
+                }
+              }
+              this.refreshType(data)
+            })
+          } else {
+            validateDs(data)
+              .then((res) => {
+                if (res.success) {
+                  this.$success(i18n.t('datasource.validate_success'))
+                } else {
+                  if (data.type === 'api') {
+                    this.form.apiConfiguration = res.data.apiConfiguration
+                  }
+                  if (res.message.length < 2500) {
+                    this.openMessageSuccess(res.message, 'error')
+                  } else {
+                    this.openMessageSuccess(
+                      res.message.substring(0, 2500) + '......',
+                      'error'
+                    )
+                  }
+                }
+              })
+              .catch((res) => {
+                this.openMessageSuccess(res.message, 'error')
+              })
+          }
+        } else {
+          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'
+          }
+          this.datasourceType = this.dsTypes[i]
+          if (this.datasourceType.isJdbc) {
+            listDriverByType(this.datasourceType.type).then((res) => {
+              this.driverList = []
+              this.driverList.push({
+                id: 'default',
+                name: 'Default',
+                driverClass: 'Default'
+              })
+              this.driverList = this.driverList.concat(res.data)
+            })
+          }
+        }
+      }
+    },
+    backToList() {
+      this.$router.push('/datasource/index')
+    },
+
+    closeDraw() {
+      this.$emit('closeDraw')
+    },
+    refreshType(form) {
+      this.$emit('refresh-type', form)
+    },
+    next() {
+      if (this.active === 1) {
+        let hasRepeatName = false
+        if (this.add_api_item) {
+          this.form.apiConfiguration.forEach((item) => {
+            if (item.name === this.apiItem.name) {
+              hasRepeatName = true
+            }
+          })
+        } else {
+          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
+            }
+          }
+        }
+        if (hasRepeatName) {
+          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
+            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.data)
+              })
+              .catch((res) => {
+                this.loading = false
+                this.disabledNext = false
+              })
+          } else {
+            this.apiItem.fields = []
+            return false
+          }
+        })
+      }
+    },
+    before() {
+      this.active--
+    },
+    closeEditItem() {
+      this.active = 0
+      this.edit_api_item = false
+    },
+    saveItem() {
+      this.active = 0
+      this.edit_api_item = false
+      if (this.add_api_item) {
+        this.form.apiConfiguration.push(this.apiItem)
+      }
+    },
+    addApiItem(item) {
+      this.$nextTick(() => {
+        this.$refs.apiItem.clearValidate()
+      })
+      if (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.active = 1
+      this.edit_api_item = true
+    },
+    deleteItem(item) {
+      this.form.apiConfiguration.splice(
+        this.form.apiConfiguration.indexOf(item),
+        1
+      )
+    },
+    validateApi(item) {
+      this.$refs.apiItem.validate((valid) => {
+        if (valid) {
+          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.data)
+            })
+            .catch((res) => {
+              this.loading = false
+            })
+        } else {
+          return false
+        }
+      })
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.de-ds-cont {
+  display: flex;
+  width: 100%;
+  height: 100%;
+  padding: 12px 24px 24px 24px;
+  background: #f5f6f7;
+
+  .de-ds-inner {
+    width: 100%;
+    height: 100;
+    background: #fff;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    overflow-y: auto;
+  }
+
+  .w600 {
+    width: 600px;
+    height: 100%;
+    padding-top: 24px;
+  }
+}
+</style>
diff --git a/frontend/src/views/system/datasource/DsTable.vue b/frontend/src/views/system/datasource/DsTable.vue
index 5a9c086759..e9d19132e7 100644
--- a/frontend/src/views/system/datasource/DsTable.vue
+++ b/frontend/src/views/system/datasource/DsTable.vue
@@ -1,239 +1,129 @@
 <template>
-  <div class="ds-table de-search-table">
-    <el-row class="top-operate">
-      <el-col :span="10">
-        <span class="table-name-top">{{ params.name }}</span>
-      </el-col>
-      <el-col
-        :span="14"
-        class="right-user"
-      >
-        <el-input
-          ref="search"
-          v-model="nickName"
-          :placeholder="$t('system_parameter_setting.search_keywords')"
-          prefix-icon="el-icon-search"
-          class="name-email-search"
-          size="small"
-          clearable
-          @blur="initSearch"
-          @clear="initSearch"
-        />
-      </el-col>
-    </el-row>
-    <div class="table-container">
-      <grid-table
-        v-loading="loading"
-        :table-data="pagingTable"
-        :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"
-          key="__operation"
-          :label="$t('commons.operating')"
-          fixed="right"
-          width="108"
-        >
-          <template slot-scope="scope">
-            <el-button
-              class="de-text-btn mar3"
-              type="text"
-              @click="selectDataset(scope.row)"
-            >{{ $t("dataset.detail") }}
-            </el-button>
-          </template>
-        </el-table-column>
-      </grid-table>
-    </div>
-    <el-dialog
-      :title="$t('dataset.detail')"
-      :visible.sync="userDrawer"
-      class="de-dialog-form ds-table-drawer"
-      width="840px"
+  <div class="ds-table-detail">
+    <el-tabs
+      v-model="activeName"
+      class="de-tabs"
     >
-      <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="fieldName"
-          :label="$t('panel.column_name')"
-        />
-        <el-table-column
-          prop="fieldType"
-          :label="$t('dataset.field_type')"
-        >
-          <template slot-scope="scope">
-            <span v-if="scope.row.fieldType === '0' && params.type==='api'">{{
-              $t("dataset.text")
-            }}</span>
-            <span v-if="scope.row.fieldType === '2' && params.type==='api'">{{
-              $t("dataset.value")
-            }}</span>
-            <span v-if="scope.row.fieldType === '3' && params.type==='api'">{{
-              $t("dataset.value") + '(' + $t("dataset.float") + ')'
-            }}</span>
-            <span v-if="params.type !=='api'">
-              {{ scope.row.fieldType }}
+      <el-tab-pane
+        :label="$t('datasource.data_source_configuration')"
+        name="detail"
+      />
+      <el-tab-pane
+        :label="$t('datasource.data_source_table')"
+        name="table"
+      />
+    </el-tabs>
+    <div class="el-tabs-content">
+      <ds-table-tabs
+        v-if="activeName === 'table'"
+        :params="params"
+      />
+      <template v-else>
+        <div class="ds-top">
+          <deBtn
+            v-if="privileges"
+            secondary
+            @click="editDatasource"
+          >{{ $t('commons.edit') }}
+          </deBtn>
+          <el-tooltip
+            class="item"
+            effect="dark"
+            :content="$t('commons.no_target_permission')"
+            placement="top"
+          >
+            <span v-if="!privileges">
+              <deBtn
+                disabled
+                secondary
+              >{{ $t('commons.edit') }}
+              </deBtn>
             </span>
-          </template>
-        </el-table-column>
-        <el-table-column
-          prop="remarks"
-          :label="$t('datasource.field_description')"
-        />
-      </el-table>
-    </el-dialog>
+          </el-tooltip>
+          <deBtn
+            v-if="privileges"
+            style="margin-left: 12px;"
+            secondary
+            @click="validaDatasource"
+          >{{ $t('commons.validate') }}
+          </deBtn>
+          <deBtn
+            v-if="privileges"
+            type="primary"
+            @click="save"
+          >{{ $t('commons.save') }}
+          </deBtn>
+        </div>
+        <div style="height: calc(100% - 36px)">
+          <ds-form-content
+            ref="DsFormContent"
+            :config-from-tabs="configFromTabs"
+          />
+        </div>
+      </template>
+    </div>
   </div>
 </template>
 
 <script>
-import keyEnter from '@/components/msgCfm/keyEnter.js'
-import { post } from '@/api/dataset/dataset'
-import GridTable from '@/components/gridTable/index.vue'
-
+import DsTableTabs from './DsTableTabs'
+import DsFormContent from './DsFormContent'
 export default {
-  components: { GridTable },
-  mixins: [keyEnter],
+  components: { DsTableTabs, DsFormContent },
   props: {
     params: {
       type: Object,
-      default: () => {
-      }
+      default: () => {}
     }
   },
   data() {
     return {
-      userDrawer: false,
-      paginationConfig: {
-        currentPage: 1,
-        pageSize: 10,
-        total: 0
-      },
-      dsTableDetail: {},
-      nickName: '',
-      loading: false,
-      dsTableData: [],
-      tableData: [],
-      filterTable: []
+      activeName: 'detail'
     }
   },
   computed: {
-    pagingTable() {
-      const { currentPage, pageSize } = this.paginationConfig
-      return this.filterTable.slice((currentPage - 1) * pageSize, currentPage * pageSize)
+    configFromTabs() {
+      return { ...this.params, showModel: 'show' }
+    },
+    privileges() {
+      return this.hasDataPermission('manage', this.params.privileges)
     }
   },
-  created() {
-    this.search()
-  },
   methods: {
-    handleSizeChange(pageSize) {
-      this.paginationConfig.currentPage = 1
-      this.paginationConfig.pageSize = pageSize
+    editDatasource() {
+      this.$refs.DsFormContent.editDatasource()
     },
-    handleCurrentChange(currentPage) {
-      this.paginationConfig.currentPage = currentPage
+    validaDatasource() {
+      this.$refs.DsFormContent.validaDatasource()
     },
-    initSearch() {
-      this.handleCurrentChange(1)
-      this.filterTable = this.tableData.filter(ele => ele.name.includes(this.nickName))
-      this.paginationConfig.total = this.filterTable.length
-    },
-    selectDataset(row) {
-      this.dsTableDetail = row
-      this.userDrawer = true
-      var table = { dataSourceId: this.params.id }
-      table.info = JSON.stringify({ table: row.name })
-      post('/dataset/table/getFields', table).then((response) => {
-        this.dsTableData = response.data
-      })
-    },
-    search() {
-      this.loading = true
-      post('/datasource/getTables/' + this.params.id, {}).then((response) => {
-        this.tableData = response.data
-        this.initSearch()
-      }).finally(() => {
-        this.loading = false
-      })
+    save() {
+      this.$refs.DsFormContent.save()
     }
   }
 }
 </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);
-  }
-}
-
-.ds-table {
+<style lang="less">
+.ds-table-detail {
   height: 100%;
   padding: 10px 14px;
   box-sizing: border-box;
-
-  .mar3 {
-    margin-left: -5px;
+  .el-tabs-content {
+    height: calc(100% - 56px);
   }
 
-  .table-name-top {
-    font-family: PingFang SC;
-    font-size: 16px;
-    font-weight: 500;
-    line-height: 24px;
-    color: var(--deTextPrimary, #1f2329);
+  .ds-top {
+    height: 36px;
+    text-align: right;
   }
 
-  .table-container {
-    height: calc(100% - 50px);
+  .w600 {
+    padding-top: 0 !important;
   }
 
-  .el-table__fixed-right::before {
-    background: transparent;
+  .de-ds-cont {
+    padding: 0 !important;
+    background: transparent !important;
   }
 }
 </style>
diff --git a/frontend/src/views/system/datasource/DsTableTabs.vue b/frontend/src/views/system/datasource/DsTableTabs.vue
new file mode 100644
index 0000000000..59728978ee
--- /dev/null
+++ b/frontend/src/views/system/datasource/DsTableTabs.vue
@@ -0,0 +1,237 @@
+<template>
+  <div class="ds-table de-search-table">
+    <el-row class="top-operate">
+      <el-col :span="10">
+        <span class="table-name-top">{{ params.name }}</span>
+      </el-col>
+      <el-col
+        :span="14"
+        class="right-user"
+      >
+        <el-input
+          ref="search"
+          v-model="nickName"
+          :placeholder="$t('system_parameter_setting.search_keywords')"
+          prefix-icon="el-icon-search"
+          class="name-email-search"
+          size="small"
+          clearable
+          @blur="initSearch"
+          @clear="initSearch"
+        />
+      </el-col>
+    </el-row>
+    <div class="table-container">
+      <grid-table
+        v-loading="loading"
+        :table-data="pagingTable"
+        :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"
+          key="__operation"
+          :label="$t('commons.operating')"
+          fixed="right"
+          width="108"
+        >
+          <template slot-scope="scope">
+            <el-button
+              class="de-text-btn mar3"
+              type="text"
+              @click="selectDataset(scope.row)"
+            >{{ $t("dataset.detail") }}
+            </el-button>
+          </template>
+        </el-table-column>
+      </grid-table>
+    </div>
+    <el-dialog
+      :title="$t('dataset.detail')"
+      :visible.sync="userDrawer"
+      class="de-dialog-form ds-table-drawer"
+      width="840px"
+    >
+      <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="fieldName"
+          :label="$t('panel.column_name')"
+        />
+        <el-table-column
+          prop="fieldType"
+          :label="$t('dataset.field_type')"
+        >
+          <template slot-scope="scope">
+            <span v-if="scope.row.fieldType === '0' && params.type==='api'">{{
+              $t("dataset.text")
+            }}</span>
+            <span v-if="scope.row.fieldType === '2' && params.type==='api'">{{
+              $t("dataset.value")
+            }}</span>
+            <span v-if="scope.row.fieldType === '3' && params.type==='api'">{{
+              $t("dataset.value") + '(' + $t("dataset.float") + ')'
+            }}</span>
+            <span v-if="params.type !=='api'">
+              {{ scope.row.fieldType }}
+            </span>
+          </template>
+        </el-table-column>
+        <el-table-column
+          prop="remarks"
+          :label="$t('datasource.field_description')"
+        />
+      </el-table>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import keyEnter from '@/components/msgCfm/keyEnter.js'
+import { post } from '@/api/dataset/dataset'
+import GridTable from '@/components/gridTable/index.vue'
+
+export default {
+  components: { GridTable },
+  mixins: [keyEnter],
+  props: {
+    params: {
+      type: Object,
+      default: () => {}
+    }
+  },
+  data() {
+    return {
+      userDrawer: false,
+      paginationConfig: {
+        currentPage: 1,
+        pageSize: 10,
+        total: 0
+      },
+      dsTableDetail: {},
+      nickName: '',
+      loading: false,
+      dsTableData: [],
+      tableData: [],
+      filterTable: []
+    }
+  },
+  computed: {
+    pagingTable() {
+      const { currentPage, pageSize } = this.paginationConfig
+      return this.filterTable.slice((currentPage - 1) * pageSize, currentPage * pageSize)
+    }
+  },
+  created() {
+    this.search()
+  },
+  methods: {
+    handleSizeChange(pageSize) {
+      this.paginationConfig.currentPage = 1
+      this.paginationConfig.pageSize = pageSize
+    },
+    handleCurrentChange(currentPage) {
+      this.paginationConfig.currentPage = currentPage
+    },
+    initSearch() {
+      this.handleCurrentChange(1)
+      this.filterTable = this.tableData.filter(ele => ele.name.includes(this.nickName))
+      this.paginationConfig.total = this.filterTable.length
+    },
+    selectDataset(row) {
+      this.dsTableDetail = row
+      this.userDrawer = true
+      var table = { dataSourceId: this.params.id }
+      table.info = JSON.stringify({ table: row.name })
+      post('/dataset/table/getFields', table).then((response) => {
+        this.dsTableData = response.data
+      })
+    },
+    search() {
+      this.loading = true
+      post('/datasource/getTables/' + this.params.id, {}).then((response) => {
+        this.tableData = response.data
+        this.initSearch()
+      }).finally(() => {
+        this.loading = false
+      })
+    }
+  }
+}
+</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);
+  }
+}
+
+.ds-table {
+  height: 100%;
+  width: 100%;
+
+  .mar3 {
+    margin-left: -5px;
+  }
+
+  .table-name-top {
+    font-family: PingFang SC;
+    font-size: 16px;
+    font-weight: 500;
+    line-height: 24px;
+    color: var(--deTextPrimary, #1f2329);
+  }
+
+  .table-container {
+    height: calc(100% - 50px);
+  }
+
+  .el-table__fixed-right::before {
+    background: transparent;
+  }
+}
+</style>