bug修复

packages/yili-dag/src/Dag.tsx

@@ -73,8 +73,8 @@ const customScriptNodes = [
     },
     ports: {
       items: [
-        // { id: 'topPort', group: 'top' },
-        // { id: 'bottomPort', group: 'bottom' }
+        { id: 'input0', group: 'top' },
+        { id: 'r0', group: 'bottom' }
       ]
     }
   },
@@ -88,8 +88,8 @@ const customScriptNodes = [
     },
     ports: {
       items: [
-        // { id: 'topPort', group: 'top' },
-        // { id: 'bottomPort', group: 'bottom' }
+        { id: 'input0', group: 'top' },
+        { id: 'r0', group: 'bottom' }
       ]
     }
   }
@@ -254,7 +254,13 @@ export default class Dag extends React.Component<any, any> {
           .getPortsByGroup('bottom')
           .findIndex((port: any) => port.id === pointId);
         const in_pin = item.getTarget().port;
-        input_nodes[in_pin] = { out_pin, nodeId: source.nodeId };
+        input_nodes[in_pin] = {
+          out_pin,
+          nodeId: source.nodeId,
+          source_type: source.label,
+          source_tableName: source.dataTableName,
+          target_type: target.label
+        };
       }
     });
     this.setState({ scriptInputNodes: input_nodes });
@@ -392,7 +398,7 @@ export default class Dag extends React.Component<any, any> {
         nodeTableData: tableData
       });
     } else {
-      message.error(data.msg);
+      // message.error(data.msg);
     }
   };
 
@@ -419,9 +425,8 @@ export default class Dag extends React.Component<any, any> {
     const { data } = await getNodeLog(params);
     if (data.code === 200) {
       this.setState({ logData: data.data });
-      console.log(data);
     } else {
-      message.error(data.msg);
+      // message.error(data.msg);
     }
     this.setState({ contextMenu: null, isOpenLog: true });
   };
@@ -671,7 +676,7 @@ export default class Dag extends React.Component<any, any> {
       // 拖拽事件 处理节点数据
       getDropNode(draggingNode: Node): Node {
         const newNode = draggingNode.clone();
-        initNodeData(newNode);
+        initNodeData(graph, newNode);
         return newNode;
       }
     });
@@ -738,7 +743,7 @@ export default class Dag extends React.Component<any, any> {
         }, 10000);
       }
     } else {
-      message.error(data.msg);
+      // message.error(data.msg);
     }
   }
 
@@ -813,6 +818,31 @@ export default class Dag extends React.Component<any, any> {
     }
   };
 
+  saveChangeStatus = (nodeId: any) => {
+    const allEdges = this.state.dagGraph.getEdges();
+    allEdges.forEach((edge: any) => {
+      const target = edge.getTargetNode().getData();
+      const source = edge.getSourceNode().getData();
+      if (source.nodeId === nodeId && target.type !== 'outputsource') {
+        edge.getSourceNode().setData(
+          {
+            ...source,
+            status: 'undone'
+          },
+          { overwrite: true }
+        );
+        edge.getTargetNode().setData(
+          {
+            ...target,
+            status: 'undone'
+          },
+          { overwrite: true }
+        );
+        this.saveChangeStatus(target.nodeId);
+      }
+    });
+  };
+
   // 最后输出模板
   render() {
     return (
@@ -908,6 +938,7 @@ export default class Dag extends React.Component<any, any> {
                 nodeInfo={this.state.selectedNodeData}
                 node={this.state.currentDblNode}
                 close={this.hideNodeInfo}
+                changeStatus={(node_id: any) => this.saveChangeStatus(node_id)}
               />
             )}
             {/* 脚本节点 */}
@@ -919,6 +950,7 @@ export default class Dag extends React.Component<any, any> {
                 scriptInputs={this.state.scriptInputNodes}
                 dagId={this.state.dagId}
                 close={this.hideNodeInfo}
+                changeStatus={(node_id: any) => this.saveChangeStatus(node_id)}
               />
             )}
             {/* 输出源节点 */}
@@ -927,6 +959,7 @@ export default class Dag extends React.Component<any, any> {
                 nodeInfo={this.state.selectedNodeData}
                 node={this.state.currentDblNode}
                 close={this.hideNodeInfo}
+                changeStatus={(node_id: any) => this.saveChangeStatus(node_id)}
               />
             )}
           </Drawer>
@@ -946,30 +979,27 @@ export default class Dag extends React.Component<any, any> {
 }
 
 // 初始化节点数据
