From 7bdf55be6affb82b8cbb96c09c1d294cb8b5d61b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=BB=8E=E6=B0=B8=E9=A1=BA?= <971387674@qq.com>
Date: Thu, 13 Apr 2023 16:42:57 +0800
Subject: [PATCH] =?UTF-8?q?=E5=85=AC=E5=BC=8F=E7=BC=96=E8=BE=91=E5=99=A8?=
 =?UTF-8?q?=E7=BB=84=E4=BB=B6=E5=B0=81=E8=A3=85?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/excelEditor/constants.js       |  28 ++---
 .../hrmSalary/components/excelEditor/index.js | 118 +++++++++++-------
 .../components/excelEditor/index.less         |  10 ++
 3 files changed, 98 insertions(+), 58 deletions(-)

diff --git a/pc4mobx/hrmSalary/components/excelEditor/constants.js b/pc4mobx/hrmSalary/components/excelEditor/constants.js
index a113371b..2bb11e58 100644
--- a/pc4mobx/hrmSalary/components/excelEditor/constants.js
+++ b/pc4mobx/hrmSalary/components/excelEditor/constants.js
@@ -1,16 +1,16 @@
 export const keyboardBaseBtns=[
-  { key:"1", label: "+" },
-  { key:"2", label: "-" },
-  { key:"3", label: ">" },
-  { key:"4", label: ">=" },
-  { key:"5", label: "=" },
-  { key:"6", label: "*" },
-  { key:"7", label: "/" },
-  { key:"8", label: "<" },
-  { key:"9", label: "<=" },
-  { key:"10", label: "!=" },
-  { key:"11", label: "(" },
-  { key:"12", label: ")" },
-  { key:"13", label: "%" },
-  { key:"space", label: "space" },
+  { key:"+", label: "+" },
+  { key:"-", label: "-" },
+  { key:">", label: ">" },
+  { key:">=", label: ">=" },
+  { key:"=", label: "=" },
+  { key:"*", label: "*" },
+  { key:"/", label: "/" },
+  { key:"<", label: "<" },
+  { key:"<=", label: "<=" },
+  { key:"!=", label: "!=" },
+  { key:"()", label: "(" },
+  { key:")", label: ")" },
+  { key:"%", label: "%" },
+  { key:" ", label: "space" },
 ]
diff --git a/pc4mobx/hrmSalary/components/excelEditor/index.js b/pc4mobx/hrmSalary/components/excelEditor/index.js
index 6f69e51c..639e3ac4 100644
--- a/pc4mobx/hrmSalary/components/excelEditor/index.js
+++ b/pc4mobx/hrmSalary/components/excelEditor/index.js
@@ -1,4 +1,5 @@
 import React, { Component } from "react";
+import ReactDOM from "react-dom";
 import { Button } from "antd";
 import { Controlled as CodeMirror } from "react-codemirror2";
 import { keyboardBaseBtns } from "./constants";
@@ -35,46 +36,60 @@ class ExcelEditor extends Component {
     this.editorRef = null;
   }
 
