Skip to content

Commit c2279ce

Browse files
qianmoQqianmoQ
committed
Support query sql
1 parent 5062a96 commit c2279ce

File tree

2 files changed

+200
-2
lines changed

2 files changed

+200
-2
lines changed

‎src/renderer/views/query/components/QuickQuery.vue

Lines changed: 178 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,178 @@
1+
<template>
2+
<el-dialog title="Quick Query" :visible.sync="bodyLoading" @close="closeDialog">
3+
<el-row :gutter="20">
4+
<el-col :span="8">
5+
<el-card class="box-card">
6+
<div slot="header" class="clearfix">
7+
<span><i class="fa fa-server"></i> DataSource</span>
8+
</div>
9+
<el-menu>
10+
<el-menu-item
11+
v-for="(server, index) in servers"
12+
:key="index"
13+
:index="server.name"
14+
@click="handlerShowData(server, 'database')">
15+
<span slot="title"> {{server.name}} </span>
16+
</el-menu-item>
17+
</el-menu>
18+
</el-card>
19+
</el-col>
20+
<el-col :span="8">
21+
<el-card class="box-card">
22+
<div slot="header" class="clearfix">
23+
<span><i class="fa fa-database"></i> Databases</span>
24+
</div>
25+
<el-menu>
26+
<el-menu-item
27+
v-for="(database, index) in databases"
28+
:key="index"
29+
:index="database.name"
30+
@click="handlerShowData(database.name, 'table')">
31+
<span slot="title"> {{database.name}} </span>
32+
</el-menu-item>
33+
</el-menu>
34+
</el-card>
35+
</el-col>
36+
<el-col :span="8">
37+
<el-card class="box-card">
38+
<div slot="header" class="clearfix">
39+
<span><i class="fa fa-table"></i> Tables</span>
40+
</div>
41+
<el-menu>
42+
<el-menu-item
43+
v-for="(table, index) in tables"
44+
:key="index"
45+
:index="table.name"
46+
@click="handlerShowData(table.name, null)">
47+
<span slot="title"> {{table.name}} </span>
48+
</el-menu-item>
49+
</el-menu>
50+
</el-card>
51+
</el-col>
52+
</el-row>
53+
<div slot="footer" class="dialog-footer">
54+
<el-button @click="bodyLoading = false" size="mini">Cancel</el-button>
55+
<el-dropdown v-if="remoteTable !== null" size="mini" split-button type="primary" @command="hadnlerGenerSql"> Quick
56+
<el-dropdown-menu slot="dropdown">
57+
<el-dropdown-item command="DESCRIBE">DESCRIBE ...</el-dropdown-item>
58+
<el-dropdown-item command="LIMIT">SELECT ... LIMIT 100</el-dropdown-item>
59+
</el-dropdown-menu>
60+
</el-dropdown>
61+
</div>
62+
</el-dialog>
63+
</template>
64+
65+
<script>
66+
import { runExecute } from '@/api/query'
67+
import { stringFormat } from '@/utils/utils'
68+
69+
export default {
70+
name: 'QuickQuery',
71+
props: {
72+
loading: {
73+
type: Boolean,
74+
default: false
75+
}
76+
},
77+
created() {
78+
this.servers = JSON.parse(localStorage.getItem('DataSources'))
79+
},
80+
data() {
81+
return {
82+
bodyLoading: false,
83+
remoteServer: null,
84+
remoteDatabase: null,
85+
remoteTable: null,
86+
remoteQuerySql: null,
87+
quickSql: null,
88+
servers: [],
89+
databases: [],
90+
tables: []
91+
}
92+
},
93+
methods: {
94+
closeDialog() {
95+
this.$emit('close')
96+
},
97+
handlerShowData(source, type) {
98+
switch (type) {
99+
case 'database':
100+
this.remoteServer = stringFormat('http://{0}:{1}', [source.host, source.port])
101+
this.remoteQuerySql = 'SHOW DATABASES'
102+
this.remoteTable = null
103+
break
104+
case 'table':
105+
this.remoteDatabase = source
106+
this.remoteQuerySql = stringFormat('SELECT name, engine FROM system.tables WHERE database = \'{0}\'', [source])
107+
this.remoteTable = null
108+
break
109+
default:
110+
this.remoteTable = source
111+
}
112+
runExecute(this.remoteServer, this.remoteQuerySql).then(response => {
113+
if (response.status === 200) {
114+
switch (type) {
115+
case 'database':
116+
this.databases = response.data.data
117+
break
118+
case 'table':
119+
this.tables = response.data.data
120+
break
121+
}
122+
}
123+
}).catch(response => {
124+
this.$notify.error({
125+
title: 'Error',
126+
message: response.data
127+
})
128+
})
129+
},
130+
hadnlerGenerSql(quick) {
131+
switch (quick) {
132+
case 'DESCRIBE':
133+
this.quickSql = stringFormat('DESCRIBE {0}.{1}', [this.remoteDatabase, this.remoteTable])
134+
break
135+
case 'LIMIT':
136+
this.quickSql = stringFormat('SELECT * FROM {0}.{1} LIMIT 100', [this.remoteDatabase, this.remoteTable])
137+
break
138+
}
139+
this.$emit('getQuickSql', this.quickSql)
140+
this.closeDialog()
141+
}
142+
},
143+
watch: {
144+
loading: {
145+
deep: true,
146+
handler() {
147+
this.bodyLoading = this.loading
148+
}
149+
}
150+
}
151+
}
152+
</script>
153+
<style scoped>
154+
/deep/ .el-card__header {
155+
padding: 5px 15px;
156+
}
157+
/deep/ .el-card__body {
158+
padding: 0px;
159+
}
160+
/deep/ .el-menu {
161+
border-right: solid 0px #e6e6e6;
162+
}
163+
.el-menu-item {
164+
padding: 0;
165+
cursor: pointer;
166+
}
167+
/deep/ .el-menu-item, .el-submenu__title {
168+
line-height: 25px;
169+
height: 30px;
170+
border-bottom: solid 1px #e6e6e6;
171+
}
172+
/deep/ .el-dialog__body {
173+
padding: 10px 15px;
174+
}
175+
/deep/ .el-row {
176+
margin-top: 0px;
177+
}
178+
</style>

