sqlEditor交互修改

7 years ago · 164506b02d
18 changed files with 2445 additions and 244 deletions
--- a/Gruntfile.js
+++ b/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',
--- a/bi/base.css
+++ b/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+*/
--- a/bi/base.js
+++ b/bi/base.js
--- a/demo/js/base/editor/demo.sql_editor.js
+++ b/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
        })
--- a/dist/base.css
+++ b/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+*/
--- a/dist/base.js
+++ b/dist/base.js
--- a/dist/bundle.css
+++ b/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+*/
--- a/dist/bundle.js
+++ b/dist/bundle.js
--- a/dist/demo.js
+++ b/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",
--- a/src/base/formula/codemirror/show-hint.js
+++ b/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();
-                this.cm.markText(completion.from || data.from, to, {className: "#function", atomic: true});
-                this.cm.replaceSelection("() ");
-                to = this.cm.getCursor();
-                to.ch = to.ch - 2;
-                this.cm.setCursor(to);
-                this.cm.focus();
+                    if(completion.isKeyword === true){
+                    }else{
+                        var to = this.cm.getCursor();
+                        this.cm.markText(completion.from || data.from, to, {className: "#function", atomic: true});
+                        this.cm.replaceSelection("() ");
+                        to = this.cm.getCursor();
+                        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;
--- a/src/base/formula/codemirror/sql-hint.js
+++ b/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, defaultTable, function(w) {return w;});
+      addMatches(result, search, tables, 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)};
--- a/src/base/formula/codemirror/sql-mode.js
+++ b/src/base/formula/codemirror/sql-mode.js
--- a/src/base/formula/config.js
+++ b/src/base/formula/config.js
--- a/src/base/formula/editor.sql.js
+++ b/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);
--- a/src/css/base/formula/codemirror.css
+++ b/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;
--- a/src/css/base/sql/sql.css
+++ b/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;
+}
--- a/src/less/base/formula/codemirror.less
+++ b/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 {
--- a/src/less/base/sql/sql.less
+++ b/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;
+  }
 }