index.js
2.86 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
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;