feat(flow): 应用组件增加实例选择和组件信息展示

src/components/FlowEditor/nodeEditors/BasicNodeEditor.tsx

@@ -1,12 +1,99 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
+import { useSelector } from 'react-redux';
 import { NodeEditorProps } from './index';
-import { Form, Input, Select } from '@arco-design/web-react';
+import { Form, Input, Select, Typography } from '@arco-design/web-react';
+import { IconUnorderedList } from '@arco-design/web-react/icon';
+import ParamsTable from '@/components/FlowEditor/nodeEditors/components/ParamsTable';
+import { queryInstance } from '@/api/components';
 
 const BasicNodeEditor: React.FC<NodeEditorProps> = ({
                                                       node,
                                                       nodeData,
                                                       updateNodeData
                                                     }) => {
+  const [currentCompInfo, setCurrentCompInfo] = useState(null);
+  const [options, setOptions] = useState([]);
+  const { projectComponentData, info, currentAppData } = useSelector(state => state.ideContainer);
+
+  const getCurrentProjectStoreData = () => {
+    const compData = projectComponentData[currentAppData.sceneId] || {};
+
+    const result: any[] = [];
+
+    // 处理projectCompDto中的数据
+    if (compData.projectCompDto) {
+      const { mineComp = [], pubComp = [], teamWorkComp = [] } = compData.projectCompDto;
+
+      // 添加mineComp数据
+      mineComp.forEach((item: any) => {
+        result.push({
+          ...item,
+          type: 'mineComp'
+        });
+      });
+
+      // 添加pubComp数据
+      pubComp.forEach((item: any) => {
+        result.push({
+          ...item,
+          type: 'pubComp'
+        });
+      });
+
+      // 添加teamWorkComp数据
+      teamWorkComp.forEach((item: any) => {
+        result.push({
+          ...item,
+          type: 'teamWorkComp'
+        });
+      });
+    }
+
+    // 处理projectFlowDto中的数据
+    if (compData.projectFlowDto) {
+      const { mineFlow = [], pubFlow = [] } = compData.projectFlowDto;
+
+      // 添加mineFlow数据
+      mineFlow.forEach((item: any) => {
+        result.push({
+          ...item,
+          type: 'mineFlow'
+        });
+      });
+
+      // 添加pubFlow数据
+      pubFlow.forEach((item: any) => {
+        result.push({
+          ...item,
+          type: 'pubFlow'
+        });
+      });
+    }
+
+    return result;
+  };
+
+  const getCompInfo = () => {
+    const flatData = getCurrentProjectStoreData();
+    setCurrentCompInfo(flatData.find((item: any) => item.id === nodeData.compId));
+  };
+  const getCompInstance = async () => {
+    const res: any = await queryInstance(nodeData.compId);
+    if (res.code === 200) {
+      console.log('res:', res);
+      const newOptions = res.data.map((item: any) => {
+        return {
+          label: item.identifier,
+          value: item.identifier
+        };
+      });
+      setOptions(newOptions);
+    }
+  };
+  useEffect(() => {
+    getCompInfo();
+    getCompInstance();
+  }, []);
   return (
     <Form layout="vertical">
       <Form.Item label="节点标题">
@@ -21,17 +108,53 @@ const BasicNodeEditor: React.FC<NodeEditorProps> = ({
           onChange={(value) => updateNodeData('description', value)}
         />
       </Form.Item>
+      <Typography.Title heading={5}><IconUnorderedList style={{ marginRight: 5 }} />组件信息</Typography.Title>
+      <div style={{ display: 'flex', marginTop: 10, marginBottom: 10 }}>
+        <span>组件类型：</span>
+        <div>{currentCompInfo?.type}</div>
+      </div>
+      <div style={{ display: 'flex', marginTop: 10, marginBottom: 10 }}>
+        <span>组件名称：</span>
+        <div>{currentCompInfo?.name}</div>
+      </div>
+      <div style={{ display: 'flex', marginTop: 10, marginBottom: 10 }}>
+        <span>组件描述：</span>
+        <div>{currentCompInfo?.description}</div>
+      </div>
       <Form.Item label="节点类型">
         <Select
-          value={nodeData.category || ''}
+          value={nodeData?.component?.compIdentifier || ''}
-          onChange={(value) => updateNodeData('category', value)}
+          onChange={(value) => {
-          options={[
+            console.log(value);
-            { label: '数据处理', value: 'data' },
+            updateNodeData('component', {
-            { label: '逻辑判断', value: 'logic' },
+              ...nodeData.component,
-            { label: '外部接口', value: 'api' }
+              compIdentifier: value,
-          ]}
+              compInstanceIdentifier: value
+            });
+          }}
+          options={options}
         />
       </Form.Item>
+      <Typography.Title heading={5}><IconUnorderedList style={{ marginRight: 5 }} />输入参数</Typography.Title>
+      <ParamsTable
+        initialData={nodeData.parameters.dataIns || []}
+        onUpdateData={(data) => {
+          updateNodeData('parameters', {
+            ...nodeData.parameters,
+            dataIns: data
+          });
+        }}
+      />
+      <Typography.Title heading={5}><IconUnorderedList style={{ marginRight: 5 }} />输出参数</Typography.Title>
+      <ParamsTable
+        initialData={nodeData.parameters.dataOuts || []}
+        onUpdateData={(data) => {
+          updateNodeData('parameters', {
+            ...nodeData.parameters,
+            dataOuts: data
+          });
+        }}
+      />
     </Form>
   );
 };

src/pages/orchestration/appCompComponent/compInfo.tsx

@@ -4,8 +4,6 @@ import { Space, Divider, Table, TableColumnProps } from '@arco-design/web-react'
 
 const CompInfo = ({ currentCompInfo }) => {
 
-  console.log('currentCompInfo:', currentCompInfo);
-
   const columns: TableColumnProps[] = [
     {
       title: '参数名',

src/utils/convertFlowData.ts

@@ -483,7 +483,7 @@ const getNodeApiIns = (nodeId: string, nodeConfig: any, currentProjectCompData:
   else {
     const comp = currentProjectCompData.filter(item => item.id === nodeConfig?.component?.compId);
     if (comp && comp.length > 0) {
-      return comp[0].def.apis.map(v => {
+      return comp[0].def?.apis.map(v => {
         return {
           ...v,
           name: v.id,
@@ -566,7 +566,7 @@ const getNodeApiOuts = (nodeId: string, nodeConfig: any, currentProjectCompData:
     const comp = currentProjectCompData.filter(item => item.id === nodeConfig?.component?.compId);
     if (comp && comp.length > 0) {
       return [{
-        ...comp[0].def.apiOut,
+        ...comp[0].def?.apiOut,
         dataType: '',
         defaultValue: ''
       }];