| | |
| | | const [execApi, setExecApi] = useState(null); |
| | | |
| | | const classList = [ |
| | | { value: 'crnClass', label: '堆垛机类' }, |
| | | { value: 'CrnThread', label: '堆垛机类' }, |
| | | ]; |
| | | |
| | | const apiList = [ |
| | | { value: 'load', label: '取货' }, |
| | | { value: 'unload', label: '放货' }, |
| | | { value: 'load_unload', label: '取放货' }, |
| | | { value: 'loadAndUnload', label: '取放货' }, |
| | | ]; |
| | | |
| | | const showNodeDrawer = (graph, node) => { |
New file |
| | |
| | | import React, { useRef, useEffect, useState } from "react"; |
| | | import { Button, Drawer, Input, Switch, Select, Checkbox } from 'antd'; |
| | | import { initNodeData } from "../GraphConfig"; |
| | | |
| | | const { TextArea } = Input; |
| | | const CheckboxGroup = Checkbox.Group; |
| | | |
| | | export const GraphDrawerDevp = ({ graphRef, isReady }) => { |
| | | |
| | | const [open, setOpen] = useState(false); |
| | | const [init, setInit] = useState(false); |
| | | const [nodeData, setNodeData] = useState(null); |
| | | const [codeContent, setCodeContent] = useState(null); |
| | | const [staStatus, setStaStatus] = useState([]); |
| | | const [enableStaStatus, setEnableStaStatus] = useState(false); |
| | | const [staHasWorkNo, setStaHasWorkNo] = useState(false); |
| | | const [devpWorkNo, setDevpWorkNo] = useState(null); |
| | | const [workNoJudgement, setWorkNoJudgement] = useState(null); |
| | | const [staJudgementFailExecute, setStaJudgementFailExecute] = useState(false); |
| | | const [writeStaNoStatus, setWriteStaNoStatus] = useState(false); |
| | | const [writeWorkNoStatus, setWriteWorkNoStatus] = useState(false); |
| | | const [writeStaNo, setWriteStaNo] = useState(""); |
| | | const [writeWorkNo, setWriteWorkNo] = useState(""); |
| | | const [staNo, setStaNo] = useState(""); |
| | | const [devpNo, setDevpNo] = useState(""); |
| | | |
| | | const devpOptions = [ |
| | | { |
| | | label: '自动', |
| | | value: 'auto' |
| | | }, |
| | | { |
| | | label: '有物', |
| | | value: 'loading' |
| | | }, |
| | | { |
| | | label: '可入', |
| | | value: 'in' |
| | | }, |
| | | { |
| | | label: '可出', |
| | | value: 'out' |
| | | }, |
| | | { |
| | | label: '工作号', |
| | | value: 'workNo' |
| | | } |
| | | ]; |
| | | |
| | | const staStatusChange = (list) => { |
| | | setStaStatus(list); |
| | | nodeData.data.devpType.staStatus = list; |
| | | |
| | | let hasWorkNo = false; |
| | | list.forEach((item) => { |
| | | if (item == "workNo") { |
| | | //存在工作号 |
| | | hasWorkNo = true; |
| | | } |
| | | }) |
| | | |
| | | setStaHasWorkNo(hasWorkNo); |
| | | nodeData.data.devpType.hasWorkNo = hasWorkNo; |
| | | }; |
| | | |
| | | const devpWorkNoChange = (e) => { |
| | | setDevpWorkNo(e.target.value); |
| | | nodeData.data.devpType.devpWorkNo = e.target.value; |
| | | } |
| | | |
| | | const staJudgementFailExecuteChange = (status) => { |
| | | setStaJudgementFailExecute(status); |
| | | nodeData.data.devpType.staJudgementFailExecute = status ? 'execute' : 'stop'; |
| | | } |
| | | |
| | | const writeStaNoStatusChange = (status) => { |
| | | setWriteStaNoStatus(status); |
| | | nodeData.data.devpType.writeStaNoStatus = status; |
| | | } |
| | | |
| | | const writeWorkNoStatusChange = (status) => { |
| | | setWriteWorkNoStatus(status); |
| | | nodeData.data.devpType.writeWorkNoStatus = status; |
| | | } |
| | | |
| | | const enableStaStatusChange = (status) => { |
| | | setEnableStaStatus(status); |
| | | nodeData.data.devpType.enableStaStatus = status; |
| | | } |
| | | |
| | | const workNoJudgementChange = (data) => { |
| | | setWorkNoJudgement(data) |
| | | nodeData.data.devpType.workNoJudgement = data; |
| | | } |
| | | |
| | | const staNoChange = (e) => { |
| | | setStaNo(e.target.value); |
| | | nodeData.data.devpType.staNo = e.target.value; |
| | | } |
| | | |
| | | const showNodeDrawer = (graph, node) => { |
| | | if (node.data.type == "devp") { |
| | | setOpen(true); |
| | | setNodeData(node); |
| | | if (node.data == null) { |
| | | node.data = initNodeData; |
| | | } |
| | | |
| | | if (node.data.codeContent != null) { |
| | | setCodeContent(node.data.codeContent); |
| | | } |
| | | |
| | | if (node.data.devpType == null) { |
| | | node.data.devpType = { |
| | | devpNo: "",//输送线PLC |
| | | staNo: "",//站号 |
| | | enableStaStatus: false,//默认关闭判断站点状态 |
| | | staStatus: [],//判断站点状态列表 |
| | | hasWorkNo: false,//是否存在工作号判断 |
| | | workNoJudgement: '>',//默认判断工作号 大于号 |
| | | devpWorkNo: 0,//默认工作号 |
| | | staJudgementFailExecute: false,//判断失败后是否继续执行流程 |
| | | writeStaNoStatus: false,//是否写入目标站 |
| | | writeWorkNoStatus: false,//是否写入工作号 |
| | | writeStaNo: "",//写入目标站数据 |
| | | writeWorkNo: "",//写入工作号数据 |
| | | } |
| | | } else { |
| | | const devpType = node.data.devpType; |
| | | setDevpNo(devpType.devpNo); |
| | | setStaNo(devpType.staNo); |
| | | setEnableStaStatus(devpType.enableStaStatus); |
| | | setStaStatus(devpType.staStatus); |
| | | setStaHasWorkNo(devpType.hasWorkNo); |
| | | setDevpWorkNo(devpType.devpWorkNo); |
| | | setWorkNoJudgement(devpType.workNoJudgement); |
| | | setStaJudgementFailExecute(devpType.staJudgementFailExecute); |
| | | setWriteWorkNoStatus(devpType.writeWorkNoStatus); |
| | | setWriteStaNoStatus(devpType.writeStaNoStatus); |
| | | setWriteWorkNo(devpType.writeWorkNo); |
| | | setWriteStaNo(devpType.writeStaNo); |
| | | } |
| | | } |
| | | }; |
| | | |
| | | const onNodeClose = (e) => { |
| | | setOpen(false); |
| | | setNodeData(null); |
| | | setCodeContent(null); |
| | | }; |
| | | |
| | | const nodeTextAreaChange = (e) => { |
| | | setCodeContent(e.target.value); |
| | | nodeData.data.codeContent = e.target.value; |
| | | } |
| | | |
| | | const nodeDataInputChange = (e) => { |
| | | nodeData.label = e.target.value; |
| | | } |
| | | |
| | | const writeWorkNoChange = (e) => { |
| | | setWriteWorkNo(e.target.value); |
| | | nodeData.data.devpType.writeWorkNo = e.target.value; |
| | | } |
| | | |
| | | const writeStaNoChange = (e) => { |
| | | setWriteStaNo(e.target.value); |
| | | nodeData.data.devpType.writeStaNo = e.target.value; |
| | | } |
| | | |
| | | const devpNoChange = (e) => { |
| | | setDevpNo(e.target.value); |
| | | nodeData.data.devpType.devpNo = e.target.value; |
| | | } |
| | | |
| | | useEffect(() => { |
| | | if (isReady) { |
| | | const graph = graphRef.current; |
| | | |
| | | if (!init) { |
| | | graph.on("node:dblclick", ({ node }) => { |
| | | showNodeDrawer(graph, node); |
| | | }) |
| | | setInit(true); |
| | | } |
| | | } |
| | | }) |
| | | |
| | | if (nodeData) { |
| | | return ( |
| | | <> |
| | | <Drawer title={nodeData.label} onClose={onNodeClose} open={open} size="large"> |
| | | <div className="graphDrawerContainer"> |
| | | <div>输送线组件</div> |
| | | <div>ID:{nodeData.id}</div> |
| | | <div>组件名:<Input defaultValue={nodeData.label} onChange={nodeDataInputChange} /></div> |
| | | <div>根节点:<Switch checkedChildren="是" unCheckedChildren="否" checked={nodeData.data.root} /></div> |
| | | <div> |
| | | 输送线PLC: |
| | | <Input value={devpNo} onChange={devpNoChange} placeholder="输送线PLC" /> |
| | | </div> |
| | | <div> |
| | | 站号: |
| | | <Input value={staNo} onChange={staNoChange} placeholder="站号" /> |
| | | </div> |
| | | <div> |
| | | 判断站点状态: |
| | | <Switch value={enableStaStatus} checkedChildren="开启" unCheckedChildren="关闭" onChange={enableStaStatusChange} /> |
| | | </div> |
| | | { |
| | | enableStaStatus ? |
| | | <div> |
| | | 站点状态: |
| | | <CheckboxGroup options={devpOptions} value={staStatus} onChange={staStatusChange} /> |
| | | </div> |
| | | |
| | | : '' |
| | | } |
| | | |
| | | { |
| | | enableStaStatus && staHasWorkNo ? |
| | | <div> |
| | | 工作号判断: |
| | | |
| | | <Input |
| | | value={devpWorkNo} |
| | | onChange={devpWorkNoChange} |
| | | addonBefore={<Select |
| | | onChange={workNoJudgementChange} |
| | | value={workNoJudgement} |
| | | defaultValue=">" |
| | | options={[ |
| | | { value: '>', label: '>' }, |
| | | { value: '>=', label: '>=' }, |
| | | { value: '=', label: '=' }, |
| | | { value: '!=', label: '!=' }, |
| | | { value: '<', label: '<' }, |
| | | { value: '<=', label: '<=' }, |
| | | ]} |
| | | />} placeholder="工作号" /> |
| | | </div> |
| | | : '' |
| | | } |
| | | |
| | | { |
| | | enableStaStatus ? |
| | | <div> |
| | | 站点判断失败:<Switch value={staJudgementFailExecute} checkedChildren="继续执行" unCheckedChildren="阻止执行" onChange={staJudgementFailExecuteChange} /> |
| | | </div> |
| | | |
| | | : '' |
| | | } |
| | | |
| | | <div> |
| | | 写入工作号:<Switch value={writeWorkNoStatus} checkedChildren="写入" unCheckedChildren="不写入" onChange={writeWorkNoStatusChange} /> |
| | | { |
| | | writeWorkNoStatus ? |
| | | <Input |
| | | value={writeWorkNo} |
| | | onChange={writeWorkNoChange} |
| | | placeholder="工作号" /> |
| | | : '' |
| | | } |
| | | </div> |
| | | |
| | | <div> |
| | | 写入目标站:<Switch value={writeStaNoStatus} checkedChildren="写入" unCheckedChildren="不写入" onChange={writeStaNoStatusChange} /> |
| | | { |
| | | writeStaNoStatus ? |
| | | <Input |
| | | value={writeStaNo} |
| | | onChange={writeStaNoChange} |
| | | placeholder="目标站" /> |
| | | : '' |
| | | } |
| | | </div> |
| | | |
| | | {/* <div>可执行代码:</div> |
| | | <TextArea value={codeContent} onChange={nodeTextAreaChange} rows={10} /> */} |
| | | </div> |
| | | </Drawer> |
| | | </> |
| | | ); |
| | | } |
| | | } |
| | |
| | | |
| | | const graph = ref.current; |
| | | |
| | | const rect = graph.addNode({ |
| | | x: 60, |
| | | y: 60, |
| | | width: 120, |
| | | height: 40, |
| | | label: '订单管理', |
| | | ports: commonGraphPorts, |
| | | attrs: commonGraphAttrs, |
| | | data: initNodeData, |
| | | }); |
| | | // const rect = graph.addNode({ |
| | | // x: 60, |
| | | // y: 60, |
| | | // width: 120, |
| | | // height: 40, |
| | | // label: '订单管理', |
| | | // ports: commonGraphPorts, |
| | | // attrs: commonGraphAttrs, |
| | | // data: initNodeData, |
| | | // }); |
| | | |
| | | const rect2 = graph.addNode({ |
| | | x: 240, |
| | | y: 240, |
| | | width: 120, |
| | | height: 40, |
| | | label: '库存管理', |
| | | ports: commonGraphPorts, |
| | | attrs: commonGraphAttrs, |
| | | data: initNodeData, |
| | | }); |
| | | // const rect2 = graph.addNode({ |
| | | // x: 240, |
| | | // y: 240, |
| | | // width: 120, |
| | | // height: 40, |
| | | // label: '库存管理', |
| | | // ports: commonGraphPorts, |
| | | // attrs: commonGraphAttrs, |
| | | // data: initNodeData, |
| | | // }); |
| | | |
| | | graph.use( |
| | | new Snapline({ |
| | |
| | | }, |
| | | }), |
| | | ) |
| | | |
| | | |
| | | graph.fromJSON({ |
| | | "cells": [ |
| | | { |
| | | "shape": "edge", |
| | | "attrs": { |
| | | "line": { |
| | | "stroke": "#A2B1C3", |
| | | "targetMarker": { |
| | | "name": "block", |
| | | "width": 12, |
| | | "height": 8 |
| | | } |
| | | } |
| | | }, |
| | | "id": "2475ea4f-f0e3-4b44-add4-7d4950ddea45", |
| | | "zIndex": 0, |
| | | "source": { |
| | | "cell": "71d8bc90-558f-489f-b432-a03d7af27cdc", |
| | | "port": "port2" |
| | | }, |
| | | "target": { |
| | | "cell": "c5798537-a8a0-4d79-bd76-a4f663492126", |
| | | "port": "port1" |
| | | }, |
| | | "data": { |
| | | "codeContent": null, |
| | | "root": false, |
| | | "isLogic": false, |
| | | "logicBool": false, |
| | | "searchLogicId": 1, |
| | | "searchLogicBool": true, |
| | | "searchIndex": 0 |
| | | }, |
| | | "labels": [ |
| | | { |
| | | "attrs": { |
| | | "label": { |
| | | "text": "" |
| | | } |
| | | } |
| | | } |
| | | ] |
| | | }, |
| | | { |
| | | "shape": "edge", |
| | | "attrs": { |
| | | "line": { |
| | | "stroke": "#A2B1C3", |
| | | "targetMarker": { |
| | | "name": "block", |
| | | "width": 12, |
| | | "height": 8 |
| | | } |
| | | } |
| | | }, |
| | | "id": "2c3744b4-45ce-44a6-b169-402eaec24174", |
| | | "zIndex": 0, |
| | | "source": { |
| | | "cell": "c5798537-a8a0-4d79-bd76-a4f663492126", |
| | | "port": "port2" |
| | | }, |
| | | "target": { |
| | | "cell": "3ca188b2-9ffe-4528-ba6e-c1568b6d7fe6", |
| | | "port": "port1" |
| | | }, |
| | | "data": { |
| | | "codeContent": null, |
| | | "root": false, |
| | | "isLogic": false, |
| | | "logicBool": false, |
| | | "searchLogicId": 1, |
| | | "searchLogicBool": true, |
| | | "searchIndex": 0 |
| | | }, |
| | | "labels": [ |
| | | { |
| | | "attrs": { |
| | | "label": { |
| | | "text": "" |
| | | } |
| | | } |
| | | } |
| | | ] |
| | | }, |
| | | { |
| | | "shape": "edge", |
| | | "attrs": { |
| | | "line": { |
| | | "stroke": "#A2B1C3", |
| | | "targetMarker": { |
| | | "name": "block", |
| | | "width": 12, |
| | | "height": 8 |
| | | } |
| | | } |
| | | }, |
| | | "id": "56181ccf-a41c-4cd8-82d6-e2a4bde31ba9", |
| | | "zIndex": 0, |
| | | "source": { |
| | | "cell": "3ca188b2-9ffe-4528-ba6e-c1568b6d7fe6", |
| | | "port": "port2" |
| | | }, |
| | | "target": { |
| | | "cell": "63db5ce0-b916-44e4-a924-a79b35afe1d1", |
| | | "port": "port1" |
| | | }, |
| | | "data": { |
| | | "codeContent": null, |
| | | "root": false, |
| | | "isLogic": false, |
| | | "logicBool": true, |
| | | "searchLogicId": 1, |
| | | "searchLogicBool": true, |
| | | "searchIndex": 0 |
| | | }, |
| | | "labels": [ |
| | | { |
| | | "attrs": { |
| | | "label": { |
| | | "text": "true" |
| | | } |
| | | } |
| | | } |
| | | ] |
| | | }, |
| | | { |
| | | "shape": "edge", |
| | | "attrs": { |
| | | "line": { |
| | | "stroke": "#A2B1C3", |
| | | "targetMarker": { |
| | | "name": "block", |
| | | "width": 12, |
| | | "height": 8 |
| | | } |
| | | } |
| | | }, |
| | | "id": "73ca24ef-e9d4-4f18-9f06-ca49ac65962a", |
| | | "zIndex": 0, |
| | | "source": { |
| | | "cell": "cc993d9b-ce11-409d-92c6-7208682dcc8b", |
| | | "port": "port4" |
| | | }, |
| | | "target": { |
| | | "cell": "06d450fc-474e-4b23-b40d-c89fde446b28", |
| | | "port": "port3" |
| | | }, |
| | | "data": { |
| | | "codeContent": null, |
| | | "root": false, |
| | | "isLogic": false, |
| | | "logicBool": false, |
| | | "searchLogicId": 1, |
| | | "searchLogicBool": true, |
| | | "searchIndex": 0 |
| | | }, |
| | | "labels": [ |
| | | { |
| | | "attrs": { |
| | | "label": { |
| | | "text": "false" |
| | | } |
| | | } |
| | | } |
| | | ] |
| | | }, |
| | | { |
| | | "shape": "edge", |
| | | "attrs": { |
| | | "line": { |
| | | "stroke": "#A2B1C3", |
| | | "targetMarker": { |
| | | "name": "block", |
| | | "width": 12, |
| | | "height": 8 |
| | | } |
| | | } |
| | | }, |
| | | "id": "84a3a77c-79e8-4cf8-9bab-a72bbfc77f1d", |
| | | "zIndex": 0, |
| | | "source": { |
| | | "cell": "cc993d9b-ce11-409d-92c6-7208682dcc8b", |
| | | "port": "port2" |
| | | }, |
| | | "target": { |
| | | "cell": "cd9da0a4-5c2d-4f1b-9c51-403b32f1ad51", |
| | | "port": "port1" |
| | | }, |
| | | "data": { |
| | | "codeContent": null, |
| | | "root": false, |
| | | "isLogic": false, |
| | | "logicBool": true, |
| | | "searchLogicId": 1, |
| | | "searchLogicBool": true, |
| | | "searchIndex": 0 |
| | | }, |
| | | "labels": [ |
| | | { |
| | | "attrs": { |
| | | "label": { |
| | | "text": "true" |
| | | } |
| | | } |
| | | } |
| | | ] |
| | | }, |
| | | { |
| | | "shape": "edge", |
| | | "attrs": { |
| | | "line": { |
| | | "stroke": "#A2B1C3", |
| | | "targetMarker": { |
| | | "name": "block", |
| | | "width": 12, |
| | | "height": 8 |
| | | } |
| | | } |
| | | }, |
| | | "id": "93d65ae7-f170-466a-92ea-f69614002800", |
| | | "zIndex": 0, |
| | | "source": { |
| | | "cell": "c844f3d1-02a3-47d3-bcb9-51027c1deb1c", |
| | | "port": "port2" |
| | | }, |
| | | "target": { |
| | | "cell": "cc993d9b-ce11-409d-92c6-7208682dcc8b", |
| | | "port": "port1" |
| | | }, |
| | | "data": { |
| | | "codeContent": null, |
| | | "root": false, |
| | | "isLogic": false, |
| | | "logicBool": false, |
| | | "searchLogicId": 1, |
| | | "searchLogicBool": true, |
| | | "searchIndex": 0 |
| | | }, |
| | | "labels": [ |
| | | { |
| | | "attrs": { |
| | | "label": { |
| | | "text": "" |
| | | } |
| | | } |
| | | } |
| | | ] |
| | | }, |
| | | { |
| | | "shape": "edge", |
| | | "attrs": { |
| | | "line": { |
| | | "stroke": "#A2B1C3", |
| | | "targetMarker": { |
| | | "name": "block", |
| | | "width": 12, |
| | | "height": 8 |
| | | } |
| | | } |
| | | }, |
| | | "id": "de85103e-80ac-4c88-92de-5bb1a131788c", |
| | | "zIndex": 0, |
| | | "source": { |
| | | "cell": "63db5ce0-b916-44e4-a924-a79b35afe1d1", |
| | | "port": "port2" |
| | | }, |
| | | "target": { |
| | | "cell": "c844f3d1-02a3-47d3-bcb9-51027c1deb1c", |
| | | "port": "port1" |
| | | }, |
| | | "data": { |
| | | "codeContent": null, |
| | | "root": false, |
| | | "isLogic": false, |
| | | "logicBool": false, |
| | | "searchLogicId": 1, |
| | | "searchLogicBool": true, |
| | | "searchIndex": 0 |
| | | }, |
| | | "labels": [ |
| | | { |
| | | "attrs": { |
| | | "label": { |
| | | "text": "" |
| | | } |
| | | } |
| | | } |
| | | ] |
| | | }, |
| | | { |
| | | "position": { |
| | | "x": 60, |
| | | "y": 60 |
| | | }, |
| | | "size": { |
| | | "width": 120, |
| | | "height": 40 |
| | | }, |
| | | "attrs": { |
| | | "text": { |
| | | "text": "订单管理" |
| | | }, |
| | | "body": { |
| | | "fill": "#efefef", |
| | | "stroke": "#4d4d4d", |
| | | "strokeWidth": 2, |
| | | "refD": "M 50 0 L 100 50 L 50 100 L 0 50 Z" |
| | | } |
| | | }, |
| | | "visible": true, |
| | | "shape": "rect", |
| | | "id": "a4962b5d-6ef0-4217-bbf8-742652ffc0ee", |
| | | "data": { |
| | | "codeContent": null, |
| | | "root": false, |
| | | "isLogic": false, |
| | | "logicBool": false, |
| | | "searchLogicId": 1, |
| | | "searchLogicBool": true, |
| | | "searchIndex": 0 |
| | | }, |
| | | "zIndex": 1, |
| | | "ports": { |
| | | "groups": { |
| | | "top": { |
| | | "position": "top", |
| | | "attrs": { |
| | | "circle": { |
| | | "r": 5, |
| | | "magnet": true, |
| | | "stroke": "#5F95FF", |
| | | "strokeWidth": 1, |
| | | "fill": "#fff", |
| | | "style": { |
| | | "visibility": "hidden" |
| | | } |
| | | } |
| | | } |
| | | }, |
| | | "bottom": { |
| | | "position": "bottom", |
| | | "attrs": { |
| | | "circle": { |
| | | "r": 5, |
| | | "magnet": true, |
| | | "stroke": "#5F95FF", |
| | | "strokeWidth": 1, |
| | | "fill": "#fff", |
| | | "style": { |
| | | "visibility": "hidden" |
| | | } |
| | | } |
| | | } |
| | | }, |
| | | "left": { |
| | | "position": "left", |
| | | "attrs": { |
| | | "circle": { |
| | | "r": 5, |
| | | "magnet": true, |
| | | "stroke": "#5F95FF", |
| | | "strokeWidth": 1, |
| | | "fill": "#fff", |
| | | "style": { |
| | | "visibility": "hidden" |
| | | } |
| | | } |
| | | } |
| | | }, |
| | | "right": { |
| | | "position": "right", |
| | | "attrs": { |
| | | "circle": { |
| | | "r": 5, |
| | | "magnet": true, |
| | | "stroke": "#5F95FF", |
| | | "strokeWidth": 1, |
| | | "fill": "#fff", |
| | | "style": { |
| | | "visibility": "hidden" |
| | | } |
| | | } |
| | | } |
| | | } |
| | | }, |
| | | "items": [ |
| | | { |
| | | "id": "port1", |
| | | "group": "top" |
| | | }, |
| | | { |
| | | "id": "port2", |
| | | "group": "bottom" |
| | | }, |
| | | { |
| | | "id": "port3", |
| | | "group": "left" |
| | | }, |
| | | { |
| | | "id": "port4", |
| | | "group": "right" |
| | | } |
| | | ] |
| | | } |
| | | }, |
| | | { |
| | | "position": { |
| | | "x": 260, |
| | | "y": 390 |
| | | }, |
| | | "size": { |
| | | "width": 120, |
| | | "height": 40 |
| | | }, |
| | | "attrs": { |
| | | "text": { |
| | | "text": "库存管理" |
| | | }, |
| | | "body": { |
| | | "fill": "#efefef", |
| | | "stroke": "#4d4d4d", |
| | | "strokeWidth": 2, |
| | | "refD": "M 50 0 L 100 50 L 50 100 L 0 50 Z" |
| | | } |
| | | }, |
| | | "visible": true, |
| | | "shape": "rect", |
| | | "id": "63db5ce0-b916-44e4-a924-a79b35afe1d1", |
| | | "data": { |
| | | "codeContent": "2222", |
| | | "root": false, |
| | | "isLogic": false, |
| | | "logicBool": false, |
| | | "searchLogicId": 1, |
| | | "searchLogicBool": true, |
| | | "searchIndex": 0 |
| | | }, |
| | | "zIndex": 2, |
| | | "ports": { |
| | | "groups": { |
| | | "top": { |
| | | "position": "top", |
| | | "attrs": { |
| | | "circle": { |
| | | "r": 5, |
| | | "magnet": true, |
| | | "stroke": "#5F95FF", |
| | | "strokeWidth": 1, |
| | | "fill": "#fff", |
| | | "style": { |
| | | "visibility": "hidden" |
| | | } |
| | | } |
| | | } |
| | | }, |
| | | "bottom": { |
| | | "position": "bottom", |
| | | "attrs": { |
| | | "circle": { |
| | | "r": 5, |
| | | "magnet": true, |
| | | "stroke": "#5F95FF", |
| | | "strokeWidth": 1, |
| | | "fill": "#fff", |
| | | "style": { |
| | | "visibility": "hidden" |
| | | } |
| | | } |
| | | } |
| | | }, |
| | | "left": { |
| | | "position": "left", |
| | | "attrs": { |
| | | "circle": { |
| | | "r": 5, |
| | | "magnet": true, |
| | | "stroke": "#5F95FF", |
| | | "strokeWidth": 1, |
| | | "fill": "#fff", |
| | | "style": { |
| | | "visibility": "hidden" |
| | | } |
| | | } |
| | | } |
| | | }, |
| | | "right": { |
| | | "position": "right", |
| | | "attrs": { |
| | | "circle": { |
| | | "r": 5, |
| | | "magnet": true, |
| | | "stroke": "#5F95FF", |
| | | "strokeWidth": 1, |
| | | "fill": "#fff", |
| | | "style": { |
| | | "visibility": "hidden" |
| | | } |
| | | } |
| | | } |
| | | } |
| | | }, |
| | | "items": [ |
| | | { |
| | | "id": "port1", |
| | | "group": "top" |
| | | }, |
| | | { |
| | | "id": "port2", |
| | | "group": "bottom" |
| | | }, |
| | | { |
| | | "id": "port3", |
| | | "group": "left" |
| | | }, |
| | | { |
| | | "id": "port4", |
| | | "group": "right" |
| | | } |
| | | ] |
| | | } |
| | | }, |
| | | { |
| | | "position": { |
| | | "x": 270, |
| | | "y": 265 |
| | | }, |
| | | "size": { |
| | | "width": 100, |
| | | "height": 60 |
| | | }, |
| | | "attrs": { |
| | | "text": { |
| | | "text": "逻辑判断1" |
| | | }, |
| | | "body": { |
| | | "fill": "#efefef", |
| | | "stroke": "#4d4d4d", |
| | | "refD": "M 50 0 L 100 50 L 50 100 L 0 50 Z" |
| | | } |
| | | }, |
| | | "visible": true, |
| | | "shape": "path", |
| | | "id": "3ca188b2-9ffe-4528-ba6e-c1568b6d7fe6", |
| | | "data": { |
| | | "codeContent": "逻辑判断1", |
| | | "root": false, |
| | | "isLogic": true, |
| | | "logicBool": false, |
| | | "searchLogicId": 1, |
| | | "searchLogicBool": true, |
| | | "searchIndex": 0 |
| | | }, |
| | | "zIndex": 3, |
| | | "ports": { |
| | | "groups": { |
| | | "top": { |
| | | "position": "top", |
| | | "attrs": { |
| | | "circle": { |
| | | "r": 5, |
| | | "magnet": true, |
| | | "stroke": "#5F95FF", |
| | | "strokeWidth": 1, |
| | | "fill": "#fff", |
| | | "style": { |
| | | "visibility": "hidden" |
| | | } |
| | | } |
| | | } |
| | | }, |
| | | "bottom": { |
| | | "position": "bottom", |
| | | "attrs": { |
| | | "circle": { |
| | | "r": 5, |
| | | "magnet": true, |
| | | "stroke": "#5F95FF", |
| | | "strokeWidth": 1, |
| | | "fill": "#fff", |
| | | "style": { |
| | | "visibility": "hidden" |
| | | } |
| | | } |
| | | } |
| | | }, |
| | | "left": { |
| | | "position": "left", |
| | | "attrs": { |
| | | "circle": { |
| | | "r": 5, |
| | | "magnet": true, |
| | | "stroke": "#5F95FF", |
| | | "strokeWidth": 1, |
| | | "fill": "#fff", |
| | | "style": { |
| | | "visibility": "hidden" |
| | | } |
| | | } |
| | | } |
| | | }, |
| | | "right": { |
| | | "position": "right", |
| | | "attrs": { |
| | | "circle": { |
| | | "r": 5, |
| | | "magnet": true, |
| | | "stroke": "#5F95FF", |
| | | "strokeWidth": 1, |
| | | "fill": "#fff", |
| | | "style": { |
| | | "visibility": "hidden" |
| | | } |
| | | } |
| | | } |
| | | } |
| | | }, |
| | | "items": [ |
| | | { |
| | | "id": "port1", |
| | | "group": "top" |
| | | }, |
| | | { |
| | | "id": "port2", |
| | | "group": "bottom" |
| | | }, |
| | | { |
| | | "id": "port3", |
| | | "group": "left" |
| | | }, |
| | | { |
| | | "id": "port4", |
| | | "group": "right" |
| | | } |
| | | ] |
| | | } |
| | | }, |
| | | { |
| | | "position": { |
| | | "x": 300, |
| | | "y": 30 |
| | | }, |
| | | "size": { |
| | | "width": 80, |
| | | "height": 40 |
| | | }, |
| | | "attrs": { |
| | | "text": { |
| | | "text": "程序入口" |
| | | }, |
| | | "body": { |
| | | "fill": "#efefef", |
| | | "stroke": "#4d4d4d", |
| | | "strokeWidth": 2, |
| | | "refD": "M 50 0 L 100 50 L 50 100 L 0 50 Z" |
| | | } |
| | | }, |
| | | "visible": true, |
| | | "shape": "rect", |
| | | "id": "71d8bc90-558f-489f-b432-a03d7af27cdc", |
| | | "data": { |
| | | "codeContent": null, |
| | | "root": true, |
| | | "isLogic": false, |
| | | "logicBool": false, |
| | | "searchLogicId": 1, |
| | | "searchLogicBool": true, |
| | | "searchIndex": 0 |
| | | }, |
| | | "zIndex": 4, |
| | | "ports": { |
| | | "groups": { |
| | | "top": { |
| | | "position": "top", |
| | | "attrs": { |
| | | "circle": { |
| | | "r": 5, |
| | | "magnet": true, |
| | | "stroke": "#5F95FF", |
| | | "strokeWidth": 1, |
| | | "fill": "#fff", |
| | | "style": { |
| | | "visibility": "hidden" |
| | | } |
| | | } |
| | | } |
| | | }, |
| | | "bottom": { |
| | | "position": "bottom", |
| | | "attrs": { |
| | | "circle": { |
| | | "r": 5, |
| | | "magnet": true, |
| | | "stroke": "#5F95FF", |
| | | "strokeWidth": 1, |
| | | "fill": "#fff", |
| | | "style": { |
| | | "visibility": "hidden" |
| | | } |
| | | } |
| | | } |
| | | }, |
| | | "left": { |
| | | "position": "left", |
| | | "attrs": { |
| | | "circle": { |
| | | "r": 5, |
| | | "magnet": true, |
| | | "stroke": "#5F95FF", |
| | | "strokeWidth": 1, |
| | | "fill": "#fff", |
| | | "style": { |
| | | "visibility": "hidden" |
| | | } |
| | | } |
| | | } |
| | | }, |
| | | "right": { |
| | | "position": "right", |
| | | "attrs": { |
| | | "circle": { |
| | | "r": 5, |
| | | "magnet": true, |
| | | "stroke": "#5F95FF", |
| | | "strokeWidth": 1, |
| | | "fill": "#fff", |
| | | "style": { |
| | | "visibility": "hidden" |
| | | } |
| | | } |
| | | } |
| | | } |
| | | }, |
| | | "items": [ |
| | | { |
| | | "id": "port1", |
| | | "group": "top" |
| | | }, |
| | | { |
| | | "id": "port2", |
| | | "group": "bottom" |
| | | }, |
| | | { |
| | | "id": "port3", |
| | | "group": "left" |
| | | }, |
| | | { |
| | | "id": "port4", |
| | | "group": "right" |
| | | } |
| | | ] |
| | | } |
| | | }, |
| | | { |
| | | "position": { |
| | | "x": 300, |
| | | "y": 110 |
| | | }, |
| | | "size": { |
| | | "width": 80, |
| | | "height": 40 |
| | | }, |
| | | "attrs": { |
| | | "text": { |
| | | "text": "常用组件" |
| | | }, |
| | | "body": { |
| | | "fill": "#efefef", |
| | | "stroke": "#4d4d4d", |
| | | "strokeWidth": 2, |
| | | "refD": "M 50 0 L 100 50 L 50 100 L 0 50 Z" |
| | | } |
| | | }, |
| | | "visible": true, |
| | | "shape": "rect", |
| | | "id": "c5798537-a8a0-4d79-bd76-a4f663492126", |
| | | "data": { |
| | | "codeContent": "1111", |
| | | "root": false, |
| | | "isLogic": false, |
| | | "logicBool": false, |
| | | "searchLogicId": 1, |
| | | "searchLogicBool": true, |
| | | "searchIndex": 0 |
| | | }, |
| | | "zIndex": 5, |
| | | "ports": { |
| | | "groups": { |
| | | "top": { |
| | | "position": "top", |
| | | "attrs": { |
| | | "circle": { |
| | | "r": 5, |
| | | "magnet": true, |
| | | "stroke": "#5F95FF", |
| | | "strokeWidth": 1, |
| | | "fill": "#fff", |
| | | "style": { |
| | | "visibility": "hidden" |
| | | } |
| | | } |
| | | } |
| | | }, |
| | | "bottom": { |
| | | "position": "bottom", |
| | | "attrs": { |
| | | "circle": { |
| | | "r": 5, |
| | | "magnet": true, |
| | | "stroke": "#5F95FF", |
| | | "strokeWidth": 1, |
| | | "fill": "#fff", |
| | | "style": { |
| | | "visibility": "hidden" |
| | | } |
| | | } |
| | | } |
| | | }, |
| | | "left": { |
| | | "position": "left", |
| | | "attrs": { |
| | | "circle": { |
| | | "r": 5, |
| | | "magnet": true, |
| | | "stroke": "#5F95FF", |
| | | "strokeWidth": 1, |
| | | "fill": "#fff", |
| | | "style": { |
| | | "visibility": "hidden" |
| | | } |
| | | } |
| | | } |
| | | }, |
| | | "right": { |
| | | "position": "right", |
| | | "attrs": { |
| | | "circle": { |
| | | "r": 5, |
| | | "magnet": true, |
| | | "stroke": "#5F95FF", |
| | | "strokeWidth": 1, |
| | | "fill": "#fff", |
| | | "style": { |
| | | "visibility": "hidden" |
| | | } |
| | | } |
| | | } |
| | | } |
| | | }, |
| | | "items": [ |
| | | { |
| | | "id": "port1", |
| | | "group": "top" |
| | | }, |
| | | { |
| | | "id": "port2", |
| | | "group": "bottom" |
| | | }, |
| | | { |
| | | "id": "port3", |
| | | "group": "left" |
| | | }, |
| | | { |
| | | "id": "port4", |
| | | "group": "right" |
| | | } |
| | | ] |
| | | } |
| | | }, |
| | | { |
| | | "position": { |
| | | "x": 280, |
| | | "y": 511 |
| | | }, |
| | | "size": { |
| | | "width": 80, |
| | | "height": 40 |
| | | }, |
| | | "attrs": { |
| | | "text": { |
| | | "text": "常用组件2" |
| | | }, |
| | | "body": { |
| | | "fill": "#efefef", |
| | | "stroke": "#4d4d4d", |
| | | "strokeWidth": 2, |
| | | "refD": "M 50 0 L 100 50 L 50 100 L 0 50 Z" |
| | | } |
| | | }, |
| | | "visible": true, |
| | | "shape": "rect", |
| | | "id": "c844f3d1-02a3-47d3-bcb9-51027c1deb1c", |
| | | "data": { |
| | | "codeContent": "常用组件2", |
| | | "root": false, |
| | | "isLogic": false, |
| | | "logicBool": false, |
| | | "searchLogicId": 1, |
| | | "searchLogicBool": true, |
| | | "searchIndex": 0 |
| | | }, |
| | | "zIndex": 6, |
| | | "ports": { |
| | | "groups": { |
| | | "top": { |
| | | "position": "top", |
| | | "attrs": { |
| | | "circle": { |
| | | "r": 5, |
| | | "magnet": true, |
| | | "stroke": "#5F95FF", |
| | | "strokeWidth": 1, |
| | | "fill": "#fff", |
| | | "style": { |
| | | "visibility": "hidden" |
| | | } |
| | | } |
| | | } |
| | | }, |
| | | "bottom": { |
| | | "position": "bottom", |
| | | "attrs": { |
| | | "circle": { |
| | | "r": 5, |
| | | "magnet": true, |
| | | "stroke": "#5F95FF", |
| | | "strokeWidth": 1, |
| | | "fill": "#fff", |
| | | "style": { |
| | | "visibility": "hidden" |
| | | } |
| | | } |
| | | } |
| | | }, |
| | | "left": { |
| | | "position": "left", |
| | | "attrs": { |
| | | "circle": { |
| | | "r": 5, |
| | | "magnet": true, |
| | | "stroke": "#5F95FF", |
| | | "strokeWidth": 1, |
| | | "fill": "#fff", |
| | | "style": { |
| | | "visibility": "hidden" |
| | | } |
| | | } |
| | | } |
| | | }, |
| | | "right": { |
| | | "position": "right", |
| | | "attrs": { |
| | | "circle": { |
| | | "r": 5, |
| | | "magnet": true, |
| | | "stroke": "#5F95FF", |
| | | "strokeWidth": 1, |
| | | "fill": "#fff", |
| | | "style": { |
| | | "visibility": "hidden" |
| | | } |
| | | } |
| | | } |
| | | } |
| | | }, |
| | | "items": [ |
| | | { |
| | | "id": "port1", |
| | | "group": "top" |
| | | }, |
| | | { |
| | | "id": "port2", |
| | | "group": "bottom" |
| | | }, |
| | | { |
| | | "id": "port3", |
| | | "group": "left" |
| | | }, |
| | | { |
| | | "id": "port4", |
| | | "group": "right" |
| | | } |
| | | ] |
| | | } |
| | | }, |
| | | { |
| | | "position": { |
| | | "x": 270, |
| | | "y": 620 |
| | | }, |
| | | "size": { |
| | | "width": 100, |
| | | "height": 60 |
| | | }, |
| | | "attrs": { |
| | | "text": { |
| | | "text": "逻辑判断2" |
| | | }, |
| | | "body": { |
| | | "fill": "#efefef", |
| | | "stroke": "#4d4d4d", |
| | | "refD": "M 50 0 L 100 50 L 50 100 L 0 50 Z" |
| | | } |
| | | }, |
| | | "visible": true, |
| | | "shape": "path", |
| | | "id": "cc993d9b-ce11-409d-92c6-7208682dcc8b", |
| | | "data": { |
| | | "codeContent": "逻辑判断2", |
| | | "root": false, |
| | | "isLogic": true, |
| | | "logicBool": false, |
| | | "searchLogicId": 1, |
| | | "searchLogicBool": true, |
| | | "searchIndex": 0 |
| | | }, |
| | | "zIndex": 7, |
| | | "ports": { |
| | | "groups": { |
| | | "top": { |
| | | "position": "top", |
| | | "attrs": { |
| | | "circle": { |
| | | "r": 5, |
| | | "magnet": true, |
| | | "stroke": "#5F95FF", |
| | | "strokeWidth": 1, |
| | | "fill": "#fff", |
| | | "style": { |
| | | "visibility": "hidden" |
| | | } |
| | | } |
| | | } |
| | | }, |
| | | "bottom": { |
| | | "position": "bottom", |
| | | "attrs": { |
| | | "circle": { |
| | | "r": 5, |
| | | "magnet": true, |
| | | "stroke": "#5F95FF", |
| | | "strokeWidth": 1, |
| | | "fill": "#fff", |
| | | "style": { |
| | | "visibility": "hidden" |
| | | } |
| | | } |
| | | } |
| | | }, |
| | | "left": { |
| | | "position": "left", |
| | | "attrs": { |
| | | "circle": { |
| | | "r": 5, |
| | | "magnet": true, |
| | | "stroke": "#5F95FF", |
| | | "strokeWidth": 1, |
| | | "fill": "#fff", |
| | | "style": { |
| | | "visibility": "hidden" |
| | | } |
| | | } |
| | | } |
| | | }, |
| | | "right": { |
| | | "position": "right", |
| | | "attrs": { |
| | | "circle": { |
| | | "r": 5, |
| | | "magnet": true, |
| | | "stroke": "#5F95FF", |
| | | "strokeWidth": 1, |
| | | "fill": "#fff", |
| | | "style": { |
| | | "visibility": "hidden" |
| | | } |
| | | } |
| | | } |
| | | } |
| | | }, |
| | | "items": [ |
| | | { |
| | | "id": "port1", |
| | | "group": "top" |
| | | }, |
| | | { |
| | | "id": "port2", |
| | | "group": "bottom" |
| | | }, |
| | | { |
| | | "id": "port3", |
| | | "group": "left" |
| | | }, |
| | | { |
| | | "id": "port4", |
| | | "group": "right" |
| | | } |
| | | ] |
| | | } |
| | | }, |
| | | { |
| | | "position": { |
| | | "x": 280, |
| | | "y": 781 |
| | | }, |
| | | "size": { |
| | | "width": 80, |
| | | "height": 40 |
| | | }, |
| | | "attrs": { |
| | | "text": { |
| | | "text": "常用组件3" |
| | | }, |
| | | "body": { |
| | | "fill": "#efefef", |
| | | "stroke": "#4d4d4d", |
| | | "strokeWidth": 2, |
| | | "refD": "M 50 0 L 100 50 L 50 100 L 0 50 Z" |
| | | } |
| | | }, |
| | | "visible": true, |
| | | "shape": "rect", |
| | | "id": "cd9da0a4-5c2d-4f1b-9c51-403b32f1ad51", |
| | | "data": { |
| | | "codeContent": "常用组件3", |
| | | "root": false, |
| | | "isLogic": false, |
| | | "logicBool": false, |
| | | "searchLogicId": 1, |
| | | "searchLogicBool": true, |
| | | "searchIndex": 0 |
| | | }, |
| | | "zIndex": 8, |
| | | "ports": { |
| | | "groups": { |
| | | "top": { |
| | | "position": "top", |
| | | "attrs": { |
| | | "circle": { |
| | | "r": 5, |
| | | "magnet": true, |
| | | "stroke": "#5F95FF", |
| | | "strokeWidth": 1, |
| | | "fill": "#fff", |
| | | "style": { |
| | | "visibility": "hidden" |
| | | } |
| | | } |
| | | } |
| | | }, |
| | | "bottom": { |
| | | "position": "bottom", |
| | | "attrs": { |
| | | "circle": { |
| | | "r": 5, |
| | | "magnet": true, |
| | | "stroke": "#5F95FF", |
| | | "strokeWidth": 1, |
| | | "fill": "#fff", |
| | | "style": { |
| | | "visibility": "hidden" |
| | | } |
| | | } |
| | | } |
| | | }, |
| | | "left": { |
| | | "position": "left", |
| | | "attrs": { |
| | | "circle": { |
| | | "r": 5, |
| | | "magnet": true, |
| | | "stroke": "#5F95FF", |
| | | "strokeWidth": 1, |
| | | "fill": "#fff", |
| | | "style": { |
| | | "visibility": "hidden" |
| | | } |
| | | } |
| | | } |
| | | }, |
| | | "right": { |
| | | "position": "right", |
| | | "attrs": { |
| | | "circle": { |
| | | "r": 5, |
| | | "magnet": true, |
| | | "stroke": "#5F95FF", |
| | | "strokeWidth": 1, |
| | | "fill": "#fff", |
| | | "style": { |
| | | "visibility": "hidden" |
| | | } |
| | | } |
| | | } |
| | | } |
| | | }, |
| | | "items": [ |
| | | { |
| | | "id": "port1", |
| | | "group": "top" |
| | | }, |
| | | { |
| | | "id": "port2", |
| | | "group": "bottom" |
| | | }, |
| | | { |
| | | "id": "port3", |
| | | "group": "left" |
| | | }, |
| | | { |
| | | "id": "port4", |
| | | "group": "right" |
| | | } |
| | | ] |
| | | } |
| | | }, |
| | | { |
| | | "position": { |
| | | "x": 472, |
| | | "y": 640 |
| | | }, |
| | | "size": { |
| | | "width": 80, |
| | | "height": 40 |
| | | }, |
| | | "attrs": { |
| | | "text": { |
| | | "text": "常用组件4" |
| | | }, |
| | | "body": { |
| | | "fill": "#efefef", |
| | | "stroke": "#4d4d4d", |
| | | "strokeWidth": 2, |
| | | "refD": "M 50 0 L 100 50 L 50 100 L 0 50 Z" |
| | | } |
| | | }, |
| | | "visible": true, |
| | | "shape": "rect", |
| | | "id": "06d450fc-474e-4b23-b40d-c89fde446b28", |
| | | "data": { |
| | | "codeContent": "常用组件4", |
| | | "root": false, |
| | | "isLogic": false, |
| | | "logicBool": false, |
| | | "searchLogicId": 1, |
| | | "searchLogicBool": true, |
| | | "searchIndex": 0 |
| | | }, |
| | | "zIndex": 9, |
| | | "ports": { |
| | | "groups": { |
| | | "top": { |
| | | "position": "top", |
| | | "attrs": { |
| | | "circle": { |
| | | "r": 5, |
| | | "magnet": true, |
| | | "stroke": "#5F95FF", |
| | | "strokeWidth": 1, |
| | | "fill": "#fff", |
| | | "style": { |
| | | "visibility": "hidden" |
| | | } |
| | | } |
| | | } |
| | | }, |
| | | "bottom": { |
| | | "position": "bottom", |
| | | "attrs": { |
| | | "circle": { |
| | | "r": 5, |
| | | "magnet": true, |
| | | "stroke": "#5F95FF", |
| | | "strokeWidth": 1, |
| | | "fill": "#fff", |
| | | "style": { |
| | | "visibility": "hidden" |
| | | } |
| | | } |
| | | } |
| | | }, |
| | | "left": { |
| | | "position": "left", |
| | | "attrs": { |
| | | "circle": { |
| | | "r": 5, |
| | | "magnet": true, |
| | | "stroke": "#5F95FF", |
| | | "strokeWidth": 1, |
| | | "fill": "#fff", |
| | | "style": { |
| | | "visibility": "hidden" |
| | | } |
| | | } |
| | | } |
| | | }, |
| | | "right": { |
| | | "position": "right", |
| | | "attrs": { |
| | | "circle": { |
| | | "r": 5, |
| | | "magnet": true, |
| | | "stroke": "#5F95FF", |
| | | "strokeWidth": 1, |
| | | "fill": "#fff", |
| | | "style": { |
| | | "visibility": "hidden" |
| | | } |
| | | } |
| | | } |
| | | } |
| | | }, |
| | | "items": [ |
| | | { |
| | | "id": "port1", |
| | | "group": "top" |
| | | }, |
| | | { |
| | | "id": "port2", |
| | | "group": "bottom" |
| | | }, |
| | | { |
| | | "id": "port3", |
| | | "group": "left" |
| | | }, |
| | | { |
| | | "id": "port4", |
| | | "group": "right" |
| | | } |
| | | ] |
| | | } |
| | | } |
| | | ] |
| | | }) |
| | | |
| | | |
| | | props.initHandle();//通知父组件初始化完成 |
| | | return graph; |
| | |
| | | import { GraphDrawerNode } from "./Drawer/GraphDrawerNode"; |
| | | import { GraphDrawerEdge } from "./Drawer/GraphDrawerEdge"; |
| | | import { GraphDrawerCrn } from "./Drawer/GraphDrawerCrn"; |
| | | import { GraphDrawerDevp } from "./Drawer/GraphDrawerDevp"; |
| | | import './css/GrapDrawer.less'; |
| | | |
| | | export const GraphDrawer = ({ graphRef, isReady }) => { |
| | |
| | | <GraphDrawerNode graphRef={graphRef} isReady={isReady} /> |
| | | <GraphDrawerEdge graphRef={graphRef} isReady={isReady} /> |
| | | <GraphDrawerCrn graphRef={graphRef} isReady={isReady} /> |
| | | <GraphDrawerDevp graphRef={graphRef} isReady={isReady} /> |
| | | </> |
| | | ); |
| | | } |
| | |
| | | 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"; |
| | | |
| | | 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); |
| | |
| | | |
| | | 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 = () => { |
| | |
| | | return; |
| | | } |
| | | |
| | | let id = null; |
| | | if (currentFlow != null) { |
| | | id = currentFlow.id; |
| | | } |
| | | |
| | | let result = sortNodes(rootNode, nodes, graph); |
| | | 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); |
| | | }) |
| | | } |
| | | } |
| | |
| | | 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}> |
| | |
| | | {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> |
| | | </> |
| | | ); |
| | | } |
| | |
| | | .container { |
| | | width: 200px; |
| | | width: 240px; |
| | | display: flex; |
| | | justify-content: space-around; |
| | | margin-top: 10px; |
| | | flex-wrap: wrap; |
| | | } |
| | | |
| | | .container .containerButton { |
| | | width: 100px; |
| | | margin-top: 10px; |
| | | } |
| | | |
| | | .flowList { |
| | | padding: 10px; |
| | | } |
New file |
| | |
| | | import React, { useState, useRef, useEffect } from 'react'; |
| | | import { |
| | | ProForm, |
| | | ProFormDigit, |
| | | ProFormText, |
| | | ProFormSelect, |
| | | ProFormDateTimePicker |
| | | } from '@ant-design/pro-components'; |
| | | import { Form, Modal } from 'antd'; |
| | | import { FormattedMessage, useIntl } from '@umijs/max'; |
| | | import moment from 'moment'; |
| | | import Http from '@/utils/http'; |
| | | |
| | | const Edit = (props) => { |
| | | const intl = useIntl(); |
| | | const [form] = Form.useForm(); |
| | | const { } = props; |
| | | |
| | | useEffect(() => { |
| | | form.resetFields(); |
| | | form.setFieldsValue({ |
| | | ...props.values |
| | | }) |
| | | }, [form, props]) |
| | | |
| | | const handleCancel = () => { |
| | | props.onCancel(); |
| | | }; |
| | | |
| | | const handleOk = () => { |
| | | form.submit(); |
| | | } |
| | | |
| | | const handleFinish = async (values) => { |
| | | props.onSubmit({ ...values }); |
| | | } |
| | | |
| | | return ( |
| | | <> |
| | | <Modal |
| | | title={ |
| | | Object.keys(props.values).length > 0 |
| | | ? intl.formatMessage({ id: 'page.edit', defaultMessage: '编辑' }) |
| | | : intl.formatMessage({ id: 'page.add', defaultMessage: '添加' }) |
| | | } |
| | | width={640} |
| | | forceRender |
| | | destroyOnClose |
| | | open={props.open} |
| | | onCancel={handleCancel} |
| | | onOk={handleOk} |
| | | > |
| | | <ProForm |
| | | form={form} |
| | | submitter={false} |
| | | onFinish={handleFinish} |
| | | layout="horizontal" |
| | | grid={true} |
| | | > |
| | | <ProFormDigit |
| | | name="id" |
| | | disabled |
| | | hidden={true} |
| | | /> |
| | | <ProForm.Group> |
| | | <ProFormText |
| | | name="originData" |
| | | label="原始数据" |
| | | colProps={{ md: 12, xl: 12 }} |
| | | /> |
| | | <ProFormText |
| | | name="processData" |
| | | label="处理后的数据" |
| | | colProps={{ md: 12, xl: 12 }} |
| | | /> |
| | | </ProForm.Group> |
| | | <ProForm.Group> |
| | | <ProFormDateTimePicker |
| | | name="createTime" |
| | | label="" |
| | | colProps={{ md: 12, xl: 12 }} |
| | | transform={(value) => moment(value).toISOString()} |
| | | /> |
| | | <ProFormDateTimePicker |
| | | name="updateTime" |
| | | label="" |
| | | colProps={{ md: 12, xl: 12 }} |
| | | transform={(value) => moment(value).toISOString()} |
| | | /> |
| | | </ProForm.Group> |
| | | <ProForm.Group> |
| | | <ProFormSelect |
| | | name="status" |
| | | label="是否启用" |
| | | colProps={{ md: 12, xl: 12 }} |
| | | options={[ |
| | | { label: '否', value: 0 }, |
| | | { label: '是', value: 1 }, |
| | | ]} |
| | | /> |
| | | </ProForm.Group> |
| | | |
| | | </ProForm> |
| | | </Modal> |
| | | </> |
| | | ) |
| | | } |
| | | |
| | | export default Edit; |
New file |
| | |
| | | |
| | | import React, { useState, useRef, useEffect } from 'react'; |
| | | import { Button, message, Modal, Tag } from 'antd'; |
| | | import { |
| | | FooterToolbar, |
| | | PageContainer, |
| | | ProTable, |
| | | LightFilter, |
| | | } from '@ant-design/pro-components'; |
| | | import { FormattedMessage, useIntl } from '@umijs/max'; |
| | | import { PlusOutlined, ExportOutlined } from '@ant-design/icons'; |
| | | import Http from '@/utils/http'; |
| | | import Edit from './components/edit' |
| | | import { TextFilter, SelectFilter, DatetimeRangeFilter, LinkFilter } from '@/components/TableSearch' |
| | | import { statusMap } from '@/utils/enum-util' |
| | | import { repairBug } from '@/utils/common-util'; |
| | | |
| | | const TABLE_KEY = 'pro-table-flowGraph'; |
| | | |
| | | const handleSave = async (val, intl) => { |
| | | const hide = message.loading(intl.formatMessage({ id: 'page.adding', defaultMessage: '正在添加' })); |
| | | try { |
| | | const resp = await Http.doPost('api/flowGraph/save', val); |
| | | if (resp.code === 200) { |
| | | message.success(intl.formatMessage({ id: 'page.add.success', defaultMessage: '添加成功' })); |
| | | return true; |
| | | } else { |
| | | message.error(resp.msg); |
| | | return false; |
| | | } |
| | | } catch (error) { |
| | | message.error(intl.formatMessage({ id: 'page.add.fail', defaultMessage: '添加失败请重试!' })); |
| | | return false; |
| | | } finally { |
| | | hide(); |
| | | } |
| | | }; |
| | | |
| | | const handleUpdate = async (val, intl) => { |
| | | const hide = message.loading(intl.formatMessage({ id: 'page.updating', defaultMessage: '正在更新' })); |
| | | try { |
| | | const resp = await Http.doPost('api/flowGraph/update', val); |
| | | if (resp.code === 200) { |
| | | message.success(intl.formatMessage({ id: 'page.update.success', defaultMessage: '更新成功' })); |
| | | return true; |
| | | } else { |
| | | message.error(resp.msg); |
| | | return false; |
| | | } |
| | | } catch (error) { |
| | | message.error(intl.formatMessage({ id: 'page.update.fail', defaultMessage: '更新失败请重试!' })); |
| | | return false; |
| | | } finally { |
| | | hide(); |
| | | } |
| | | }; |
| | | |
| | | const handleRemove = async (rows, intl) => { |
| | | if (!rows) return true; |
| | | const hide = message.loading(intl.formatMessage({ id: 'page.deleting', defaultMessage: '正在删除' })); |
| | | try { |
| | | const resp = await Http.doPost('api/flowGraph/remove/' + rows.map((row) => row.id).join(',')); |
| | | if (resp.code === 200) { |
| | | message.success(intl.formatMessage({ id: 'page.delete.success', defaultMessage: '删除成功' })); |
| | | return true; |
| | | } else { |
| | | message.error(resp.msg); |
| | | return false; |
| | | } |
| | | } catch (error) { |
| | | message.error(intl.formatMessage({ id: 'page.delete.fail', defaultMessage: '删除失败,请重试!' })); |
| | | return false; |
| | | } finally { |
| | | hide(); |
| | | } |
| | | }; |
| | | |
| | | const handleExport = async (intl) => { |
| | | const hide = message.loading(intl.formatMessage({ id: 'page.exporting', defaultMessage: '正在导出' })); |
| | | try { |
| | | const resp = await Http.doPostBlob('api/flowGraph/export'); |
| | | const blob = new Blob([resp], { type: 'application/vnd.ms-excel' }); |
| | | window.location.href = window.URL.createObjectURL(blob); |
| | | message.success(intl.formatMessage({ id: 'page.export.success', defaultMessage: '导出成功' })); |
| | | return true; |
| | | } catch (error) { |
| | | message.error(intl.formatMessage({ id: 'page.export.fail', defaultMessage: '导出失败,请重试' })); |
| | | return false; |
| | | } finally { |
| | | hide(); |
| | | } |
| | | }; |
| | | |
| | | |
| | | const Main = () => { |
| | | const intl = useIntl(); |
| | | const formTableRef = useRef(); |
| | | const actionRef = useRef(); |
| | | const [selectedRows, setSelectedRows] = useState([]); |
| | | const [modalVisible, setModalVisible] = useState(false); |
| | | const [currentRow, setCurrentRow] = useState(); |
| | | const [searchParam, setSearchParam] = useState({}); |
| | | |
| | | useEffect(() => { |
| | | |
| | | }, []); |
| | | |
| | | const columns = [ |
| | | { |
| | | title: intl.formatMessage({ |
| | | id: 'page.table.no', |
| | | defaultMessage: 'No' |
| | | }), |
| | | dataIndex: 'index', |
| | | valueType: 'indexBorder', |
| | | width: 48, |
| | | }, |
| | | { |
| | | title: '原始数据', |
| | | dataIndex: 'originData', |
| | | valueType: 'text', |
| | | hidden: false, |
| | | width: 140, |
| | | filterDropdown: (props) => <TextFilter |
| | | name='originData' |
| | | {...props} |
| | | actionRef={actionRef} |
| | | setSearchParam={setSearchParam} |
| | | />, |
| | | }, |
| | | { |
| | | title: '处理后的数据', |
| | | dataIndex: 'processData', |
| | | valueType: 'text', |
| | | hidden: false, |
| | | width: 140, |
| | | filterDropdown: (props) => <TextFilter |
| | | name='processData' |
| | | {...props} |
| | | actionRef={actionRef} |
| | | setSearchParam={setSearchParam} |
| | | />, |
| | | }, |
| | | { |
| | | title: '', |
| | | dataIndex: 'createTime$', |
| | | valueType: 'text', |
| | | hidden: false, |
| | | width: 140, |
| | | filterDropdown: (props) => <DatetimeRangeFilter |
| | | name='createTime' |
| | | {...props} |
| | | actionRef={actionRef} |
| | | setSearchParam={setSearchParam} |
| | | />, |
| | | }, |
| | | { |
| | | title: '', |
| | | dataIndex: 'updateTime$', |
| | | valueType: 'text', |
| | | hidden: false, |
| | | width: 140, |
| | | filterDropdown: (props) => <DatetimeRangeFilter |
| | | name='updateTime' |
| | | {...props} |
| | | actionRef={actionRef} |
| | | setSearchParam={setSearchParam} |
| | | />, |
| | | }, |
| | | { |
| | | title: '是否启用', |
| | | dataIndex: 'status$', |
| | | valueType: 'text', |
| | | hidden: false, |
| | | width: 140, |
| | | filterDropdown: (props) => <SelectFilter |
| | | name='status' |
| | | {...props} |
| | | actionRef={actionRef} |
| | | setSearchParam={setSearchParam} |
| | | data={[ |
| | | { label: '否', value: 0 }, |
| | | { label: '是', value: 1 }, |
| | | ]} |
| | | />, |
| | | }, |
| | | |
| | | { |
| | | title: '操作', |
| | | dataIndex: 'option', |
| | | width: 140, |
| | | valueType: 'option', |
| | | render: (_, record) => [ |
| | | <Button |
| | | type="link" |
| | | key="edit" |
| | | onClick={() => { |
| | | setModalVisible(true); |
| | | setCurrentRow(record); |
| | | }} |
| | | > |
| | | <FormattedMessage id='page.edit' defaultMessage='编辑' /> |
| | | </Button>, |
| | | <Button |
| | | type="link" |
| | | danger |
| | | key="batchRemove" |
| | | onClick={async () => { |
| | | Modal.confirm({ |
| | | title: intl.formatMessage({ id: 'page.delete', defaultMessage: '删除' }), |
| | | content: intl.formatMessage({ id: 'page.delete.confirm', defaultMessage: '确定删除该项吗?' }), |
| | | onOk: async () => { |
| | | const success = await handleRemove([record], intl); |
| | | if (success) { |
| | | if (actionRef.current) { |
| | | actionRef.current.reload(); |
| | | } |
| | | } |
| | | }, |
| | | }); |
| | | }} |
| | | > |
| | | <FormattedMessage id='page.delete' defaultMessage='删除' /> |
| | | </Button>, |
| | | ], |
| | | }, |
| | | ]; |
| | | |
| | | return ( |
| | | <PageContainer |
| | | header={{ |
| | | breadcrumb: {}, |
| | | }} |
| | | > |
| | | <div style={{ width: '100%', float: 'right' }}> |
| | | <ProTable |
| | | key="flowGraph" |
| | | rowKey="id" |
| | | actionRef={actionRef} |
| | | formRef={formTableRef} |
| | | columns={columns} |
| | | cardBordered |
| | | scroll={{ x: 1300 }} |
| | | dateFormatter="string" |
| | | pagination={{ pageSize: 16 }} |
| | | search={false} |
| | | toolbar={{ |
| | | search: { |
| | | onSearch: (value) => { |
| | | setSearchParam(prevState => ({ |
| | | ...prevState, |
| | | condition: value |
| | | })); |
| | | actionRef.current?.reload(); |
| | | }, |
| | | }, |
| | | filter: ( |
| | | <LightFilter |
| | | onValuesChange={(val) => { |
| | | }} |
| | | > |
| | | </LightFilter> |
| | | ), |
| | | actions: [ |
| | | <Button |
| | | type="primary" |
| | | key="save" |
| | | onClick={async () => { |
| | | setModalVisible(true) |
| | | }} |
| | | > |
| | | <PlusOutlined /> |
| | | <FormattedMessage id='page.add' defaultMessage='添加' /> |
| | | </Button>, |
| | | <Button |
| | | key="export" |
| | | onClick={async () => { |
| | | handleExport(intl); |
| | | }} |
| | | > |
| | | <ExportOutlined /> |
| | | <FormattedMessage id='page.export' defaultMessage='导出' /> |
| | | </Button>, |
| | | ], |
| | | }} |
| | | request={(params, sorter, filter) => |
| | | Http.doPostPromise('/api/flowGraph/page', { ...params, ...searchParam }, (res) => { |
| | | return { |
| | | data: res.data.records, |
| | | total: res.data.total, |
| | | success: true, |
| | | } |
| | | }) |
| | | } |
| | | rowSelection={{ |
| | | onChange: (ids, rows) => { |
| | | setSelectedRows(rows); |
| | | } |
| | | }} |
| | | columnsState={{ |
| | | persistenceKey: TABLE_KEY, |
| | | persistenceType: 'localStorage', |
| | | defaultValue: { |
| | | // memo: { show: repairBug(TABLE_KEY, 'memo', false) }, |
| | | option: { fixed: 'right', disable: true }, |
| | | }, |
| | | onChange(value) { |
| | | }, |
| | | }} |
| | | /> |
| | | </div> |
| | | |
| | | {selectedRows?.length > 0 && ( |
| | | <FooterToolbar |
| | | extra={ |
| | | <div> |
| | | <a style={{ fontWeight: 600 }}>{selectedRows.length}</a> |
| | | <FormattedMessage id='page.selected' defaultMessage=' 项已选择' /> |
| | | </div> |
| | | } |
| | | > |
| | | <Button |
| | | key="remove" |
| | | danger |
| | | onClick={async () => { |
| | | Modal.confirm({ |
| | | title: intl.formatMessage({ id: 'page.delete', defaultMessage: '删除' }), |
| | | content: intl.formatMessage({ id: 'page.delete.confirm', defaultMessage: '确定删除该项吗?' }), |
| | | onOk: async () => { |
| | | const success = await handleRemove(selectedRows, intl); |
| | | if (success) { |
| | | setSelectedRows([]); |
| | | actionRef.current?.reloadAndRest?.(); |
| | | } |
| | | }, |
| | | }); |
| | | }} |
| | | > |
| | | <FormattedMessage id='page.delete.batch' defaultMessage='批量删除' /> |
| | | </Button> |
| | | </FooterToolbar> |
| | | )} |
| | | |
| | | <Edit |
| | | open={modalVisible} |
| | | values={currentRow || {}} |
| | | onCancel={ |
| | | () => { |
| | | setModalVisible(false); |
| | | setCurrentRow(undefined); |
| | | } |
| | | } |
| | | onSubmit={async (values) => { |
| | | let ok = false; |
| | | if (values.id) { |
| | | ok = await handleUpdate({ ...values }, intl) |
| | | } else { |
| | | ok = await handleSave({ ...values }, intl) |
| | | } |
| | | if (ok) { |
| | | setModalVisible(false); |
| | | setCurrentRow(undefined); |
| | | if (actionRef.current) { |
| | | actionRef.current.reload(); |
| | | } |
| | | } |
| | | }} |
| | | /> |
| | | </PageContainer> |
| | | ); |
| | | }; |
| | | |
| | | export default Main; |
| | |
| | | import React from 'react'; |
| | | |
| | | export function exportDataToServer(data) { |
| | | return request('/flow/analysisExportData', { |
| | | return request('/api/flow/analysisExportData', { |
| | | data: data, |
| | | method: 'POST' |
| | | }); |
| | | } |
| | | |
| | | export function getFlowList() { |
| | | return request('/api/flowGraph/list', { |
| | | method: 'POST' |
| | | }) |
| | | } |
| | | |
| | | export function deleteFlowById(id) { |
| | | return request('/api/flowGraph/remove/' + [id], { |
| | | method: 'POST' |
| | | }) |
| | | } |
| | | |
| | | export function updateFlowStatus(id, status) { |
| | | return request('/api/flowGraph/updateFlowStatus', { |
| | | method: 'POST', |
| | | data: { |
| | | id: id, |
| | | status: status |
| | | } |
| | | }) |
| | | } |
| | | |
| | | export function mockRun(id) {//模拟运行 |
| | | return request('/api/flow/mockRun', { |
| | | method: 'POST', |
| | | data: { |
| | | id: id |
| | | } |
| | | }) |
| | | } |
| | |
| | | |
| | | export async function getRoutersInfo() { |
| | | return getRouters().then((res) => { |
| | | console.log(res); |
| | | if (res.code === 200) { |
| | | // return res.data; |
| | | const routersInfo = convertCompatRouters(res.data); |