- 说明

- 配置

- 代码示例

- 组件

  - 通用表格组件
  - 表单组件
  - 流程图组件
  - 流程图组件之编辑
    - 获取已有流程图内容，并编辑
    - Bpmn Attributes
    - Bpmn Components Events

- 前端
- 组件

haocheng Liu
2021-02-03

# 流程图组件之编辑

# # 流程图组件之编辑

## # 获取已有流程图内容，并编辑

表格组件提供获取已有流程图并编辑的功能。

代码块

ts版本

    <template>
      <div>
        <bpmn :updateDate="updateDate" :updateBpmnFlag="updateBpmnFlag" />
      </div>
    </template>

    <script lang="ts">
    import { Component, Prop, Vue } from "vue-property-decorator";
    import bpmn from "../Bpmn/bpmn";

    @Component({
      name: "editBpmn",
      components: {
        bpmn
      }
    })
    export default class extends Vue {
      private updateBpmnFlag: Boolean = false

      private updateDate: any = `
          <?xml version="1.0" encoding="UTF-8"?>
            <definitions xmlns="http://www.omg.org/spec/BPMN/20100524/MODEL" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:bpmndi="http://www.omg.org/spec/BPMN/20100524/DI" xmlns:omgdc="http://www.omg.org/spec/DD/20100524/DC" xmlns:camunda="http://camunda.org/schema/1.0/bpmn" xmlns:di="http://www.omg.org/spec/DD/20100524/DI" xmlns:xsd="http://www.w3.org/2001/XMLSchema" xmlns:activiti="http://activiti.org/bpmn" id="m1577635100724" name="" targetNamespace="http://www.activiti.org/testm1577635100724">
            <process id="process1" name="流程图1" processType="None" isClosed="false" isExecutable="true">
                <extensionElements>
                <camunda:properties />
                </extensionElements>
                <startEvent id="_2" name="start">
                <outgoing>Flow_1mn3ncy</outgoing>
                </startEvent>
                <sequenceFlow id="Flow_1mn3ncy" sourceRef="_2" targetRef="Activity_03u7gdx" />
                <endEvent id="Event_1jrsaua">
                <incoming>Flow_0wm6kz4</incoming>
                </endEvent>
                <sequenceFlow id="Flow_0wm6kz4" sourceRef="Activity_03u7gdx" targetRef="Event_1jrsaua" />
                <userTask id="Activity_03u7gdx">
                <incoming>Flow_1mn3ncy</incoming>
                <outgoing>Flow_0wm6kz4</outgoing>
                </userTask>
            </process>
            <bpmndi:BPMNDiagram id="BPMNDiagram_leave">
                <bpmndi:BPMNPlane id="BPMNPlane_leave" bpmnElement="process1">
                <bpmndi:BPMNEdge id="Flow_1mn3ncy_di" bpmnElement="Flow_1mn3ncy">
                    <di:waypoint x="176" y="384" />
                    <di:waypoint x="230" y="384" />
                </bpmndi:BPMNEdge>
                <bpmndi:BPMNEdge id="Flow_0wm6kz4_di" bpmnElement="Flow_0wm6kz4">
                    <di:waypoint x="330" y="384" />
                    <di:waypoint x="392" y="384" />
                </bpmndi:BPMNEdge>
                <bpmndi:BPMNShape id="BPMNShape__2" bpmnElement="_2">
                    <omgdc:Bounds x="144" y="368" width="32" height="32" />
                    <bpmndi:BPMNLabel>
                    <omgdc:Bounds x="149" y="400" width="23" height="14" />
                    </bpmndi:BPMNLabel>
                </bpmndi:BPMNShape>
                <bpmndi:BPMNShape id="Event_1jrsaua_di" bpmnElement="Event_1jrsaua">
                    <omgdc:Bounds x="392" y="366" width="36" height="36" />
                </bpmndi:BPMNShape>
                <bpmndi:BPMNShape id="Activity_0f4773x_di" bpmnElement="Activity_03u7gdx">
                    <omgdc:Bounds x="230" y="344" width="100" height="80" />
                </bpmndi:BPMNShape>
                </bpmndi:BPMNPlane>
            </bpmndi:BPMNDiagram>
            </definitions>
          `
    }

    </script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69

