diff --git a/src/config/dev.ts b/src/config/dev.ts index ba3c6bd92313f639639c2d0f494e2425f20117ef..5def89a53972472542ee3221740405d7df25e375 100644 --- a/src/config/dev.ts +++ b/src/config/dev.ts @@ -1,3 +1,3 @@ export default { - imgHost: "https://xct.cdhncy.cn/file", + imgHost: "/assets", }; diff --git a/src/pages/Setting/Flow/index.tsx b/src/pages/Setting/Flow/index.tsx index c311a8eba4a7d4fb880af6eb358e8115e6664520..3893229f55983ab313b526726e9a9e1aee5bf591 100644 --- a/src/pages/Setting/Flow/index.tsx +++ b/src/pages/Setting/Flow/index.tsx @@ -92,21 +92,6 @@ const Flow = () => { nodes: [], edges: [], }); - - useEffect(() => { - if (flowData && flowData.length > 0) { - originalXNodesData.current = flowData; - const startEvent = flowData.find((v: any) => v.id == "startEvent"); - - setActionNode(startEvent?.data); - renderGraph(); - /** 居中内容 */ - - graphRef.current?.centerPoint(150, 200); - } - }, [flowData]); - - const { mainBodyTypes } = useGlobalData(); /** 原始x6Data */ const originalXNodesData = useRef([ { @@ -130,6 +115,23 @@ const Flow = () => { }, ]); + useEffect(() => { + if (flowData && flowData.length > 0) { + originalXNodesData.current = flowData; + const startEvent = flowData.find((v: any) => v.id == "startEvent"); + + setActionNode(startEvent?.data); + renderGraph(); + /** 居中内容 */ + + graphRef.current?.centerPoint(150, 200); + } + }, [flowData]); + + const { mainBodyTypes } = useGlobalData(); + + console.log("originalXNodesData", originalXNodesData.current); + const renderGraph = () => { const newX6Data = buildLineX6data(originalXNodesData.current); setX6Data(newX6Data); @@ -227,13 +229,8 @@ const Flow = () => { pid: source.id, }, }; - cloneX6Data = cloneX6Data.map((v) => { - if (v.id === target.id) { - v.data.pid = v.data.pid?.replace(source.id as string, newNode.id); - } - return v; - }); - /** 第二步 增加一条边to endNode 和一个审批节点 */ + + /** 第二步 增加一条边to 下一节点 和一个审批节点 */ const node1 = getDefaultNodeByType(3); const examineNode = { id: node1.elementId, @@ -245,10 +242,12 @@ const Flow = () => { conditionId: newNode.id, }, }; - cloneX6Data = cloneX6Data.map((v) => { - if (v.id === "endEvent") { - v.data.pid = v.data.pid + "," + examineNode.id; + if (v.id === target.id) { + v.data.pid = v.data.pid?.replace( + source.id as string, + `${newNode.id},${examineNode.id}` + ); } return v; }); @@ -487,10 +486,10 @@ const Flow = () => { }; /** @description 删除节点 */ const onDelete = (nodeId: string) => { + console.log("onDelete", nodeId); let cloneX6Data = cloneDeep(originalXNodesData.current); const nodeMap = NodeMap(cloneX6Data); - const node = nodeMap.nodeMap.get(nodeId); const { pid, nodeType } = node.data; /** 如果删除的节点是选中节点，则清空选中节点 */ @@ -498,7 +497,7 @@ const Flow = () => { setActionNode(undefined); } - const deleteById = (id: string, cur = true) => { + const deleteById = (id: string) => { if (id === "endEvent") { return; } @@ -508,38 +507,45 @@ const Flow = () => { for (let childNode of childNodes) { let child = cloneX6Data.find((v) => v.id === childNode.id); child!.data.pid = replacePids(child!.data.pid, id, delNodePid); - if (!cur && (nodeMap.childMap.get(childNode.id)?.length ?? 0) > 0) { - deleteById(childNode.id, false); - } } }; - // debugger; + /** 不考虑替换id,彻底的链式删除 */ + const linksDelete = (id: string) => { + if (id === "endEvent") { + return; + } + cloneX6Data = cloneX6Data.filter((v) => v.id !== id); + const childNodes = nodeMap.childMap.get(id) ?? []; + for (let childNode of childNodes) { + let child = cloneX6Data.find((v) => v.id === childNode.id); + child!.data.pid = delPid(child!.data.pid, id); + linksDelete(childNode.id); + } + }; + /** 删除审批节点 */ if (nodeType === 2 || nodeType === 3) { deleteById(nodeId); } + /** 删除条件 */ if (nodeType === 4) { const childNodes = nodeMap.childMap.get(pid) ?? []; if (childNodes.length > 2) { - deleteById(nodeId, false); - const endNde = cloneX6Data.find((v) => v.id === "endEvent"); - endNde!.data.pid = delPid(endNde?.data.pid, pid); + linksDelete(nodeId); } else { - deleteById(pid, true); + // linksDelete(nodeId); + deleteById(pid); + for (let childNode of childNodes) { - if (childNode.id === nodeId) { - deleteById(nodeId, false); - } else { - deleteById(childNode.id); - const endNde = cloneX6Data.find((v) => v.id === "endEvent"); - endNde!.data.pid = delPid(endNde?.data.pid, pid); - } + deleteById(childNode.id); } + linksDelete(nodeId); } } /** 删除可选节点 */ if (nodeType === 5) { + /** 先删除本身节点 */ cloneX6Data = cloneX6Data.filter((v) => v.id !== nodeId); const childNodes = nodeMap.childMap.get(nodeId) ?? []; for (let childNode of childNodes) { @@ -547,7 +553,7 @@ const Flow = () => { child!.data.pid = replacePids(child!.data.pid, nodeId, pid); /** 链式删除条件节点 */ if (childNode.data.conditionId) { - deleteById(childNode.id, false); + linksDelete(childNode.id); } } } diff --git a/src/pages/Setting/Flow/nodes/condition.tsx b/src/pages/Setting/Flow/nodes/condition.tsx index 73c983f39234ac068e96aec2eaf059573762bd73..756462258821c0bba3195c36b662cd408b715802 100644 --- a/src/pages/Setting/Flow/nodes/condition.tsx +++ b/src/pages/Setting/Flow/nodes/condition.tsx @@ -20,7 +20,7 @@ const ConditionNode = ({ node }: { node: Node }) => { const { streetName, conditionType } = node.getData(); const { openSetting, actionNode, onDelete } = useX6ActionContext(); - console.log(actionNode, node.id); + /** 是否选中 */ const active = actionNode?.elementId === node.id; diff --git a/src/pages/Setting/Flow/nodes/gateway.tsx b/src/pages/Setting/Flow/nodes/gateway.tsx index 89c76a6901314523f500be0a0baf1470a50be152..5019a8d4ed453e26f41311d89324c261664aa7bb 100644 --- a/src/pages/Setting/Flow/nodes/gateway.tsx +++ b/src/pages/Setting/Flow/nodes/gateway.tsx @@ -2,6 +2,7 @@ import { Button, Popover } from "antd"; import plus from "@/assets/images/setting/plus.png"; import styles from "./index.module.css"; import { Edge, Node } from "@antv/x6"; +import { useBoolean } from "ahooks"; interface GatewayNodeProps { edge: Edge; @@ -13,6 +14,8 @@ interface GatewayNodeProps { /** 网管节点 */ const GatewayNode = (props: GatewayNodeProps) => { const { edge, addElement } = props; + const [open, { setFalse, setTrue }] = useBoolean(false); + const edgeData = edge?.getData<{ target: Node.Metadata; source: Node.Metadata; @@ -22,8 +25,14 @@ const GatewayNode = (props: GatewayNodeProps) => { +
{ + e.stopPropagation(); + setFalse(); + }} + > @@ -45,7 +54,7 @@ const GatewayNode = (props: GatewayNodeProps) => {
} > -
+
diff --git a/src/pages/Setting/Flow/setting/examineNodeSetting.tsx b/src/pages/Setting/Flow/setting/examineNodeSetting.tsx index 04bc18e837b3f0881d358b6b122cad9d52e63316..f21569e256083d7fd2f387863d0061e6e7303696 100644 --- a/src/pages/Setting/Flow/setting/examineNodeSetting.tsx +++ b/src/pages/Setting/Flow/setting/examineNodeSetting.tsx @@ -90,6 +90,11 @@ const ExamineNodeSetting = (props: ExamineNodeSettingProps) => { component: , key: "forwardAndReverseName", }, + { + label: "启用下一节点由当前审批人选择", + key: "enableSelectNextNodeUser", + componentType: "Checkbox", + }, { label: "审批内容", //@ts-ignore diff --git a/src/pages/Setting/Flow/setting/examineOptionalNodeSetting.tsx b/src/pages/Setting/Flow/setting/examineOptionalNodeSetting.tsx index eb74a54e700f5daaa09e705a791248c9565e7906..36fc832c3162928a0508e82b46409cb17ac1e309 100644 --- a/src/pages/Setting/Flow/setting/examineOptionalNodeSetting.tsx +++ b/src/pages/Setting/Flow/setting/examineOptionalNodeSetting.tsx @@ -104,6 +104,11 @@ const ExamineOptionalNodeSetting = (props: ExamineNodeSettingProps) => { component: , key: "forwardAndReverseName", }, + { + label: "启用下一节点由当前审批人选择", + key: "enableSelectNextNodeUser", + componentType: "Checkbox", + }, { label: "审批内容", //@ts-ignore diff --git a/src/pages/Setting/Flow/setting/transactNodeSetting.tsx b/src/pages/Setting/Flow/setting/transactNodeSetting.tsx index 48e8182b8783949fac4cba49d090e415e9798639..e7b9fa064963e51c41b51f5d21672c55aa70cbd7 100644 --- a/src/pages/Setting/Flow/setting/transactNodeSetting.tsx +++ b/src/pages/Setting/Flow/setting/transactNodeSetting.tsx @@ -37,6 +37,11 @@ const TransactNodeSetting = (props: TransactNodeSettingProps) => { placeholder: "请输入", }, }, + { + label: "启用下一节点由当前审批人选择", + key: "enableSelectNextNodeUser", + componentType: "Checkbox", + }, { label: "办理内容", diff --git a/src/pages/Setting/Flow/util.ts b/src/pages/Setting/Flow/util.ts index 10eaf465edb71d1cf6dd79e7fb0dc93800ea2cc1..2a2447b0b71c64eb5c34c84766c06e0cc331000b 100644 --- a/src/pages/Setting/Flow/util.ts +++ b/src/pages/Setting/Flow/util.ts @@ -220,13 +220,11 @@ export function buildLineX6data(nodes: Node.Metadata[]): { node.y = level * 200; // console.log(node); // 获取子节点，并计算它们的总宽度 - const children = childMap.get(node.id) || []; + let children = childMap.get(node.id) || []; if (children.length === 0) { return; } const nodeW = nodeWidthMapping[node.shape as keyof typeof nodeWidthMapping]; - // const childCount = children.length; - const totalWidth = children.reduce((pre, cur, index) => { const w = nodeWidthMapping[cur.shape as keyof typeof nodeWidthMapping]; return pre + w + (index > 0 ? 100 : 0); @@ -237,9 +235,15 @@ export function buildLineX6data(nodes: Node.Metadata[]): { maxLevel = level; } + /** 排序子节点，如果字节点中存在父节点是审批节点的情况,考虑children最多存在两个，永远将审批节点右置 */ + children = children.sort((a) => { + return a.data.conditionId ? 1 : -1; + }); + children.forEach((child, index) => { // 每个子节点的 x 值基于父节点的 x，并均匀排布 const w = nodeWidthMapping[child.shape as keyof typeof nodeWidthMapping]; + child.x = startX + index * (w + 100); updatePosition(child, level + 1, child.x); // 递归更新子节点的位置 }); @@ -252,6 +256,7 @@ export function buildLineX6data(nodes: Node.Metadata[]): { updatePosition(node, 0, node.x); // 从根节点开始递归更新位置 } }); + console.log(nodes); // debugger; const findEndNodes = () => { return nodes.find((v) => v.id === "endEvent"); @@ -418,11 +423,7 @@ export function replacePids(pid: string, oldP: string, newP: string) { "," ); } - if (!pids.includes(oldP)) { - return pid; - } - - return [...new Set(pids.map((pid) => (pid === oldP ? newP : pid)))].join(","); + return pid; } /** 新增节点 */ @@ -449,6 +450,7 @@ export function getDefaultNodeByType(type?: 1 | 2 | 3 | 4 | 5) { approverList: [], elementType: 2, icon: "", + enableSelectNextNodeUser: false, assigneeKey: "_approver_", approverType: 1, signType: 3, @@ -461,6 +463,7 @@ export function getDefaultNodeByType(type?: 1 | 2 | 3 | 4 | 5) { elementId: generateUUID(), elementName: "审批节点", elementAlias: "审批节点", + enableSelectNextNodeUser: false, approverType: 1, nodeType: 3, signType: 3, @@ -486,6 +489,7 @@ export function getDefaultNodeByType(type?: 1 | 2 | 3 | 4 | 5) { elementAlias: "可选审批节点", approverType: 1, nodeType: 5, + enableSelectNextNodeUser: false, signType: 3, icon: "", assigneeKey: "_approver_", diff --git a/src/pages/Setting/index.tsx b/src/pages/Setting/index.tsx index 600f819782d8c982f15bc7675dbc8a03f6c501c8..1f776574c23dc0efaf09e901f072d1680f006d27 100644 --- a/src/pages/Setting/index.tsx +++ b/src/pages/Setting/index.tsx @@ -48,8 +48,8 @@ const Setting = (props: SettingProp) => { const [formConfigList, setFormConfigList] = React.useState< BaseFormComponent[] >([]); - const [activeTabs, setActiveTabs] = useState(["1"]); - const [activeKey, setActiveKey] = useState("1"); + const [activeTabs, setActiveTabs] = useState(["3"]); + const [activeKey, setActiveKey] = useState("3"); const [baseInfo, setBaseInfo] = useState>(); /** 流程图数据 */ @@ -60,11 +60,11 @@ const Setting = (props: SettingProp) => { if (!visible) { /** 清空数据 */ if (mode === "add") { - setBaseInfo(undefined); - setFlowData([]); - setFormConfigList([]); - setActiveKey("1"); - setActiveTabs(["1"]); + // setBaseInfo(undefined); + // setFlowData([]); + // setFormConfigList([]); + // setActiveKey("1"); + // setActiveTabs(["1"]); } } }, [visible]); @@ -143,7 +143,7 @@ const Setting = (props: SettingProp) => { return ( path.replace(/^\/mainBody/, ""), }, + "/assets": { + target: "https://xct.cdhncy.cn/file", + changeOrigin: true, + rewrite: (path) => path.replace(/^\/assets/, ""), + }, }, }, });