feat: 添加输出源节点

packages/yili-dag/src/AlgoNode.tsx

@@ -8,11 +8,12 @@ import successNode from '../style/img/success_node.png';
 import warningNode from '../style/img/warning_node.png';
 import undoneNode from '../style/img/default_node.png';
 import runningNode from '../style/img/running.png';
+import outputLogo from '../style/img/output.png';
 
 interface NodeStatus {
   id: string;
   status: 'default' | 'success' | 'failed' | 'running' | 'undone';
-  type: 'script' | 'datasource';
+  type: 'script' | 'datasource' | 'outputsource';
   label?: string;
 }
 
@@ -22,7 +23,8 @@ const image = {
   successNode,
   warningNode,
   undoneNode,
-  runningNode
+  runningNode,
+  outputLogo
 };
 
 export default class AlgoNode extends React.Component<{ node?: Node }> {
@@ -47,6 +49,9 @@ export default class AlgoNode extends React.Component<{ node?: Node }> {
         {type === 'datasource' && (
           <img src={image.datasourceLogo} alt="datasourceLogo" />
         )}
+        {type === 'outputsource' && (
+          <img src={image.outputLogo} alt="outputLogo" />
+        )}
         <span className="label">{label}</span>
         <div className="status">
           {status === 'undone' && <img src={image.undoneNode} alt="未执行" />}

packages/yili-dag/src/Dag.tsx

@@ -6,6 +6,7 @@ import AlgoNode from './AlgoNode';
 import ToolBar from './ToolBar';
 import DatasourceNodeInfo from './DatasourceNodeInfo';
 import ScriptNodeInfo from './ScriptNodeInfo';
+import OutputNodeInfo from './OutputNodeInfo';
 import ContextMenuView from './ContextMenu';
 
 // 侧边栏UI组件
@@ -37,6 +38,24 @@ const dataSourceNodes = [
   }
 ];
 
+// 输出源节点
+const outputSourceNodes = [
+  {
+    id: '10',
+    shape: 'dag-node',
+    height: 80,
+    width: 180,
+    data: {
+      label: 'OutputSource',
+      status: 'default',
+      type: 'outputsource'
+    },
+    ports: {
+      items: [{ id: 'topPort', group: 'top' }]
+    }
+  } 
+]
+
 /* // 数据处理节点
 const dataHandleNodes = [
   {
@@ -538,6 +557,10 @@ export default class Dag extends React.Component<any, any> {
           name: 'dataSource',
           title: '数据源'
         },
+        {
+          name: 'outputSource',
+          title: '输出源'
+        },
         {
           name: 'dataHandle',
           title: '数据处理',
@@ -566,6 +589,7 @@ export default class Dag extends React.Component<any, any> {
 
     // 将可拖拽项加载到侧边栏中
     stencil.load(dataSourceNodes, 'dataSource');
+    stencil.load(outputSourceNodes, 'outputSource')
     // stencil.load(dataHandleNodes, 'dataHandle');
     // stencil.load(otherScriptNodes, 'otherScript');
     stencil.load(customScriptNodes, 'customScript');
@@ -573,6 +597,10 @@ export default class Dag extends React.Component<any, any> {
       width: 200,
       height: dataSourceNodes.length * 120
     });
+    stencil.resizeGroup('outputSource', {
+      width: 200,
+      height: outputSourceNodes.length * 120
+    });
     /* stencil.resizeGroup('dataHandle', {
       width: 200,
       height: dataHandleNodes.length * 60
@@ -672,6 +700,10 @@ export default class Dag extends React.Component<any, any> {
             {this.state.selectedNodeData?.type === 'script' && (
               <ScriptNodeInfo nodeInfo={this.state.selectedNodeData} />
             )}
+            {/* 输出源节点 */}
+            {this.state.selectedNodeData?.type === 'outputsource' && (
+              <OutputNodeInfo nodeInfo={this.state.selectedNodeData} />
+            )}
           </Drawer>
           {/* 工具栏 */}
           <ToolBar
@@ -704,6 +736,9 @@ function initNodeData(newNode: Node<Node.Properties>) {
       newNode.data.packageData = undefined;
       newNode.data.status = 'undone';
       break;
+    case 'outputsource':
+      newNode.data.nodeName = undefined;
+      newNode.data.outputSource = undefined;
     default:
   }
 }

packages/yili-dag/src/OutputNodeInfo.tsx

@@ -0,0 +1,76 @@
+import React from 'react'
+// import { PlusCircleOutlined } from '@ant-design/icons';
+import { Form, Input, Space, Select } from 'antd';
+
+export default class OutputNodeInfo extends React.Component<any, any> {
+  
+  formRef = React.createRef()
+
+  constructor(props: any) {
+    super(props)
+  }
+
+  async componentDidMount(){
+    this.props.nodeInfo.outputSource = [
+      {dataField: 'name', dataType: 'string'},
+      {dataField: 'address', dataType: 'string'},
+    ];
+    (this.formRef.current as any).setFieldsValue({
+      outputSource: this.props.nodeInfo.outputSource
+    })
+  }
+
+  render() {
+    return (
+      <div className='node-datasource'>
+        <Form
+          ref={this.formRef as any}
+          name="datasourceInfo"
+          autoComplete="off"
+          layout='vertical'
+          initialValues={{
+            outputSource: this.props.nodeInfo.outputSource,
+            nodeName: this.props.nodeInfo.nodeName,
+          }}
+        >
+          <Form.Item name='nodeName' label="节点名称:">
+            <Input placeholder='请输入节点名称' onChange={(e) => {
+              this.props.nodeInfo.nodeName = e.target.value
+            }}/>
+          </Form.Item>
+          <p>输出:</p>
+          <Form.List name="outputSource">
+            {(fields, { add, remove }) => (
+              <>
+                {fields.map(({ key, name, ...restField }) => (
+                  <Space key={key} style={{ display: 'flex', margin: '10px 0 -20px'}} align="baseline">
+                    <Form.Item
+                      {...restField}
+                      name={[name, 'dataField']}
+                      rules={[{required: true, message: '请填写字段'}]}
+                    >
+                      <Input placeholder="字段名" disabled/>
+                    </Form.Item>
+                    <Form.Item
+                      {...restField}
+                      name={[name, 'dataType']}
+                      rules={[{required: true, message: '请填写字段类型'}]}
+                    >
+                      <Select options={[
+                        {label: 'string', value: 'string'},
+                        {label: 'int', value: 'int'},
+                        {label: 'text', value: 'text'},
+                        {label: 'float', value: 'float'},
+                        {label: 'double', value: 'double'},
+                      ]} placeholder='请选择字段类型' disabled/>
+                    </Form.Item>
+                  </Space>
+                ))}
+              </>
+            )}
+          </Form.List>
+        </Form>
+      </div>
+    )
+  }
+}

packages/yili-dag/src/utils.ts

@@ -22,6 +22,16 @@ export const DagToData = (Dag: any) => {
             }
           })
           break;
+        case "outputsource":
+          nodes.push({
+            id: item.id,
+            name: item.data.nodeName,
+            op: item.data.type,
+            data: {
+              output_source: item.data.outputSource,
+            }
+          })
+          break;
         default:
           nodes.push({
             id: item.id,