feat(datasource): sort

Author: dataeaseShu

frontend/src/i18n/en.json

@@ -84,6 +84,7 @@
     "type": "Data Source Type",
     "status": "Status",
     "actions": "Actions",
+    "local_excelcsv": "Local Excel/CSV",
     "pieces_in_total": "Showing {ms} records",
     "test_connection": "Test Connection",
     "check": "check",

frontend/src/i18n/zh-CN.json

@@ -86,6 +86,7 @@
   },
   "ds": {
     "title": "数据源",
+    "local_excelcsv": "本地 Excel/CSV",
     "add": "添加数据源",
     "delete": "删除数据源",
     "name": "数据源名称",

frontend/src/views/ds/Datasource.vue

@@ -16,7 +16,7 @@ import { datasourceApi } from '@/api/datasource'
 import { useEmitt } from '@/utils/useEmitt'
 import Card from './Card.vue'
 import DelMessageBox from './DelMessageBox.vue'
-import { dsTypeWithImgSort } from './js/ds-type'
+import { dsTypeWithImg } from './js/ds-type'
 import { useI18n } from 'vue-i18n'
 
 interface Datasource {
@@ -41,7 +41,7 @@ const activeType = ref('')
 const datasourceFormRef = ref()
 
 const datasourceList = shallowRef([] as Datasource[])
-const defaultDatasourceList = shallowRef(dsTypeWithImgSort as (Datasource & { img: string })[])
+const defaultDatasourceList = shallowRef(dsTypeWithImg as (Datasource & { img: string })[])
 
 const currentDefaultDatasource = ref('')
 const datasourceListWithSearch = computed(() => {

frontend/src/views/ds/DatasourceForm.vue

@@ -460,7 +460,19 @@ defineExpose({
     class="model-form"
     :class="(!isCreate || activeStep === 2) && 'edit-form'"
   >
-    <div v-if="isCreate && activeStep !== 2" class="model-name">{{ activeName }}</div>
+    <div v-if="isCreate && activeStep !== 2" class="model-name">
+      {{ activeName }}
+      <span
+        style="margin-left: 8px; color: #8f959e; font-size: 12px; margin-top: 7px"
+        v-if="form.type !== 'excel'"
+      >
+        <span>{{ t('ds.form.support_version') }}:&nbsp;</span>
+        <span v-if="form.type === 'sqlServer'">2012+</span>
+        <span v-else-if="form.type === 'oracle'">12+</span>
+        <span v-else-if="form.type === 'mysql'">5.6+</span>
+        <span v-else-if="form.type === 'pg'">9.6+</span>
+      </span>
+    </div>
     <div class="form-content">
       <el-form
         v-show="activeStep === 1"
@@ -550,13 +562,6 @@ defineExpose({
             />
           </el-select>
         </el-form-item>
-        <span v-if="form.type !== 'excel'">
-          <span>{{ t('ds.form.support_version') }}:&nbsp;</span>
-          <span v-if="form.type === 'sqlServer'">2012+</span>
-          <span v-else-if="form.type === 'oracle'">12+</span>
-          <span v-else-if="form.type === 'mysql'">5.6+</span>
-          <span v-else-if="form.type === 'pg'">9.6+</span>
-        </span>
 
         <div v-if="form.type !== 'excel'" style="margin-top: 16px">
           <el-form-item :label="t('ds.form.host')" prop="host">

frontend/src/views/ds/js/ds-type.ts

@@ -3,28 +3,22 @@ import excel from '@/assets/datasource/icon_excel.png'
 import oracle from '@/assets/datasource/icon_oracle.png'
 import pg from '@/assets/datasource/icon_PostgreSQL.png'
 import sqlServer from '@/assets/datasource/icon_SQL_Server.png'
+import { i18n } from '@/i18n'
 
+const t = i18n.global.t
 export const dsType = [
+  { label: t('ds.local_excelcsv'), value: 'excel' },
   { label: 'MySQL', value: 'mysql' },
-  { label: 'PostgreSQL', value: 'pg' },
-  { label: 'Microsoft SQL Server', value: 'sqlServer' },
   { label: 'Oracle', value: 'oracle' },
-  { label: 'Excel/CSV', value: 'excel' },
+  { label: 'PostgreSQL', value: 'pg' },
+  { label: 'SQL Server', value: 'sqlServer' },
 ]
 
 export const dsTypeWithImg = [
-  { name: '本地 Excel/CSV', type: 'excel', img: excel },
+  { name: t('ds.local_excelcsv'), type: 'excel', img: excel },
   { name: 'MySQL', type: 'mysql', img: mysql_ds },
-  { name: 'SQL Server', type: 'sqlServer', img: sqlServer },
   { name: 'Oracle', type: 'oracle', img: oracle },
   { name: 'PostgreSQL', type: 'pg', img: pg },
-]
-
-export const dsTypeWithImgSort = [
-  { name: '本地 Excel/CSV', type: 'excel', img: excel },
-  { name: 'PostgreSQL', type: 'pg', img: pg },
-  { name: 'Oracle', type: 'oracle', img: oracle },
-  { name: 'MySQL', type: 'mysql', img: mysql_ds },
   { name: 'SQL Server', type: 'sqlServer', img: sqlServer },
 ]