lw-cdp-ui 1.1.57 → 1.1.59

package/dist/components/lwFlow/index.vue

@@ -31,6 +31,7 @@
 import LogicFlow from '@logicflow/core'
 import '@logicflow/core/dist/index.css';
 import { Menu, MiniMap } from "@logicflow/extension";
+import { dagre } from '@logicflow/layout';
 import '@logicflow/extension/lib/style/index.css';
 
 // 注册组件
@@ -82,6 +83,33 @@ export default {
         return {}
       }
     },
+    /**
+     * 节点数据 在没有完整modelValue 用以自动创建节点
+     */
+    nodes: {
+      type: Array,
+      default: () => {
+        return []
+      }
+    },
+    /**
+     * 节点配置初始化数据
+     */
+    nodeDatas: {
+      type: Object,
+      default: () => {
+        return nodeDatas
+      }
+    },
+    /**
+     * 节点配置
+     */
+    configNodesList: {
+      type: Object,
+      default: () => {
+        return configNodesList
+      }
+    },
     /**
      * 是否显示默认节点
      */
@@ -246,7 +274,7 @@ export default {
       this.logicFlow = new LogicFlow({
         container: this.$refs.container,
         // 注册组件
-        plugins: [Menu, MiniMap],
+        plugins: [Menu, MiniMap, dagre],
         // 不可编辑
         isSilentMode: this.isView,
         hoverOutline: !this.isView,
@@ -256,11 +284,75 @@ export default {
       })
       this.initMenu()
       await this.initNode()
-      this.logicFlow.render(this.modelValue)
+      if (!this.modelValue) {
+        this.logicFlow.render(this.modelValue)
+      } else {
+        // 根据节点数据初始化节点
+        this.initNodeData()
+      }
+
       this.bindEvent()
       // 内容移动到中心
       this.logicFlow.translateCenter()
     },
+    /**
+     * 根据node 初始化数据
+     */
+    async initNodeData() {
+      function getUUID() {
+        return 'xxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
+          const r = (Math.random() * 16) | 0; // 生成 0-15 的随机数
+          const v = c === 'x' ? r : (r & 0x3) | 0x8; // 如果是 'x' 使用随机数，否则按规则生成
+          return v.toString(16); // 转换为16进制字符串
+        });
+      }
+      function generateNode(data) {
+        return {
+          id: getUUID(),
+          type: data.type || "",
+          x: 0, // 可根据实际需要动态调整
+          y: 0, // 可根据实际需要动态调整
+          properties: {
+            data
+          },
+        };
+      }
+
+      function generateEdge(sourceNode, targetNode) {
+        return {
+          id: getUUID(),
+          type: "polyline",
+          sourceNodeId: sourceNode.id,
+          targetNodeId: targetNode.id,
+        };
+      }
+      const nodes = [];
+      const edges = [];
+      const nodeMap = {};
+
+      // 创建节点
+      this.nodes.forEach(item => {
+        const node = generateNode(item);
+        nodes.push(node);
+        nodeMap[item.into] = node;
+      });
+
+      // 创建边
+      this.nodes.forEach(item => {
+        const sourceKey = item.from;
+        const targetKey = item.into;
+        if (nodeMap[sourceKey] && nodeMap[targetKey]) {
+          edges.push(generateEdge(nodeMap[sourceKey], nodeMap[targetKey]));
+        }
+      });
+
+      this.logicFlow.renderRawData({
+        nodes,
+        edges
+      })
+      this.logicFlow.extension.dagre.layout()
+
+    },
     /**
      * 初始化右键菜单
      */
@@ -375,6 +467,16 @@ export default {
         }
       }
     },
+    /**
+     * 处理流程图数据 返回纯节点
+     */
+    getNodes(nodes) {
+      let list = []
+      nodes.forEach((node) => {
+        list.push({ ...node.properties.data, type: node.type })
+      })
+      return list
+    },
     /**
      * 节点绑定事件
      */
@@ -394,8 +496,11 @@ export default {
         let { undos } = data
         // 返回所有历史数据
         this.$emit('change', undos)
-        // 同步最后数据
+        // 同步最后数据 原始流程数据
         this.$emit('update:modelValue', undos[undos.length - 1])
+
+        // 处理后的nodes 数据
+        this.$emit("update:nodes", this.getNodes(undos[undos.length - 1].nodes, undos[undos.length - 1].edges))
       })
 
       // 错误提示