#

Junjie

2025-07-06 0d04bc5d8080b82338302fba0a59fccff2eaedfc

 zy-asrs-flow/src/components/Flow/GraphTools.jsx

@@ -1,13 +1,24 @@
import React, { useRef, useEffect, useState } from "react";
import { Button, message, Modal } from 'antd';
import { Button, message, Modal, Divider, List, Typography, Input, Popconfirm } from 'antd';
import { DeleteFilled, ApiOutlined } from '@ant-design/icons';
import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
import { solarizedlight } from 'react-syntax-highlighter/dist/esm/styles/prism';
import './GraphTools.less'
import { exportDataToServer, getFlowList, deleteFlowById, updateFlowStatus, mockRun } from "../../services/flow/api";
import './css/GraphTools.less'
import { flow, remove } from "lodash";
import { find } from "lodash";

export const GraphTools = ({ graphRef, isReady }) => {

    const [isModalOpen, setIsModalOpen] = useState(false);
    const [saveIsModalOpen, setSaveIsModalOpen] = useState(false);
    const [preCode, setPreCode] = useState(null);
    const [flowListData, setFlowListData] = useState([]);
    const [currentFlow, setCurrentFlow] = useState(null);
    const [flowName, setFlowName] = useState(null);
    const [flowMemo, setFlowMemo] = useState(null);

    let flowId = -1;

    const handleOk = () => {
        setIsModalOpen(false);
@@ -15,7 +26,24 @@

    const handleCancel = () => {
        setIsModalOpen(false);
        setSaveIsModalOpen(false);
    };

    const flowNameInputChange = (e) => {
        setFlowName(e.target.value)
    }

    const memoInputChange = (e) => {
        setFlowMemo(e.target.value)
    }

    const saveData = () => {
        if (currentFlow == null) {
            flowId = -1;
        }

        setSaveIsModalOpen(true);
    }

    //预览代码
    const prewCode = () => {
@@ -76,15 +104,33 @@
                return;
            }

            console.log(getDescendants(rootNode, nodes, graph));
            let id = null;
            if (currentFlow != null) {
                id = currentFlow.id;
            }

            const codeContent = transCode(rootNode, nodes, graph)
            console.log(codeContent);
            let result = sortNodes(rootNode, nodes, graph);
            let targetResult = setResult(edges, result)
            console.log(targetResult);
            exportDataToServer({
                originData: JSON.stringify(data),
                data: result,
                name: flowName,
                memo: flowMemo,
                id: id
            }).then((res) => {
                if (res.code == 200) {
                    message.success('保存成功');
                    updateFlowList();
                } else {
                    message.warning(res.msg);
                }
                setSaveIsModalOpen(false);
            })
        }
    }

    const transCode = (rootNode, nodes, graph) => {
        let codeContent = "";
    const sortNodes = (rootNode, nodes, graph) => {
        let values = nodeDFS(rootNode, nodes, graph);
        const searchNode = {
            id: 1,
@@ -93,7 +139,6 @@
        };

        let cpValues = JSON.parse(JSON.stringify(values))
        console.log(cpValues);

        let searchIndex = 0;
        cpValues.forEach((value) => {
@@ -131,6 +176,87 @@
            }
        })

        return cpValues;
    }

    const setResult = (edges, result) => {
        console.log(edges, result);
        result.forEach((item) => {
            let find = findEdge(edges, item.id)

            item.nextTrue = "";
            item.nextFalse = "";

            find.forEach((edge) => {
                if (edge.data.logicBool == true) {
                    item.nextTrue = edge.target.cell;
                } else {
                    item.nextFalse = edge.target.cell;
                }
            })
        })

        return result;
    }

    const findEdge = (edges, parentId) => {
        let list = [];
        edges.forEach((edge) => {
            if (edge.source.cell == parentId) {
                list.push(edge);
            }
        })

        return list;
    }

    const transCode = (rootNode, nodes, graph) => {
        let codeContent = "";

        let values = nodeDFS(rootNode, nodes, graph);
        const searchNode = {
            id: 1,
            parent: null,
            logicBool: true
        };

        let cpValues = JSON.parse(JSON.stringify(values))

        let searchIndex = 0;
        cpValues.forEach((value) => {
            if (value.data.isLogic) {
                value.data.searchLogicId = searchNode.id;
                value.data.searchLogicBool = searchNode.logicBool;
                value.data.searchIndex = searchIndex++;

                let tmpSearchNode = JSON.parse(JSON.stringify(searchNode))
                searchNode.parent = tmpSearchNode;
                searchNode.id = value.id;
                searchNode.logicBool = null;
                searchIndex = 0;
            } else {
                let id = searchNode.id;
                let logicBool = searchNode.logicBool;

                const connectedEdges = graph.getConnectedEdges(value);//取边
                connectedEdges.forEach((edge) => {
                    let tmpSearchNode = JSON.parse(JSON.stringify(searchNode));
                    while (tmpSearchNode.parent != null) {
                        if (edge.source.cell == tmpSearchNode.id) {
                            logicBool = edge.data.logicBool;//更新方向
                            searchNode.logicBool = edge.data.logicBool;
                            id = tmpSearchNode.id;
                            break;
                        }
                        tmpSearchNode = tmpSearchNode.parent;
                    }
                })

                value.data.searchLogicId = id;
                value.data.searchLogicBool = logicBool;
                value.data.searchIndex = searchIndex++;
            }
        })
        console.log(cpValues);
        console.log(searchNode);

@@ -197,6 +323,8 @@
            obj.id = key;
            sortTmp[tmp[key].index] = obj;
        }

        console.log(sortTmp);

        // 合并True和False
        sortTmp.forEach((item) => {
@@ -287,104 +415,13 @@
        return formattedCode;
    }

    // const transCode = (rootNode, nodes, graph) => {
    //     let codeContent = "";
    //     const descendants = [];
    //     let stack = [rootNode];

    //     let count = 0;
    //     while (stack.length > 0) {
    //         const current = stack.pop();
    //         descendants.push(current);

    //         const children = getChildren(current, nodes, graph);
    //         stack.push(...children);

    //         // 输出代码
    //         if (!current.data.isLogic) {
    //             const connectedEdges = graph.getConnectedEdges(current);//取边
    //             connectedEdges.forEach((edge) => {
    //                 //过滤从自身节点出去的边
    //                 if(edge.source.cell != current.id){
    //                     //取上一节点
    //                     let lastNode = null;
    //                     nodes.forEach((node) => {
    //                         if(node.id == edge.source.cell){
    //                             lastNode = node;
    //                         }
    //                     })

    //                     if(lastNode != null) {
    //                         //判断节点是否逻辑节点
    //                         if(lastNode.data.isLogic){
    //                             console.log(lastNode);
    //                             let nestedIfCode = "";
    //                             if(lastNode.data.logicBool == 'true') {
    //                                 nestedIfCode = `
    //                                 if (${lastNode.data.codeContent}) {
    //                                     ${current.data.codeContent}
    //                                 }
    //                                 `;
    //                             }else{
    //                                 nestedIfCode = `
    //                                 if (!(${lastNode.data.codeContent})) {
    //                                     ${current.data.codeContent}
    //                                 }
    //                                 `;
    //                             }


    //                             codeContent += "\n" + nestedIfCode;
    //                             console.log(codeContent);
    //                         }else{
    //                             if (current.data.codeContent != null) {
    //                                 codeContent += "\n" + current.data.codeContent;
    //                             }
    //                         }
    //                     }
    //                 }
    //                 console.log(current);
    //             })
    //         } else {
    //             // if (current.data.codeContent != null) {
    //             //     codeContent += "\n" + current.data.codeContent;
    //             // }

    //             // const connectedEdges = graph.getConnectedEdges(current);
    //             // console.log(connectedEdges);
    //             // stack = []
    //             // let test = []
    //             // connectedEdges.forEach((edge) => {
    //             //     nodes.forEach((item) => {
    //             //         if (item.id === edge.target.cell && item.id != current.id) {
    //             //             test.push(item);
    //             //         }
    //             //     })
    //             // });
    //             // console.log(test);
    //             // console.log();
    //             // let nestedIfCode = `
    //             // if (true}) {
    //             //     ${current.data.codeContent}
    //             // }
    //             // `;

    //             // codeContent += "\n" + nestedIfCode;
    //             // console.log(codeContent);
    //         }

    //     }

    //     console.log(codeContent);
    // }

    const nodeDFS = (node, nodes, graph) => {
        let values = [];
        if (graph) {
            const connectedEdges = graph.getConnectedEdges(node);
            const children = [];

            console.log(node);
            // console.log(node);
            connectedEdges.forEach((edge) => {
                nodes.forEach((item) => {
                    if (item.id === edge.target.cell && item.id != node.id) {
@@ -393,11 +430,11 @@
                })
            });

            console.log(connectedEdges);
            // console.log(connectedEdges);
            if (children.length != 0) {
                console.log(children);
                // console.log(children);
                children.forEach((node) => {
                    console.log(node);
                    // console.log(node);
                    values.push(node);
                    values = values.concat(nodeDFS(node, nodes, graph))
                })
@@ -407,54 +444,174 @@
        return values;
    }

    const getChildren = (node, nodes, graph) => {
        const connectedEdges = graph.getConnectedEdges(node);
        const children = [];

        connectedEdges.forEach((edge) => {
            nodes.forEach((item) => {
                if (item.id === edge.target.cell && item.id != node.id) {
                    children.push(item);
                }
            })
        });

        return children;
    }

    const getDescendants = (node, nodes, graph) => {
        const descendants = [];
        const stack = [node];

        let count = 0;
        while (stack.length > 0) {
            const current = stack.pop();
            descendants.push(current);

            const children = getChildren(current, nodes, graph);
            stack.push(...children);
    const setFlowActive = () => {
        if (currentFlow == null) {
            message.warning("请选择要激活使用的流程图！");
            return;
        }

        return descendants;
        const status = currentFlow.status == 1 ? 0 : 1;
        updateFlowStatus(currentFlow.id, status).then((res) => {
            if (res.code == 200) {
                message.success(status == 1 ? "激活成功" : "已取消激活");
                currentFlow.status = status;
            } else {
                message.warning(res.msg);
            }
            updateFlowList();
        })
    }

    const removeFlow = () => {
        if (currentFlow == null) {
            message.warning("请选择要删除的流程图！");
            return;
        }

        deleteFlowById(currentFlow.id).then((res) => {
            if (res.code == 200) {
                message.success("删除成功");
            } else {
                message.warning(res.msg);
            }
            updateFlowList();
        })
    }

    const updateFlowList = () => {
        getFlowList().then((res) => {
            setFlowListData(res.data);
        })
    }

    const createNewBlank = () => {
        const graph = graphRef.current;
        if (graph) {
            graph.clearCells();
            setCurrentFlow(null);
            setFlowName(null);
            setFlowMemo(null);
        }
    }

    const switchFlowBlank = (flow) => {
        const graph = graphRef.current;
        if (graph) {
            graph.fromJSON(JSON.parse(flow.originData));
            setCurrentFlow(flow)
            setFlowName(flow.name);
            setFlowMemo(flow.memo);
        }
    }

    const testRun = () => {//模拟运行
        if (currentFlow == null) {
            message.warning("请选择流程图");
            return;
        }

        mockRun(currentFlow.id).then((res) => {
            if (res.code == 200) {
                message.success("运行成功");
            } else {
                message.warning(res.msg);
            }
        })
    }

    useEffect(() => {
        updateFlowList();
    }, [])

    return (
        <>
            <div className="container">
                <Button type="primary" onClick={exportData}>
                    导出数据
                </Button>
            <div>
                <div className="container">
                    <div className="containerButton">
                        <Button type="primary" onClick={createNewBlank}>
                            新建
                        </Button>
                    </div>

                <Button type="primary" onClick={prewCode}>
                    预览代码
                </Button>
                    <div className="containerButton">
                        <Button type="primary" onClick={saveData}>
                            保存
                        </Button>
                    </div>

                    <div className="containerButton">
                        <Button type="primary" onClick={setFlowActive}>
                            激活使用
                        </Button>
                    </div>

                    <div className="containerButton">
                        <Button type="primary" onClick={prewCode}>
                            预览代码
                        </Button>
                    </div>

                    <div className="containerButton">
                        <Button type="primary" onClick={testRun}>
                            模拟运行
                        </Button>
                    </div>
                </div>

                <div className="flowList">
                    <List
                        header={
                            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                                <div><Typography.Text mark>[数据]</Typography.Text> 流程图列表</div>
                                <div>
                                    <Button type="primary" size="small" onClick={updateFlowList}>
                                        刷新
                                    </Button>

                                    <Popconfirm
                                        title="删除流程图"
                                        description="确认删除？"
                                        okText="删除"
                                        cancelText="取消"
                                        onConfirm={removeFlow}
                                    >
                                        <Button style={{ marginLeft: '5px' }} type="primary" danger size="small">
                                            <DeleteFilled />
                                        </Button>
                                    </Popconfirm>

                                </div>
                            </div>
                        }
                        dataSource={flowListData}
                        renderItem={(item) => (
                            <List.Item>
                                <Button type={currentFlow != null && item.id == currentFlow.id ? 'primary' : 'dashed'} style={{ width: '100%' }} onClick={() => switchFlowBlank(item)}>
                                    <div style={{ display: 'flex', justifyContent: 'space-between' }}>
                                        <div>{item.name}</div>
                                        {item.status == 1 ? <div><ApiOutlined /></div> : ''}
                                    </div>
                                </Button>
                            </List.Item>
                        )}
                    />
                </div>
            </div>

            <Modal title="Basic Modal" open={isModalOpen} onOk={handleOk} onCancel={handleCancel}>
            <Modal title="预览代码" open={isModalOpen} onOk={handleOk} onCancel={handleCancel}>
                <SyntaxHighlighter language="java" style={solarizedlight}>
                    {preCode}
                </SyntaxHighlighter>
            </Modal>

            <Modal title="保存流程图" open={saveIsModalOpen} onOk={exportData} onCancel={handleCancel}>
                <div style={{ marginTop: '10px' }}>
                    <Input placeholder="流程图名称" value={flowName} onChange={flowNameInputChange} />
                </div>
                <div style={{ marginTop: '10px' }}>
                    <Input placeholder="备注" value={flowMemo} onChange={memoInputChange} />
                </div>
            </Modal>
        </>
    );
}