增加快捷键复制粘贴

web/src/components/gva-wfd/behavior/deleteItem.js

@@ -11,6 +11,7 @@ export default function(G6) {
         onKeydown(e) {
             const items = this.graph.get('selectedItems');
             const focus = this.graph.get('focusGraphWrapper');
+            console.log(e.keyCode)
             if (e.keyCode === 46 && items && items.length > 0 && focus) {
                 if (this.graph.executeCommand) {
                     this.graph.executeCommand('delete', {});
@@ -31,9 +32,19 @@ export default function(G6) {
                 if (this.graph.executeCommand) {
                     this.graph.executeCommand('redo', {});
                 }
-
             }
-
+            if (e.ctrlKey == true && e.keyCode == 67) { //Ctrl+c
+                e.returnvalue = false;
+                if (this.graph.executeCommand) {
+                    this.graph.executeCommand('copy', {});
+                }
+            }
+            if (e.ctrlKey == true && e.keyCode == 86) { //Ctrl+v
+                e.returnvalue = false;
+                if (this.graph.executeCommand) {
+                    this.graph.executeCommand('paste', {});
+                }
+            }
         },
         onCanvasLeave(e) {
             this.graph.set('focusGraphWrapper', false);

web/src/view/workflow/workflowCreate/workflowCreate.vue

@@ -1,58 +1,266 @@
 <template>
   <div>
-    <el-button size="small" style="float:right;margin-top:6px;margin-right:6px;" @click="saveXML">导出XML</el-button>
-    <el-button size="small" style="float:right;margin-top:6px;margin-right:6px;" @click="saveImg">导出图片</el-button>
-    <el-button size="small" style="float:right;margin-top:6px;margin-right:6px;" @click="save">保存流程</el-button>
-    <gva-wfd ref="wfd" :data="demoData" :height="600" :users="users" :authorities="authorities" :groups="groups" :categorys="categorys" :lang="lang" />
+    <el-button
+      size="small"
+      style="float:right;margin-top:6px;margin-right:6px;"
+      @click="saveXML"
+    >导出XML</el-button>
+    <el-button
+      size="small"
+      style="float:right;margin-top:6px;margin-right:6px;"
+      @click="saveImg"
+    >导出图片</el-button>
+    <el-popover placement="bottom" width="160" v-model="visible">
+      <p>确认流程无误并保存吗</p>
+      <div style="text-align: right; margin: 0">
+        <el-button size="mini" type="text" @click="visible = false">取消</el-button>
+        <el-button type="primary" size="mini" @click="save">确定</el-button>
+      </div>
+      <el-button size="small" slot="reference" style="float:right;margin-top:6px;margin-right:6px;">保存流程</el-button>
+    </el-popover>
+
+    <gva-wfd
+      ref="wfd"
+      :data="demoData"
+      :height="600"
+      :users="users"
+      :authorities="authorities"
+      :groups="groups"
+      :categorys="categorys"
+      :lang="lang"
+    />
   </div>
 </template>
 <script>
-
-
-import gvaWfd from '@/components/gva-wfd'
-import   {getUserList}     from '@/api/user'
-import   {getAuthorityList}     from '@/api/authority'
+import gvaWfd from "@/components/gva-wfd";
+import { getUserList } from "@/api/user";
+import { getAuthorityList } from "@/api/authority";
 export default {
-  name: 'Workflow',
+  name: "Workflow",
   components: {
     gvaWfd
   },
   data() {
     return {
+      visible: false,
       lang: "zh",
-      demoData: {"nodes":[{"clazz":"start","label":"发起请假","type":"start-node","shape":"start-node","x":110,"y":195,"id":"start1603681292875","style":{}},{"clazz":"parallelGateway","label":"会签","type":"parallel-gateway-node","shape":"parallel-gateway-node","x":228,"y":195,"id":"parallelGateway1603681296419","style":{}},{"clazz":"userTask","label":"审批人1","type":"user-task-node","shape":"user-task-node","x":372,"y":84,"id":"userTask1603681299962","style":{},"assignValue":1,"assignType":"user"},{"clazz":"userTask","label":"审批人2","type":"user-task-node","shape":"user-task-node","x":370,"y":321,"id":"userTask1603681302372","style":{},"assignValue":2,"assignType":"user"},{"clazz":"parallelGateway","label":"会签结果检测","type":"parallel-gateway-node","shape":"parallel-gateway-node","x":519,"y":195,"id":"parallelGateway1603681338222","style":{}},{"clazz":"end","label":"请假失败","type":"end-node","shape":"end-node","x":704,"y":317,"id":"end1603681358043","style":{}},{"clazz":"end","label":"请假成功","type":"end-node","shape":"end-node","x":706.5,"y":55.5,"id":"end1603681360882","style":{}}],"edges":[{"id":"flow1603681320738","clazz":"flow","source":"parallelGateway1603681296419","target":"userTask1603681299962","sourceAnchor":0,"targetAnchor":3,"shape":"flow-polyline-round","style":{},"startPoint":{"x":228,"y":169,"index":0},"endPoint":{"x":321.5,"y":84,"index":3}},{"id":"flow1603681321969","clazz":"flow","source":"parallelGateway1603681296419","target":"userTask1603681302372","sourceAnchor":2,"targetAnchor":3,"shape":"flow-polyline-round","style":{},"startPoint":{"x":228,"y":221,"index":2},"endPoint":{"x":319.5,"y":321,"index":3}},{"id":"flow1603681323274","clazz":"flow","source":"start1603681292875","target":"parallelGateway1603681296419","sourceAnchor":1,"targetAnchor":3,"shape":"flow-polyline-round","style":{},"startPoint":{"x":138,"y":195,"index":1},"endPoint":{"x":202,"y":195,"index":3},"label":"发起","conditionExpression":"complete"},{"id":"flow1603681341777","clazz":"flow","source":"userTask1603681299962","target":"parallelGateway1603681338222","sourceAnchor":1,"targetAnchor":3,"shape":"flow-polyline-round","style":{},"startPoint":{"x":422.5,"y":84,"index":1},"endPoint":{"x":493,"y":195,"index":3}},{"id":"flow1603681343425","clazz":"flow","source":"userTask1603681302372","target":"parallelGateway1603681338222","sourceAnchor":1,"targetAnchor":3,"shape":"flow-polyline-round","style":{},"startPoint":{"x":420.5,"y":321,"index":1},"endPoint":{"x":493,"y":195,"index":3}},{"id":"flow1603681362913","clazz":"flow","source":"parallelGateway1603681338222","target":"end1603681360882","sourceAnchor":0,"targetAnchor":2,"shape":"flow-polyline-round","style":{},"startPoint":{"x":519,"y":169,"index":0},"endPoint":{"x":678.5,"y":55.5,"index":2},"conditionExpression":"complete","label":"所有人同意"},{"id":"flow1603681392729","clazz":"flow","source":"parallelGateway1603681338222","target":"end1603681358043","sourceAnchor":2,"targetAnchor":2,"shape":"flow-polyline-round","style":{},"startPoint":{"x":519,"y":221,"index":2},"endPoint":{"x":676,"y":317,"index":2},"conditionExpression":"reject","label":"任何一人拒绝"}],"combos":[],"groups":[]},
+      demoData: {
+        nodes: [
+          {
+            clazz: "start",
+            label: "发起请假",
+            type: "start-node",
+            shape: "start-node",
+            x: 110,
+            y: 195,
+            id: "start1603681292875",
+            style: {}
+          },
+          {
+            clazz: "parallelGateway",
+            label: "会签",
+            type: "parallel-gateway-node",
+            shape: "parallel-gateway-node",
+            x: 228,
+            y: 195,
+            id: "parallelGateway1603681296419",
+            style: {}
+          },
+          {
+            clazz: "userTask",
+            label: "审批人1",
+            type: "user-task-node",
+            shape: "user-task-node",
+            x: 372,
+            y: 84,
+            id: "userTask1603681299962",
+            style: {},
+            assignValue: 1,
+            assignType: "user"
+          },
+          {
+            clazz: "userTask",
+            label: "审批人2",
+            type: "user-task-node",
+            shape: "user-task-node",
+            x: 370,
+            y: 321,
+            id: "userTask1603681302372",
+            style: {},
+            assignValue: 2,
+            assignType: "user"
+          },
+          {
+            clazz: "parallelGateway",
+            label: "会签结果检测",
+            type: "parallel-gateway-node",
+            shape: "parallel-gateway-node",
+            x: 519,
+            y: 195,
+            id: "parallelGateway1603681338222",
+            style: {}
+          },
+          {
+            clazz: "end",
+            label: "请假失败",
+            type: "end-node",
+            shape: "end-node",
+            x: 704,
+            y: 317,
+            id: "end1603681358043",
+            style: {}
+          },
+          {
+            clazz: "end",
+            label: "请假成功",
+            type: "end-node",
+            shape: "end-node",
+            x: 706.5,
+            y: 55.5,
+            id: "end1603681360882",
+            style: {}
+          }
+        ],
+        edges: [
+          {
+            id: "flow1603681320738",
+            clazz: "flow",
+            source: "parallelGateway1603681296419",
+            target: "userTask1603681299962",
+            sourceAnchor: 0,
+            targetAnchor: 3,
+            shape: "flow-polyline-round",
+            style: {},
+            startPoint: { x: 228, y: 169, index: 0 },
+            endPoint: { x: 321.5, y: 84, index: 3 }
+          },
+          {
+            id: "flow1603681321969",
+            clazz: "flow",
+            source: "parallelGateway1603681296419",
+            target: "userTask1603681302372",
+            sourceAnchor: 2,
+            targetAnchor: 3,
+            shape: "flow-polyline-round",
+            style: {},
+            startPoint: { x: 228, y: 221, index: 2 },
+            endPoint: { x: 319.5, y: 321, index: 3 }
+          },
+          {
+            id: "flow1603681323274",
+            clazz: "flow",
+            source: "start1603681292875",
+            target: "parallelGateway1603681296419",
+            sourceAnchor: 1,
+            targetAnchor: 3,
+            shape: "flow-polyline-round",
+            style: {},
+            startPoint: { x: 138, y: 195, index: 1 },
+            endPoint: { x: 202, y: 195, index: 3 },
+            label: "发起",
+            conditionExpression: "complete"
+          },
+          {
+            id: "flow1603681341777",
+            clazz: "flow",
+            source: "userTask1603681299962",
+            target: "parallelGateway1603681338222",
+            sourceAnchor: 1,
+            targetAnchor: 3,
+            shape: "flow-polyline-round",
+            style: {},
+            startPoint: { x: 422.5, y: 84, index: 1 },
+            endPoint: { x: 493, y: 195, index: 3 }
+          },
+          {
+            id: "flow1603681343425",
+            clazz: "flow",
+            source: "userTask1603681302372",
+            target: "parallelGateway1603681338222",
+            sourceAnchor: 1,
+            targetAnchor: 3,
+            shape: "flow-polyline-round",
+            style: {},
+            startPoint: { x: 420.5, y: 321, index: 1 },
+            endPoint: { x: 493, y: 195, index: 3 }
+          },
+          {
+            id: "flow1603681362913",
+            clazz: "flow",
+            source: "parallelGateway1603681338222",
+            target: "end1603681360882",
+            sourceAnchor: 0,
+            targetAnchor: 2,
+            shape: "flow-polyline-round",
+            style: {},
+            startPoint: { x: 519, y: 169, index: 0 },
+            endPoint: { x: 678.5, y: 55.5, index: 2 },
+            conditionExpression: "complete",
+            label: "所有人同意"
+          },
+          {
+            id: "flow1603681392729",
+            clazz: "flow",
+            source: "parallelGateway1603681338222",
+            target: "end1603681358043",
+            sourceAnchor: 2,
+            targetAnchor: 2,
+            shape: "flow-polyline-round",
+            style: {},
+            startPoint: { x: 519, y: 221, index: 2 },
+            endPoint: { x: 676, y: 317, index: 2 },
+            conditionExpression: "reject",
+            label: "任何一人拒绝"
+          }
+        ],
+        combos: [],
+        groups: []
+      },
       users: [],
       authorities: [],
-      groups: [{id:'1',name:'组1'},{id:'2',name:'组2'},{id:'3',name:'组3'}],
-      categorys:[{id:'1',name:'分类1'},{id:'2',name:'分类2'},{id:'3',name:'分类3'},{id:'4',分组:'分组4'}]
-    }
+      groups: [
+        { id: "1", name: "组1" },
+        { id: "2", name: "组2" },
+        { id: "3", name: "组3" }
+      ],
+      categorys: [
+        { id: "1", name: "分类1" },
+        { id: "2", name: "分类2" },
+        { id: "3", name: "分类3" },
+        { id: "4", 分组: "分组4" }
+      ]
+    };
   },
   methods: {
     save() {
-      console.log(this.$refs['wfd'].graph.save())
-      console.log(this.$refs['wfd'].processModel)
-      console.log(JSON.stringify(this.$refs['wfd'].graph.save()))
+      this.visible = false;
+      console.log(this.$refs["wfd"].graph.save());
+      console.log(this.$refs["wfd"].processModel);
+      console.log(JSON.stringify(this.$refs["wfd"].graph.save()));
     },
     saveXML() {
-      console.log(this.$refs['wfd'].graph.saveXML())
+      console.log(this.$refs["wfd"].graph.saveXML());
     },
     saveImg() {
-      console.log(this.$refs['wfd'].graph.saveImg())
+      console.log(this.$refs["wfd"].graph.saveImg());
     }
   },
   async created() {
-   const userRes = await getUserList({page:1,pageSize:9999999})
+    const userRes = await getUserList({ page: 1, pageSize: 9999999 });
     if (userRes.code == 0) {
       userRes.data.list.map(item => {
-       this.users.push({id:item.ID,name:item.nickName})
-     })
+        this.users.push({ id: item.ID, name: item.nickName });
+      });
     }
-   const authorityRes = await getAuthorityList({page:1,pageSize:9999999})
+    const authorityRes = await getAuthorityList({ page: 1, pageSize: 9999999 });
     if (authorityRes.code == 0) {
       authorityRes.data.list.map(item => {
-       this.authorities.push({id:item.authorityId,name:item.authorityName})
-     })
+        this.authorities.push({
+          id: item.authorityId,
+          name: item.authorityName
+        });
+      });
     }
-  },
   }
+};
 </script>