sqlEditor交互修改

Gruntfile.js

@@ -38,6 +38,7 @@ module.exports = function (grunt) {
             baseJs: {
                 src: [
                     'src/third/**/*.js',
+                    'src/base/formula/config.js',
                     'src/base/pane.js',
                     'src/base/single/single.js',
                     'src/base/single/text.js',
@@ -172,6 +173,7 @@ module.exports = function (grunt) {
             bi_baseJs: {
                 src: [
                     'src/third/**/*.js',
+                    'src/base/formula/config.js',
                     'src/base/pane.js',
                     'src/base/single/single.js',
                     'src/base/single/text.js',

bi/base.css

@@ -591,9 +591,6 @@ span.CodeMirror-selectedtext {
   color: black;
   cursor: pointer;
 }
-.CodeMirror-hints {
-  z-index: 1000000000;
-}
 li.CodeMirror-hint-active {
   background: #08f;
   color: white;
@@ -1036,6 +1033,25 @@ body .bi-button.button-ignore.disabled.clear:active,
   color: #faaa39;
   border: 1px solid #f4cbcb;
 }
+.bi-sql-editor .cm-s-default span[class*="#"] {
+  color: #faaa39;
+}
+.bi-sql-editor .cm-s-default .cm-keyword {
+  color: #3685f2;
+}
+.bi-sql-editor .cm-s-default .cm-function {
+  color: #faaa39;
+}
+.CodeMirror-hints .sql-fr-function {
+  color: #faaa39;
+}
+.CodeMirror-hints .sql-keyword {
+  color: #3685f2;
+}
+.CodeMirror-hints .CodeMirror-hint-active {
+  background: #3f8ce8;
+  color: #ffffff;
+}
 .bi-collection-table-cell {
   -webkit-box-sizing: border-box;
   /*Safari3.2+*/

demo/js/base/editor/demo.sql_editor.js

@@ -6,16 +6,24 @@ Demo.SQLEditor = BI.inherit(BI.Widget, {
         baseCls: "demo-editor"
     },
     render: function () {
+        var self = this;
         this.formula = BI.createWidget({
             type : 'bi.sql_editor',
             width : 300,
             height : 200,
-            value : 'select * from DEMO_CONTRACT'
+            value : "select * from DEMO_CONTRACT where 合同类型 = '长期协议' and 购买数量 = sum([1,2,3,4])"
         });
         BI.createWidget({
             type: "bi.left",
             element: this,
-            items: [this.formula],
+            items: [this.formula, {
+                type: "bi.button",
+                height: 24,
+                handler: function () {
+                    BI.Msg.alert("", self.formula.getValue());
+                }
+
+            }],
             hgap: 20,
             vgap: 20
         })

dist/base.css

@@ -591,9 +591,6 @@ span.CodeMirror-selectedtext {
   color: black;
   cursor: pointer;
 }
-.CodeMirror-hints {
-  z-index: 1000000000;
-}
 li.CodeMirror-hint-active {
   background: #08f;
   color: white;
@@ -1036,6 +1033,25 @@ body .bi-button.button-ignore.disabled.clear:active,
   color: #faaa39;
   border: 1px solid #f4cbcb;
 }
+.bi-sql-editor .cm-s-default span[class*="#"] {
+  color: #faaa39;
+}
+.bi-sql-editor .cm-s-default .cm-keyword {
+  color: #3685f2;
+}
+.bi-sql-editor .cm-s-default .cm-function {
+  color: #faaa39;
+}
+.CodeMirror-hints .sql-fr-function {
+  color: #faaa39;
+}
+.CodeMirror-hints .sql-keyword {
+  color: #3685f2;
+}
+.CodeMirror-hints .CodeMirror-hint-active {
+  background: #3f8ce8;
+  color: #ffffff;
+}
 .bi-collection-table-cell {
   -webkit-box-sizing: border-box;
   /*Safari3.2+*/

dist/bundle.css

@@ -2186,9 +2186,6 @@ span.CodeMirror-selectedtext {
   color: black;
   cursor: pointer;
 }
-.CodeMirror-hints {
-  z-index: 1000000000;
-}
 li.CodeMirror-hint-active {
   background: #08f;
   color: white;
@@ -2631,6 +2628,25 @@ body .bi-button.button-ignore.disabled.clear:active,
   color: #faaa39;
   border: 1px solid #f4cbcb;
 }
+.bi-sql-editor .cm-s-default span[class*="#"] {
+  color: #faaa39;
+}
+.bi-sql-editor .cm-s-default .cm-keyword {
+  color: #3685f2;
+}
+.bi-sql-editor .cm-s-default .cm-function {
+  color: #faaa39;
+}
+.CodeMirror-hints .sql-fr-function {
+  color: #faaa39;
+}
+.CodeMirror-hints .sql-keyword {
+  color: #3685f2;
+}
+.CodeMirror-hints .CodeMirror-hint-active {
+  background: #3f8ce8;
+  color: #ffffff;
+}
 .bi-collection-table-cell {
   -webkit-box-sizing: border-box;
   /*Safari3.2+*/

dist/demo.js

@@ -831,7 +831,38 @@ BI.shortcut("demo.multifile_editor", Demo.CodeEditor);Demo.RichEditor = BI.inher
         this.editor.setValue("这是一条<font size=\"4\" color=\"#009de3\">测试</font>数据");
     }
 });
-BI.shortcut("demo.rich_editor", Demo.RichEditor);Demo.CodeEditor = BI.inherit(BI.Widget, {
+BI.shortcut("demo.rich_editor", Demo.RichEditor);/**
+ * Created by Windy on 2017/12/15.
+ */
+Demo.SQLEditor = BI.inherit(BI.Widget, {
+    props: {
+        baseCls: "demo-editor"
+    },
+    render: function () {
+        var self = this;
+        this.formula = BI.createWidget({
+            type : 'bi.sql_editor',
+            width : 300,
+            height : 200,
+            value : "select * from DEMO_CONTRACT where 合同类型 = '长期协议' and 购买数量 = sum([1,2,3,4])"
+        });
+        BI.createWidget({
+            type: "bi.left",
+            element: this,
+            items: [this.formula, {
+                type: "bi.button",
+                height: 24,
+                handler: function () {
+                    BI.Msg.alert("", self.formula.getValue());
+                }
+
+            }],
+            hgap: 20,
+            vgap: 20
+        })
+    }
+});
+BI.shortcut("demo.sql_editor", Demo.SQLEditor);Demo.CodeEditor = BI.inherit(BI.Widget, {
     props: {
         baseCls: "demo-editor"
     },
@@ -4700,6 +4731,10 @@ BI.shortcut("demo.value_chooser_pane", Demo.ValueChooserPane);Demo.ADDONS_CONFIG
     pId: 202,
     text: "bi.textarea_editor",
     value: "demo.textarea_editor"
+}, {
+    pId: 202,
+    text: "bi.sql_editor",
+    value: "demo.sql_editor"
 }, {
     pId: 202,
     text: "bi.formula_editor",

src/base/formula/codemirror/show-hint.js

@@ -73,13 +73,16 @@
             else {
                 this.cm.replaceRange(getText(completion), completion.from || data.from,
                     completion.to || data.to, "complete");
-                var to = this.cm.getCursor();
+                    if(completion.isKeyword === true){
-                this.cm.markText(completion.from || data.from, to, {className: "#function", atomic: true});
+                    }else{
-                this.cm.replaceSelection("() ");
+                        var to = this.cm.getCursor();
-                to = this.cm.getCursor();
+                        this.cm.markText(completion.from || data.from, to, {className: "#function", atomic: true});
-                to.ch = to.ch - 2;
+                        this.cm.replaceSelection("() ");
-                this.cm.setCursor(to);
+                        to = this.cm.getCursor();
-                this.cm.focus();
+                        to.ch = to.ch - 2;
+                        this.cm.setCursor(to);
+                        this.cm.focus();
+                    }
             }
             CodeMirror.signal(data, "pick", completion);
             this.close();
@@ -213,7 +216,7 @@
         this.data = data;
         this.picked = false;
         var widget = this, cm = completion.cm;
-
+        
         var hints = this.hints = document.createElement("ul");
         hints.className = "CodeMirror-hints";
         this.selectedHint = data.selectedHint || 0;

src/base/formula/codemirror/sql-hint.js

@@ -65,7 +65,7 @@
   }
 
   function match(string, word) {
-    if (BI.isNotEmptyString(string)) {
+    if (BI.isNotEmptyString(string) && word.length !== string.length) {
       var len = string.length;
       var sub = getText(word).substr(0, len);
       return string.toUpperCase() === sub.toUpperCase();
@@ -75,7 +75,7 @@
   function addMatches(result, search, wordlist, formatter) {
     if (isArray(wordlist)) {
       for (var i = 0; i < wordlist.length; i++)
-        if (match(search, wordlist[i])) result.push(formatter(wordlist[i]))
+        if (match(search, wordlist[i])) result.push(formatter(wordlist[i], i));
     } else {
       for (var word in wordlist) if (wordlist.hasOwnProperty(word)) {
         var val = wordlist[word]
@@ -240,6 +240,20 @@
     var disableKeywords = options && options.disableKeywords;
     defaultTable = defaultTableName && getTable(defaultTableName);
     keywords = getKeywords(editor);
+    var keywordsCount = BI.size(keywords);
+    var functions = [];
+    var desc = {};
+    var cur = editor.getCursor();
+    var token = editor.getTokenAt(cur);
+    BI.each(BI.FormulaCollections, function(idx, formula){
+      if(formula.lastIndexOf(token.string, 0) == 0 && !BI.contains(functions, formula)){
+        functions.push(formula);
+      }
+    });
+    BI.each(BI.FormulaJson, function(idx, formula){
+        desc[formula.name.toLowerCase()] = formula.def;
+    });
+    keywords = BI.concat(BI.keys(keywords), functions);
     identifierQuote = getIdentifierQuote(editor);
 
     if (defaultTableName && !defaultTable)
@@ -250,9 +264,8 @@
     if (defaultTable.columns)
       defaultTable = defaultTable.columns;
 
-    var cur = editor.getCursor();
     var result = [];
-    var token = editor.getTokenAt(cur), start, end, search;
+    var start, end, search;
     if (token.end > cur.ch) {
       token.end = cur.ch;
       token.string = token.string.slice(0, cur.ch - token.start);
@@ -269,10 +282,28 @@
     if (search.charAt(0) == "." || search.charAt(0) == identifierQuote) {
       start = nameCompletion(cur, token, result, editor);
     } else {
-      addMatches(result, search, tables, function(w) {return w;});
+      addMatches(result, search, tables, function(w) {return w});
-      addMatches(result, search, defaultTable, function(w) {return w;});
+      addMatches(result, search, defaultTable, function(w) {return w});
       if (!disableKeywords)
-        addMatches(result, search, keywords, function(w) {return w.toUpperCase();});
+        addMatches(result, search, keywords, function(w, i) {
+          var isKeyword = i < keywordsCount;
+          return {
+            isKeyword: isKeyword,
+            text: w,
+            description: desc[w] || "SQL关键字",
+            className: isKeyword ? "sql-keyword" : "sql-fr-function",
+            render: function (Element, self, data) {
+              var label = BI.createWidget({
+                type: "bi.label",
+                element: Element,
+                text: data.displayText || getText(data)
+              });
+              label.setTitle(data.description, {
+                container: "body"
+              });
+            }
+          };
+        });
     }
 
     return {list: result, from: Pos(cur.line, start), to: Pos(cur.line, end)};

src/base/formula/editor.sql.js

@@ -14,18 +14,19 @@ BI.SQLEditor = BI.inherit(BI.Widget, {
         BI.CodeEditor.superclass._init.apply(this, arguments);
         var o = this.options, self = this;
         this.editor = CodeMirror(this.element[0], {
-            //mode: {name: 'text/x-sql'},
             mode: "text/x-sql",
             textWrapping: true,
             lineWrapping: true,
             lineNumbers: false
         });
         o.lineHeight === 1 ? this.element.addClass("codemirror-low-line-height") : this.element.addClass("codemirror-high-line-height");
-
+        
         this.editor.on("change", function (cm, change) {
             self._checkWaterMark();
             if (o.showHint) {
-                CodeMirror.showHint(cm, CodeMirror.formulaHint, {completeSingle: false});
+                CodeMirror.showHint(cm, CodeMirror.sqlHint, {
+                    completeSingle: false
+                });
             }
             BI.nextTick(function () {
                 self.fireEvent(BI.FormulaEditor.EVENT_CHANGE)
@@ -91,11 +92,11 @@ BI.SQLEditor = BI.inherit(BI.Widget, {
     },
 
     getValue: function () {
-
+        return this.editor.getValue();
     },
 
     setValue: function (v) {
-
+        this.editor.setValue(v);
     }
 });
 BI.shortcut("bi.sql_editor", BI.SQLEditor);

src/css/base/formula/codemirror.css

@@ -471,9 +471,6 @@ span.CodeMirror-selectedtext {
   color: black;
   cursor: pointer;
 }
-.CodeMirror-hints {
-  z-index: 1000000000;
-}
 li.CodeMirror-hint-active {
   background: #08f;
   color: white;

src/css/base/sql/sql.css

@@ -0,0 +1,19 @@
+.bi-sql-editor .cm-s-default span[class*="#"] {
+  color: #faaa39;
+}
+.bi-sql-editor .cm-s-default .cm-keyword {
+  color: #3685f2;
+}
+.bi-sql-editor .cm-s-default .cm-function {
+  color: #faaa39;
+}
+.CodeMirror-hints .sql-fr-function {
+  color: #faaa39;
+}
+.CodeMirror-hints .sql-keyword {
+  color: #3685f2;
+}
+.CodeMirror-hints .CodeMirror-hint-active {
+  background: #3f8ce8;
+  color: #ffffff;
+}

src/less/base/formula/codemirror.less

@@ -579,7 +579,7 @@ span.CodeMirror-selectedtext {
 }
 
 .CodeMirror-hints {
-  z-index: @zIndex-tip;
+  //z-index: @zIndex-tip;
 }
 
 li.CodeMirror-hint-active {

src/less/base/sql/sql.less

@@ -6,4 +6,27 @@
     color: @color-bi-text-warning;
   }
 
+  & .cm-s-default .cm-keyword {
+    color: @color-bi-text-highlight;
+  }
+
+  & .cm-s-default .cm-function {
+    color: @color-bi-text-warning;
+  }
+
+}
+
+.CodeMirror-hints {
+  & .sql-fr-function{
+    color: @color-bi-text-warning;
+  }
+
+  & .sql-keyword{
+    color: @color-bi-text-highlight;
+  }
+
+  .CodeMirror-hint-active {
+    background: @color-bi-background-highlight;
+    color: @color-bi-text;
+  }
 }