wasn

src/views/test/Test1.vue

@@ -1,6 +1,13 @@
 <template>
   <div class="main">
-    <div ref="container" class="container">
+    <div class="scale">
+      <a-space>
+        <a-button shape="circle" icon="minus" @click="minus" />
+        {{ scale }}%
+        <a-button shape="circle" icon="plus" @click="plus" />
+      </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" />
     </div>
   </div>
@@ -18,36 +25,35 @@ export default {
     return {
       jsPlumb: null,
       instance: null,
+      scale: 100,
       details: [
         {
           name: 'node1',
+          type: 1,
           x: 400,
           y: 40,
           children: [
             {
-              name: 'node2',
-              label: '同意'
-            },
-            {
-              name: 'node3',
-              label: '拒绝'
+              name: 'node2'
             }
+
           ]
         },
         {
           x: 100,
           y: 320,
+          type: 2,
           name: 'node2',
           children: [
             {
-              name: 'node3',
-              label: '拒绝'
+              name: 'node3'
             }
           ]
         },
         {
           x: 660,
           y: 320,
+          type: 3,
           name: 'node3',
           children: []
         }
@@ -60,29 +66,31 @@ export default {
   created () {},
   methods: {
     init () {
-      let { instance } = this
+      const that = this
       // 初始化节点
-      instance = newInstance({
+      this.instance = newInstance({
         container: this.$refs.container,
         dragOptions: {
-          containment: 'parent',
+          containment: 'notNegative',
           containmentPadding: 10,
           grid: { w: 20, h: 20 }
         }
       })
-      instance.importDefaults({
+      this.instance.importDefaults({
         anchor: 'Continuous',
         connectionsDetachable: false,
         // 连接器类型，这里设置为Flowchart
         connector: {
           type: 'Flowchart'
         },
-        paintStyle: { stroke: '#456', strokeWidth: 3 },
-        hoverPaintStyle: { stroke: 'red', strokeWidth: 4 },
+        paintStyle: { stroke: '#666', strokeWidth: 1 },
+        hoverPaintStyle: { stroke: '#1890ff', strokeWidth: 2 },
         connectionOverlays: [
           {
             type: 'Arrow',
             options: {
+              width: 13,
+              length: 13,
               location: 1
             }
           }
@@ -107,24 +115,21 @@ export default {
         ]
         // 添加两个标签和箭头
       })
-      instance.addSourceSelector('.bottom')
-      instance.addTargetSelector('.top')
+      this.instance.addSourceSelector('.bottom')
+      this.instance.addTargetSelector('.top')
       this.details.forEach(item => {
         if (item.children.length) {
           item.children.forEach(children => {
-            instance.connect({
+            that.instance.connect({
               // 获取节点1和节点2的引用
               source: this.$refs[item.name][0].$el,
               target: this.$refs[children.name][0].$el,
               // 连接方式，这里设置为连续
+              // paintStyle: { stroke: children.label == '同意' ? '#345' : 'red', strokeWidth: 3 },
               anchor: 'AutoDefault',
               // 连接器类型，这里设置为Flowchart
-              connector: 'Flowchart',
+              connector: 'Flowchart'
               // 添加两个标签和箭头
-              overlays: [
-                { type: 'Label', options: { label: children.label, location: 0.5 } },
-                { type: 'Arrow', options: { location: 1 } }
-              ]
             })
           })
         } else {
@@ -160,26 +165,39 @@ export default {
       //     { type: 'Arrow', options: { location: 1 } },
       //   ],
       // })
-      instance.bind(EVENT_DRAG_STOP, (val) => {
+      this.instance.bind(EVENT_DRAG_STOP, (val) => {
         console.log(val.el.__vue__)
         console.log(3)
         val.el.__vue__.setPosition(val.elements[0].pos)
       })
       // 建立链接
-      instance.bind(EVENT_CONNECTION, (val) => {
+      this.instance.bind(EVENT_CONNECTION, (val) => {
         console.log(val)
         console.log(2)
       })
-      instance.bind(EVENT_CONNECTION_DBL_CLICK, (conn) => {
+      this.instance.bind(EVENT_CONNECTION_DBL_CLICK, (conn) => {
         // 删除连接
         this.$confirm({
           title: '确定删除所点击的链接吗？',
           onOk () {
-            instance.deleteConnection(conn)
+            that.instance.deleteConnection(conn)
           }
         })
       })
       this.$forceUpdate()
+    },
+    minus () {
+      if (this.scale > 50) {
+        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)
     }
   }
 }
@@ -188,8 +206,10 @@ export default {
 <style lang="less" scoped>
 .container {
   position: relative;
+  flex: 1;
   width: 100%;
-  min-height: calc(100vh - 100px);
+  height: 100%;
+  transform-origin:0 0;
   // transform: scale(0.5);
 }
 /deep/ .plus_btn {
@@ -212,4 +232,17 @@ color: #1890ff;
 font-size: 18px;
 z-index: 9;
 }
+.main{
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  min-height: calc(100vh - 100px);
+  width: 100%;
+}
+.scale{
+  position: absolute;
+  bottom:20px;
+  right: 30px;
+  z-index: 9999;
+}
 </style>

src/views/test/modules/Node.vue

@@ -1,27 +1,83 @@
 <template>
-  <div class="node" :style="{left:detail.x+'px',top:detail.y+'px'}">
-    <div class="top"></div>
-    <div class="bottom"></div>
-    {{ detail.name }}
+  <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>
+    <div
+      v-if="detail.type===1"
+      class="start">
+      <div class="top"></div>
+      <div class="bottom"></div>
+      <div class="title">
+        {{ detail.name }}
+      </div>
+      <div
+        class="content"
+        @mouseover="show = true"
+        @mouseout="show=false">
+
+      </div>
+    </div>
+    <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>
+    </div>
+    <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>
+    </div>
+
   </div>
 </template>
 
 <script>
-import { log } from '@jsplumb/browser-ui'
 export default {
   props: {
     detail: {
       type: Object,
-      default: () => {}
+      default: () => { }
     }
   },
   data () {
-    return {}
+    return {
+      show: false
+    }
   },
   methods: {
     setPosition (position) {
       this.detail.x = position.x
       this.detail.y = position.y
+    },
+    mouseover () {
+
     }
   }
 }
@@ -30,9 +86,9 @@ export default {
 <style lang="less" scoped>
 .node {
   width: 200px;
-  height: 100px;
   position: absolute;
-  background: #fff;
+  cursor: pointer;
+   border-radius: 0 0 10px 10px;
   .top {
     position: absolute;
     top: 0;
@@ -55,5 +111,56 @@ export default {
     z-index: 9;
     height: 10px;
   }
+  .title {
+    padding: 2px 5px;
+    overflow: hidden;
+    background: #9e9ebc;
+    color: #fff;
+   border-radius: 10px 10px 0 0;
+  }
+  .content{
+      background: #fff;
+    min-height: 50px;
+   border-radius:0 0 10px 10px ;
+  }
+  .term{
+    .title{
+       color: #0ab74c;
+       border-bottom:1px solid #ccc;
+    background: #fff;
+    }
+  }
+  .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;
+  }
+  100% {
+    width: 100%;
+    overflow: visible;
+
+  }
 }
 </style>

src/views/test/modules/components.js

@@ -1,29 +0,0 @@
-export const componentList = [
-  {
-    id: 0,
-    name: '文件上传',
-    type: 'uploadFile',
-    value: 'uploadFile',
-    dependentId: false,
-    required: true,
-    label: '文件上传',
-    attrs: {
-      placeholder: '请输入',
-      maxSize: 5
-    }
-  },
-  {
-    id: 7,
-    name: '图片上传',
-    type: 'uploadImg',
-    value: 'uploadImg',
-    dependentId: false,
-    required: true,
-    label: '图片上传',
-    attrs: {
-      placeholder: '请输入',
-      maxSize: 5
-    }
-  },
- 
-]