@lambo-design/workflow-approve 1.0.0-beta.103 → 1.0.0-beta.104
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/package.json +2 -2
- package/src/workflow-diagram.vue +169 -71
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@lambo-design/workflow-approve",
|
|
3
|
-
"version": "1.0.0-beta.
|
|
3
|
+
"version": "1.0.0-beta.104",
|
|
4
4
|
"description": "",
|
|
5
5
|
"main": "index.js",
|
|
6
6
|
"author": "lambo",
|
|
@@ -13,7 +13,7 @@
|
|
|
13
13
|
"axios": "^0.24.0",
|
|
14
14
|
"axios-cache-plugin": "^0.1.0",
|
|
15
15
|
"@lambo-design/core": "^4.7.1-beta.171",
|
|
16
|
-
"@lambo-design/shared": "^1.0.0-beta.
|
|
16
|
+
"@lambo-design/shared": "^1.0.0-beta.310"
|
|
17
17
|
},
|
|
18
18
|
"dependencies": {
|
|
19
19
|
"bpmn-js": "^7.3.1",
|
package/src/workflow-diagram.vue
CHANGED
|
@@ -40,69 +40,85 @@
|
|
|
40
40
|
</Collapse>
|
|
41
41
|
|
|
42
42
|
|
|
43
|
-
<Modal
|
|
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
|
-
|
|
43
|
+
<Modal
|
|
44
|
+
v-model="showDetail"
|
|
45
|
+
:width="futureDetail ? 360 : modelWidth"
|
|
46
|
+
:footer-hide='true'
|
|
47
|
+
title="办理详情"
|
|
48
|
+
:class="futureDetail ? 'future-detail-modal' : ''">
|
|
49
|
+
<div v-if="futureDetail" class="future-detail-card">
|
|
50
|
+
<div class="future-detail-title">{{ futureDetail.taskName }}</div>
|
|
51
|
+
<div class="future-detail-body">
|
|
52
|
+
<span class="future-detail-status">待分配</span>
|
|
53
|
+
<span class="future-detail-users" :title="futureDetail.assigneeDisplay">
|
|
54
|
+
{{ futureDetail.assigneeDisplay }}
|
|
55
|
+
</span>
|
|
56
|
+
</div>
|
|
57
|
+
</div>
|
|
58
|
+
<template v-else>
|
|
59
|
+
<Card v-for="(item,index) in detailDones" :key="index" style="margin-bottom: 10px">
|
|
60
|
+
<Form :model="item" :label-width="120">
|
|
61
|
+
<Row>
|
|
62
|
+
<i-col span="12" offset="0">
|
|
63
|
+
<FormItem label="节点：">
|
|
64
|
+
{{ item.taskName }}
|
|
65
|
+
</FormItem>
|
|
66
|
+
</i-col>
|
|
67
|
+
<i-col span="12" offset="0">
|
|
68
|
+
<FormItem label="办理人：">
|
|
69
|
+
<Tooltip placement="bottom-end">
|
|
70
|
+
<span class="tooltip-text">{{ item.auditName }}</span>
|
|
71
|
+
<div slot="content" style="white-space: normal;">
|
|
72
|
+
{{ item.auditName }}
|
|
73
|
+
</div>
|
|
74
|
+
</Tooltip>
|
|
75
|
+
|
|
76
|
+
</FormItem>
|
|
77
|
+
</i-col>
|
|
78
|
+
|
|
79
|
+
</Row>
|
|
80
|
+
<Row>
|
|
81
|
+
<i-col span="12" offset="0">
|
|
82
|
+
<FormItem label="结果：">
|
|
83
|
+
<Tag color="green" v-if="item.auditResult == '00'">流程发起</Tag>
|
|
84
|
+
<Tag color="green" v-else-if="item.auditResult == '10'">自动跳过</Tag>
|
|
85
|
+
<Tag color="green" v-else-if="item.auditResult == '11'">与上一环节办理人相同自动跳过</Tag>
|
|
86
|
+
<Tag color="green" v-else-if="item.auditResult == '12'">与发起人相同自动跳过</Tag>
|
|
87
|
+
<Tag color="green" v-else-if="item.auditResult == '13'">办理人为空自动跳过</Tag>
|
|
88
|
+
<Tag color="green" v-else-if="item.auditResult == '14'">符合流程变量条件自动跳过</Tag>
|
|
89
|
+
<Tag color="green" v-else-if="item.auditResult == '30'">{{item.handleName ? item.handleName : '通过'}}</Tag>
|
|
90
|
+
<Tag color="volcano" v-else-if="item.auditResult == '40'">{{item.rejectName ? item.rejectName : '驳回'}}上一节点</Tag>
|
|
91
|
+
<Tag color="red" v-else-if="item.auditResult=='50'">{{item.rejectName ? item.rejectName : '驳回'}}到原点</Tag>
|
|
92
|
+
<Tag color="purple" v-else-if="item.auditResult=='51'">流程终止</Tag>
|
|
93
|
+
<Tag color="blue" v-else-if="item.auditResult == '60'">撤回</Tag>
|
|
94
|
+
<Tag color="green" v-else-if="item.auditResult == '61'">交回委派任务</Tag>
|
|
95
|
+
<Tag color="blue" v-else-if="item.auditResult == '62'">委派任务被撤回</Tag>
|
|
96
|
+
<Tag color="cyan" v-else-if="item.auditResult == '80'">跳转指定节点</Tag>
|
|
97
|
+
<Tag color="cyan" v-else-if="item.auditResult == '82'">指定他人处理</Tag>
|
|
98
|
+
<Tag color="cyan" v-else-if="item.auditResult == '83'">会签减签</Tag>
|
|
99
|
+
<Tag color="magenta" v-else-if="item.auditResult == '90'">{{item.rejectName ? item.rejectName : '驳回'}}指定节点</Tag>
|
|
100
|
+
<Tag color="orange" v-else>待办理</Tag>
|
|
101
|
+
</FormItem>
|
|
102
|
+
</i-col>
|
|
103
|
+
<i-col span="12" offset="0">
|
|
104
|
+
<FormItem v-if="item.auditDate" label="时间：">
|
|
105
|
+
{{ item.auditDate }}
|
|
106
|
+
</FormItem>
|
|
107
|
+
<FormItem v-else :label="item.auditResult == '00' ? '发起时间：' : '接收时间：'">
|
|
108
|
+
{{ item.createTime }}
|
|
109
|
+
</FormItem>
|
|
110
|
+
</i-col>
|
|
111
|
+
</Row>
|
|
112
|
+
<Row>
|
|
113
|
+
<i-col span="24" offset="0">
|
|
114
|
+
<FormItem v-if="item.auditComment" label="意见：">
|
|
115
|
+
{{ item.auditComment }}
|
|
116
|
+
</FormItem>
|
|
117
|
+
</i-col>
|
|
118
|
+
</Row>
|
|
119
|
+
</Form>
|
|
120
|
+
</Card>
|
|
121
|
+
</template>
|
|
106
122
|
</Modal>
|
|
107
123
|
|
|
108
124
|
|
|
@@ -309,6 +325,7 @@ export default {
|
|
|
309
325
|
data() {
|
|
310
326
|
return {
|
|
311
327
|
detailDones: [],
|
|
328
|
+
futureDetail: null,
|
|
312
329
|
showDetail: false,
|
|
313
330
|
showDefaultExpand: this.getShowDefaultExpand(),
|
|
314
331
|
showAllNodes: true, // 是否显示全部节点
|
|
@@ -403,17 +420,33 @@ export default {
|
|
|
403
420
|
// eventBus.on('element.click', function (evt) {
|
|
404
421
|
// eventBus.on('element.hover', function (evt) {
|
|
405
422
|
eventBus.on(`element.${this.approveDetailShowWay}`, function (evt) {
|
|
406
|
-
self.
|
|
407
|
-
|
|
408
|
-
|
|
409
|
-
|
|
410
|
-
|
|
411
|
-
|
|
412
|
-
|
|
423
|
+
if (self.showAllNodes) {
|
|
424
|
+
self.futureDetail = null;
|
|
425
|
+
self.detailDones = [];
|
|
426
|
+
const currentItems = dones.filter(item => item.taskNode === evt.element.id && !item.isFuture);
|
|
427
|
+
if (currentItems.length > 0) {
|
|
428
|
+
self.detailDones = currentItems;
|
|
429
|
+
self.showDetail = true;
|
|
430
|
+
} else {
|
|
431
|
+
self.hideFutureDetail();
|
|
413
432
|
}
|
|
433
|
+
return;
|
|
414
434
|
}
|
|
415
|
-
|
|
435
|
+
|
|
436
|
+
const matched = dones.filter(item => item.taskNode === evt.element.id);
|
|
437
|
+
const futureItem = matched.find(item => item.isFuture);
|
|
438
|
+
if (futureItem) {
|
|
439
|
+
self.futureDetail = self.buildFutureDetail(futureItem);
|
|
440
|
+
self.detailDones = [];
|
|
416
441
|
self.showDetail = true;
|
|
442
|
+
return;
|
|
443
|
+
}
|
|
444
|
+
|
|
445
|
+
self.futureDetail = null;
|
|
446
|
+
self.detailDones = matched.filter(item => !item.isFuture);
|
|
447
|
+
self.showDetail = self.detailDones.length > 0;
|
|
448
|
+
if (!self.showDetail) {
|
|
449
|
+
self.hideFutureDetail();
|
|
417
450
|
}
|
|
418
451
|
});
|
|
419
452
|
|
|
@@ -440,6 +473,23 @@ export default {
|
|
|
440
473
|
|
|
441
474
|
},
|
|
442
475
|
|
|
476
|
+
buildFutureDetail(item) {
|
|
477
|
+
const names = (item.auditName || '')
|
|
478
|
+
.split(',')
|
|
479
|
+
.map(name => name && name.trim())
|
|
480
|
+
.filter(Boolean);
|
|
481
|
+
return {
|
|
482
|
+
taskName: item.taskName || '',
|
|
483
|
+
assigneeDisplay: names.length > 0 ? names.join('，') : '暂无人员'
|
|
484
|
+
};
|
|
485
|
+
},
|
|
486
|
+
|
|
487
|
+
hideFutureDetail() {
|
|
488
|
+
this.futureDetail = null;
|
|
489
|
+
this.detailDones = [];
|
|
490
|
+
this.showDetail = false;
|
|
491
|
+
},
|
|
492
|
+
|
|
443
493
|
// 切换节点显示模式
|
|
444
494
|
async toggleNodeDisplay() {
|
|
445
495
|
if (this.showAllNodes) {
|
|
@@ -450,6 +500,7 @@ export default {
|
|
|
450
500
|
} else {
|
|
451
501
|
// 当前显示未来节点，切换回显示全部
|
|
452
502
|
this.showAllNodesInDiagram();
|
|
503
|
+
this.hideFutureDetail();
|
|
453
504
|
this.showAllNodes = true;
|
|
454
505
|
}
|
|
455
506
|
},
|
|
@@ -797,6 +848,7 @@ export default {
|
|
|
797
848
|
// 显示全部节点
|
|
798
849
|
showAllNodesInDiagram() {
|
|
799
850
|
if (!this.bpmnViewer) return;
|
|
851
|
+
this.hideFutureDetail();
|
|
800
852
|
|
|
801
853
|
// 重新加载流程图是最可靠的恢复方式
|
|
802
854
|
// 这样可以避免样式清除不彻底导致的黑框问题
|
|
@@ -832,4 +884,50 @@ export default {
|
|
|
832
884
|
|
|
833
885
|
<style lang="less">
|
|
834
886
|
@import "./styles/css/index.less";
|
|
887
|
+
|
|
888
|
+
.future-detail-modal .ivu-modal-header {
|
|
889
|
+
border-bottom: none;
|
|
890
|
+
padding-bottom: 0;
|
|
891
|
+
}
|
|
892
|
+
|
|
893
|
+
.future-detail-modal .ivu-modal-body {
|
|
894
|
+
padding: 20px 24px;
|
|
895
|
+
}
|
|
896
|
+
|
|
897
|
+
.future-detail-card {
|
|
898
|
+
background: #f7f8fa;
|
|
899
|
+
border-radius: 8px;
|
|
900
|
+
padding: 16px;
|
|
901
|
+
}
|
|
902
|
+
|
|
903
|
+
.future-detail-title {
|
|
904
|
+
font-size: 16px;
|
|
905
|
+
font-weight: 600;
|
|
906
|
+
color: #1f2329;
|
|
907
|
+
margin-bottom: 12px;
|
|
908
|
+
}
|
|
909
|
+
|
|
910
|
+
.future-detail-body {
|
|
911
|
+
display: flex;
|
|
912
|
+
align-items: center;
|
|
913
|
+
gap: 12px;
|
|
914
|
+
font-size: 14px;
|
|
915
|
+
color: #4e5969;
|
|
916
|
+
}
|
|
917
|
+
|
|
918
|
+
.future-detail-status {
|
|
919
|
+
background: #f7dba7;
|
|
920
|
+
color: #8f5d00;
|
|
921
|
+
border-radius: 999px;
|
|
922
|
+
padding: 4px 12px;
|
|
923
|
+
font-size: 12px;
|
|
924
|
+
line-height: 1;
|
|
925
|
+
}
|
|
926
|
+
|
|
927
|
+
.future-detail-users {
|
|
928
|
+
flex: 1;
|
|
929
|
+
white-space: nowrap;
|
|
930
|
+
overflow: hidden;
|
|
931
|
+
text-overflow: ellipsis;
|
|
932
|
+
}
|
|
835
933
|
</style>
|