TRKJ/mayfly-go
2
0
Fork 0
mirror of https://gitee.com/dromara/mayfly-go synced 2025-11-02 23:40:24 +08:00
Code Issues Packages Projects Releases Wiki Activity

表和schema超出20条后启用过滤

Browse Source
This commit is contained in:
meilin.huang
2023-02-13 21:11:16 +08:00
committed by 刘宗洋
parent 70b586e45a
commit 3ab4ac891b
1 changed files with 45 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

66
mayfly_go_web/src/views/ops/db/component/InstanceTree.vue
View File

@@ -23,45 +23,54 @@
</template> </template>
</el-popover> </el-popover>
</template> </template>
<el-menu-item v-if="dbs[inst.id]?.length> 20" :index="'schema-filter-' + inst.id" :key="'schema-filter-' + inst.id">
<template #title>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<el-input size="small" placeholder="过滤数据库" clearable
@change="filterSchemaName(inst.id)"
@keyup="(e: any) => filterSchemaName(inst.id, e)"
v-model="state.schemaFilterParam[inst.id]" />
</template>
</el-menu-item>
<!-- 第三级：数据库 --> <!-- 第三级：数据库 -->
<el-sub-menu v-for="schema in dbs[inst.id]" :index="inst.id + schema" :key="inst.id + schema" <el-sub-menu v-show="schema.show" v-for="schema in dbs[inst.id]" :index="inst.id + schema.name" :key="inst.id + schema.name"
:class="state.nowSchema === (inst.id + schema) && 'checked'" :class="state.nowSchema === (inst.id + schema.name) && 'checked'"
@click.stop="changeSchema(inst, schema)"> @click.stop="changeSchema(inst, schema.name)">
<template #title> <template #title>
<span class="checked-schema ml20"> <span class="checked-schema ml20">
<el-icon> <el-icon>
<Coin color="#67c23a" /> <Coin color="#67c23a" />
</el-icon>{{ schema }}</span> </el-icon>{{ schema.name }}</span>
</template> </template>
<!-- 第四级 01：表 --> <!-- 第四级 01：表 -->
<el-sub-menu :index="inst.id + schema + '-table'"> <el-sub-menu :index="inst.id + schema.name + '-table'">
<template #title> <template #title>
<div class="ml30" style="width: 100%" @click="loadSchemaTables(inst, schema)"> <div class="ml30" style="width: 100%" @click="loadSchemaTables(inst, schema.name)">
<el-icon> <el-icon>
<Calendar color="#409eff" /> <Calendar color="#409eff" />
</el-icon> </el-icon>
<span>表</span> <span>表</span>
<el-icon v-show="state.loading[inst.id + schema]" class="is-loading"> <el-icon v-show="state.loading[inst.id + schema.name]" class="is-loading">
<Loading /> <Loading />
</el-icon> </el-icon>
</div> </div>
</template> </template>
<el-menu-item :index="inst.id + schema + '-tableSearch'" <el-menu-item v-if="tables[inst.id + schema.name]?.length> 20" :index="inst.id + schema.name + '-tableSearch'"
:key="inst.id + schema + '-tableSearch'"> :key="inst.id + schema.name + '-tableSearch'">
<template #title> <template #title>
<span class="ml35"> <span class="ml35">
<el-input size="small" placeholder="表名、备注过滤表" clearable <el-input size="small" placeholder="表名、备注过滤表" clearable
@change="filterTableName(inst.id, schema)" @change="filterTableName(inst.id, schema.name)"
@keyup="(e: any) => filterTableName(inst.id, schema, e)" @keyup="(e: any) => filterTableName(inst.id, schema.name, e)"
v-model="state.filterParam[inst.id + schema]" /> v-model="state.filterParam[inst.id + schema.name]" />
</span> </span>
</template> </template>
</el-menu-item> </el-menu-item>
<template v-for="tb in tables[inst.id + schema]"> <template v-for="tb in tables[inst.id + schema.name]">
<el-menu-item :index="inst.id + schema + tb.tableName" <el-menu-item :index="inst.id + schema.name + tb.tableName"
:key="inst.id + schema + tb.tableName" v-if="tb.show" :key="inst.id + schema.name + tb.tableName" v-if="tb.show"
@click="clickSchemaTable(inst, schema, tb.tableName)"> @click="clickSchemaTable(inst, schema.name, tb.tableName)">
<template #title> <template #title>
<div class="ml35" style="width: 100%"> <div class="ml35" style="width: 100%">
<el-icon> <el-icon>
@@ -78,7 +87,7 @@
</template> </template>
</el-sub-menu> </el-sub-menu>
<!-- 第四级 02：sql --> <!-- 第四级 02：sql -->
<el-sub-menu @click.stop="loadSqls(inst, schema)" :index="inst.id + schema + '-sql'"> <el-sub-menu @click.stop="loadSqls(inst, schema.name)" :index="inst.id + schema.name + '-sql'">
<template #title> <template #title>
<span class="ml30"> <span class="ml30">
<el-icon> <el-icon>
@@ -88,9 +97,9 @@
</span> </span>
</template> </template>
<template v-for="sql in sqls[inst.id + schema]"> <template v-for="sql in sqls[inst.id + schema.name]">
<el-menu-item v-if="sql.show" :index="inst.id + schema + sql.name" <el-menu-item v-if="sql.show" :index="inst.id + schema.name + sql.name"
:key="inst.id + schema + sql.name" @click="clickSqlName(inst, schema, sql.name)"> :key="inst.id + schema.name + sql.name" @click="clickSqlName(inst, schema.name, sql.name)">
<template #title> <template #title>
<div class="ml35" style="width: 100%"> <div class="ml35" style="width: 100%">
<el-icon> <el-icon>
@@ -129,6 +138,7 @@ const state = reactive({
sqls: {}, sqls: {},
nowSchema: '', nowSchema: '',
filterParam: {}, filterParam: {},
schemaFilterParam: {},
loading: {}, loading: {},
instanceMenuMaxHeight: '850px', instanceMenuMaxHeight: '850px',
}) })
@@ -158,7 +168,10 @@ const loadInstances = async () => {
state.tree[db.tagId] = arr; state.tree[db.tagId] = arr;
// dbs // dbs
state.dbs[db.id] = db.database.split(' ') let databases = db.database.split(' ')
let dbs = [] as any [];
databases.forEach((a: string) =>dbs.push({name: a, show: true}))
state.dbs[db.id] = dbs
} }
} }
@@ -221,6 +234,17 @@ const filterTableName = (instId: number, schema: string, event?: any) => {
}) })
} }
const filterSchemaName = (instId: number, event?: any) => {
if (event) {
state.schemaFilterParam[instId] = event.target.value
}
let param = state.schemaFilterParam[instId] as string
param = param?.replace('/', '\/')
state.dbs[instId].forEach((a: any) => {
a.show = param ? eval('/' + param.split('').join('[_\w]*') + '[_\w]*/ig').test(a.name) : true
})
}
/** /**
* 加载用户保存的sql脚本 * 加载用户保存的sql脚本
* *