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
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
| <template>
| <div v-if="componentLoaded">
| <el-dialog
| v-if="isDialog"
| v-model="visible"
| append-to-body
| destroy-on-close
| title="流程图展示"
| width="70%"
| class="flow-design-dialog"
| >
| <nf-design-base ref="bpmn" style="height: 60vh" :options="option"></nf-design-base>
| </el-dialog>
| <div v-else>
| <nf-design-base
| v-if="visible"
| ref="bpmn"
| style="height: 60vh"
| :options="option"
| ></nf-design-base>
| </div>
| </div>
| </template>
|
| <script>
| import { loadFlowModule } from '@/utils/module';
| import { modelView } from '@/api/flow/flow';
|
| export default {
| name: 'flowDesign',
| props: {
| isDialog: {
| type: Boolean,
| default: false,
| },
| isDisplay: {
| type: Boolean,
| default: false,
| },
| processInstanceId: String,
| processDefinitionId: String,
| },
| data() {
| return {
| visible: false,
| componentLoaded: false,
| option: {
| mode: 'view',
| },
| };
| },
| created() {
| // 懒加载流程设计器模块
| loadFlowModule(this.$app).then(() => {
| this.componentLoaded = true;
| });
| },
| watch: {
| isDisplay: {
| handler(val) {
| this.visible = val;
| },
| immediate: true,
| },
| visible: {
| handler(val) {
| this.$emit('update:is-display', val);
| },
| },
| processInstanceId: {
| handler(val) {
| if (!val) return;
| this.getDetail({ processInstanceId: this.processInstanceId });
| },
| immediate: true,
| },
| processDefinitionId: {
| handler(val) {
| if (!val) return;
| this.getDetail({ processDefinitionId: this.processDefinitionId });
| },
| immediate: true,
| },
| },
| methods: {
| getDetail(params) {
| modelView(params).then(res => {
| const data = res.data.data;
| const { xml, flow } = data;
| this.option.xml = xml;
| if (flow) {
| const flows = [];
| flow.forEach(f => {
| let { endTime } = f;
|
| const ff = {
| id: f.historyActivityId,
| class: !endTime && f.historyActivityType !== 'candidate' ? 'nodePrimary' : '',
| };
|
| if (f.historyActivityType === 'sequenceFlow') ff.class = 'lineWarn';
| else if (!ff.class && f.historyActivityType !== 'candidate') ff.class = 'nodeSuccess';
|
| const index = flows.findIndex(fl => fl.id === f.historyActivityId);
| if (index !== -1) flows.splice(index, 1, ff);
| else flows.push(ff);
| });
| this.option.flows = flows;
| }
| });
| },
| },
| };
| </script>
|
| <style lang="scss">
| .flow-design-dialog {
| display: flex;
| flex-direction: column;
| margin: 0 !important;
| position: absolute;
| top: 40%;
| left: 50%;
| transform: translate(-50%, -40%);
| max-height: calc(100% - 30px);
| max-width: calc(100% - 30px);
|
| .el-dialog__body {
| flex: 1;
| overflow: auto;
| }
| }
| </style>
|
|