js版本

    <template>
      <div>
        <bpmn :updateDate="updateDate" :updateBpmnFlag="updateBpmnFlag" />
      </div>
    </template>

    <script>
    import bpmn from "../Bpmn/bpmn";
    export default {
      components: {
        bpmn,
      },
      data() {
        return {
          updateBpmnFlag: true,
          updateDate: `
          <?xml version="1.0" encoding="UTF-8"?>
            <definitions xmlns="http://www.omg.org/spec/BPMN/20100524/MODEL" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:bpmndi="http://www.omg.org/spec/BPMN/20100524/DI" xmlns:omgdc="http://www.omg.org/spec/DD/20100524/DC" xmlns:camunda="http://camunda.org/schema/1.0/bpmn" xmlns:di="http://www.omg.org/spec/DD/20100524/DI" xmlns:xsd="http://www.w3.org/2001/XMLSchema" xmlns:activiti="http://activiti.org/bpmn" id="m1577635100724" name="" targetNamespace="http://www.activiti.org/testm1577635100724">
            <process id="process1" name="流程图1" processType="None" isClosed="false" isExecutable="true">
                <extensionElements>
                <camunda:properties />
                </extensionElements>
                <startEvent id="_2" name="start">
                <outgoing>Flow_1mn3ncy</outgoing>
                </startEvent>
                <sequenceFlow id="Flow_1mn3ncy" sourceRef="_2" targetRef="Activity_03u7gdx" />
                <endEvent id="Event_1jrsaua">
                <incoming>Flow_0wm6kz4</incoming>
                </endEvent>
                <sequenceFlow id="Flow_0wm6kz4" sourceRef="Activity_03u7gdx" targetRef="Event_1jrsaua" />
                <userTask id="Activity_03u7gdx">
                <incoming>Flow_1mn3ncy</incoming>
                <outgoing>Flow_0wm6kz4</outgoing>
                </userTask>
            </process>
            <bpmndi:BPMNDiagram id="BPMNDiagram_leave">
                <bpmndi:BPMNPlane id="BPMNPlane_leave" bpmnElement="process1">
                <bpmndi:BPMNEdge id="Flow_1mn3ncy_di" bpmnElement="Flow_1mn3ncy">
                    <di:waypoint x="176" y="384" />
                    <di:waypoint x="230" y="384" />
                </bpmndi:BPMNEdge>
                <bpmndi:BPMNEdge id="Flow_0wm6kz4_di" bpmnElement="Flow_0wm6kz4">
                    <di:waypoint x="330" y="384" />
                    <di:waypoint x="392" y="384" />
                </bpmndi:BPMNEdge>
                <bpmndi:BPMNShape id="BPMNShape__2" bpmnElement="_2">
                    <omgdc:Bounds x="144" y="368" width="32" height="32" />
                    <bpmndi:BPMNLabel>
                    <omgdc:Bounds x="149" y="400" width="23" height="14" />
                    </bpmndi:BPMNLabel>
                </bpmndi:BPMNShape>
                <bpmndi:BPMNShape id="Event_1jrsaua_di" bpmnElement="Event_1jrsaua">
                    <omgdc:Bounds x="392" y="366" width="36" height="36" />
                </bpmndi:BPMNShape>
                <bpmndi:BPMNShape id="Activity_0f4773x_di" bpmnElement="Activity_03u7gdx">
                    <omgdc:Bounds x="230" y="344" width="100" height="80" />
                </bpmndi:BPMNShape>
                </bpmndi:BPMNPlane>
            </bpmndi:BPMNDiagram>
            </definitions>
          `
        };
      },
    };
    </script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67

## # Bpmn Attributes

参数 | 说明 | 类型 | 可选值 | 默认值
--- | --- | --- | --- | ---
updateBpmnFlag | 是否为编辑流程图 | Boolean | - | false
updateDate | 数据(编辑时传入String) | String/Object | - | -

## # Bpmn Components Events

事件名 | 说明 | 参数
--- | --- | ---
openBpmn | 当用户手动点击文件icon时触发的事件，打开bpmn格式文件 | file
downloadBpmn | 当用户手动点击下载icon时触发的事件，下载bpmn格式文件 | -
downloadSvg | 当用户手动点击图片icon时触发的事件，下载svg格式文件 | -
handleUpdateData | 当用户手动点击上传icon时触发的事件，上传已有流程图 | -

上次更新: 2021/02/03, 17:01:33
流程图组件

← 流程图组件

最近更新

  01
DataMap
02-05

  02
实体类
02-05

  03
update操作
02-05

更多文章>

Theme by Vdoing | Copyright © 2021-2023 Haocheng Liu | MIT License

- 跟随系统
- 浅色模式
- 深色模式
- 阅读模式