[PROPOSAL-3139] Datasource selection changes from radio to select (#3142)

* [PROPOSAL-3139] Datasource selection changes from radio to select

* [PROPOSAL-3139] Datasource selection changes from radio to select
Co-authored-by: Ndailidong <dailidong66@gmail.com>

dolphinscheduler-ui/src/js/conf/home/pages/datasource/pages/list/_source/createDataSource.vue

@@ -24,16 +24,10 @@
         <m-list-box-f>
           <template slot="name"><strong>*</strong>{{$t('Datasource')}}</template>
           <template slot="content">
-            <x-radio-group v-model="type" size="small">
-              <x-radio :label="'MYSQL'">MYSQL</x-radio>
-              <x-radio :label="'POSTGRESQL'">POSTGRESQL</x-radio>
-              <x-radio :label="'HIVE'">HIVE/IMPALA</x-radio>
-              <x-radio :label="'SPARK'">SPARK</x-radio>
-              <x-radio :label="'CLICKHOUSE'">CLICKHOUSE</x-radio>
-              <x-radio :label="'ORACLE'">ORACLE</x-radio>
-              <x-radio :label="'SQLSERVER'">SQLSERVER</x-radio>
-              <x-radio :label="'DB2'" class="radio-label-last" >DB2</x-radio>
-            </x-radio-group>
+              <x-select style="width: 100%;" v-model="type">
+                <x-option v-for="item in datasourceTypeList" :key="item.value" :value="item.value" :label="item.label">
+                </x-option>
+              </x-select>
           </template>
         </m-list-box-f>
         <m-list-box-f>
@@ -200,7 +194,41 @@
         showdDatabase: false,
         showConnectType: false,
         isShowPrincipal:true,
-        prePortMapper:{}
+        prePortMapper:{},
+        datasourceTypeList: [
+          {
+            value: 'MYSQL',
+            label: 'MYSQL'
+          },
+          {
+            value: 'POSTGRESQL',
+            label: 'POSTGRESQL'
+          },
+          {
+            value: 'HIVE',
+            label: 'HIVE/IMPALA'
+          },
+          {
+            value: 'SPARK',
+            label: 'SPARK'
+          },
+          {
+            value: 'CLICKHOUSE',
+            label: 'CLICKHOUSE'
+          },
+          {
+            value: 'ORACLE',
+            label: 'ORACLE'
+          },
+          {
+            value: 'SQLSERVER',
+            label: 'SQLSERVER'
+          },
+          {
+            value: 'DB2',
+            label: 'DB2'
+          }
+        ]
       }
     },
     props: {