+  /*
+   * Author: 黎永顺
+   * Description: 插入字符
+   * Params:
+   * Date: 2023/4/13
+   */
+  insertText = text => {
+    let cursor = this.editorRef.getCursor();
+    console.log(cursor);
+    this.editorRef.replaceRange(text, cursor);
+  };
+
   replaceToWidget = (editor, data, value, inlineWidgetOpts) => {
     editor.getAllMarks().forEach(m => m.clear());
-    let posInfos = _.flatMap(_.keys(inlineWidgetOpts), widgetName => {
-      let { regex, render } = inlineWidgetOpts[widgetName];
-      let res = [], newRe = new RegExp(regex, "g"), m;
-      do {
-        m = newRe.exec(value);
-        if (m) {
-          const mountToDom = document.createElement("span");
-          let text = m[0];
-          res.push({
-            widgetName,
-            text,
-            startAt: m.index,
-            endAt: m.index + text.length,
-            render: () => {
-              let x = `((...args) => args)${text.replace(new RegExp(`^${widgetName}`), "")}`;
-              let args = eval(x);
-              return render(...args);
-            },
-            mountToDom: mountToDom
-          });
-        }
-      } while (m);
-      return res;
-    });
-    posInfos.forEach(posInfo => {
-      let from = { line: 0, ch: posInfo.startAt };
-      let to = { line: 0, ch: posInfo.endAt };
-      editor.markText(from, to, {
-        replacedWith: posInfo.mountToDom,
-        clearWhenEmpty: false
-      });
-    });
-    this.setState({
-      widgets: posInfos
-    }, () => {
       editor.refresh();
       editor.focus();
-    });
+    // let posInfos = _.flatMap(_.keys(inlineWidgetOpts), widgetName => {
+    //   let { regex, render } = inlineWidgetOpts[widgetName];
+    //   let res = [], newRe = new RegExp(regex, "g"), m;
+    //   do {
+    //     m = newRe.exec(value);
+    //     if (m) {
+    //       const mountToDom = document.createElement("span");
+    //       let text = m[0];
+    //       res.push({
+    //         widgetName,
+    //         text,
+    //         startAt: m.index,
+    //         endAt: m.index + text.length,
+    //         render: () => {
+    //           let x = `((...args) => args)${text.replace(new RegExp(`^${widgetName}`), "")}`;
+    //           let args = eval(x);
+    //           return render(...args);
+    //         },
+    //         mountToDom: mountToDom
+    //       });
+    //     }
+    //   } while (m);
+    //   return res;
+    // });
+    // posInfos.forEach(posInfo => {
+    //   let from = { line: 0, ch: posInfo.startAt };
+    //   let to = { line: 0, ch: posInfo.endAt };
+    //   editor.markText(from, to, {
+    //     replacedWith: posInfo.mountToDom,
+    //     clearWhenEmpty: false
+    //   });
+    // });
+    // this.setState({
+    //   widgets: posInfos
+    // }, () => {
+    //   editor.refresh();
+    //   editor.focus();
+    // });
   };
   /*
    * Author: 黎永顺
@@ -104,15 +119,12 @@ class ExcelEditor extends Component {
         regex: /useObject\("[^)]+"\)/,
         render: (objId) => {
           return (
-            <div
-              className="border iblock"
-              style={{ padding: "5px" }}
-              onClick={() => alert(objId)}
-            >{objId}</div>
+            <span className="cm-excel-default">{objId}</span>
           );
         }
       }
     };
+    const { widgets } = this.state;
     return (
       <React.Fragment>
         <div className="excel-codeWrap">
@@ -140,6 +152,11 @@ class ExcelEditor extends Component {
                 placeholder: ""
               }}
             />
+            {widgets.map((w, i) => {
+              return (
+                <Widget key={i} info={w}/>
+              );
+            })}
           </div>
           <div className="excel-codeBox-keyboard">
             <div className="excel-codeBox-keyboard-operate">
@@ -149,14 +166,17 @@ class ExcelEditor extends Component {
                     const { key, label } = item;
                     return <Button
                       key={key} title={label} size="small"
-                      className={cs(key === "space" ? "excel-codeBox-keyboard-space" : "excel-codeBox-keyboard-base")}
+                      className={cs(key === " " ? "excel-codeBox-keyboard-space" : "excel-codeBox-keyboard-base")}
+                      onClick={() => this.insertText(key)}
                     >{label}</Button>;
                   })
                 }
               </div>
               <div className="excel-codeBox-keyboard-operate-clear">
-                <Button title="←" size="small" className="excel-codeBox-keyboard-del">←</Button>
-                <Button title="C" size="small" className="excel-codeBox-keyboard-clear">C</Button>
+                <Button title="←" size="small" className="excel-codeBox-keyboard-del"
+                        onClick={() => this.insertText(`useObject("←")`)}>←</Button>
+                <Button title="C" size="small" className="excel-codeBox-keyboard-clear"
+                        onClick={() => this.setState({ value: "", widgets: [] })}>C</Button>
               </div>
             </div>
           </div>
@@ -187,3 +207,13 @@ class ExcelEditor extends Component {
 }
 
 export default ExcelEditor;
+
+class Widget extends React.Component {
+  render() {
+    let { info } = this.props;
+    return ReactDOM.createPortal(
+      info.render(),
+      info.mountToDom
+    );
+  }
+}
diff --git a/pc4mobx/hrmSalary/components/excelEditor/index.less b/pc4mobx/hrmSalary/components/excelEditor/index.less
index 964e9395..064ecd12 100644
--- a/pc4mobx/hrmSalary/components/excelEditor/index.less
+++ b/pc4mobx/hrmSalary/components/excelEditor/index.less
@@ -11,6 +11,16 @@
     box-sizing: content-box;
     border: 1px solid #e5e5e5;
 
+    span {
+      font-family: Liberation Mono, LiberationMonoRegular, Courier New, monospace;
+    }
+
+    .CodeMirror-code {
+      font-size: 16px;
+
+
+    }
+
     .CodeMirror-scroll {
       overflow-x: visible !important;
       padding: 4px;