‎src/renderer/views/query/index.vue

Lines changed: 22 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,12 @@
1212
</el-option>
1313
</el-select>
1414
<el-button type="primary" icon="el-icon-edit" size="mini" :loading="executeLoading" @click="handlerExecute()">Execute</el-button>
15+
<el-button
16+
type="success"
17+
icon="el-icon-more"
18+
size="mini"
19+
style="float: right;"
20+
@click="handlerQuickQuery()">Quick Query</el-button>
1521
</el-row>
1622
<el-row v-loading="executeLoading">
1723
<textarea ref='mycode' class='codesql' v-model='code'></textarea>
@@ -33,6 +39,8 @@
3339
<el-row>
3440
<table-detail :columns="columns" :headers="headers" :loading="executeLoading"></table-detail>
3541
</el-row>
42+
<!-- Quick Query -->
43+
<quick-query :loading="quickQueryLoading" @close="handlerCloseQuickQuery" @getQuickSql="handlerGetQuickSql"></quick-query>
3644
</div>
3745
</template>
3846

@@ -43,6 +51,7 @@ import { runExecute } from '@/api/query'
4351
import 'codemirror/theme/ambiance.css'
4452
import 'codemirror/lib/codemirror.css'
4553
import 'codemirror/addon/hint/show-hint.css'
54+
import QuickQuery from './components/QuickQuery.vue'
4655
4756
const CodeMirror = require('codemirror/lib/codemirror')
4857
require('codemirror/addon/edit/matchbrackets')
@@ -54,7 +63,8 @@ require('codemirror/addon/hint/sql-hint')
5463
export default {
5564
name: 'codeMirror',
5665
components: {
57-
TableDetail
66+
TableDetail,
67+
QuickQuery
5868
},
5969
data() {
6070
return {
@@ -67,7 +77,8 @@ export default {
6777
rows: null,
6878
statistics: {},
6979
selectValue: {},
70-
selectServers: []
80+
selectServers: [],
81+
quickQueryLoading: false
7182
}
7283
},
7384
mounted() {
@@ -127,6 +138,15 @@ export default {
127138
this.executeLoading = false
128139
})
129140
}
141+
},
142+
handlerQuickQuery() {
143+
this.quickQueryLoading = true
144+
},
145+
handlerCloseQuickQuery() {
146+
this.quickQueryLoading = false
147+
},
148+
handlerGetQuickSql(value) {
149+
this.editor.setValue(value)
130150
}
131151
}
132152
}

0 commit comments

Comments
 (0)