优化指令集可视化功能；

zhangzzzz
1 parent 567f68cd
Showing 2 changed files with 46 additions and 13 deletions
src/components/Common/CommonComponent/index.js
src/components/Common/InstructSetSetting/index.js
@@ -3352,6 +3352,7 @@ export default class CommonComponent extends Component {
         ...this.props,
         ...this.state,
         instructSetSettingVisible: true,
+        instructSetSettingId: commonUtils.createSid(),
         onSaveData: (value) => {
           this.handleSelectOptionEvent(value);
           this.setState({ instructSetSettingProps: {} });
@@ -3,23 +3,33 @@ import AntDraggableModal from &quot;../AntdDraggableModal&quot;;
 import * as commonUtils from "@/utils/utils";
 import styles from "./index.less";
 import { Input, Button, Space } from "antd-v4";
+import { MinusOutlined, CloseOutlined } from "@ant-design/icons";
 const IFRAMEURL = "http://project.xlyprint.cn";
+// const IFRAMEURL = "http://localhost:9099";
 const InstructSetSetting = (props = {}) => {
   const { instructSetSettingVisible } = props;
   if (!instructSetSettingVisible) return "";
-  const { onCancelInstructSetSettingModal, showConfig, dataValue } = props;
+  const { onCancelInstructSetSettingModal, showConfig, dataValue, instructSetSettingId } = 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 [mode, setMode] = useState("edit");
   const iframeRef = useRef(null);
+  const [formatFlag, setFormatFlag] = useState(0);
+  useEffect(() => {
+    try {
+      const newValue = JSON.stringify(JSON.parse(value.replace(/[\r\n]/g, "")), null, 2);
+      setValue(newValue);
+    } catch (e) {}
+  }, [formatFlag]);
+
   const onReceiveData = event => {
     // 验证来源
     if (event.origin !== IFRAMEURL) {
@@ -29,11 +39,11 @@ const InstructSetSetting = (props = {}) =&gt; {
     const { command, data } = event.data;
     if (command === "initData") {
-      if (!bConfigured) return;
+      if (!bConfigured && props.name !== "master") return;
       iframeRef.current.contentWindow.postMessage(
         {
           command: "initData",
-          value: instructSet.data || [],
+          value: instructSet.change || instructSet.blur || (instructSet ? [instructSet] : []),
         },
         IFRAMEURL
       );
@@ -43,19 +53,17 @@ const InstructSetSetting = (props = {}) =&gt; {
     let newValue = data;
     if (props.name === "master" && sName === "sInstruct") {
       newValue = {
-        opr: "btnhandle",
+        ...(newValue[0] || {}),
         bConfigured: true,
-        data: newValue,
       };
     } else if (sName === "sOnChangeInstruct") {
       newValue = {
-        opr: "onchange",
+        change: newValue,
         bConfigured: true,
-        data: newValue,
       };
     }
-    
-    props.onSaveData(JSON.stringify(newValue))
+
+    props.onSaveData(JSON.stringify(newValue));
     // setMode("edit");
     // setValue(JSON.stringify(newValue));
   };
@@ -68,22 +76,46 @@ const InstructSetSetting = (props = {}) =&gt; {
     };
   }, []);
+  const [visible, setVisible] = useState(true);
+  useEffect(() => {
+    setVisible(true);
+  }, [instructSetSettingId]);
+
   return (
     <AntDraggableModal
       title={showName}
-      visible={instructSetSettingVisible}
+      visible={instructSetSettingVisible && visible}
       onCancel={onCancelInstructSetSettingModal}
       width="100w"
       height="100vh"
       style={{ top: 0 }}
       footer={null}
+      closeIcon={
+        <Space>
+          <MinusOutlined
+            onClick={e => {
+              e.stopPropagation();
+              setVisible(false);
+            }}
+          />
+          <CloseOutlined />
+        </Space>
+      }
     >
       <div className={styles.contents}>
         {mode === "edit" ? (
           <>
-            <Input.TextArea rows={10} value={value} onChange={e => setValue(e.target.value)} />
+            <Input.TextArea style={{ height: "calc(100% - 40px)", fontSize: 14 }} value={value} onChange={e => setValue(e.target.value)} />
             <Space style={{ marginTop: 6, float: "right" }}>
-              <Button type="primary" onClick={() => props.onSaveData(value)}>
+              <Button
+                type="primary"
+                onClick={() => {
+                  setFormatFlag(pre => pre + 1);
+                }}
+              >
+                格式化
+              </Button>
+              <Button type="primary" onClick={() => props.onSaveData(JSON.stringify(JSON.parse(value.replace(/[\r\n]/g, ""))))}>
                 保存
               </Button>
               <Button type="primary" onClick={() => setMode("config")}>