添加监听事件

src/components/DrawFlow/src/DrawFlow.vue

@@ -36,6 +36,14 @@ export default {
       }
     }
   },
+  watch: {
+    FlowConfig: {
+      handler() {
+        this.init();
+      },
+      deep: true
+    }
+  },
   data() {
     return {
       rectTypeDic: {
@@ -55,9 +63,11 @@ export default {
     // 节点数据变化事件
     nodeChange(node) {
       this.currentNode.title = node.title;
+      this.currentNode.content = node.content;
       this.selfConfig.forEach(i => {
         if (i.id === this.currentNode.id) {
           i.data = node.data;
+          i.content = node.content;
           i.title = node.title;
         }
       });

src/views/Home.vue

@@ -1,6 +1,7 @@
 <template>
   <div id="drawProcessDesign">
     <a-button @click="getData">提交</a-button>
+    <a-button @click="nodeChange">修改当前node</a-button>
     <FactoryDrawFlow
       @clickNode="clickNode"
       ref="flow"
@@ -15,12 +16,133 @@
 </style>
 
 <script>
+const arr = [
+  {
+    id: "root",
+    groupId: null,
+    type: "1",
+    title: "所有人",
+    content: "请选择",
+    isRow: true,
+    isRoot: true,
+    data: {},
+    isParent: true,
+    childNode: {
+      type: "4",
+      title: "title",
+      content: "contenta9urcgltunlo3svk",
+      groupId: "root",
+      id: "a9urcgltunlo3svk",
+      isRow: true,
+      data: {},
+      isParent: true,
+      childNode: {
+        id: "a7wd1l3kz6orbpyf",
+        groupId: "a9urcgltunlo3svk",
+        type: "route",
+        isRow: true,
+        isFlowTo: false,
+        conditionNodes: [
+          {
+            title: "title",
+            data: {},
+            id: "an3boz0zbth6i67o",
+            groupId: "a7wd1l3kz6orbpyf",
+            type: "3",
+            content: "undefinedan3boz0zbth6i67o",
+            groupPid: "a9urcgltunlo3svk",
+            isRow: false,
+            pids: ["a9urcgltunlo3svk"]
+          },
+          {
+            title: "title",
+            data: {},
+            id: "am3ewe040lpe90j0",
+            groupId: "a7wd1l3kz6orbpyf",
+            type: "3",
+            content: "undefinedam3ewe040lpe90j0",
+            groupPid: "a9urcgltunlo3svk",
+            isRow: false,
+            pids: ["a9urcgltunlo3svk"]
+          }
+        ]
+      },
+      pids: ["root"]
+    },
+    pids: [null]
+  },
+  {
+    title: "title",
+    data: {},
+    id: "an3boz0zbth6i67o",
+    groupId: "a7wd1l3kz6orbpyf",
+    type: "3",
+    content: "undefinedan3boz0zbth6i67o",
+    groupPid: "a9urcgltunlo3svk",
+    isRow: false,
+    pids: ["a9urcgltunlo3svk"]
+  },
+  {
+    title: "title",
+    data: {},
+    id: "am3ewe040lpe90j0",
+    groupId: "a7wd1l3kz6orbpyf",
+    type: "3",
+    content: "undefinedam3ewe040lpe90j0",
+    groupPid: "a9urcgltunlo3svk",
+    isRow: false,
+    pids: ["a9urcgltunlo3svk"]
+  },
+  {
+    type: "4",
+    title: "title",
+    content: "contenta9urcgltunlo3svk",
+    groupId: "root",
+    id: "a9urcgltunlo3svk",
+    isRow: true,
+    data: {},
+    isParent: true,
+    childNode: {
+      id: "a7wd1l3kz6orbpyf",
+      groupId: "a9urcgltunlo3svk",
+      type: "route",
+      isRow: true,
+      isFlowTo: false,
+      conditionNodes: [
+        {
+          title: "title",
+          data: {},
+          id: "an3boz0zbth6i67o",
+          groupId: "a7wd1l3kz6orbpyf",
+          type: "3",
+          content: "undefinedan3boz0zbth6i67o",
+          groupPid: "a9urcgltunlo3svk",
+          isRow: false,
+          pids: ["a9urcgltunlo3svk"]
+        },
+        {
+          title: "title",
+          data: {},
+          id: "am3ewe040lpe90j0",
+          groupId: "a7wd1l3kz6orbpyf",
+          type: "3",
+          content: "undefinedam3ewe040lpe90j0",
+          groupPid: "a9urcgltunlo3svk",
+          isRow: false,
+          pids: ["a9urcgltunlo3svk"]
+        }
+      ]
+    },
+    pids: ["root"]
+  }
+];
 // @ is an alias to /src
 export default {
   name: "Home",
   components: {},
   data() {
     return {
+      node: null,
       FlowConfig: [
         {
           id: "root",
@@ -44,6 +166,11 @@ export default {
       let res = this.$refs.flow.getResData();
       console.log("这是返回的一维数组", res);
     },
+    nodeChange() {
+      this.node.content = "nihao";
+      console.log(this.node);
+      this.$refs.flow.nodeChange(this.node);
+    },
     /**
      * 1、创建一个row length 1
      * 2、创建一个col节点
@@ -55,9 +182,14 @@ export default {
       return this.FlowConfig;
     },
     init() {
+      setTimeout(() => {
+        this.FlowConfig = arr;
+        this.$forceUpdate();
+      }, 1000);
       // this.FlowConfig = this.transform(this.FlowConfig);
     },
     clickNode(node) {
+      this.node = node;
       console.log("当前点击节点", node);
     }
   }