!58 feat：sql编写体验优化

Merge pull request !58 from zongyangleo/dev_0823

mayfly_go_web/src/views/ops/db/SqlExec.vue

@@ -100,6 +100,7 @@ import { defineAsyncComponent, onMounted, reactive, ref, toRefs } from 'vue';
 import { ElMessage } from 'element-plus';
 
 import { language as sqlLanguage } from 'monaco-editor/esm/vs/basic-languages/mysql/mysql.js';
+import { language as addSqlLanguage } from './lang/mysql.js';
 import * as monaco from 'monaco-editor';
 import { editor, languages, Position } from 'monaco-editor';
 
@@ -111,6 +112,10 @@ import { dbApi } from './api';
 const Query = defineAsyncComponent(() => import('./component/tab/Query.vue'));
 const TableData = defineAsyncComponent(() => import('./component/tab/TableData.vue'));
 
+const sqlCompletionKeywords = [...sqlLanguage.keywords, ...addSqlLanguage.keywords];
+const sqlCompletionOperators = [...sqlLanguage.operators, ...addSqlLanguage.operators];
+const sqlCompletionBuiltinFunctions = [...sqlLanguage.builtinFunctions, ...addSqlLanguage.builtinFunctions];
+const sqlCompletionBuiltinVariables = [...sqlLanguage.builtinVariables, ...addSqlLanguage.builtinVariables];
 /**
  * 树节点类型
  */
@@ -604,7 +609,7 @@ const registerSqlCompletionItemProvider = () => {
                 });
 
                 // mysql关键字
