From 1ab4995c07197a02d1c3d3f162a7ad535b6d062f Mon Sep 17 00:00:00 2001 From: zhangzhen <525765282@qq.com> Date: Wed, 6 Aug 2025 11:26:14 +0800 Subject: [PATCH] 集成指令集配置页面; --- src/components/Common/CommonComponent/index.js | 37 +++++++++++++++++++++++++++++++++++++ src/components/Common/InstructSetSetting/index.js | 102 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ src/components/Common/InstructSetSetting/index.less | 4 ++++ 3 files changed, 143 insertions(+), 0 deletions(-) create mode 100644 src/components/Common/InstructSetSetting/index.js create mode 100644 src/components/Common/InstructSetSetting/index.less diff --git a/src/components/Common/CommonComponent/index.js b/src/components/Common/CommonComponent/index.js index 664ab0a..3a5a8f8 100644 --- a/src/components/Common/CommonComponent/index.js +++ b/src/components/Common/CommonComponent/index.js @@ -3,6 +3,7 @@ import React, { Component, createRef } from "react"; 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 = ( + + + + ); + } + 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 = ( + + + + ); + } + 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 {
{commonAssembly}
+ ); } diff --git a/src/components/Common/InstructSetSetting/index.js b/src/components/Common/InstructSetSetting/index.js new file mode 100644 index 0000000..7e9d206 --- /dev/null +++ b/src/components/Common/InstructSetSetting/index.js @@ -0,0 +1,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 ( + +
+ {mode === "edit" ? ( + <> + setValue(e.target.value)} /> + + + + + + ) : ( +