wasn

src/views/test/Test1.vue

@@ -8,7 +8,13 @@
       </a-space>
     </div>
     <div ref="container" class="container" :style="{transform: `scale(${scale / 100})`}">
-      <Node v-for="(item, index) in details" :key="index" :detail="item" :ref="item.name" />
+      <Node
+        v-for="(item, index) in details"
+        :key="index"
+        :detail="item"
+        :ref="item.name"
+        @add="add"
+        @delete="handleDelete" />
     </div>
   </div>
 </template>
@@ -30,18 +36,17 @@ export default {
         {
           name: 'node1',
           type: 1,
-          x: 400,
-          y: 40,
+          x: 100,
+          y: 400,
           children: [
             {
               name: 'node2'
             }
-
           ]
         },
         {
-          x: 100,
-          y: 320,
+          x: 400,
+          y: 400,
           type: 2,
           name: 'node2',
           children: [
@@ -51,8 +56,8 @@ export default {
           ]
         },
         {
-          x: 660,
-          y: 320,
+          x: 700,
+          y: 400,
           type: 3,
           name: 'node3',
           children: []
@@ -71,7 +76,6 @@ export default {
       this.instance = newInstance({
         container: this.$refs.container,
         dragOptions: {
-          containment: 'notNegative',
           containmentPadding: 10,
           grid: { w: 20, h: 20 }
         }
@@ -191,13 +195,46 @@ export default {
         this.scale -= 10
       }
       this.instance.setZoom(this.scale / 100)
-      console.log(this.instance)
     },
     plus () {
       if (this.scale < 150) {
         this.scale += 10
       }
       this.instance.setZoom(this.scale / 100)
+    },
+    add (record, type) {
+      console.log(record, type)
+      record.children.push({
+        name: 'node4'
+      })
+      this.details.push({
+        x: record.x + 200,
+        y: record.y,
+        type,
+        name: 'node4',
+        children: []
+      })
+      console.log(this.$refs)
+      this.$nextTick(() => {
+        this.instance.connect({
+        // 获取节点1和节点2的引用
+          source: this.$refs[record.name][0].$el,
+          target: this.$refs['node4'][0].$el,
+          // 连接方式，这里设置为连续
+          // paintStyle: { stroke: children.label == '同意' ? '#345' : 'red', strokeWidth: 3 },
+          anchor: 'AutoDefault',
+          // 连接器类型，这里设置为Flowchart
+          connector: 'Flowchart'
+        // 添加两个标签和箭头
+        })
+      })
+      // this.details.push()
+    },
+    handleDelete (record) {
+      this.instance.unmanage(this.$refs[record.name][0].$el, true)
+      this.details = this.details.filter(item => {
+        return item.name !== record.name
+      })
     }
   }
 }

src/views/test/modules/Node.vue

@@ -2,17 +2,9 @@
   <div
     class="node"
     :style="{left:detail.x+'px',top:detail.y+'px'}"
-  >
-    <transition name="action">
-      <div class="action" v-show="show">
-        <a-row type="flex" justify="space-around" align="middle">
-          <a-col :span="6"><a-button type="link">编辑</a-button></a-col>
-          <a-col :span="6"><a-button type="link">条件分支</a-button></a-col>
-          <a-col :span="6"><a-button type="link">抄送人</a-button></a-col>
-          <a-col :span="6"><a-button type="link">删除</a-button></a-col>
-        </a-row>
-      </div>
-    </transition>
+    @mouseover="show = true"
+    @mouseout="show=false">
+
     <div
       v-if="detail.type===1"
       class="start">
@@ -21,40 +13,106 @@
       <div class="title">
         {{ detail.name }}
       </div>
-      <div
-        class="content"
-        @mouseover="show = true"
-        @mouseout="show=false">
+      <div class="card-content">
 
       </div>
     </div>
-    <div v-else-if="detail.type===2" class="term">
+    <div
+      v-else-if="detail.type===2"
+      class="term">
       <div class="top"></div>
       <div class="bottom"></div>
       <div class="title">
         {{ detail.name }}
       </div>
-      <div
-        class="content"
-        @mouseover="show = true"
-        @mouseout="show=false">
-
+      <div class="card-content">
       </div>
     </div>
-    <div v-else-if="detail.type===3" class="verify">
+    <div
+      v-else-if="detail.type===3"
+      class="verify">
       <div class="top"></div>
       <div class="bottom"></div>
       <div class="title">
         {{ detail.name }}
       </div>
-      <div
-        class="content"
-        @mouseover="show = true"
-        @mouseout="show=false">
-
+      <div class="card-content">
       </div>
+
     </div>
+    <div class="action">
+      <a-row
+        type="flex"
+        justify="space-around"
+        align="middle">
 
+        <a-col :span="6">
+          <div class="btn">
+            <a-tooltip>
+              <template slot="title">
+                条件分支
+              </template>
+              <a-button
+                size="small"
+                shape="circle"
+                @click="add(2)"
+                icon="apartment" />
+            </a-tooltip>
+          </div>
+        </a-col>
+        <a-col :span="6">
+          <div class="btn">
+            <a-tooltip>
+              <template slot="title">
+                审核人
+              </template>
+              <a-button
+                size="small"
+                shape="circle"
+                icon="audit"
+                @click="add(3)"
+                type="primary"
+                class="audit" />
+            </a-tooltip>
+          </div>
+        </a-col>
+        <a-col :span="6">
+          <div class="btn">
+            <a-tooltip>
+              <template slot="title">
+                编辑
+              </template>
+              <a-button
+                size="small"
+                shape="circle"
+                icon="edit"
+                type="primary" />
+            </a-tooltip>
+          </div>
+        </a-col>
+        <a-col :span="6">
+          <div class="btn">
+            <a-tooltip>
+              <template slot="title">
+                删除
+              </template>
+              <a-popconfirm
+                title="确定删除该节点？"
+                ok-text="是"
+                cancel-text="否"
+                @confirm="handleDelete"
+              >
+                <a-button
+                  size="small"
+                  shape="circle"
+                  icon="delete"
+                  type="danger" />
+              </a-popconfirm>
+            </a-tooltip>
+          </div>
+        </a-col>
+      </a-row>
+    </div>
   </div>
 </template>
 
@@ -73,11 +131,15 @@ export default {
   },
   methods: {
     setPosition (position) {
+      console.log(position)
       this.detail.x = position.x
       this.detail.y = position.y
     },
-    mouseover () {
-
+    add (type) {
+      this.$emit('add', this.detail, type)
+    },
+    handleDelete () {
+      this.$emit('delete', this.detail)
     }
   }
 }
@@ -88,7 +150,7 @@ export default {
   width: 200px;
   position: absolute;
   cursor: pointer;
-   border-radius: 0 0 10px 10px;
+  border-radius: 0 0 10px 10px;
   .top {
     position: absolute;
     top: 0;
@@ -116,51 +178,38 @@ export default {
     overflow: hidden;
     background: #9e9ebc;
     color: #fff;
-   border-radius: 10px 10px 0 0;
+    border-radius: 10px 10px 0 0;
   }
-  .content{
-      background: #fff;
+  .card-content {
+    background: #fff;
     min-height: 50px;
-   border-radius:0 0 10px 10px ;
   }
-  .term{
-    .title{
-       color: #0ab74c;
-       border-bottom:1px solid #ccc;
-    background: #fff;
+  .term {
+    .title {
+      color: #0ab74c;
+      border-bottom: 1px solid #ccc;
+      background: #fff;
     }
   }
-  .verify{
-    .title{
-    background: #e99e09;
+  .verify {
+    .title {
+      background: #e99e09;
     }
   }
 }
-.action{
-  position: absolute;
-  width: 100%;
-  height: 100%;
-  right: 0;
-  border-radius: 10px 10px;
-  top: 0;
-  background: rgba(0, 0, 0, .3);
-}
-
-.action-enter-active {
-  animation: action-in .5s;
-}
-.action-leave-active {
-  animation: action-in .5s reverse;
-}
-@keyframes action-in {
-  0% {
-    width: 0;
-    overflow: hidden;
+.action {
+  border-top: 1px solid #ccc;
+  font-size: 12px;
+  border-radius: 0 0 10px 10px;
+  background: #fff;
+  .btn {
+    padding: 5px;
+    text-align: center;
   }
-  100% {
-    width: 100%;
-    overflow: visible;
+}
 
-  }
+.audit {
+  background: #e99e09;
+  border: #e99e09 solid 1px;
 }
 </style>