From 0d04bc5d8080b82338302fba0a59fccff2eaedfc Mon Sep 17 00:00:00 2001
From: Junjie <fallin.jie@qq.com>
Date: 星期日, 06 七月 2025 11:28:29 +0800
Subject: [PATCH] #
---
zy-asrs-flow/src/components/Flow/GraphTools.jsx | 271 ++++++++++++++++++++++++++++++++++++++++++++++-------
1 files changed, 233 insertions(+), 38 deletions(-)
diff --git a/zy-asrs-flow/src/components/Flow/GraphTools.jsx b/zy-asrs-flow/src/components/Flow/GraphTools.jsx
index e93b74b..dddb705 100644
--- a/zy-asrs-flow/src/components/Flow/GraphTools.jsx
+++ b/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>
</>
);
}
\ No newline at end of file
--
Gitblit v1.9.1