mirror of
https://gitee.com/dromara/mayfly-go
synced 2025-12-15 12:16:34 +08:00
feat: 代码小调整
This commit is contained in:
meilin.huang
@@ -1,127 +1,114 @@
|
||||
<template>
|
||||
<div class="instances-box layout-aside">
|
||||
<el-row type="flex" justify="space-between">
|
||||
<el-col :span="24" :style="{maxHeight: instanceMenuMaxHeight,height: instanceMenuMaxHeight, overflow:'auto'}" class="el-scrollbar flex-auto">
|
||||
<el-menu background-color="transparent" ref="menuRef">
|
||||
<!-- 第一级：tag -->
|
||||
<el-sub-menu v-for="tag of instances.tags" :index="tag.tagPath" :key="tag.tagPath">
|
||||
<template #title>
|
||||
<el-icon>
|
||||
<FolderOpened color="#e6a23c" />
|
||||
</el-icon>
|
||||
<span>{{ tag.tagPath }}</span>
|
||||
<tag-menu :instanceMenuMaxHeight="instanceMenuMaxHeight" :tags="instances.tags">
|
||||
<template #submenu="props">
|
||||
<!-- 第二级：数据库实例 -->
|
||||
<el-sub-menu v-for="inst in instances.tree[props.tag.tagId]" :index="'instance-' + inst.id"
|
||||
:key="'instance-' + inst.id" @click.stop="changeInstance(inst, () => { })">
|
||||
<template #title>
|
||||
<el-popover placement="right-start" title="数据库实例信息" trigger="hover" :width="210">
|
||||
<template #reference>
|
||||
<span> <el-icon>
|
||||
<MostlyCloudy color="#409eff" />
|
||||
</el-icon>{{ inst.name }}</span>
|
||||
</template>
|
||||
<!-- 第二级：数据库实例 -->
|
||||
<el-sub-menu v-for="inst in instances.tree[tag.tagId]" :index="'instance-' + inst.id"
|
||||
:key="'instance-' + inst.id" @click="changeInstance(inst, ()=>{})">
|
||||
<template #default>
|
||||
<el-form class="instances-pop-form" label-width="55px" :size="'small'">
|
||||
<el-form-item label="类型:">{{ inst.type }}</el-form-item>
|
||||
<el-form-item label="链接:">{{ inst.host }}:{{ inst.port }}</el-form-item>
|
||||
<el-form-item label="用户:">{{ inst.username }}</el-form-item>
|
||||
<el-form-item v-if="inst.remark" label="备注:">{{
|
||||
inst.remark
|
||||
}}</el-form-item>
|
||||
</el-form>
|
||||
</template>
|
||||
</el-popover>
|
||||
</template>
|
||||
<!-- 第三级：数据库 -->
|
||||
<el-sub-menu v-for="schema in instances.dbs[inst.id]" :index="inst.id + schema" :key="inst.id + schema"
|
||||
:class="state.nowSchema === (inst.id + schema) && 'checked'"
|
||||
@click.stop="changeSchema(inst, schema)">
|
||||
<template #title>
|
||||
<el-icon>
|
||||
<Coin color="#67c23a" />
|
||||
</el-icon>
|
||||
<span class="checked-schema">{{ schema }}</span>
|
||||
</template>
|
||||
<!-- 第四级 01：表 -->
|
||||
<el-sub-menu :index="inst.id + schema + '-table'">
|
||||
<template #title>
|
||||
<div style="width: 100%" @click="loadTableNames(inst, schema, () => { })">
|
||||
<el-icon>
|
||||
<Calendar color="#409eff" />
|
||||
</el-icon>
|
||||
<span>表</span>
|
||||
<el-icon v-show="state.loading[inst.id + schema]" class="is-loading">
|
||||
<Loading />
|
||||
</el-icon>
|
||||
</div>
|
||||
</template>
|
||||
<el-menu-item :index="inst.id + schema + '-tableSearch'"
|
||||
:key="inst.id + schema + '-tableSearch'">
|
||||
<template #title>
|
||||
<el-popover placement="right-start" title="数据库实例信息" trigger="hover" :width="210">
|
||||
<template #reference>
|
||||
<span> <el-icon>
|
||||
<MostlyCloudy color="#409eff" />
|
||||
</el-icon>{{ inst.name }}</span>
|
||||
</template>
|
||||
<template #default>
|
||||
<el-form class="instances-pop-form" label-width="55px" :size="'small'">
|
||||
<el-form-item label="类型:">{{ inst.type }}</el-form-item>
|
||||
<el-form-item label="链接:">{{ inst.host }}:{{ inst.port }}</el-form-item>
|
||||
<el-form-item label="用户:">{{ inst.username }}</el-form-item>
|
||||
<el-form-item v-if="inst.remark" label="备注:">{{
|
||||
inst.remark
|
||||
}}</el-form-item>
|
||||
</el-form>
|
||||
</template>
|
||||
</el-popover>
|
||||
|
||||
<el-input size="small" placeholder="过滤表" clearable
|
||||
@change="filterTableName(inst.id, schema)"
|
||||
@keyup="(e: any) => filterTableName(inst.id, schema, e)"
|
||||
v-model="state.filterParam[inst.id + schema]" />
|
||||
</template>
|
||||
<!-- 第三级：数据库 -->
|
||||
<el-sub-menu v-for="schema in instances.dbs[inst.id]" :index="inst.id + schema"
|
||||
:key="inst.id + schema" :class="state.nowSchema === (inst.id + schema) && 'checked'"
|
||||
@click="changeSchema(inst, schema)">
|
||||
</el-menu-item>
|
||||
|
||||
<template v-for="tb in instances.tables[inst.id + schema]">
|
||||
<el-menu-item :index="inst.id + schema + tb.tableName"
|
||||
:key="inst.id + schema + tb.tableName" v-if="tb.show"
|
||||
@click="loadTableData(inst, schema, tb.tableName)">
|
||||
<template #title>
|
||||
<el-icon>
|
||||
<Coin color="#67c23a" />
|
||||
</el-icon>
|
||||
<span class="checked-schema">{{ schema }}</span>
|
||||
</template>
|
||||
<!-- 第四级 01：表 -->
|
||||
<el-sub-menu :index="inst.id + schema + '-table'">
|
||||
<template #title>
|
||||
<div style="width: 100%" @click="loadTableNames(inst, schema, ()=>{})">
|
||||
<el-icon>
|
||||
<Calendar color="#409eff"/>
|
||||
</el-icon>
|
||||
<span>表</span>
|
||||
<el-icon v-show="state.loading[inst.id + schema]" class="is-loading">
|
||||
<Loading />
|
||||
</el-icon>
|
||||
</div>
|
||||
</template>
|
||||
<el-menu-item :index="inst.id + schema + '-tableSearch'"
|
||||
:key="inst.id + schema + '-tableSearch'">
|
||||
<template #title>
|
||||
|
||||
<el-input size="small" placeholder="过滤表" clearable
|
||||
@change="filterTableName(inst.id, schema)"
|
||||
@keyup="(e: any) => filterTableName(inst.id, schema, e)"
|
||||
v-model="state.filterParam[inst.id + schema]" />
|
||||
</template>
|
||||
</el-menu-item>
|
||||
|
||||
<template v-for="tb in instances.tables[inst.id + schema]">
|
||||
<el-menu-item :index="inst.id + schema + tb.tableName"
|
||||
:key="inst.id + schema + tb.tableName" v-if="tb.show"
|
||||
@click="loadTableData(inst, schema, tb.tableName)">
|
||||
<template #title>
|
||||
<div style="width: 100%">
|
||||
<el-icon>
|
||||
<Calendar color="#409eff" />
|
||||
</el-icon>
|
||||
<el-tooltip v-if="tb.tableComment" effect="customized"
|
||||
:content="tb.tableComment" placement="right">
|
||||
{{ tb.tableName }}
|
||||
</el-tooltip>
|
||||
<span v-else>{{ tb.tableName }}</span>
|
||||
</div>
|
||||
</template>
|
||||
</el-menu-item>
|
||||
</template>
|
||||
</el-sub-menu>
|
||||
<!-- 第四级 02：sql -->
|
||||
<el-sub-menu :index="inst.id + schema + '-sql'">
|
||||
<template #title>
|
||||
<el-icon>
|
||||
<List color="#f56c6c" />
|
||||
<div style="width: 100%">
|
||||
<el-icon>
|
||||
<Calendar color="#409eff" />
|
||||
</el-icon>
|
||||
<span>sql</span>
|
||||
</template>
|
||||
|
||||
<template v-for="sql in instances.sqls[inst.id + schema]">
|
||||
<el-menu-item :index="inst.id + schema + sql.name"
|
||||
:key="inst.id + schema + sql.name" v-if="sql.show"
|
||||
@click="loadSql(inst, schema, sql.name)">
|
||||
<template #title>
|
||||
<div style="width: 100%">
|
||||
<el-icon>
|
||||
<Calendar color="#409eff" />
|
||||
</el-icon>
|
||||
<span>{{ sql.name }}</span>
|
||||
</div>
|
||||
</template>
|
||||
</el-menu-item>
|
||||
</template>
|
||||
</el-sub-menu>
|
||||
</el-sub-menu>
|
||||
</el-sub-menu>
|
||||
<el-tooltip v-if="tb.tableComment" effect="customized"
|
||||
:content="tb.tableComment" placement="right">
|
||||
{{ tb.tableName }}
|
||||
</el-tooltip>
|
||||
<span v-else>{{ tb.tableName }}</span>
|
||||
</div>
|
||||
</template>
|
||||
</el-menu-item>
|
||||
</template>
|
||||
</el-sub-menu>
|
||||
</el-menu>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
<!-- 第四级 02：sql -->
|
||||
<el-sub-menu :index="inst.id + schema + '-sql'">
|
||||
<template #title>
|
||||
<el-icon>
|
||||
<List color="#f56c6c" />
|
||||
</el-icon>
|
||||
<span>sql</span>
|
||||
</template>
|
||||
|
||||
<template v-for="sql in instances.sqls[inst.id + schema]">
|
||||
<el-menu-item :index="inst.id + schema + sql.name" :key="inst.id + schema + sql.name"
|
||||
v-if="sql.show" @click="loadSql(inst, schema, sql.name)">
|
||||
<template #title>
|
||||
<div style="width: 100%">
|
||||
<el-icon>
|
||||
<Calendar color="#409eff" />
|
||||
</el-icon>
|
||||
<span>{{ sql.name }}</span>
|
||||
</div>
|
||||
</template>
|
||||
</el-menu-item>
|
||||
</template>
|
||||
</el-sub-menu>
|
||||
</el-sub-menu>
|
||||
</el-sub-menu>
|
||||
</template>
|
||||
</tag-menu>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import {nextTick, onBeforeMount, onMounted, reactive, ref, Ref, watch} from 'vue';
|
||||
import {store} from '@/store';
|
||||
import { nextTick, onBeforeMount, onMounted, reactive, ref, Ref, watch } from 'vue';
|
||||
import { store } from '@/store';
|
||||
import TagMenu from '../../component/TagMenu.vue';
|
||||
|
||||
const props = defineProps({
|
||||
instanceMenuMaxHeight: {
|
||||
@@ -158,8 +145,8 @@ const initLoadInstances = () => {
|
||||
* @param inst 选中的实例对象
|
||||
* @param fn 选中的实例对象后的回调函数
|
||||
*/
|
||||
const changeInstance = (inst : any, fn: Function) => {
|
||||
emits('changeInstance', inst, fn)
|
||||
const changeInstance = (inst: any, fn: Function) => {
|
||||
emits('changeInstance', inst, fn)
|
||||
}
|
||||
/**
|
||||
* 改变选中的数据库schema
|
||||
@@ -178,9 +165,9 @@ const changeSchema = (inst: any, schema: string) => {
|
||||
*/
|
||||
const loadTableNames = async (inst: any, schema: string, fn: Function) => {
|
||||
state.loading[inst.id + schema] = true
|
||||
await emits('loadTableNames', inst, schema, (res: any[])=>{
|
||||
await emits('loadTableNames', inst, schema, (res: any[]) => {
|
||||
state.loading[inst.id + schema] = false
|
||||
fn && fn(res)
|
||||
fn && fn(res)
|
||||
})
|
||||
}
|
||||
/**
|
||||
@@ -206,81 +193,41 @@ const filterTableName = (instId: number, schema: string, event?: any) => {
|
||||
}
|
||||
|
||||
const selectDb = async (val?: any) => {
|
||||
let info = val || store.state.sqlExecInfo.dbOptInfo;
|
||||
if (info && info.dbId) {
|
||||
const {tagPath, dbId, db} = info
|
||||
menuRef.value.open(tagPath);
|
||||
menuRef.value.open('instance-' + dbId);
|
||||
await changeInstance({id: dbId}, () => {
|
||||
// 加载数据库
|
||||
nextTick(async () => {
|
||||
menuRef.value.open(dbId + db)
|
||||
state.nowSchema = (dbId+db)
|
||||
// 加载集合列表
|
||||
await nextTick(async () => {
|
||||
await loadTableNames({id: dbId}, db, (res: any[]) => {
|
||||
// 展开集合列表
|
||||
menuRef.value.open(dbId + db + '-table')
|
||||
console.log(res)
|
||||
})
|
||||
let info = val || store.state.sqlExecInfo.dbOptInfo;
|
||||
if (info && info.dbId) {
|
||||
const { tagPath, dbId, db } = info
|
||||
menuRef.value.open(tagPath);
|
||||
menuRef.value.open('instance-' + dbId);
|
||||
await changeInstance({ id: dbId }, () => {
|
||||
// 加载数据库
|
||||
nextTick(async () => {
|
||||
menuRef.value.open(dbId + db)
|
||||
state.nowSchema = (dbId + db)
|
||||
// 加载集合列表
|
||||
await nextTick(async () => {
|
||||
await loadTableNames({ id: dbId }, db, (res: any[]) => {
|
||||
// 展开集合列表
|
||||
menuRef.value.open(dbId + db + '-table')
|
||||
console.log(res)
|
||||
})
|
||||
})
|
||||
})
|
||||
})
|
||||
})
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(()=>{
|
||||
selectDb();
|
||||
onMounted(() => {
|
||||
selectDb();
|
||||
})
|
||||
|
||||
watch(()=>store.state.sqlExecInfo.dbOptInfo, async newValue => {
|
||||
await selectDb(newValue)
|
||||
watch(() => store.state.sqlExecInfo.dbOptInfo, async newValue => {
|
||||
await selectDb(newValue)
|
||||
})
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.instances-box {
|
||||
.el-menu {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.el-sub-menu {
|
||||
.checked {
|
||||
.checked-schema {
|
||||
color: var(--el-color-primary);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.el-sub-menu__title {
|
||||
padding-left: 0 !important;
|
||||
height: 30px !important;
|
||||
line-height: 30px !important;
|
||||
}
|
||||
|
||||
.el-menu--vertical:not(.el-menu--collapse):not(.el-menu--popup-container) .el-sub-menu__title {
|
||||
padding-right: 10px;
|
||||
}
|
||||
|
||||
.el-menu-item {
|
||||
padding-left: 0 !important;
|
||||
height: 20px !important;
|
||||
line-height: 20px !important;
|
||||
}
|
||||
|
||||
.el-icon {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.el-sub-menu__icon-arrow {
|
||||
top: inherit;
|
||||
right: 10px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.instances-pop-form {
|
||||
.el-form-item {
|
||||
margin-bottom: unset;
|
||||
|
||||
Reference in New Issue
Block a user