0

public/mg/kylx365_db_admin.html

@@ -78,11 +78,12 @@
         }
 
         .search-box {
-            padding: 15px;
+            padding: 15px 0;
             border-bottom: 1px solid #EEEEEE;
             background: white;
             width: 100%;
             justify-content: center;
+            width: 100%;
         }
 
         .search-input {
@@ -590,7 +591,7 @@
                 </div>
                 <div class="search-box FlexRow">
                     <div style="position: relative;">
-                        <input type="text" class="search-input" v-model="searchText" @keyup.enter="searchTables"
+                        <input type="text" class="search-input" v-model="searchText" @input="searchTables" @keyup.enter="searchTables"
                             placeholder="搜索表格...">
                         <div class="clear-btn" v-show="searchText" @click="clearSearch">
                             <span class="clear-x"></span>
@@ -630,15 +631,20 @@
                     <!-- 左侧SQL编辑区域 -->
                     <div class="sql-editor-left">
                         <textarea class="sql-textarea" v-model="sqlQuery" placeholder="输入SQL查询语句..."></textarea>
-                        <div class="btn-group">
+                        <div class="btn-group" style="justify-content: flex-start;">
+                            <button type="button" class="btn btn-default" @click="insertSqlClause('GROUP BY')">GROUP BY</button>
+                            <button type="button" class="btn btn-default" @click="insertSqlClause('HAVING')">HAVING</button>
+                            <button type="button" class="btn btn-default" @click="insertSqlClause('ORDER BY')">ORDER BY</button>
                             <select class="btn btn-default" v-model="selectedLimit" @change="updateQueryLimit"
-                                style="margin-right: 8px;">
+                                style="margin-left: 8px;">
                                 <option v-for="limit in limitOptions" :key="limit" :value="limit">
                                     LIMIT {{ limit }}
                                 </option>
                             </select>
-                            <button type="button" class="btn btn-default" @click="clearQuery">清空</button>
-                            <button type="button" class="btn btn-primary" @click="executeQuery">执行</button>
+                            <div style="margin-left: auto;">
+                                <button type="button" class="btn btn-default" @click="clearQuery">清空</button>
+                                <button type="button" class="btn btn-primary" @click="executeQuery">执行</button>
+                            </div>
                         </div>
                     </div>
 
@@ -932,6 +938,9 @@
                 selectTable(table) {
                     this.selectedTable = table;
                     
+                    // 重置LIMIT值为默认的100
+                    this.selectedLimit = 100;
+                    
                     // 获取表格字段列表
                     this.loadTableColumns(table);
                     
@@ -939,9 +948,9 @@
                     this.$watch('tableColumnsList', (newVal) => {
                         if (newVal && newVal.length > 0) {
                             const columns = newVal.map(col => `\`${col.name}\``).join(',');
-                            this.sqlQuery = `SELECT ${columns} FROM \`${table}\` LIMIT 100;`;
+                            this.sqlQuery = `SELECT ${columns}\nFROM \`${table}\`\nLIMIT ${this.selectedLimit};`;
                         } else {
-                            this.sqlQuery = `SELECT * FROM \`${table}\` LIMIT 100;`;
+                            this.sqlQuery = `SELECT *\nFROM \`${table}\`\nLIMIT ${this.selectedLimit};`;
                         }
                     }, {immediate: true});
                 },
@@ -1173,10 +1182,10 @@
                         // 检查SQL是否以分号结尾
                         if (this.sqlQuery.trim().endsWith(';')) {
                             // 在分号前添加LIMIT
-                            this.sqlQuery = this.sqlQuery.replace(/;\s*$/, ` LIMIT ${this.selectedLimit};`);
+                            this.sqlQuery = this.sqlQuery.replace(/;\s*$/, `\nLIMIT ${this.selectedLimit};`);
                         } else {
                             // 直接在末尾添加LIMIT
-                            this.sqlQuery = this.sqlQuery.trim() + ` LIMIT ${this.selectedLimit};`;
+                            this.sqlQuery = this.sqlQuery.trim() + `\nLIMIT ${this.selectedLimit};`;
                         }
                     }
 
@@ -1443,6 +1452,187 @@
                     });
                 },
                 
