From 20950da4dc666d300e954db4f7b76ac8713c1ee8 Mon Sep 17 00:00:00 2001
From: zhangshigui <zhangshigui@wezhuiyi.com>
Date: Mon, 9 Sep 2024 11:33:42 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=88=9B=E5=BB=BA=E4=B8=AD=E9=97=B4?=
 =?UTF-8?q?=E8=8A=82=E7=82=B9=E2=80=94=E6=99=AE=E9=80=9A=E8=8A=82=E7=82=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/process/constants/data.ts  | 16 ++++++++--
 src/views/process/constants/index.ts | 11 +++++--
 src/views/process/shapes/index.ts    | 27 +++++++++++++----
 src/views/process/shapes/node.ts     | 45 +++++++++++++++++++++++++---
 4 files changed, 85 insertions(+), 14 deletions(-)

diff --git a/src/views/process/constants/data.ts b/src/views/process/constants/data.ts
index 4ff68aa..c04681e 100644
--- a/src/views/process/constants/data.ts
+++ b/src/views/process/constants/data.ts
@@ -2,7 +2,7 @@
  * @Author: zhangshigui
  * @Date: 2024-09-04 00:55:48
  * @LastEditors: zhangshigui
- * @LastEditTime: 2024-09-06 16:49:46
+ * @LastEditTime: 2024-09-09 11:21:12
  * @Description: 节点数据
  *
  */
@@ -17,12 +17,22 @@ export interface NodeRes {
 export const data = [
   {
     id: '1',
-    nodeName: '基本信息',
+    nodeName: '基本流程',
     nodeType: 0,
     skipNodeId: '2',
     position: {
       x: 50,
-      y: 50
+      y: 300
+    }
+  },
+  {
+    id: '2',
+    nodeName: '确认用户信息',
+    nodeType: 1,
+    skipNodeId: '3',
+    position: {
+      x: 300,
+      y: 300
     }
   }
 ];
diff --git a/src/views/process/constants/index.ts b/src/views/process/constants/index.ts
index 803b3d0..e251343 100644
--- a/src/views/process/constants/index.ts
+++ b/src/views/process/constants/index.ts
@@ -2,7 +2,7 @@
  * @Author: zhangshigui
  * @Date: 2024-08-30 17:30:13
  * @LastEditors: zhangshigui
- * @LastEditTime: 2024-09-06 16:20:25
+ * @LastEditTime: 2024-09-06 18:32:26
  * @Description: 基础配置信息
  *
  */
@@ -21,7 +21,14 @@ export const NODE_TYPE = {
 export const NODE_SIZE = {
   // 开始节点宽高
   startNodeWidth: 128,
-  startNodeHeight: 64
+  startNodeHeight: 64,
+
+  // 中间节点宽高
+  middleNodeWidth: 214,
+  middleNodeHeight: 64,
+  // 中间节点中子节点宽高
+  middleChildNodeWidth: 180,
+  middleChildNodeHeight: 32
 };
 
 // 节点Icon图片配置
diff --git a/src/views/process/shapes/index.ts b/src/views/process/shapes/index.ts
index c073fe3..4c9e883 100644
--- a/src/views/process/shapes/index.ts
+++ b/src/views/process/shapes/index.ts
@@ -2,7 +2,7 @@
  * @Author: zhangshigui
  * @Date: 2024-08-30 17:32:33
  * @LastEditors: zhangshigui
- * @LastEditTime: 2024-09-06 11:13:30
+ * @LastEditTime: 2024-09-09 10:57:01
  * @Description: 入口文件
  *
  */
@@ -17,9 +17,11 @@ import Node from './node';
 
 export default class GraphMain {
   graph: Graph | null; // 画布实例
+  node; // class Node 实例
 
   constructor() {
     this.graph = null;
+    this.node = null;
   }
 
   /**
@@ -71,25 +73,40 @@ export default class GraphMain {
    * 初始化节点
    */
   initGraphNode(list: NodeRes[]) {
-    const node = new Node(this);
+    this.node = new Node(this);
     list.forEach(item => {
       switch (item.nodeType) {
         // 开始节点
         case NODE_TYPE.START_NODE:
-          node.createStartNode(item);
+          this.node.createStartNode(item);
           break;
         // 中间节点
         case NODE_TYPE.MIDDLE_NODE:
-          node.createMiddleNode(item);
+          this.middleNodeType(item);
           break;
         // 结束节点
         case NODE_TYPE.END_NODE:
-          node.createEndNode(item);
+          this.node.createEndNode(item);
           break;
       }
     });
   }
 
+  /**
+   * 中间节点类型判断
+   *  1、普通节点
+   *  2、群组节点
+   */
+  middleNodeType(data) {
+    if (data.children?.length) {
+      // 群组节点
+      this.node.createMiddleGroupNode(data);
+    } else {
+      // 普通节点
+      this.node.createMiddleNormalNode(data);
+    }
+  }
+
   /**
    * 初始化边
    */
diff --git a/src/views/process/shapes/node.ts b/src/views/process/shapes/node.ts
index 02b7c08..d39ea92 100644
--- a/src/views/process/shapes/node.ts
+++ b/src/views/process/shapes/node.ts
@@ -2,7 +2,7 @@
  * @Author: zhangshigui
  * @Date: 2024-09-04 00:30:45
  * @LastEditors: zhangshigui
- * @LastEditTime: 2024-09-06 16:54:45
+ * @LastEditTime: 2024-09-09 11:28:44
  * @Description: 节点操作
  *
  */
@@ -82,11 +82,48 @@ export default class Node {
   }
 
   /**
-   * 创建中间节点
+   * 创建中间节点👉普通节点
    */
-  createMiddleNode(data) {
-    console.log(data, 'xxxxxxxxxx');
+  createMiddleNormalNode(data) {
+    const { middleNodeWidth, middleNodeHeight } = NODE_SIZE;
+    const { id, position, nodeType } = data;
+    // 生成画布节点信息
+    const nodeInfo = {
+      id,
+      nodeType,
+      width: middleNodeWidth,
+      height: middleNodeHeight,
+      x: position.x ?? 0,
+      y: position.y ?? 0,
+      attrs: {
+        body: {
+          stroke: '#8f8f8f',
+          strokeWidth: 1,
+          fill: '#f6f8fa',
+          rx: 4,
+          ry: 4,
+          filter: FILTER.dropShadow
+        },
+        label: {
+          fontSize: 16,
+          fill: '#444',
+          // 水平
+          textAnchor: 'middle',
+          // 垂直
+          textVerticalAnchor: 'middle',
+          text: data.nodeName,
+          fontWeight: 600
+        }
+      }
+    };
+
+    // 将节点添加到画布上
+    this.graphInstance.graph.addNode(nodeInfo);
   }
+  /**
+   * 创建中间节点👉群组节点
+   */
+  createMiddleGroupNode() {}
 
   /**
    * 创建结束节点