集成指令集配置页面；

zhangzzzz
1 parent 4cb48e53
Showing 3 changed files with 143 additions and 0 deletions
src/components/Common/CommonComponent/index.js
src/components/Common/InstructSetSetting/index.js
src/components/Common/InstructSetSetting/index.less
@@ -3,6 +3,7 @@ import React, { Component, createRef } from &quot;react&quot;;
 import reactComponentDebounce from "@/components/Common/ReactDebounce";
 import * as commonFunc from "@/components/Common//commonFunc"; /* 通用单据方法 */ /* 通用单据方法 */
 // import '@ant-design/compatible/assets/index.css';
+import InstructSetSetting from "@/components/Common/InstructSetSetting"
 import {
   InputNumber,
   Checkbox,
@@ -32,6 +33,7 @@ import {
   FileOutlined,
   RightOutlined,
   PlaySquareOutlined,
+  EditOutlined,
 } from "@ant-design/icons";
 import * as commonUtils from "@/utils/utils";
 import styles from "@/index.less";
@@ -1822,6 +1824,15 @@ export default class CommonComponent extends Component {
       ),
       rows: commonUtils.isNotEmptyNumber(this.props.showConfig.iRowValue) ? this.props.showConfig.iRowValue : 1,
     };
+
+    if (this.props.showConfig.sName.toLowerCase().includes('instruct')) {
+      obj.suffix = (
+        <span style={{ width: "8px" }} onClick={this.handleEditInstruct}>
+          <EditOutlined style={{ color: "rgba(0,0,0,.85)" }} />
+        </span>
+      );
+    }
+
     if (this.props.readOnly) {
       obj.readOnly = "readOnly";
     } else {
@@ -2063,6 +2074,15 @@ export default class CommonComponent extends Component {
         ""
       ),
     };
+    
+    if (this.props.showConfig.sName.toLowerCase().includes('instruct')) {
+      obj.suffix = (
+        <span style={{ width: "8px" }} onClick={this.handleEditInstruct}>
+          <EditOutlined style={{ color: "rgba(0,0,0,.85)" }} />
+        </span>
+      );
+    }
+
     if (this.props.readOnly) {
       obj.readOnly = "readOnly";
     } else {
@@ -3307,6 +3327,22 @@ export default class CommonComponent extends Component {
     }
   };
  
+  // 编辑指令集
+  handleEditInstruct = () => {
+    this.setState({
+      instructSetSettingProps: {
+        ...this.props,
+        ...this.state,
+        instructSetSettingVisible: true,
+        onSaveData: (value) => {
+          this.handleSelectOptionEvent(value);
+          this.setState({ instructSetSettingProps: {} });
+        },
+        onCancelInstructSetSettingModal: () => this.setState({ instructSetSettingProps: {} }),
+      }
+    });
+  }
+
   handlePreviewImage = (e, dataUrl) => {
     e.stopPropagation();
     this.props.onPreviewImage(e, dataUrl);
@@ -3725,6 +3761,7 @@ export default class CommonComponent extends Component {
         <div className={`${this.props.className} ${readonlyStyle} ${costomStyle}`} onClick={this.props.onCostomClick?.bind(this, showConfig)}>
           {commonAssembly}
         </div>
+        <InstructSetSetting {...this.state.instructSetSettingProps} />
       </div>
     );
   }
+import { useEffect, useState, useRef } from "react";
+import AntDraggableModal from "../AntdDraggableModal";
+import * as commonUtils from "@/utils/utils";
+import styles from "./index.less";
+import { Input, Button, Space } from "antd-v4";
+
+const IFRAMEURL = "http://project.xlyprint.cn";
+
+const InstructSetSetting = (props = {}) => {
+  const { instructSetSettingVisible } = props;
+  if (!instructSetSettingVisible) return "";
+
+  const { onCancelInstructSetSettingModal, showConfig, dataValue } = props;
+  const { showName, sName } = showConfig;
+
+  const instructSet = commonUtils.convertStrToObj(dataValue, {});
+  const { bConfigured } = instructSet;
+
+  const [value, setValue] = useState(dataValue);
+  const [mode, setMode] = useState(bConfigured ? "config" : "edit");
+  const iframeRef = useRef(null);
+
+  const onReceiveData = event => {
+    // 验证来源
+    if (event.origin !== IFRAMEURL) {
+      return;
+    }
+
+    const { command, data } = event.data;
+
+    if (command === "initData") {
+      if (!bConfigured) return;
+      iframeRef.current.contentWindow.postMessage(
+        {
+          command: "initData",
+          value: instructSet.data || [],
+        },
+        IFRAMEURL
+      );
+      return;
+    }
+
+    let newValue = data;
+    if (props.name === "master" && sName === "sInstruct") {
+      newValue = {
+        opr: "btnhandle",
+        bConfigured: true,
+        data: newValue,
+      };
+    } else if (sName === "sOnChangeInstruct") {
+      newValue = {
+        opr: "onchange",
+        bConfigured: true,
+        data: newValue,
+      };
+    }
+    
+    props.onSaveData(JSON.stringify(newValue))
+    // setMode("edit");
+    // setValue(JSON.stringify(newValue));
+  };
+
+  useEffect(() => {
+    // 监听来自 iframe 的消息
+    window.addEventListener("message", onReceiveData);
+    return () => {
+      window.removeEventListener("message", onReceiveData);
+    };
+  }, []);
+
+  return (
+    <AntDraggableModal
+      title={showName}
+      visible={instructSetSettingVisible}
+      onCancel={onCancelInstructSetSettingModal}
+      width="100w"
+      height="100vh"
+      style={{ top: 0 }}
+      footer={null}
+    >
+      <div className={styles.contents}>
+        {mode === "edit" ? (
+          <>
+            <Input.TextArea rows={10} value={value} onChange={e => setValue(e.target.value)} />
+            <Space style={{ marginTop: 6, float: "right" }}>
+              <Button type="primary" onClick={() => props.onSaveData(value)}>
+                保存
+              </Button>
+              <Button type="primary" onClick={() => setMode("config")}>
+                切换配置模式
+              </Button>
+            </Space>
+          </>
+        ) : (
+          <iframe ref={iframeRef} src={`${IFRAMEURL}/InsSet/?parentDomain=${document.location.origin}`} width="100%" height="100%" frameBorder={0} />
+        )}
+      </div>
+    </AntDraggableModal>
+  );
+};
+
+export default InstructSetSetting;
+.contents {
+  width: 100%;
+  height: calc(100vh - 65px);
+}
 \ No newline at end of file