#

Junjie

2025-07-06 0d04bc5d8080b82338302fba0a59fccff2eaedfc

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

@@ -1,14 +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 { exportDataToServer } from "../../services/flow/api";
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);
@@ -16,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 = () => {
@@ -77,11 +104,28 @@
                return;
            }

            let id = null;
            if (currentFlow != null) {
                id = currentFlow.id;
            }

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

        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) => {
@@ -369,47 +444,158 @@
        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="预览代码" open={isModalOpen} onOk={handleOk} onCancel={handleCancel}>
@@ -417,6 +603,15 @@
                    {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>
        </>
    );
}