流程图组件
# 流程图组件
# 基本流程图
表格组件提供获取Object内容作为流程图的标识和名称，该组件也可以不传入任何参数直接引用，例如<bpmn/>即可调用组件。
注意：标识必须以字母和下划线开头，不支持中文。
代码块
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: "bpmnNameForm",
components: {
bpmn
}
})
export default class extends Vue {
private updateDate: { [key: string]: any } = { key: "process", name: "流程图" }
private updateBpmnFlag: Boolean = false
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
js版本
<template>
<div>
<bpmn :updateDate="updateDate" :updateBpmnFlag="updateBpmnFlag" />
</div>
</template>
<script>
import bpmn from "../Bpmn/bpmn";
export default {
components: {
bpmn,
},
data() {
return {
updateDate: { key: "process", name: "流程图" },
updateBpmnFlag: false
};
},
};
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
# 仅能查看的流程图
该组件仅提供查看功能。
代码块
ts版本
<template>
<div>
<el-button type="primary" @click="showBpmn()">查看流程图</el-button>
<el-dialog title="流程图" :visible.sync="dialogShowBpmnVisible">
<bpmnView :showData='showBpmnData'></bpmnView>
</el-dialog>
</div>
</template>
<script lang="ts">
import { Component, Prop, Vue } from "vue-property-decorator";
import bpmnView from "../Bpmn/bpmnView";
@Component({
name: "onlyShowBpmn",
components: {
bpmnView
}
})
export default class extends Vue {
private dialogShowBpmnVisible: boolean = false;
private showBpmnData: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>
`,
private async showBpmn() {
this.dialogShowBpmnVisible = true;
}
}
</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
70
71
72
73
74
75
76
77
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
70
71
72
73
74
75
76
77
js版本
<template>
<div>
<el-button type="primary" @click="showBpmn()">查看流程图</el-button>
<el-dialog title="流程图" :visible.sync="dialogShowBpmnVisible">
<bpmn-view :showData='showBpmnData'></bpmn-view>
</el-dialog>
</div>
</template>
<script>
import bpmnView from "../Bpmn/bpmnView";
export default {
components: {
bpmnView,
},
data() {
return {
dialogShowBpmnVisible: false,
showBpmnData: `
<?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>
`,
};
},
methods: {
showBpmn() {
this.dialogShowBpmnVisible = true;
},
},
};
</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
70
71
72
73
74
75
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
70
71
72
73
74
75
# 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