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
<template>
<div class="workflow">
<div class="mb-10">
<my-process-viewer
ref="processViewer"
:value="bpmnXML"
:prefix="prefix"
:activityData="activityData"
:processInstanceData="processInstanceData"
:taskData="taskData"
/>
</div>
<el-form label-position="left" label-width="100px">
<el-form-item :label="$t('抄送')">
<el-select v-model="valueSync" multiple :placeholder="$t('请选择抄送人')" style="width:100%" filterable >
<el-option
v-for="item in users"
:key="item.id"
:label="item.nickname"
:value="item.id">
</el-option>
</el-select>
</el-form-item>
</el-form>
</div>
</template>
<script>
import {getProcessDefinitionBpmnXMLByKey} from "@/api/bpm/definition"
import {listSimpleUsers} from '@/api/system/user'
export default {
props:{
xmlkey: String, // 流程标识
value: Array,
prefix: { // 使用哪个引擎
type: String,
default: "camunda",
},
activityData: { // 活动的数据。传递时，可高亮流程
type: Array,
default: () => [],
},
processInstanceData: { // 流程实例的数据。传递时，可展示流程发起人等信息
type: Object,
},
taskData: { // 任务实例的数据。传递时，可展示 UserTask 审核相关的信息
type: Array,
default: () => [],
}
},
data(){
return {
valueSync: [],
bpmnXML: null,
users: [],
selectedUserIds:[]
}
},
watch:{
value(){
this.valueSync = this.value || []
},
valueSync(val){
this.$emit('input', val)
},
},
created(){
if(this.value){
this.valueSync = this.value
}
listSimpleUsers().then(res => {
this.users = res.data
})
this.loadData()
},
methods:{
loadData(){
getProcessDefinitionBpmnXMLByKey(this.xmlkey).then(response => {
this.bpmnXML = response.data
})
}
}
}
</script>
<style lang="scss" scoped>
.workflow ::v-deep .my-process-designer{
height: auto;
}
</style>