|
|
@@ -4,7 +4,7 @@
|
|
4
|
4
|
<head>
|
|
5
|
5
|
<meta charset="UTF-8">
|
|
6
|
6
|
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
|
|
7
|
|
- <title>数据库管理</title>
|
|
|
7
|
+ <title>数据库表查询</title>
|
|
8
|
8
|
<script src="https://kylx365-1253256735.file.myqcloud.com/js/jquery-1.10.2.min.js"></script>
|
|
9
|
9
|
<script src="https://kylx365-1253256735.file.myqcloud.com/js/vue.min.js"></script>
|
|
10
|
10
|
<style>
|
|
|
@@ -586,7 +586,7 @@
|
|
586
|
586
|
<div id="app" class="main00 FlexColumn">
|
|
587
|
587
|
<div class="ListTop FlexRow">
|
|
588
|
588
|
<div class="ListTop3 FlexRow" style="width: 100%; justify-content: space-between;">
|
|
589
|
|
- <div class="title">数据库管理</div>
|
|
|
589
|
+ <div class="title">数据库表查询</div>
|
|
590
|
590
|
</div>
|
|
591
|
591
|
</div>
|
|
592
|
592
|
<div class="main0 FlexRow">
|
|
|
@@ -635,29 +635,8 @@
|
|
635
|
635
|
<!-- SQL编辑器 -->
|
|
636
|
636
|
<div class="sql-editor">
|
|
637
|
637
|
<!-- 左侧SQL编辑区域 -->
|
|
638
|
|
- <div class="sql-editor-left">
|
|
639
|
|
- <textarea class="sql-textarea" v-model="sqlQuery" placeholder="输入SQL查询语句..."></textarea>
|
|
640
|
|
- <div class="btn-group" style="justify-content: flex-start;">
|
|
641
|
|
- <button type="button" class="btn btn-default" @click="insertSqlClause('WHERE')">WHERE</button>
|
|
642
|
|
- <button type="button" class="btn btn-default" @click="insertSqlClause('INNER JOIN ON')" :disabled="!hasWhere">INNER JOIN ON</button>
|
|
643
|
|
- <button type="button" class="btn btn-default" @click="insertSqlClause('GROUP BY')">GROUP BY</button>
|
|
644
|
|
- <button type="button" class="btn btn-default" @click="insertSqlClause('HAVING')" :disabled="!hasGroupBy">HAVING</button>
|
|
645
|
|
- <button type="button" class="btn btn-default" @click="insertSqlClause('ORDER BY')">ORDER BY</button>
|
|
646
|
|
- <select class="btn btn-default" v-model="selectedLimit" @change="updateQueryLimit"
|
|
647
|
|
- style="margin-left: 8px;">
|
|
648
|
|
- <option v-for="limit in limitOptions" :key="limit" :value="limit">
|
|
649
|
|
- LIMIT {{ limit }}
|
|
650
|
|
- </option>
|
|
651
|
|
- </select>
|
|
652
|
|
- <div style="margin-left: auto;">
|
|
653
|
|
- <button type="button" class="btn btn-default" @click="clearQuery">清空</button>
|
|
654
|
|
- <button type="button" class="btn btn-primary" @click="executeQuery">执行</button>
|
|
655
|
|
- </div>
|
|
656
|
|
- </div>
|
|
657
|
|
- </div>
|
|
658
|
|
-
|
|
659
|
|
- <!-- 右侧字段列表 -->
|
|
660
|
|
- <div class="sql-editor-right">
|
|
|
638
|
+
|
|
|
639
|
+<div class="sql-editor-right">
|
|
661
|
640
|
<div v-if="isColumnsLoading" class="loading-overlay">
|
|
662
|
641
|
<div class="loading-spinner"></div>
|
|
663
|
642
|
</div>
|
|
|
@@ -679,6 +658,27 @@
|
|
679
|
658
|
</div>
|
|
680
|
659
|
</div>
|
|
681
|
660
|
</div>
|
|
|
661
|
+ <!-- 右侧字段列表 -->
|
|
|
662
|
+ <div class="sql-editor-left">
|
|
|
663
|
+ <textarea class="sql-textarea" v-model="sqlQuery" placeholder="输入SQL查询语句..."></textarea>
|
|
|
664
|
+ <div class="btn-group" style="justify-content: flex-start;">
|
|
|
665
|
+ <button type="button" class="btn btn-default" @click="insertSqlClause('WHERE')">WHERE</button>
|
|
|
666
|
+ <button type="button" class="btn btn-default" @click="insertSqlClause('INNER JOIN ON')" :disabled="!hasWhere">INNER JOIN ON</button>
|
|
|
667
|
+ <button type="button" class="btn btn-default" @click="insertSqlClause('GROUP BY')">GROUP BY</button>
|
|
|
668
|
+ <button type="button" class="btn btn-default" @click="insertSqlClause('HAVING')" :disabled="!hasGroupBy">HAVING</button>
|
|
|
669
|
+ <button type="button" class="btn btn-default" @click="insertSqlClause('ORDER BY')">ORDER BY</button>
|
|
|
670
|
+ <select class="btn btn-default" v-model="selectedLimit" @change="updateQueryLimit"
|
|
|
671
|
+ style="margin-left: 8px;">
|
|
|
672
|
+ <option v-for="limit in limitOptions" :key="limit" :value="limit">
|
|
|
673
|
+ LIMIT {{ limit }}
|
|
|
674
|
+ </option>
|
|
|
675
|
+ </select>
|
|
|
676
|
+ <div style="margin-left: auto;">
|
|
|
677
|
+ <button type="button" class="btn btn-default" @click="clearQuery">清空</button>
|
|
|
678
|
+ <button type="button" class="btn btn-primary" @click="executeQuery">执行</button>
|
|
|
679
|
+ </div>
|
|
|
680
|
+ </div>
|
|
|
681
|
+ </div>
|
|
682
|
682
|
</div>
|
|
683
|
683
|
|
|
684
|
684
|
<!-- 查询结果 -->
|