产品-公式编辑器

pc4mobx/hrmSalary/components/excelEditor/extendCodeMirror.js

@@ -1,11 +1,11 @@
 // extendCodeMirror.js
 /* eslint-disable */
-import * as CodeMirror from 'codemirror';
+import * as CodeMirror from "codemirror";
 
 CodeMirror.extendMode("css", {
   commentStart: "/*",
   commentEnd: "*/",
-  newlineAfterToken: function(type, content) {
+  newlineAfterToken: function (type, content) {
     return /^[;{}]$/.test(content);
   }
 });
@@ -14,9 +14,9 @@ CodeMirror.extendMode("javascript", {
   commentStart: "/*",
   commentEnd: "*/",
 // FIXME semicolons inside of for
-  newlineAfterToken: function(type, content, textAfter, state) {
+  newlineAfterToken: function (type, content, textAfter, state) {
     if (this.jsonMode) {
-      return /^[\[,{]$/.test(content) || /^}/.test(textAfter)|| /^]/.test(textAfter);
+      return /^[\[,{]$/.test(content) || /^}/.test(textAfter) || /^]/.test(textAfter);
     } else {
       if (content == ";" && state.lexical && state.lexical.type == ")") return false;
       return /^[;{}]$/.test(content) && !/^;/.test(textAfter);
@@ -27,7 +27,7 @@ CodeMirror.extendMode("javascript", {
 CodeMirror.extendMode("xml", {
   commentStart: "<!--",
   commentEnd: "-->",
-  newlineAfterToken: function(type, content, textAfter) {
+  newlineAfterToken: function (type, content, textAfter) {
     return type == "tag" && />$/.test(content) || /^</.test(textAfter);
   }
 });
@@ -35,10 +35,12 @@ CodeMirror.extendMode("xml", {
 // Comment/uncomment the specified range
 CodeMirror.defineExtension("commentRange", function (isComment, from, to) {
   var cm = this, curMode = CodeMirror.innerMode(cm.getMode(), cm.getTokenAt(from).state).mode;
-  cm.operation(function() {
+  cm.operation(function () {
     if (isComment) { // Comment range
-      cm.replaceRange(curMode.commentEnd, to);
-      cm.replaceRange(curMode.commentStart, from);
+      cm.replaceRange("", to);
+      // cm.replaceRange(curMode.commentEnd, to);
+      cm.replaceRange("", from);
+      // cm.replaceRange(curMode.commentStart, from);
       if (from.line == to.line && from.ch == to.ch) // An empty comment inserted - put cursor inside
         cm.setCursor(from.line, from.ch + curMode.commentStart.length);
     } else { // Uncomment range
@@ -76,6 +78,7 @@ CodeMirror.defineExtension("autoFormatRange", function (from, to) {
   var tabSize = cm.getOption("tabSize");
 
   var out = "", lines = 0, atSol = from.ch == 0;
+
   function newline() {
     out += "\n";
     atSol = true;
@@ -93,7 +96,7 @@ CodeMirror.defineExtension("autoFormatRange", function (from, to) {
         atSol = false;
       }
       if (!atSol && inner.mode.newlineAfterToken &&
-        inner.mode.newlineAfterToken(style, cur, stream.string.slice(stream.pos) || text[i+1] || "", inner.state))
+        inner.mode.newlineAfterToken(style, cur, stream.string.slice(stream.pos) || text[i + 1] || "", inner.state))
         newline();
     }
     if (!stream.pos && outer.blankLine) outer.blankLine(state);
@@ -107,5 +110,5 @@ CodeMirror.defineExtension("autoFormatRange", function (from, to) {
     cm.setSelection(from, cm.getCursor(false));
   });
 });
-// console.log("初始化CodeMirror完成");
-export default CodeMirror;
+// export default CodeMirror;
+module.exports = { CodeMirror };

pc4mobx/hrmSalary/components/excelEditor/index.js

@@ -1,5 +1,6 @@
 import React, { Component } from "react";
 import { Button } from "antd";
+import { WeaLocaleProvider } from "ecCom";
 import { Controlled as CodeMirror } from "react-codemirror2";
 import { keyboardBaseBtns } from "./constants";
 import CodeAction from "./components/codeAction";
@@ -7,12 +8,17 @@ import cs from "classnames";
 import "./index.less";
 import "codemirror/lib/codemirror.css";
 import "codemirror/lib/codemirror.js";
+import "codemirror/mode/javascript/javascript.js";
+
+require("./extendCodeMirror");
+const getLabel = WeaLocaleProvider.getLabel;
 
 class ExcelEditor extends Component {
   constructor(props) {
     super(props);
     this.state = {
-      value: ""
+      value: "",
+      isFormter: false
     };
     this.editorRef = null;
     this.timer = null;
@@ -26,6 +32,20 @@ class ExcelEditor extends Component {
     if (this.timer) clearInterval(this.timer);
   }
 
+  autoFormatSelection = () => {
+    const { isFormter } = this.state;
+    if (isFormter) {
+      const script_length = this.editorRef.getValue().length;
+      const startPos = { line: 0, ch: 0, sticky: null };
+      const endPos = this.editorRef.doc.posFromIndex(script_length);
+      this.editorRef.setSelection(startPos, endPos);
+      this.editorRef.autoFormatRange(startPos, endPos);
+      this.editorRef.commentRange(true, startPos, endPos);
+    } else {
+      this.editorRef.undo();
+      this.editorRef.undo();
+    }
+  };
   insertText = text => {
     const cursor = this.editorRef.getCursor();
     this.editorRef.replaceRange(text, cursor);
@@ -78,6 +98,7 @@ class ExcelEditor extends Component {
   };
 
   render() {
+    const { isFormter } = this.state;
     const { groupParams = {} } = this.props;
     const { referenceType } = groupParams;
     return (
@@ -95,12 +116,11 @@ class ExcelEditor extends Component {
               }}
               options={{
                 lineNumbers: false,
-                mode: { name: this.props.type === "sql" ? "text/x-sql" : "application/json" },
+                mode: "javascript",
                 autofocus: false,
                 styleActiveLine: true,
                 lineWrapping: true,
-                foldGutter: true,
-                gutters: ["CodeMirror-linenumbers", "CodeMirror-foldgutter"],
+                matchBrackets: true,
                 lint: false,
                 indentUnit: 2,
                 cursorHeight: 0.85,
@@ -130,9 +150,13 @@ class ExcelEditor extends Component {
                   <Button title="←" size="small" className="excel-codeBox-keyboard-del"
                           onClick={this.handleEditorRedo}>←</Button>
                   <Button title="C" size="small" className="excel-codeBox-keyboard-clear"
-                          onClick={() => this.setState({ value: "", widgets: [] })}>C</Button>
+                          onClick={() => this.setState({ value: "" })}>C</Button>
                 </div>
               </div>
+              <Button type="ghost"
+                      onClick={() => this.setState({ isFormter: !isFormter }, () => this.autoFormatSelection())}>
+                {!isFormter ? getLabel(111, "格式美化") : getLabel(111, "格式还原")}
+              </Button>
             </div>
           }
         </div>

pc4mobx/hrmSalary/pages/equationEditor/index.js

@@ -15,12 +15,12 @@ class Index extends Component {
   render() {
     return (
       <div>
-        <ExcelEditor/>
+        <ExcelEditor onChange={()=>{}}/>
         <Button type="primary" onClick={() => this.setState({ visible: true })}>显示对话框</Button>
         <Modal title="第一个 Modal" visible={this.state.visible}
-              onCancel={() => this.setState({ visible: false })}
+               onCancel={() => this.setState({ visible: false })}
         >
-          <ExcelEditor/>
+          <ExcelEditor onChange={()=>{}}/>
         </Modal>
       </div>
     );