产品-公式编辑器

pc4mobx/hrmSalary/components/excelEditor/index.js

@@ -1,5 +1,4 @@
 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";
@@ -34,71 +33,12 @@ class ExcelEditor extends Component {
   insertText = text => {
     const cursor = this.editorRef.getCursor();
     this.editorRef.replaceRange(text, cursor);
+    this.editorRef.refresh();
+    this.editorRef.focus();
   };
 
-  replaceToWidget = (editor, data, value, inlineWidgetOpts) => {
+  replaceToWidget = (editor) => {
     editor.getAllMarks().forEach(m => m.clear());
-    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: 黎永顺
-   * Description:格式化
-   * Params:
-   * Date: 2023/4/13
-   */
-  autoFormatSelection = () => {
-    let editor = this.editorRef.editor;
-    if (this.props.type != "sql") {
-      const script_length = editor.getValue().length;
-      const startPos = { line: 0, ch: 0, sticky: null };
-      const endPos = editor.doc.posFromIndex(script_length);
-      // editor.setSelection(startPos, endPos);
-      // editor.autoFormatRange(startPos, endPos);
-      // editor.commentRange(false, startPos, endPos);
-    } else {
-      let splCont = "";
-      splCont = editor.getValue();
-      // editor.setValue(sqlFormatter.format(splCont));
-    }
   };
   handleVariSelect = str => this.insertText(`{${str}}`);
   handleFuncSelect = str => {
@@ -107,6 +47,8 @@ class ExcelEditor extends Component {
     this.timer = setTimeout(() => {
       const { line, ch } = this.editorRef.getCursor();
       this.editorRef.setCursor({ line, ch: ch - 1 });
+      this.editorRef.refresh();
+      this.editorRef.focus();
     }, 100);
   };
   handleEditorRedo = () => {
@@ -137,17 +79,6 @@ class ExcelEditor extends Component {
   };
 
   render() {
-    const inlineWidgetOpts = {
-      useObject: {
-        regex: /useObject\("[^)]+"\)/,
-        render: (objId) => {
-          return (
-            <span className="cm-excel-default">{objId}</span>
-          );
-        }
-      }
-    };
-    const { widgets } = this.state;
     const { groupParams = {} } = this.props;
     const { referenceType } = groupParams;
     return (
@@ -158,10 +89,11 @@ class ExcelEditor extends Component {
               editorDidMount={editor => this.editorRef = editor}
               value={this.state.value}
               onBeforeChange={(editor, data, value) => {
+                console.log(value);
                 this.setState({ value });
               }}
               onChange={(editor, data, value) => {
-                this.replaceToWidget(editor, data, value, inlineWidgetOpts);
+                this.replaceToWidget(editor, data, value);
               }}
               options={{
                 lineNumbers: false,
@@ -179,11 +111,6 @@ class ExcelEditor extends Component {
               }}
               onKeyDown={(_, { keyCode }) => keyCode === 8 && this.handleBackSpaceRedo()}
             />
-            {widgets.map((w, i) => {
-              return (
-                <Widget key={i} info={w}/>
-              );
-            })}
           </div>
           {
             referenceType !== "sql" &&
@@ -220,13 +147,3 @@ class ExcelEditor extends Component {
 }
 
 export default ExcelEditor;
-
-class Widget extends React.Component {
-  render() {
-    let { info } = this.props;
-    return ReactDOM.createPortal(
-      info.render(),
-      info.mountToDom
-    );
-  }
-}

pc4mobx/hrmSalary/pages/equationEditor/index.js

@@ -1,10 +1,28 @@
 import React, { Component } from "react";
+import { Button, Modal } from "antd";
 import ExcelEditor from "../../components/excelEditor";
 
 class Index extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      title: "DialogTitle",
+      visible: false,
+      lvisible: false
+    };
+  }
+
   render() {
     return (
-      <ExcelEditor/>
+      <div>
+        <ExcelEditor/>
+        <Button type="primary" onClick={() => this.setState({ visible: true })}>显示对话框</Button>
+        <Modal title="第一个 Modal" visible={this.state.visible}
+              onCancel={() => this.setState({ visible: false })}
+        >
+          <ExcelEditor/>
+        </Modal>
+      </div>
     );
   }
 }

pc4mobx/hrmSalary/pages/salaryItem/formalFormModal.js

@@ -65,7 +65,7 @@ export default class FormalFormModal extends React.Component {
         this.setState({
           value: data.formula,
           returnType: data.returnType,
-          validateType: data.validateType,
+          validateType: data.validateType
         });
         // salaryAcctImportTemplateParam(groupParams);
       });
@@ -428,9 +428,7 @@ export default class FormalFormModal extends React.Component {
             </Col>
           </Row>
         }
-        <ExcelEditor/>
-        {/*value={value} groupParams={groupParams}*/}
-        {/*onChange={(value) => this.handleChange(value)}*/}
+        <ExcelEditor value={value} groupParams={groupParams} onChange={(value) => this.handleChange(value)}/>
         {/*<div>*/}
         {/*  <WeaTextarea*/}
         {/*    ref={(input) => this.contentProps = input}*/}