|
@@ -22,6 +22,8 @@ import { getNodeResult } from './request';
|
|
const { Panel } = Collapse;
|
|
const { Panel } = Collapse;
|
|
|
|
|
|
export default class ScriptNodeInfo extends React.Component<any, any> {
|
|
export default class ScriptNodeInfo extends React.Component<any, any> {
|
|
|
|
+ formRef = React.createRef();
|
|
|
|
+
|
|
constructor(props: any) {
|
|
constructor(props: any) {
|
|
super(props);
|
|
super(props);
|
|
this.state = {
|
|
this.state = {
|
|
@@ -62,8 +64,41 @@ export default class ScriptNodeInfo extends React.Component<any, any> {
|
|
});
|
|
});
|
|
}
|
|
}
|
|
|
|
|
|
- componentWillUnmount() {
|
|
|
|
- this.props.node.setData({ ...this.props.nodeInfo });
|
|
|
|
|
|
+ submit() {
|
|
|
|
+ const { nodeId, nodeName, outputData } = (this.formRef
|
|
|
|
+ .current as any).getFieldsValue();
|
|
|
|
+ if (nodeName) {
|
|
|
|
+ const id = this.props.nodeInfo.id;
|
|
|
|
+ const node = this.props.graph.getCellById(id);
|
|
|
|
+ this.props.nodeInfo.inputNumber = this.state.inputNumber;
|
|
|
|
+ this.updateInputPorts(node, this.state.inputNumber);
|
|
|
|
+ this.props.nodeInfo.nodeName = nodeName;
|
|
|
|
+ this.props.nodeInfo.nodeId = nodeId;
|
|
|
|
+ this.props.nodeInfo.outputData = outputData;
|
|
|
|
+ this.updateOutputPorts(outputData);
|
|
|
|
+ this.props.node.setData({ ...this.props.nodeInfo });
|
|
|
|
+ this.props.close();
|
|
|
|
+ } else {
|
|
|
|
+ message.error('请输入节点名字');
|
|
|
|
+ }
|
|
|
|
+ this.setState({ outputEditing: true });
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ onReset() {
|
|
|
|
+ (this.formRef.current as any).resetFields();
|
|
|
|
+ (this.formRef.current as any).setFieldValue(
|
|
|
|
+ 'nodeName',
|
|
|
|
+ this.props.nodeInfo.nodeName
|
|
|
|
+ );
|
|
|
|
+ console.log(
|
|
|
|
+ this.props.nodeInfo,
|
|
|
|
+ (this.formRef.current as any).getFieldsValue()
|
|
|
|
+ );
|
|
|
|
+ this.setState({
|
|
|
|
+ inputNumber: this.props.nodeInfo.inputNumber,
|
|
|
|
+ outputData: this.props.nodeInfo.outputData
|
|
|
|
+ });
|
|
|
|
+ this.setState({ outputEditing: false });
|
|
}
|
|
}
|
|
|
|
|
|
// 添加输入端点
|
|
// 添加输入端点
|
|
@@ -83,11 +118,11 @@ export default class ScriptNodeInfo extends React.Component<any, any> {
|
|
|
|
|
|
// 更新输入数量
|
|
// 更新输入数量
|
|
updateNumber = (inputNumber: number) => {
|
|
updateNumber = (inputNumber: number) => {
|
|
- const id = this.props.nodeInfo.id;
|
|
|
|
- const node = this.props.graph.getCellById(id);
|
|
|
|
|
|
+ // const id = this.props.nodeInfo.id;
|
|
|
|
+ // const node = this.props.graph.getCellById(id);
|
|
this.setState({ inputNumber });
|
|
this.setState({ inputNumber });
|
|
- this.props.nodeInfo.inputNumber = inputNumber;
|
|
|
|
- this.updateInputPorts(node, inputNumber);
|
|
|
|
|
|
+ // this.props.nodeInfo.inputNumber = inputNumber;
|
|
|
|
+ // this.updateInputPorts(node, inputNumber);
|
|
};
|
|
};
|
|
|
|
|
|
updateOutputPorts = (outputData: any) => {
|
|
updateOutputPorts = (outputData: any) => {
|
|
@@ -117,17 +152,11 @@ export default class ScriptNodeInfo extends React.Component<any, any> {
|
|
enterOutputVar = (e: any) => {
|
|
enterOutputVar = (e: any) => {
|
|
const value = e.target.value.trim();
|
|
const value = e.target.value.trim();
|
|
if (e.key === 'Enter' && value) {
|
|
if (e.key === 'Enter' && value) {
|
|
- // e.target.setAttribute('disabled', 'disabled')
|
|
|
|
this.setState({ outputEditing: false });
|
|
this.setState({ outputEditing: false });
|
|
- // const outputData = values.outputData?.filter((item: any) => {
|
|
|
|
- // return item && item.outputVar
|
|
|
|
- // })
|
|
|
|
- // this.setState({outputData})
|
|
|
|
- const outputData = this.state.outputData;
|
|
|
|
|
|
+ const outputData = [...this.state.outputData];
|
|
outputData.push({ outputVar: value });
|
|
outputData.push({ outputVar: value });
|
|
this.setState({ outputData });
|
|
this.setState({ outputData });
|
|
- this.props.nodeInfo.outputData = outputData;
|
|
|
|
- this.updateOutputPorts(outputData);
|
|
|
|
|
|
+ // this.updateOutputPorts(outputData);
|
|
}
|
|
}
|
|
};
|
|
};
|
|
|
|
|
|
@@ -175,6 +204,7 @@ export default class ScriptNodeInfo extends React.Component<any, any> {
|
|
<div className="node-script">
|
|
<div className="node-script">
|
|
{/* 脚本节点信息 */}
|
|
{/* 脚本节点信息 */}
|
|
<Form
|
|
<Form
|
|
|
|
+ ref={this.formRef as any}
|
|
name="datasourceInfo"
|
|
name="datasourceInfo"
|
|
autoComplete="off"
|
|
autoComplete="off"
|
|
layout="vertical"
|
|
layout="vertical"
|
|
@@ -292,7 +322,7 @@ export default class ScriptNodeInfo extends React.Component<any, any> {
|
|
onClick={() => {
|
|
onClick={() => {
|
|
const outputData = this.state.outputData;
|
|
const outputData = this.state.outputData;
|
|
outputData.splice(name, 1);
|
|
outputData.splice(name, 1);
|
|
- this.updateOutputPorts(outputData);
|
|
|
|
|
|
+ // this.updateOutputPorts(outputData);
|
|
return remove(name);
|
|
return remove(name);
|
|
}}
|
|
}}
|
|
style={{ color: '#147BD1' }}
|
|
style={{ color: '#147BD1' }}
|
|
@@ -323,6 +353,25 @@ export default class ScriptNodeInfo extends React.Component<any, any> {
|
|
</>
|
|
</>
|
|
)}
|
|
)}
|
|
</Form.List>
|
|
</Form.List>
|
|
|
|
+ <Form.Item style={{ marginTop: '20px' }}>
|
|
|
|
+ <Space>
|
|
|
|
+ <Button
|
|
|
|
+ type="primary"
|
|
|
|
+ onClick={() => {
|
|
|
|
+ this.submit();
|
|
|
|
+ }}
|
|
|
|
+ >
|
|
|
|
+ 保存
|
|
|
|
+ </Button>
|
|
|
|
+ <Button
|
|
|
|
+ onClick={() => {
|
|
|
|
+ this.onReset();
|
|
|
|
+ }}
|
|
|
|
+ >
|
|
|
|
+ 重置
|
|
|
|
+ </Button>
|
|
|
|
+ </Space>
|
|
|
|
+ </Form.Item>
|
|
</Form>
|
|
</Form>
|
|
{/* 脚本编辑弹窗 */}
|
|
{/* 脚本编辑弹窗 */}
|
|
<Modal
|
|
<Modal
|