diff --git a/dolphinscheduler-ui/src/views/datasource/list/detail.tsx b/dolphinscheduler-ui/src/views/datasource/list/detail.tsx
index 294e042dc35cbe16502a22bdfc170c65c3a287c2..cd521e3e54b57bb79f5743390c4e038b86b5f21e 100644
--- a/dolphinscheduler-ui/src/views/datasource/list/detail.tsx
+++ b/dolphinscheduler-ui/src/views/datasource/list/detail.tsx
@@ -30,7 +30,7 @@ import {
 } from 'naive-ui'
 import Modal from '@/components/modal'
 import { useI18n } from 'vue-i18n'
-import { useForm, datasourceTypeList } from './use-form'
+import { useForm, datasourceType, datasourceTypeList } from './use-form'
 import { useDetail } from './use-detail'
 
 const props = {
@@ -88,6 +88,12 @@ const DetailModal = defineComponent({
       () => props.show,
       async () => {
         props.show && props.id && setFieldsValue(await queryById(props.id))
+        props.show &&
+          state.detailForm.type &&
+          changeType(
+            state.detailForm.type,
+            datasourceType[state.detailForm.type]
+          )
       }
     )
 
diff --git a/dolphinscheduler-ui/src/views/datasource/list/use-form.ts b/dolphinscheduler-ui/src/views/datasource/list/use-form.ts
index e1c427875f41b9e5a38849a32a9854d8a8fd3b22..beca7d226a4ad2abf5ab0f5d06c02eb5c4fe2222 100644
--- a/dolphinscheduler-ui/src/views/datasource/list/use-form.ts
+++ b/dolphinscheduler-ui/src/views/datasource/list/use-form.ts
@@ -169,7 +169,7 @@ export function useForm(id?: number) {
   }
 }
 
-const datasourceType: IDataBaseOptionKeys = {
+export const datasourceType: IDataBaseOptionKeys = {
   MYSQL: {
     value: 'MYSQL',
     label: 'MYSQL',