更新图标可以移动

src/components/wfd/behavior/deleteItem.js

@@ -8,29 +8,41 @@ export default function(G6) {
       }
     },
     onKeydown(e, env) {
-      // const items = this.graph.get('selectedItems')
-      // const focus = this.graph.get('focusGraphWrapper')
+      const items = this.graph.get('selectedItems')
+      const focus = this.graph.get('focusGraphWrapper')
       // console.log(items, e, focus, this.graph, this.graph.executeCommand, env)
-      // // 下
-      // if (e.keyCode === 40 && items && items.length > 0 && focus) {
-
-      // }
-      // // 上
-      // if (e.keyCode === 38 && items && items.length > 0 && focus) {
-      //   if (this.graph.executeCommand) {
-      //     this.graph.executeCommand('toUp', 5)
-      //   } else {
-      //     this.graph.toUp(items[0])
-      //   }
-      // }
-      // // 左
-      // if (e.keyCode === 37 && items && items.length > 0 && focus) {
-
-      // }
-      // // 右
-      // if (e.keyCode === 39 && items && items.length > 0 && focus) {
-
-      // }
+      // 下
+      if (e.keyCode === 40 && items && items.length > 0 && focus) {
+        if (this.graph.executeCommand) {
+          this.graph.executeCommand('toDown')
+        } else {
+          this.graph.toUp(items[0])
+        }
+      }
+      // 上
+      if (e.keyCode === 38 && items && items.length > 0 && focus) {
+        if (this.graph.executeCommand) {
+          this.graph.executeCommand('toUp')
+        } else {
+          this.graph.toUp(items[0])
+        }
+      }
+      // 左
+      if (e.keyCode === 37 && items && items.length > 0 && focus) {
+        if (this.graph.executeCommand) {
+          this.graph.executeCommand('toLeft')
+        } else {
+          this.graph.toUp(items[0])
+        }
+      }
+      // 右
+      if (e.keyCode === 39 && items && items.length > 0 && focus) {
+        if (this.graph.executeCommand) {
+          this.graph.executeCommand('toRight')
+        } else {
+          this.graph.toUp(items[0])
+        }
+      }
       // if (e.keyCode === 46 && items && items.length > 0 && focus) {
       //   if (this.graph.executeCommand) {
       //     this.graph.executeCommand('delete', {})
@@ -40,7 +52,6 @@ export default function(G6) {
       //   this.graph.set('selectedItems', [])
       //   this.graph.emit('afteritemselected', [])
       // }
-
     },
     onCanvasLeave(e) {
       this.graph.set('focusGraphWrapper', false)

src/components/wfd/plugins/command.js

@@ -144,28 +144,79 @@ class Command {
       },
       method: function(graph) {
         const selectedItems = graph.get('selectedItems')
-        console.log(selectedItems, 'items')
         if (selectedItems && selectedItems.length > 0) {
           const item = graph.findById(selectedItems[0])
-          const itemStyles = item.getOriginStyle()
-          console.log(item.getOriginStyle())
+          const itemModel = item.getModel()
           item.updatePosition({
-            x: itemStyles.x,
-            y: itemStyles.y + 5
+            x: itemModel.x,
+            y: itemModel.y - 1
           })
-          // item.toFront()
-          graph.paint()
+          item.toFront()
+          graph.refresh()
+        }
+      }
+    })
+    cmdPlugin.registerCommand('toDown', {
+      queue: false,
+      enable: function(graph) {
+        const mode = graph.getCurrentMode()
+        const selectedItems = graph.get('selectedItems')
+        return mode === 'edit' && selectedItems && selectedItems.length > 0
+      },
+      method: function(graph) {
+        const selectedItems = graph.get('selectedItems')
+        if (selectedItems && selectedItems.length > 0) {
+          const item = graph.findById(selectedItems[0])
+          const itemModel = item.getModel()
+          item.updatePosition({
+            x: itemModel.x,
+            y: itemModel.y + 1
+          })
+          item.toFront()
+          graph.refresh()
+        }
+      }
+    })
+    cmdPlugin.registerCommand('toLeft', {
+      queue: false,
+      enable: function(graph) {
+        const mode = graph.getCurrentMode()
+        const selectedItems = graph.get('selectedItems')
+        return mode === 'edit' && selectedItems && selectedItems.length > 0
+      },
+      method: function(graph) {
+        const selectedItems = graph.get('selectedItems')
+        if (selectedItems && selectedItems.length > 0) {
+          const item = graph.findById(selectedItems[0])
+          const itemModel = item.getModel()
+          item.updatePosition({
+            x: itemModel.x - 1,
+            y: itemModel.y
+          })
+          item.toFront()
+          graph.refresh()
+        }
+      }
+    })
+    cmdPlugin.registerCommand('toRight', {
+      queue: false,
+      enable: function(graph) {
+        const mode = graph.getCurrentMode()
+        const selectedItems = graph.get('selectedItems')
+        return mode === 'edit' && selectedItems && selectedItems.length > 0
+      },
+      method: function(graph) {
+        const selectedItems = graph.get('selectedItems')
+        if (selectedItems && selectedItems.length > 0) {
+          const item = graph.findById(selectedItems[0])
+          const itemModel = item.getModel()
+          item.updatePosition({
+            x: itemModel.x + 1,
+            y: itemModel.y
+          })
+          item.toFront()
+          graph.refresh()
         }
-        // this.pasteData = clone(manager.clipboard[0])
-        // const addModel = this.pasteData.model
-        // addModel.x && (addModel.x += 10)
-        // addModel.y && (addModel.y += 10)
-        // const { clazz = 'userTask' } = addModel
-        // const timestamp = new Date().getTime()
-        // const id = clazz + timestamp
-        // addModel.id = id
-        // const item = graph.add(this.pasteData.type, addModel)
-        // item.toFront()
       }
     })
     cmdPlugin.registerCommand('redo', {

src/views/process/admin/process-manager.vue

@@ -95,7 +95,7 @@
         direction="rtl"
         :visible.sync="open"
         :before-close="handleClose"
-        size="85%"
+        size="90%"
       >
         <div v-if="open" class="tpl-create-content" style="margin-right: 15px;">
           <el-form ref="ruleForm" :model="ruleForm" :rules="rules" label-width="100px">
@@ -381,9 +381,9 @@ export default {
       await this.getPostOptions()
     },
     async handleCreate() {
-      load.startLoading()
-      await this.getProcessInitData()
-      load.endLoading()
+      // load.startLoading()
+      // await this.getProcessInitData()
+      // load.endLoading()
       this.ruleForm = {
         id: undefined,
         name: '',
@@ -410,7 +410,7 @@ export default {
       load.endLoading()
       this.wfdDesignRefresh = false
       this.open = true
-      processDetails({
+      await processDetails({
         processId: row.id
       }).then(response => {
         this.ruleForm = {

src/views/process/admin/template-manager.vue

@@ -95,7 +95,7 @@
         direction="rtl"
         :visible.sync="open"
         :before-close="handleClose"
-        size="85%"
+        size="90%"
       >
         <div class="tpl-create-content">
           <el-form ref="ruleForm" :model="ruleForm" :rules="rules" label-width="100px">