feat(datasource): Support PostgreSQL

frontend/src/views/ds/form.vue

@@ -65,7 +65,7 @@
           <el-form-item label="Extra JDBC String">
             <el-input v-model="config.extraJdbc" />
           </el-form-item>
-          <el-form-item label="Schema" v-if="form.type === 'sqlServer'">
+          <el-form-item label="Schema" v-if="haveSchema.includes(form.type)">
             <el-input v-model="config.dbSchema" />
             <el-button link type="primary" :icon="Plus" v-if="false">Get Schema</el-button>
           </el-form-item>
@@ -101,6 +101,7 @@ import { ElMessage } from 'element-plus'
 import type { FormInstance, FormRules } from 'element-plus'
 import { Plus } from '@element-plus/icons-vue'
 import { useCache } from '@/utils/useCache'
+import { dsType, haveSchema} from '@/views/ds/js/ds-type'
 
 const { wsCache } = useCache()
 const dsFormRef = ref<FormInstance>()
@@ -123,11 +124,6 @@ const rules = reactive<FormRules>({
 })
 
 const dialogVisible = ref<boolean>(false)
-const dsType = [
-  {label:"Excel/CSV", value:"excel"},
-  {label:"MySQL", value:"mysql"},
-  {label:"SQL Server", value:"sqlServer"}
-]
 const form = ref<any>({
   name:'',
   description:'',

frontend/src/views/ds/index.vue

@@ -28,11 +28,12 @@
           <Icon>
             <MysqlDs v-if="ds.type === 'mysql'"/>
             <SQLServerDs v-else-if="ds.type === 'sqlServer'"/>
+            <PgDs v-else-if="ds.type === 'pg'"/>
           </Icon>
         </div>
         <div class="connection-details">
           <div class="connection-name">{{ ds.name }}</div>
-          <div class="connection-type">{{ ds.type }}</div>
+          <div class="connection-type">{{ dsRelation[ds.type] }}</div>
           <div class="connection-host">{{ ds.description }}</div>
           <div class="connection-last">{{ datetimeFormat(ds.create_time) }}</div>
         </div>
@@ -54,6 +55,7 @@ import IconOpeEdit from '@/assets/svg/operate/ope-edit.svg'
 import IconOpeDelete from '@/assets/svg/operate/ope-delete.svg'
 import MysqlDs from '@/assets/svg/ds/mysql-ds.svg'
 import SQLServerDs from '@/assets/svg/ds/sqlServer-ds.svg'
+import PgDs from '@/assets/svg/ds/pg-ds.svg'
 import { Search, List, CreditCard } from '@element-plus/icons-vue'
 import { ref, onMounted } from 'vue'
 import DsForm from './form.vue'
@@ -61,6 +63,7 @@ import { datasourceApi } from '@/api/datasource'
 import { datetimeFormat } from '@/utils/utils'
 import { ElMessageBox } from 'element-plus'
 import { useRouter } from 'vue-router'
+import { dsRelation } from '@/views/ds/js/ds-type'
 
 const searchValue = ref<string>('')
 const dsForm = ref()

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

@@ -0,0 +1,18 @@
+export const dsType = [
+  {label:"MySQL", value:"mysql"},
+  {label:"Microsoft SQL Server", value:"sqlServer"},
+  {label:"PostgreSQL", value:"pg"},
+  {label:"Excel/CSV", value:"excel"},
+]
+
+export const haveSchema = [
+  'sqlServer', 
+  'pg'
+]
+
+export const  dsRelation: any = {
+  "mysql": "MySQL",
+  "sqlServer": "Microsoft SQL Server",
+  "pg": "PostgreSQL",
+  "excel": "Excel/CSV",
+}