feat(console): enhance database manager functionality and layout

- Add queryDataFromTable and queryTables functions
- Implement database and table selection
- Adjust layout for better usability
- Optimize SQL query execution
This commit is contained in:
rick 2025-02-28 08:26:18 +08:00
parent 93edc75276
commit a2dff02305
No known key found for this signature in database
GPG Key ID: 260A80C757EC6783
1 changed files with 18 additions and 8 deletions

View File

@ -23,6 +23,14 @@ watch(store, (s) => {
}
})
})
const queryDataFromTable = (data) => {
sqlQuery.value = `select * from ${data.label} limit 10`
executeQuery()
}
const queryTables = () => {
sqlQuery.value = `show tables`
executeQuery()
}
watch(kind, (k) => {
switch (k) {
case 'atest-store-orm':
@ -118,18 +126,20 @@ const executeQuery = async () => {
<template>
<div>
<el-container>
<el-aside width="200px">
<el-select v-model="currentDatabase" placeholder="Select database">
<el-option v-for="item in databases" :key="item" :label="item"
:value="item"></el-option>
</el-select>
<el-tree :data="tablesTree" node-key="label" />
<el-aside>
<el-scrollbar height="1024px">
<el-select v-model="currentDatabase" placeholder="Select database" @change="queryTables">
<el-option v-for="item in databases" :key="item" :label="item"
:value="item"></el-option>
</el-select>
<el-tree :data="tablesTree" node-key="label" @node-click="queryDataFromTable"/>
</el-scrollbar>
</el-aside>
<el-container>
<el-header>
<el-form @submit.prevent="executeQuery">
<el-row :gutter="10">
<el-col :span="2">
<el-col :span="4">
<el-form-item>
<el-select v-model="store" placeholder="Select store">
<el-option v-for="item in stores" :key="item.name" :label="item.name"
@ -137,7 +147,7 @@ const executeQuery = async () => {
</el-select>
</el-form-item>
</el-col>
<el-col :span="18">
<el-col :span="17">
<el-form-item>
<el-input v-model="sqlQuery" :placeholder="queryTip" @keyup.enter="executeQuery"></el-input>
</el-form-item>