refactor: dialect使用方式调整

This commit is contained in:
meilin.huang
2024-01-29 16:02:28 +08:00
parent a743a6a05a
commit d0b71a1c40
11 changed files with 61 additions and 74 deletions

View File

@@ -1,17 +1,22 @@
<template> <template>
<div class="layout-search-dialog"> <div class="layout-search-dialog">
<el-dialog v-model="state.isShowSearch" width="300px" destroy-on-close :modal="false" fullscreen :show-close="false"> <el-dialog v-model="state.isShowSearch" width="300px" destroy-on-close :modal="false" fullscreen :show-close="false">
<el-autocomplete v-model="state.menuQuery" :fetch-suggestions="menuSearch" placeholder="菜单搜索" <el-autocomplete
prefix-icon="el-icon-search" ref="layoutMenuAutocompleteRef" @select="onHandleSelect" @blur="onSearchBlur"> v-model="state.menuQuery"
:fetch-suggestions="menuSearch"
placeholder="菜单搜索"
prefix-icon="el-icon-search"
ref="layoutMenuAutocompleteRef"
@select="onHandleSelect"
@blur="onSearchBlur"
>
<template #prefix> <template #prefix>
<el-icon class="el-input__icon"> <el-icon class="el-input__icon">
<search /> <search />
</el-icon> </el-icon>
</template> </template>
<template #default="{ item }"> <template #default="{ item }">
<div> <div><SvgIcon :name="item.meta.icon" class="mr5" />{{ item.meta.title }}</div>
<SvgIcon :name="item.meta.icon" class="mr5" />{{ item.meta.title }}
</div>
</template> </template>
</el-autocomplete> </el-autocomplete>
</el-dialog> </el-dialog>
@@ -23,7 +28,7 @@ import { reactive, ref, nextTick } from 'vue';
import { useRouter } from 'vue-router'; import { useRouter } from 'vue-router';
import { useRoutesList } from '@/store/routesList'; import { useRoutesList } from '@/store/routesList';
const layoutMenuAutocompleteRef: any = ref(null);; const layoutMenuAutocompleteRef: any = ref(null);
const router = useRouter(); const router = useRouter();
const state: any = reactive({ const state: any = reactive({
isShowSearch: false, isShowSearch: false,
@@ -54,8 +59,7 @@ const menuSearch = (queryString: any, cb: any) => {
const createFilter = (queryString: any) => { const createFilter = (queryString: any) => {
return (restaurant: any) => { return (restaurant: any) => {
return ( return (
restaurant.path.toLowerCase().indexOf(queryString.toLowerCase()) > -1 || restaurant.path.toLowerCase().indexOf(queryString.toLowerCase()) > -1 || restaurant.meta.title.toLowerCase().indexOf(queryString.toLowerCase()) > -1
restaurant.meta.title.toLowerCase().indexOf(queryString.toLowerCase()) > -1
); );
}; };
}; };
@@ -97,7 +101,7 @@ const onSearchBlur = () => {
closeSearch(); closeSearch();
}; };
defineExpose({openSearch}) defineExpose({ openSearch });
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">

View File

@@ -9,10 +9,14 @@
</el-form-item> </el-form-item>
<el-form-item prop="type" label="类型" required> <el-form-item prop="type" label="类型" required>
<el-select @change="changeDbType" style="width: 100%" v-model="form.type" placeholder="请选择数据库类型"> <el-select @change="changeDbType" style="width: 100%" v-model="form.type" placeholder="请选择数据库类型">
<el-option v-for="dt in dbTypes" :key="dt.type" :value="dt.type" :label="dt.label"> <el-option v-for="(dbTypeAndDialect, key) in getDbDialectMap()" :key="key" :value="dbTypeAndDialect[0]">
<SvgIcon :name="getDbDialect(dt.type).getInfo().icon" :size="18" /> <SvgIcon :name="dbTypeAndDialect[1].getInfo().icon" :size="18" />
{{ dt.label }} {{ dbTypeAndDialect[1].getInfo().name }}
</el-option> </el-option>
<template #prefix>
<SvgIcon :name="getDbDialect(form.type).getInfo().icon" :size="18" />
</template>
</el-select> </el-select>
</el-form-item> </el-form-item>
<el-form-item v-if="form.type !== DbType.sqlite" prop="host" label="host" required> <el-form-item v-if="form.type !== DbType.sqlite" prop="host" label="host" required>
@@ -95,7 +99,7 @@ import { ElMessage } from 'element-plus';
import { notBlank } from '@/common/assert'; import { notBlank } from '@/common/assert';
import { RsaEncrypt } from '@/common/rsa'; import { RsaEncrypt } from '@/common/rsa';
import SshTunnelSelect from '../component/SshTunnelSelect.vue'; import SshTunnelSelect from '../component/SshTunnelSelect.vue';
import { DbType, getDbDialect } from './dialect'; import { DbType, getDbDialect, getDbDialectMap } from './dialect';
import SvgIcon from '@/components/svgIcon/index.vue'; import SvgIcon from '@/components/svgIcon/index.vue';
const props = defineProps({ const props = defineProps({
@@ -153,37 +157,6 @@ const rules = {
const dbForm: any = ref(null); const dbForm: any = ref(null);
const dbTypes = [
{
type: 'mysql',
label: 'MySQL',
},
{
type: 'mariadb',
label: 'MariaDB',
},
{
type: 'postgres',
label: 'PostgreSQL',
},
{
type: 'dm',
label: 'DM',
},
{
type: 'oracle',
label: 'Oracle',
},
{
type: 'sqlite',
label: 'Sqlite',
},
{
type: 'mssql',
label: 'MSSQL',
},
];
const state = reactive({ const state = reactive({
dialogVisible: false, dialogVisible: false,
tabActiveName: 'basic', tabActiveName: 'basic',
@@ -222,7 +195,7 @@ watch(props, (newValue: any) => {
state.form = { ...newValue.data }; state.form = { ...newValue.data };
state.oldUserName = state.form.username; state.oldUserName = state.form.username;
} else { } else {
state.form = { port: null } as any; state.form = { port: null, type: DbType.mysql } as any;
state.oldUserName = null; state.oldUserName = null;
} }
}); });

View File

@@ -366,6 +366,7 @@ class DMDialect implements DbDialect {
}; };
dmDialectInfo = { dmDialectInfo = {
name: 'DM',
icon: 'iconfont icon-db-dm', icon: 'iconfont icon-db-dm',
defaultPort: 5236, defaultPort: 5236,
formatSqlDialect: 'plsql', formatSqlDialect: 'plsql',

View File

@@ -81,6 +81,11 @@ export const ColumnTypeSubscript = {
// 数据库基础信息 // 数据库基础信息
export interface DialectInfo { export interface DialectInfo {
/**
* 数据库类型label
*/
name: string;
/** /**
* 图标 * 图标
*/ */
@@ -200,33 +205,28 @@ export interface DbDialect {
} }
let mysqlDialect = new MysqlDialect(); let mysqlDialect = new MysqlDialect();
let mariadbDialect = new MariadbDialect();
let postgresDialect = new PostgresqlDialect();
let dmDialect = new DMDialect();
let oracleDialect = new OracleDialect();
let sqliteDialect = new SqliteDialect();
let mssqlDialect = new MssqlDialect();
export const getDbDialect = (dbType: string | undefined): DbDialect => { let dbType2DialectMap: Map<string, DbDialect> = new Map();
if (!dbType) {
return mysqlDialect; export const registerDbDialect = (dbType: string, dd: DbDialect) => {
} dbType2DialectMap.set(dbType, dd);
switch (dbType) {
case DbType.mysql:
return mysqlDialect;
case DbType.mariadb:
return mariadbDialect;
case DbType.postgresql:
return postgresDialect;
case DbType.dm:
return dmDialect;
case DbType.oracle:
return oracleDialect;
case DbType.sqlite:
return sqliteDialect;
case DbType.mssql:
return mssqlDialect;
default:
throw new Error('不支持的数据库');
}
}; };
export const getDbDialectMap = () => {
return dbType2DialectMap;
};
export const getDbDialect = (dbType: string): DbDialect => {
return dbType2DialectMap.get(dbType) || mysqlDialect;
};
(function () {
console.log('init register db dialect');
registerDbDialect(DbType.mysql, mysqlDialect);
registerDbDialect(DbType.mariadb, new MariadbDialect());
registerDbDialect(DbType.postgresql, new PostgresqlDialect());
registerDbDialect(DbType.dm, new DMDialect());
registerDbDialect(DbType.oracle, new OracleDialect());
registerDbDialect(DbType.sqlite, new SqliteDialect());
registerDbDialect(DbType.mssql, new MssqlDialect());
})();

View File

@@ -12,6 +12,7 @@ class MariadbDialect extends MysqlDialect implements DbDialect {
mariadbDialectInfo = {} as DialectInfo; mariadbDialectInfo = {} as DialectInfo;
Object.assign(mariadbDialectInfo, super.getInfo()); Object.assign(mariadbDialectInfo, super.getInfo());
mariadbDialectInfo.name = 'MariaDB';
mariadbDialectInfo.icon = 'iconfont icon-mariadb'; mariadbDialectInfo.icon = 'iconfont icon-mariadb';
return mariadbDialectInfo; return mariadbDialectInfo;
} }

View File

@@ -107,6 +107,7 @@ class MssqlDialect implements DbDialect {
}; };
mssqlDialectInfo = { mssqlDialectInfo = {
name: 'MSSQL',
icon: 'iconfont icon-MSSQLNATIVE', icon: 'iconfont icon-MSSQLNATIVE',
defaultPort: 1433, defaultPort: 1433,
formatSqlDialect: 'transactsql', formatSqlDialect: 'transactsql',

View File

@@ -104,6 +104,7 @@ class MysqlDialect implements DbDialect {
}; };
mysqlDialectInfo = { mysqlDialectInfo = {
name: 'MySQL',
icon: 'iconfont icon-op-mysql', icon: 'iconfont icon-op-mysql',
defaultPort: 3306, defaultPort: 3306,
formatSqlDialect: 'mysql', formatSqlDialect: 'mysql',

View File

@@ -154,6 +154,7 @@ class OracleDialect implements DbDialect {
}; };
oracleDialectInfo = { oracleDialectInfo = {
name: 'Oracle',
icon: 'iconfont icon-oracle', icon: 'iconfont icon-oracle',
defaultPort: 1521, defaultPort: 1521,
formatSqlDialect: 'plsql', formatSqlDialect: 'plsql',

View File

@@ -123,6 +123,7 @@ class PostgresqlDialect implements DbDialect {
}; };
pgDialectInfo = { pgDialectInfo = {
name: 'PostgreSQL',
icon: 'iconfont icon-op-postgres', icon: 'iconfont icon-op-postgres',
defaultPort: 5432, defaultPort: 5432,
formatSqlDialect: 'postgresql', formatSqlDialect: 'postgresql',

View File

@@ -123,6 +123,7 @@ class SqliteDialect implements DbDialect {
}; };
sqliteDialectInfo = { sqliteDialectInfo = {
name: 'Sqlite',
icon: 'iconfont icon-sqlite', icon: 'iconfont icon-sqlite',
defaultPort: 0, defaultPort: 0,
formatSqlDialect: 'sql', formatSqlDialect: 'sql',

View File

@@ -93,7 +93,10 @@ func (me *MachineInfo) IfUseSshTunnelChangeIpPort() error {
func GetSshClient(m *MachineInfo, jumpClient *ssh.Client) (*ssh.Client, error) { func GetSshClient(m *MachineInfo, jumpClient *ssh.Client) (*ssh.Client, error) {
// 递归一直取到底层没有跳板机的机器信息 // 递归一直取到底层没有跳板机的机器信息
if m.SshTunnelMachine != nil { if m.SshTunnelMachine != nil {
jumpClient, _ = GetSshClient(m.SshTunnelMachine, jumpClient) jumpClient, err := GetSshClient(m.SshTunnelMachine, jumpClient)
if err != nil {
return nil, err
}
// 新建一个没有跳板机的机器信息 // 新建一个没有跳板机的机器信息
m1 := &MachineInfo{ m1 := &MachineInfo{
Ip: m.Ip, Ip: m.Ip,