-                sqlLanguage.keywords.forEach((item: any) => {
+                sqlCompletionKeywords.forEach((item: any) => {
                     suggestions.push({
                         label: {
                             label: item,
@@ -615,8 +620,9 @@ const registerSqlCompletionItemProvider = () => {
                         range,
                     });
                 });
+
                 // 操作符
-                sqlLanguage.operators.forEach((item: any) => {
+                sqlCompletionOperators.forEach((item: any) => {
                     suggestions.push({
                         label: {
                             label: item,
@@ -627,9 +633,26 @@ const registerSqlCompletionItemProvider = () => {
                         range,
                     });
                 });
-                // 内置函数
+                
-                sqlLanguage.builtinFunctions.forEach((item: any) => {
+                let replacedFunctions = [] as string[]; 
+
+                // 添加的函数
+                addSqlLanguage.replaceFunctions.forEach((item: any) => {
+                    replacedFunctions.push(item.label)
                     suggestions.push({
+                        label: {
+                            label: item.label,
+                            description: item.description,
+                        },
+                        kind: monaco.languages.CompletionItemKind.Function,
+                        insertText: item.insertText,
+                        range,
+                    });
+                });
+              
+                // 内置函数
+                sqlCompletionBuiltinFunctions.forEach((item: any) => {
+                  replacedFunctions.indexOf(item) < 0 && suggestions.push({
                         label: {
                             label: item,
                             description: 'func',
@@ -640,7 +663,7 @@ const registerSqlCompletionItemProvider = () => {
                     });
                 });
                 // 内置变量
-                sqlLanguage.builtinVariables.forEach((item: string) => {
+                sqlCompletionBuiltinVariables.forEach((item: string) => {
                     suggestions.push({
                         label: {
                             label: item,

mayfly_go_web/src/views/ops/db/component/tab/Query.vue

@@ -31,6 +31,10 @@
                             <el-link type="success" :underline="false" icon="Document"></el-link>
                         </el-tooltip>
                     </el-upload>
+                    <el-divider direction="vertical" border-style="dashed" />
+                    <el-tooltip class="box-item" effect="dark" content="limit" placement="top">
+                        <el-link @click="onLimit()" type="success" :underline="false" icon="Operation"> </el-link>
+                    </el-tooltip>
                 </div>
 
                 <div style="float: right" class="fl">
@@ -485,6 +489,17 @@ const replaceSelection = (str: string, selection: any) => {
     });
 };
 
+const onLimit = () => {
+  let position = monacoEditor.getPosition() as monaco.Position;
+  let newText = " limit 10";
+  monacoEditor?.getModel().applyEdits([
+    {
+      range: new monaco.Range(position.lineNumber, position.column, position.lineNumber, position.column),
+      text: newText
+    }
+  ]);
+}
+
 /**
  * 导出当前页数据
  */

mayfly_go_web/src/views/ops/db/lang/mysql.js

@@ -0,0 +1,63 @@
+// src/basic-languages/mysql/mysql.ts
+var language = {
+  keywords: [
+    "GROUP BY",
+    "ORDER BY",
+    "LEFT JOIN",
+    "RIGHT JOIN",
+    "INNER JOIN",
+    "SELECT * FROM",
+  ],
+  operators: [
+  ],
+  builtinFunctions: [
+  ],
+  builtinVariables: [],
+  replaceFunctions:[ // 自定义修改函数提示
+      
+    /**  字符串相关函数  */
+    { label: 'CONCAT',     insertText:'CONCAT(str1,str2,...)',         description: '多字符串合并' },
+    { label: 'ASCII',      insertText:'ASCII(char)',                   description: '返回字符的ASCII值' },
+    { label: 'BIT_LENGTH', insertText:'BIT_LENGTH(str1)',              description: '多字符串合并' },
+    { label: 'INSTR',      insertText:'INSTR(str,substr)',             description: '返回字符串substr所在str位置' },
+    { label: 'LEFT',       insertText:'LEFT(str,len)',                 description: '返回字符串str的左端len个字符' },
+    { label: 'RIGHT',      insertText:'RIGHT(str,len)',                description: '返回字符串str的右端len个字符' },
+    { label: 'MID',        insertText:'MID(str,pos,len)',              description: '返回字符串str的位置pos起len个字符' },
+    { label: 'SUBSTRING',  insertText:'SUBSTRING(exp, start, length)', description: '截取字符串' },
+    { label: 'REPLACE',    insertText:'REPLACE(str,from_str,to_str)',  description: '替换字符串' },
+    { label: 'REPEAT',     insertText:'REPEAT(str,count)',             description: '重复字符串count遍' },
+    { label: 'UPPER',      insertText:'UPPER(str)',                    description: '返回大写的字符串' },
+    { label: 'LOWER',      insertText:'LOWER(str)',                    description: '返回小写的字符串' },
+    { label: 'TRIM',       insertText:'TRIM(str)',                     description: '去除字符串首尾空格' },
+    /**  数学相关函数  */
+    { label: 'ABS',                insertText:'ABS(n)',         description: '返回n的绝对值' },
+    { label: 'FLOOR',              insertText:'FLOOR(n)',       description: '返回不大于n的最大整数' },
+    { label: 'CEILING',            insertText:'CEILING(n)',     description: '返回不小于n的最小整数值' },
+    { label: 'ROUND',              insertText:'ROUND(n,d)',     description: '返回n的四舍五入值,保留d(默认0)位小数' },
+    { label: 'RAND',               insertText:'RAND()',         description: '返回在范围0到1.0内的随机浮点值' },
+    
+    /** 日期函数 */  
+    { label: 'DATE',              insertText:'DATE(\'date\')',                      description: '返回指定表达式的日期部分' },
+    { label: 'WEEK',              insertText:'WEEK(\'date\')',                      description: '返回指定日期是一年中的第几周' },
+    { label: 'MONTH',             insertText:'MONTH(\'date\')',                     description: '返回指定日期的月份' },
+    { label: 'QUARTER',           insertText:'QUARTER(\'date\')',                   description: '返回指定日期是一年的第几个季度' },
+    { label: 'YEAR',              insertText:'YEAR(\'date\')',                      description: '返回指定日期的年份' },
+    { label: 'DATE_ADD',          insertText:'DATE_ADD(\'date\', interval 1 day)',  description: '日期函数加减运算' },
+    { label: 'DATE_SUB',          insertText:'DATE_SUB(\'date\', interval 1 day)',  description: '日期函数加减运算' },
+    { label: 'DATE_FORMAT',       insertText:'DATE_FORMAT(\'date\', \'%Y-%m-%d %h:%i:%s\')',       description: '' }, 
+    { label: 'CURDATE',           insertText:'CURDATE()',                      description: '返回当前日期' },
+    { label: 'CURTIME',           insertText:'CURTIME()',                      description: '返回当前时间' },
+    { label: 'NOW',               insertText:'NOW()',                          description: '返回当前日期时间' },
+    { label: 'DATEDIFF',          insertText:'DATEDIFF(expr1,expr2)',          description: '返回结束日expr1和起始日expr2之间的天数' },
+    { label: 'UNIX_TIMESTAMP',    insertText:'UNIX_TIMESTAMP()',               description: '返回指定时间(默认当前)unix时间戳' },
+    { label: 'FROM_UNIXTIME',     insertText:'FROM_UNIXTIME(timestamp)',       description: '把时间戳格式为年月日时分秒' },
+      
+    /**  逻辑函数 */  
+    { label: 'IFNULL',            insertText:'IFNULL(expression, alt_value)',  description: '表达式为空取第二个参数值,否则取表达式值' },
+    { label: 'IF',                insertText:'IF(expr1, expr2, expr3)',          description: 'expr1为true则取expr2，否则取expr3' },
+    { label: 'CASE',              insertText:'(CASE \n WHEN expr1 THEN expr2 \n ELSE expr3) col',       description: 'CASE WHEN THEN ELSE' },
+  ]
+};
+export {
+  language
+};