+                // 插入SQL子句（ORDER BY, GROUP BY, HAVING等）
+                insertSqlClause(clause) {
+                    // 检查SQL查询是否为空
+                    if (!this.sqlQuery.trim()) {
+                        this.sqlQuery = clause + ' ';
+                        return;
+                    }
+                    
+                    // 检查子句是否已存在（不区分大小写）
+                    const sqlUpper = this.sqlQuery.toUpperCase();
+                    const clauseUpper = clause.toUpperCase();
+                    
+                    if (sqlUpper.includes(clauseUpper)) {
+                        this.showToastMessage(`查询中已存在 "${clause}" 子句`, 'info');
+                        return;
+                    }
+                    
+                    // 解析SQL查询，识别各个子句的位置
+                    const sqlParts = {
+                        select: -1,
+                        from: -1,
+                        where: -1,
+                        groupBy: -1,
+                        having: -1,
+                        orderBy: -1,
+                        limit: -1
+                    };
+                    
+                    // 查找各个子句的位置
+                    sqlParts.select = sqlUpper.indexOf('SELECT');
+                    sqlParts.from = sqlUpper.indexOf('FROM', sqlParts.select);
+                    sqlParts.where = sqlUpper.indexOf('WHERE', sqlParts.from);
+                    sqlParts.groupBy = sqlUpper.indexOf('GROUP BY', sqlParts.from);
+                    sqlParts.having = sqlUpper.indexOf('HAVING', sqlParts.from);
+                    sqlParts.orderBy = sqlUpper.indexOf('ORDER BY', sqlParts.from);
+                    
+                    // 查找LIMIT子句（可能在末尾或分号前）
+                    const limitMatch = sqlUpper.match(/LIMIT\s+\d+/i);
+                    if (limitMatch) {
+                        sqlParts.limit = limitMatch.index;
+                    }
+                    
+                    // 确定插入位置
+                    let insertPosition = -1;
+                    let insertBefore = '';
+                    
+                    switch (clauseUpper) {
+                        case 'GROUP BY':
+                            // GROUP BY应该在WHERE之后，HAVING/ORDER BY/LIMIT之前
+                            if (sqlParts.where > -1) {
+                                // 找到WHERE子句后的位置
+                                const whereEndPos = this.findClauseEndPosition(sqlUpper, sqlParts.where);
+                                insertPosition = whereEndPos;
+                            } else if (sqlParts.having > -1) {
+                                // 如果没有WHERE但有HAVING，插入在HAVING之前
+                                insertPosition = sqlParts.having;
+                                insertBefore = 'HAVING';
+                            } else if (sqlParts.orderBy > -1) {
+                                // 如果没有WHERE和HAVING但有ORDER BY，插入在ORDER BY之前
+                                insertPosition = sqlParts.orderBy;
+                                insertBefore = 'ORDER BY';
+                            } else if (sqlParts.limit > -1) {
+                                // 如果只有LIMIT，插入在LIMIT之前
+                                insertPosition = sqlParts.limit;
+                                insertBefore = 'LIMIT';
+                            } else {
+                                // 如果没有以上子句，插入在查询末尾（可能有分号）
+                                insertPosition = this.sqlQuery.length;
+                                if (this.sqlQuery.trim().endsWith(';')) {
+                                    insertPosition = this.sqlQuery.lastIndexOf(';');
+                                }
+                            }
+                            break;
+                            
+                        case 'HAVING':
+                            // HAVING应该在GROUP BY之后，ORDER BY/LIMIT之前
+                            if (sqlParts.groupBy > -1) {
+                                // 找到GROUP BY子句后的位置
+                                const groupByEndPos = this.findClauseEndPosition(sqlUpper, sqlParts.groupBy);
+                                insertPosition = groupByEndPos;
+                            } else if (sqlParts.orderBy > -1) {
+                                // 如果没有GROUP BY但有ORDER BY，插入在ORDER BY之前
+                                insertPosition = sqlParts.orderBy;
+                                insertBefore = 'ORDER BY';
+                            } else if (sqlParts.limit > -1) {
+                                // 如果只有LIMIT，插入在LIMIT之前
+                                insertPosition = sqlParts.limit;
+                                insertBefore = 'LIMIT';
+                            } else {
+                                // 如果没有以上子句，插入在查询末尾（可能有分号）
+                                insertPosition = this.sqlQuery.length;
+                                if (this.sqlQuery.trim().endsWith(';')) {
+                                    insertPosition = this.sqlQuery.lastIndexOf(';');
+                                }
+                            }
+                            break;
+                            
+                        case 'ORDER BY':
+                            // ORDER BY应该在GROUP BY和HAVING之后，LIMIT之前
+                            if (sqlParts.having > -1) {
+                                // 找到HAVING子句后的位置
+                                const havingEndPos = this.findClauseEndPosition(sqlUpper, sqlParts.having);
+                                insertPosition = havingEndPos;
+                            } else if (sqlParts.groupBy > -1) {
+                                // 如果没有HAVING但有GROUP BY，找到GROUP BY子句后的位置
+                                const groupByEndPos = this.findClauseEndPosition(sqlUpper, sqlParts.groupBy);
+                                insertPosition = groupByEndPos;
+                            } else if (sqlParts.limit > -1) {
+                                // 如果只有LIMIT，插入在LIMIT之前
+                                insertPosition = sqlParts.limit;
+                                insertBefore = 'LIMIT';
+                            } else {
+                                // 如果没有以上子句，插入在查询末尾（可能有分号）
+                                insertPosition = this.sqlQuery.length;
+                                if (this.sqlQuery.trim().endsWith(';')) {
+                                    insertPosition = this.sqlQuery.lastIndexOf(';');
+                                }
+                            }
+                            break;
+                    }
+                    
+                    // 执行插入
+                    if (insertPosition > -1) {
+                        let newQuery = '';
+                        if (insertBefore) {
+                            // 在特定子句之前插入
+                            const beforeInsert = this.sqlQuery.substring(0, insertPosition);
+                            const afterInsert = this.sqlQuery.substring(insertPosition);
+                            
+                            // 添加换行符和子句
+                            newQuery = beforeInsert + '\n' + clause + ' ' + afterInsert;
+                        } else {
+                            // 在子句末尾插入
+                            const beforeInsert = this.sqlQuery.substring(0, insertPosition);
+                            const afterInsert = this.sqlQuery.substring(insertPosition);
+                            
+                            // 添加换行符和子句
+                            newQuery = beforeInsert + '\n' + clause + ' ' + afterInsert;
+                        }
+                        
+                        this.sqlQuery = newQuery;
+                        this.showToastMessage(`已插入 "${clause}" 子句到查询`, 'success');
+                        
+                        // 设置光标位置到插入的子句之后
+                        this.$nextTick(() => {
+                            const textarea = document.querySelector('.sql-textarea');
+                            if (textarea) {
+                                textarea.focus();
+                                const newPosition = insertPosition + clause.length + 1;
+                                textarea.selectionStart = newPosition;
+                                textarea.selectionEnd = newPosition;
+                            }
+                        });
+                    } else {
+                        // 如果无法确定位置，则在末尾添加
+                        if (this.sqlQuery.trim().endsWith(';')) {
+                            this.sqlQuery = this.sqlQuery.replace(/;\s*$/, `\n${clause} ;`);
+                        } else {
+                            this.sqlQuery += `\n${clause} `;
+                        }
+                        this.showToastMessage(`已插入 "${clause}" 子句到查询末尾`, 'info');
+                    }
+                },
+                
+                // 查找子句结束位置的辅助方法
+                findClauseEndPosition(sqlUpper, clauseStartPos) {
+                    // 子句可能的结束标记
+                    const endMarkers = ['GROUP BY', 'HAVING', 'ORDER BY', 'LIMIT', ';'];
+                    let endPos = sqlUpper.length;
+                    
+                    // 查找最近的下一个子句
+                    for (const marker of endMarkers) {
+                        const pos = sqlUpper.indexOf(marker, clauseStartPos + 1);
+                        if (pos > -1 && pos < endPos) {
+                            endPos = pos;
+                        }
+                    }
+                    
+                    return endPos;
+                },
+                
                 // 显示提示消息
                 showToastMessage(message, type = 'info') {
                     this.toastMessage = message;