-function initNodeData(newNode: Node<Node.Properties>) {
+function initNodeData(graph: Graph, newNode: Node<Node.Properties>) {
   // 节点id
   newNode.data.id = newNode.id;
   newNode.data.nodeId = nanoid().replaceAll('-', 'a').replaceAll('_', 'b');
-
+  newNode.data.nodeName = `node_${graph.getNodes().length + 1}`;
   switch (newNode.data.type) {
     case 'datasource':
       newNode.data.inputSource = undefined;
       newNode.data.dataTableId = undefined;
       newNode.data.dataTableName = undefined;
-      newNode.data.nodeName = undefined;
       newNode.data.tablePath = 'node';
       break;
     case 'script':
       newNode.data.paramText = undefined;
-      newNode.data.nodeName = undefined;
       newNode.data.scriptText = '';
-      newNode.data.outputData = [];
-      newNode.data.inputNumber = 0;
+      newNode.data.outputNumber = 1;
+      newNode.data.inputNumber = 1;
       newNode.data.packageData = undefined;
       newNode.data.status = 'undone';
       break;
     case 'outputsource':
-      newNode.data.nodeName = undefined;
       newNode.data.dataTableId = undefined;
       newNode.data.outputSource = [];
       newNode.data.tablePath = 'node';

packages/yili-dag/src/DatasourceNodeInfo.tsx

@@ -97,6 +97,7 @@ export default class DatasourceNodeInfo extends React.Component<any, any> {
       this.props.nodeInfo.dataTableName = dataTable;
       this.props.node.setData({ ...this.props.nodeInfo });
       this.props.close();
+      this.props.changeStatus(this.props.nodeInfo.nodeId);
     } else {
       message.error('请输入节点名字');
     }
@@ -240,7 +241,7 @@ export default class DatasourceNodeInfo extends React.Component<any, any> {
                   this.submit();
                 }}
               >
-                保存
+                确认
               </Button>
               <Button
                 onClick={() => {

packages/yili-dag/src/OutputNodeInfo.tsx

@@ -73,6 +73,7 @@ export default class OutputNodeInfo extends React.Component<any, any> {
       this.props.nodeInfo.dataTableId = dataTable;
       this.props.node.setData({ ...this.props.nodeInfo });
       this.props.close();
+      this.props.changeStatus(this.props.nodeInfo.nodeId);
     } else {
       message.error('请输入节点名字');
     }
@@ -247,7 +248,7 @@ export default class OutputNodeInfo extends React.Component<any, any> {
                   this.submit();
                 }}
               >
-                保存
+                确认
               </Button>
               <Button
                 onClick={() => {

packages/yili-dag/src/ScriptNodeInfo.tsx

@@ -4,7 +4,6 @@ import {
   PlusCircleOutlined,
   EditOutlined
 } from '@ant-design/icons';
-import { Node } from '@antv/x6';
 import {
   Button,
   Form,
@@ -17,7 +16,7 @@ import {
   message
 } from 'antd';
 import ScriptEditor from './ScriptEditor';
-import { getNodeResult } from './request';
+import { getNodeResult, getSqlDsTable } from './request';
 
 const { Panel } = Collapse;
 
@@ -29,9 +28,8 @@ export default class ScriptNodeInfo extends React.Component<any, any> {
     this.state = {
       scriptModalVisible: false,
       checking: false,
-      inputNumber: 0,
-      outputData: [],
-      outputEditing: false,
+      inputNumber: 1,
+      outputNumber: 1,
       columns: [],
       tableData: []
     };
@@ -48,6 +46,7 @@ export default class ScriptNodeInfo extends React.Component<any, any> {
     const editorValue = (this.editorRef.current as any).state.editor.getValue();
     this.props.nodeInfo.scriptText = editorValue;
     this.setState({ scriptModalVisible: false });
+    this.props.changeStatus(this.props.nodeInfo.nodeId);
   };
 
   // 提交代码校验
@@ -60,28 +59,25 @@ export default class ScriptNodeInfo extends React.Component<any, any> {
   componentDidMount(): void {
     this.setState({
       inputNumber: this.props.nodeInfo.inputNumber,
-      outputData: this.props.nodeInfo.outputData
+      outputNumber: this.props.nodeInfo.outputNumber
     });
   }
 
   submit() {
-    const { nodeId, nodeName, outputData } = (this.formRef
-      .current as any).getFieldsValue();
+    const { nodeId, nodeName } = (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.nodeInfo.outputNumber = this.state.outputNumber;
+      this.updateInputPorts(this.state.inputNumber);
+      this.updateOutputPorts(this.state.outputNumber);
       this.props.node.setData({ ...this.props.nodeInfo });
       this.props.close();
+      this.props.changeStatus(this.props.nodeInfo.nodeId);
     } else {
       message.error('请输入节点名字');
     }
-    this.setState({ outputEditing: true });
   }
 
   onReset() {
@@ -90,19 +86,16 @@ export default class ScriptNodeInfo extends React.Component<any, any> {
       '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
+      outputNumber: this.props.nodeInfo.outputNumber
     });
-    this.setState({ outputEditing: false });
   }
 
   // 添加输入端点
-  updateInputPorts = (node: Node, number: number) => {
+  updateInputPorts = (number: number) => {
+    const id = this.props.nodeInfo.id;
+    const node = this.props.graph.getCellById(id);
     const currentInputPortsNumber = node
       .getPorts()
       .reduce((pre: number, item: any) => {
@@ -118,63 +111,59 @@ export default class ScriptNodeInfo extends React.Component<any, any> {
 
   // 更新输入数量
   updateNumber = (inputNumber: number) => {
-    // const id = this.props.nodeInfo.id;
-    // const node = this.props.graph.getCellById(id);
     this.setState({ inputNumber });
-    // this.props.nodeInfo.inputNumber = inputNumber;
-    // this.updateInputPorts(node, inputNumber);
   };
 
-  updateOutputPorts = (outputData: any) => {
-    const id = this.props.nodeInfo.id;
-    const node = this.props.graph.getCellById(id);
-    const currentOutputPorts = node.getPorts().reduce((pre: any, item: any) => {
-      return item.group === 'bottom' ? pre.concat(item) : pre;
-    }, []);
-    currentOutputPorts.forEach((item: any) => {
-      const index = outputData.findIndex(
-        (output: any) => output.outputVar === item.id
-      );
-      if (index === -1) {
-        node.removePort(item.id);
-      }
-    });
-    outputData.forEach((item: any) => {
-      const index = currentOutputPorts?.findIndex(
-        (port: any) => port.id === item.outputVar
-      );
-      if (index === -1) {
-        node.addPort({ group: 'bottom', id: item.outputVar });
-      }
-    });
+  updateOutputNumber = (outputNumber: number) => {
+    console.log(outputNumber);
+    this.setState({ outputNumber });
   };
 
-  enterOutputVar = (e: any) => {
-    const value = e.target.value.trim();
-    if (e.key === 'Enter' && value) {
-      this.setState({ outputEditing: false });
-      const outputData = [...this.state.outputData];
-      outputData.push({ outputVar: value });
-      this.setState({ outputData });
-      // this.updateOutputPorts(outputData);
+  updateOutputPorts = (number: number) => {
+    const id = this.props.nodeInfo.id;
+    const node = this.props.graph.getCellById(id);
+    const currentOutputPortsNumber = node
+      .getPorts()
+      .reduce((pre: number, item: any) => {
+        return item.group === 'bottom' ? pre + 1 : pre;
+      }, 0);
+    for (let i = number; i < currentOutputPortsNumber; i++) {
+      node.removePort(`r${number}`);
+    }
+    for (let i = currentOutputPortsNumber; i < number; i++) {
+      node.addPort({ group: 'bottom', id: `r${i}` });
     }
   };
 
   changeCollapse = async (val: any) => {
-    const params = {
-      dag_uuid: this.props.dagId,
-      node_id: this.props.scriptInputs[val].nodeId,
-      out_pin: this.props.scriptInputs[val].out_pin
-    };
-    const { data } = await getNodeResult(params);
-    if (data.code === 200) {
-      const { col, tableData } = this.formatTableData(data.data);
-      this.setState({
-        columns: col,
-        tableData
-      });
+    if (
+      this.props.scriptInputs[val].target_type === 'sql' &&
+      this.props.scriptInputs[val].source_type === 'InputSource'
+    ) {
+      const { data } = await getSqlDsTable(
+        this.props.scriptInputs[val].source_tableName
+      );
+      if (data.code === 200) {
+        const { col, tableData } = this.formatTableData(data.data);
+        this.setState({
+          columns: col,
+          tableData
+        });
+      }
     } else {
-      message.error(data.msg);
+      const params = {
+        dag_uuid: this.props.dagId,
+        node_id: this.props.scriptInputs[val].nodeId,
+        out_pin: this.props.scriptInputs[val].out_pin
+      };
+      const { data } = await getNodeResult(params);
+      if (data.code === 200) {
+        const { col, tableData } = this.formatTableData(data.data);
+        this.setState({
+          columns: col,
+          tableData
+        });
+      }
     }
   };
 
@@ -211,8 +200,7 @@ export default class ScriptNodeInfo extends React.Component<any, any> {
           initialValues={{
             nodeId: this.props.nodeInfo.nodeId,
             paramText: this.props.nodeInfo.paramText,
-            nodeName: this.props.nodeInfo.nodeName,
-            outputData: this.props.nodeInfo.outputData
+            nodeName: this.props.nodeInfo.nodeName
           }}
           onValuesChange={(changedValue, values) => {
             const paramText = values.paramText;
@@ -279,80 +267,42 @@ export default class ScriptNodeInfo extends React.Component<any, any> {
             </Button>
           </Form.Item>
           <p>输出结果:</p>
-          <Form.List name="outputData">
-            {(fields, { add, remove }) => (
-              <>
-                {fields.map(({ key, name, ...restField }) => (
-                  <Space
-                    key={key}
-                    style={{
-                      display: 'flex',
-                      padding: '10px 10px 0',
-                      background: '#EDF0F6',
-                      marginBottom: '2px'
-                    }}
-                    align="baseline"
-                  >
-                    <Form.Item
-                      label={'输出结果'}
-                      {...restField}
-                      name={[name, 'outputVar']}
-                    >
-                      {/* <Input placeholder='请输入输出变量' onKeyUp={this.enterOutputVar}/>  */}
-                      {this.state.outputEditing &&
-                      name === this.state.outputData.length ? (
-                        <Input
-                          placeholder="请输入输出变量"
-                          onKeyUp={this.enterOutputVar}
-                        />
-                      ) : (
-                        <Input
-                          placeholder="请输入输出变量"
-                          onKeyUp={this.enterOutputVar}
-                          disabled
-                          style={{
-                            color: 'black',
-                            border: 'none',
-                            background: '#edf0f6'
-                          }}
-                        />
-                      )}
-                    </Form.Item>
-                    <MinusCircleOutlined
-                      onClick={() => {
-                        const outputData = this.state.outputData;
-                        outputData.splice(name, 1);
-                        // this.updateOutputPorts(outputData);
-                        return remove(name);
-                      }}
-                      style={{ color: '#147BD1' }}
-                    />
-                  </Space>
-                ))}
-                {!(
-                  this.props.nodeInfo.label === 'sql' && fields.length > 0
-                ) && (
-                  <Form.Item>
-                    <Button
-                      type="link"
-                      onClick={() => {
-                        if (this.state.outputEditing) {
-                          message.warning('请先确认前一个变量!');
-                          return;
-                        }
-                        this.setState({ outputEditing: true });
-                        return add();
-                      }}
-                      icon={<PlusCircleOutlined />}
-                      style={{ paddingLeft: 0, paddingRight: 0 }}
-                    >
-                      添加输出
-                    </Button>
-                  </Form.Item>
-                )}
-              </>
-            )}
-          </Form.List>
+          {Array.from({ length: this.state.outputNumber }, (_, i) => (
+            <div
+              style={{
+                display: 'flex',
+                alignItems: 'center',
+                columnGap: '2px',
+                width: '30%',
+                marginBottom: '5px'
+              }}
+              key={i}
+            >
+              <Input disabled style={{ width: '70%' }} defaultValue={`r` + i} />
+              {i === this.state.outputNumber - 1 && (
+                <MinusCircleOutlined
+                  onClick={() => {
+                    this.updateOutputNumber(this.state.outputNumber - 1);
+                  }}
+                  style={{ color: '#147BD1' }}
+                />
+              )}
+            </div>
+          ))}
+          {!(
+            this.props.nodeInfo.label === 'sql' && this.state.outputNumber > 0
+          ) && (
+            <Button
+              type="link"
+              onClick={() => {
+                this.updateOutputNumber(this.state.outputNumber + 1);
+              }}
+              icon={<PlusCircleOutlined />}
+              style={{ paddingLeft: 0, paddingRight: 0 }}
+            >
+              添加输出
+            </Button>
+          )}
           <Form.Item style={{ marginTop: '20px' }}>
             <Space>
               <Button
@@ -361,7 +311,7 @@ export default class ScriptNodeInfo extends React.Component<any, any> {
                   this.submit();
                 }}
               >
-                保存
+                确认
               </Button>
               <Button
                 onClick={() => {

packages/yili-dag/src/request.ts

@@ -13,7 +13,7 @@ const request = axios.create({
 // 获取调试数据表
 export const getDebugTable = (params: any) =>
   request({
-    url: `/jpt/datamanagement`,
+    url: `/jpt/datamanagement/`,
     method: 'get',
     params
   });
@@ -99,3 +99,10 @@ export const getSchema = (table_name: string) =>
     url: `/jpt/datamanagement/table_schema?table_name=${table_name}`,
     method: 'get'
   });
+
+// sql数据源表预览
+export const getSqlDsTable = (table_name: string) =>
+  request({
+    url: `/jpt/datamanagement/table_content?table_name=${table_name}&page=${1}&size=${100}`,
+    method: 'get'
+  });