wans

src/views/test/Test1.vue

@@ -8,14 +8,9 @@
       </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"
-        @add="add"
-        @delete="handleDelete" />
+      <Node v-for="(item, index) in details" :key="index" :detail="item" :ref="item.id" @add="add" @edit="edit" @delete="handleDelete" />
     </div>
+    <BaseForm ref="baseModal" />
   </div>
 </template>
 
@@ -23,69 +18,66 @@
 // import jsPlumb from 'jsplumb'
 import Node from './modules/Node.vue'
 import { newInstance, EVENT_CONNECTION, EVENT_CONNECTION_DBL_CLICK, EVENT_DRAG_STOP } from '@jsplumb/browser-ui'
+import BaseForm from './modules/BaseForm.vue'
 export default {
   components: {
-    Node
+    Node,
+    BaseForm,
   },
-  data () {
+  data() {
     return {
       jsPlumb: null,
       instance: null,
       scale: 100,
       details: [
         {
-          name: 'node1',
+          name: '发起人',
+          id: '1',
           type: 1,
-          x: 100,
-          y: 400,
-          children: [
-            {
-              name: 'node2'
-            }
-          ]
-        },
-        {
-          x: 400,
-          y: 400,
-          type: 2,
-          name: 'node2',
-          children: [
-            {
-              name: 'node3'
-            }
-          ]
+          y: 100,
+          x: 500,
+          children: [],
         },
-        {
-          x: 700,
-          y: 400,
-          type: 3,
-          name: 'node3',
-          children: []
-        }
-      ]
+        // {
+        //   y: 350,
+        //   x: 500,
+        //   id: '2',
+        //   type: 2,
+        //   name: 'node2',
+        //   children: ['3'],
+        // },
+        // {
+        //   y: 600,
+        //   x: 500,
+        //   id: '3',
+        //   type: 3,
+        //   name: 'node3',
+        //   children: [],
+        // },
+      ],
     }
   },
-  mounted () {
+  mounted() {
     this.init()
   },
-  created () {},
+  created() {},
   methods: {
-    init () {
+    init() {
       const that = this
       // 初始化节点
       this.instance = newInstance({
         container: this.$refs.container,
         dragOptions: {
           containmentPadding: 10,
-          grid: { w: 20, h: 20 }
-        }
+          grid: { w: 20, h: 20 },
+        },
       })
       this.instance.importDefaults({
         anchor: 'Continuous',
         connectionsDetachable: false,
         // 连接器类型，这里设置为Flowchart
         connector: {
-          type: 'Flowchart'
+          type: 'Flowchart',
         },
         paintStyle: { stroke: '#666', strokeWidth: 1 },
         hoverPaintStyle: { stroke: '#1890ff', strokeWidth: 2 },
@@ -95,9 +87,9 @@ export default {
             options: {
               width: 13,
               length: 13,
-              location: 1
-            }
-          }
+              location: 1,
+            },
+          },
           // {
           //   type: 'Custom',
           //   options: {
@@ -116,23 +108,23 @@ export default {
           //     }
           //   }
           // }
-        ]
+        ],
         // 添加两个标签和箭头
       })
       this.instance.addSourceSelector('.bottom')
       this.instance.addTargetSelector('.top')
-      this.details.forEach(item => {
+      this.details.forEach((item) => {
         if (item.children.length) {
-          item.children.forEach(children => {
+          item.children.forEach((children) => {
             that.instance.connect({
               // 获取节点1和节点2的引用
-              source: this.$refs[item.name][0].$el,
-              target: this.$refs[children.name][0].$el,
+              source: this.$refs[item.id][0].$el,
+              target: this.$refs[children][0].$el,
               // 连接方式，这里设置为连续
               // paintStyle: { stroke: children.label == '同意' ? '#345' : 'red', strokeWidth: 3 },
               anchor: 'AutoDefault',
               // 连接器类型，这里设置为Flowchart
-              connector: 'Flowchart'
+              connector: 'Flowchart',
               // 添加两个标签和箭头
             })
           })
@@ -169,6 +161,7 @@ export default {
       //     { type: 'Arrow', options: { location: 1 } },
       //   ],
       // })
+      //拖拽
       this.instance.bind(EVENT_DRAG_STOP, (val) => {
         console.log(val.el.__vue__)
         console.log(3)
@@ -179,64 +172,90 @@ export default {
         console.log(val)
         console.log(2)
       })
+      // 删除连接
       this.instance.bind(EVENT_CONNECTION_DBL_CLICK, (conn) => {
-        // 删除连接
         this.$confirm({
           title: '确定删除所点击的链接吗？',
-          onOk () {
+          onOk() {
             that.instance.deleteConnection(conn)
-          }
+          },
         })
       })
       this.$forceUpdate()
     },
-    minus () {
+    minus() {
       if (this.scale > 50) {
         this.scale -= 10
       }
       this.instance.setZoom(this.scale / 100)
     },
-    plus () {
+    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,
-        y: record.y + 200,
-        type,
-        name: 'node4',
-        children: []
-      })
-      console.log(this.$refs)
+    add(record, type) {
+      const newVal = {
+        name: type === 2 ? '条件分支' : '审核人',
+        id: +new Date(),
+      }
+      if (record.children.length > 0) {
+        const children = this.details
+          .filter((detail) => {
+            return record.children.includes(detail.id)
+          })
+          .reduce((pre, item) => {
+            if (item.x > pre.x) {
+              pre = item
+            }
+            return pre
+          })
+        record.children.push(newVal.id)
+        this.details.push({
+          x: children.x + 240,
+          y: children.y,
+          type,
+          children: [],
+          ...newVal,
+        })
+      } else {
+        record.children.push(newVal.id)
+        this.details.push({
+          x: record.x,
+          y: record.y + 250,
+          type,
+          children: [],
+          ...newVal,
+        })
+      }
       this.$nextTick(() => {
         this.instance.connect({
-        // 获取节点1和节点2的引用
-          source: this.$refs[record.name][0].$el,
-          target: this.$refs['node4'][0].$el,
+          // 获取节点1和节点2的引用
+          source: this.$refs[record.id][0].$el,
+          target: this.$refs[newVal.id][0].$el,
           // 连接方式，这里设置为连续
           // paintStyle: { stroke: children.label == '同意' ? '#345' : 'red', strokeWidth: 3 },
           anchor: 'AutoDefault',
           // 连接器类型，这里设置为Flowchart
-          connector: '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
+    //删除节点
+
+    handleDelete(record) {
+      this.instance.unmanage(this.$refs[record.id][0].$el, true)
+      this.details = this.details.filter((item) => {
+        return item.id !== record.id
       })
-    }
-  }
+    },
+    edit(record) {
+      this.$refs.baseModal.base(record)
+    },
+  },
 }
 </script>
 
@@ -246,7 +265,7 @@ export default {
   flex: 1;
   width: 100%;
   height: 100%;
-  transform-origin:0 0;
+  transform-origin: 0 0;
   // transform: scale(0.5);
 }
 /deep/ .plus_btn {
@@ -264,21 +283,21 @@ export default {
   font-size: 24px;
   cursor: pointer;
 }
-/deep/.jtk-overlay{
-color: #1890ff;
-font-size: 18px;
-z-index: 9;
+/deep/.jtk-overlay {
+  color: #1890ff;
+  font-size: 18px;
+  z-index: 9;
 }
-.main{
+.main {
   position: relative;
   display: flex;
   flex-direction: column;
   min-height: calc(100vh - 100px);
   width: 100%;
 }
-.scale{
+.scale {
   position: absolute;
-  bottom:20px;
+  bottom: 20px;
   right: 30px;
   z-index: 9999;
 }

src/views/test/modules/BaseForm.vue

@@ -0,0 +1,67 @@
+<template>
+  <a-drawer title="编辑" placement="right" :closable="false" :visible="visible" @close="onClose">
+    <a-form :form="form" :label-col="{ span: 4 }" :wrapper-col="{ span: 20 }">
+      <a-form-item label="名称">
+        <a-input v-decorator="['name']" />
+      </a-form-item>
+      <!-- <a-form-item label="描述">
+        <a-input v-decorator="['seatNumber']" />
+      </a-form-item> -->
+
+    </a-form>
+    <div class="btn">
+      <a-button :loading="confirmLoading" type="primary" @click="save">保存</a-button>
+    </div>
+  </a-drawer>
+</template>
+
+<script>
+import pick from 'lodash.pick'
+
+export default {
+  data() {
+    return {
+      visible: false,
+      confirmLoading: false,
+      form: this.$form.createForm(this),
+      record: {},
+    }
+  },
+  methods: {
+    base(record) {
+      this.visible = true
+      this.record = record
+      const {
+        form: { setFieldsValue },
+      } = this
+      this.$nextTick(() => {
+        setFieldsValue(Object.assign(pick(record, ['name'])))
+      })
+    },
+    save() {
+      const {
+        form: { validateFieldsAndScroll },
+      } = this
+      this.confirmLoading = true
+      validateFieldsAndScroll((errors, values) => {
+        if (errors) {
+          this.confirmLoading = false
+          return
+        }
+        this.record.name = values.name
+        this.confirmLoading = false
+        this.onClose()
+      })
+    },
+    onClose() {
+      this.visible = false
+    },
+  },
+}
+</script>
+
+<style lang="less" scoped>
+.btn {
+  text-align: center;
+}
+</style>

src/views/test/modules/Node.vue

@@ -1,13 +1,7 @@
 <template>
-  <div
-    class="node"
-    :style="{left:detail.x+'px',top:detail.y+'px'}"
-    @mouseover="show = true"
-    @mouseout="show=false">
+  <div class="node" :style="{left:detail.x+'px',top:detail.y+'px'}" @mouseover="show = true" @mouseout="show=false">
 
-    <div
-      v-if="detail.type===1"
-      class="start">
+    <div v-if="detail.type===1" class="start">
       <div class="top"></div>
       <div class="bottom"></div>
       <div class="title">
@@ -17,9 +11,7 @@
 
       </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">
@@ -28,9 +20,7 @@
       <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">
@@ -41,10 +31,7 @@
 
     </div>
     <div class="action">
-      <a-row
-        type="flex"
-        justify="space-around"
-        align="middle">
+      <a-row type="flex" justify="space-around" align="middle">
 
         <a-col :span="6">
           <div class="btn">
@@ -52,11 +39,7 @@
               <template slot="title">
                 条件分支
               </template>
-              <a-button
-                size="small"
-                shape="circle"
-                @click="add(2)"
-                icon="apartment" />
+              <a-button size="small" shape="circle" @click="add(2)" icon="apartment" />
             </a-tooltip>
           </div>
         </a-col>
@@ -66,13 +49,7 @@
               <template slot="title">
                 审核人
               </template>
-              <a-button
-                size="small"
-                shape="circle"
-                icon="audit"
-                @click="add(3)"
-                type="primary"
-                class="audit" />
+              <a-button size="small" shape="circle" icon="audit" @click="add(3)" type="primary" class="audit" />
             </a-tooltip>
           </div>
         </a-col>
@@ -82,11 +59,7 @@
               <template slot="title">
                 编辑
               </template>
-              <a-button
-                size="small"
-                shape="circle"
-                icon="edit"
-                type="primary" />
+              <a-button size="small" @click="edit()" shape="circle" icon="edit" type="primary" />
             </a-tooltip>
           </div>
         </a-col>
@@ -96,17 +69,8 @@
               <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 title="确定删除该节点？" ok-text="是" cancel-text="否" @confirm="handleDelete">
+                <a-button size="small" shape="circle" icon="delete" type="danger" />
               </a-popconfirm>
             </a-tooltip>
           </div>
@@ -121,27 +85,30 @@ export default {
   props: {
     detail: {
       type: Object,
-      default: () => { }
-    }
+      default: () => {},
+    },
   },
-  data () {
+  data() {
     return {
-      show: false
+      show: false,
     }
   },
   methods: {
-    setPosition (position) {
+    setPosition(position) {
       console.log(position)
       this.detail.x = position.x
       this.detail.y = position.y
     },
-    add (type) {
+    add(type) {
       this.$emit('add', this.detail, type)
     },
-    handleDelete () {
+    edit(type) {
+      this.$emit('edit', this.detail)
+    },
+    handleDelete() {
       this.$emit('delete', this.detail)
-    }
-  }
+    },
+  },
 }
 </script>