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
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
<template>
<div class="app-container">
<!-- <doc-alert :title="$t('工作流')" url="https://doc.iocoder.cn/bpm" /> -->
<!-- 列表 -->
<el-table v-loading="loading" :data="list">
<el-table-column :label="$t('定义编号')" align="center" prop="id" width="400" />
<el-table-column :label="$t('定义名称')" align="center" prop="name" width="100">
<template slot-scope="scope">
<el-button type="text" @click="handleBpmnDetail(scope.row)">
<span>{{ scope.row.name }}</span>
</el-button>
</template>
</el-table-column>
<el-table-column :label="$t('定义分类')" align="center" prop="category" width="100">
<template slot-scope="scope">
<dict-tag :type="DICT_TYPE.BPM_MODEL_CATEGORY" :value="scope.row.category" />
</template>
</el-table-column>
<el-table-column :label="$t('表单信息')" align="center" prop="formType" width="200">
<template slot-scope="scope">
<el-button v-if="scope.row.formId" type="text" @click="handleFormDetail(scope.row)">
<span>{{ scope.row.formName }}</span>
</el-button>
<el-button v-else-if="scope.row.formCustomCreatePath" type="text" @click="handleFormDetail(scope.row)">
<span>{{ scope.row.formCustomCreatePath }}</span>
</el-button>
<label v-else>{{$t('暂无表单')}}</label>
</template>
</el-table-column>
<el-table-column :label="$t('流程版本')" align="center" prop="processDefinition.version" width="80">
<template slot-scope="scope">
<el-tag size="medium" v-if="scope.row">v{{ scope.row.version }}</el-tag>
<el-tag size="medium" type="warning" v-else>{{$t('未部署')}}</el-tag>
</template>
</el-table-column>
<el-table-column :label="$t('状态')" align="center" prop="version" width="80">
<template slot-scope="scope">
<el-tag type="success" v-if="scope.row.suspensionState === 1">{{$t('激活')}}</el-tag>
<el-tag type="warning" v-if="scope.row.suspensionState === 2">{{$t('挂起')}}</el-tag>
</template>
</el-table-column>
<el-table-column :label="$t('部署时间')" align="center" prop="deploymentTime" width="180">
<template slot-scope="scope">
<span>{{ parseTime(scope.row.deploymentTime) }}</span>
</template>
</el-table-column>
<el-table-column :label="$t('定义描述')" align="center" prop="description" width="300" show-overflow-tooltip />
<el-table-column :label="$t('操作')" align="center" width="150" fixed="right">
<template slot-scope="scope">
<el-button size="mini" type="text" icon="el-icon-s-custom" @click="handleAssignRule(scope.row)"
v-hasPermi="['bpm:task-assign-rule:update']">{{$t('分配规则')}}</el-button>
</template>
</el-table-column>
</el-table>
<!-- 流程表单配置详情 -->
<el-dialog :title="$t('表单详情')" :visible.sync="detailOpen" width="50%" append-to-body>
<parser :key="new Date().getTime()" :form-conf="detailForm" />
</el-dialog>
<!-- 流程模型图的预览 -->
<el-dialog :title="$t('流程图')" :visible.sync="showBpmnOpen" width="80%" append-to-body>
<my-process-viewer key="designer" v-model="bpmnXML" v-bind="bpmnControlForm" />
</el-dialog>
<!-- 分页组件 -->
<pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNo" :limit.sync="queryParams.pageSize"
@pagination="getList"/>
<!-- ========== 流程任务分配规则 ========== -->
<taskAssignRuleDialog ref="taskAssignRuleDialog" />
</div>
</template>
<script>
import {getProcessDefinitionBpmnXML, getProcessDefinitionPage} from "@/api/bpm/definition";
import {DICT_TYPE, getDictDatas} from "@/utils/dict";
import {getForm} from "@/api/bpm/form";
import {decodeFields} from "@/utils/formGenerator";
import Parser from '@/components/parser/Parser'
import taskAssignRuleDialog from "../taskAssignRule/taskAssignRuleDialog";
export default {
name: "processDefinition",
components: {
Parser,
taskAssignRuleDialog
},
data() {
return {
// 遮罩层
loading: true,
// 总条数
total: 0,
// 表格数据
list: [],
// 查询参数
queryParams: {
pageNo: 1,
pageSize: 10
},
// 流程表单详情
detailOpen: false,
detailForm: {
fields: []
},
// BPMN 数据
showBpmnOpen: false,
bpmnXML: null,
bpmnControlForm: {
prefix: "activiti"
},
// 数据字典
categoryDictDatas: getDictDatas(DICT_TYPE.BPM_MODEL_CATEGORY),
};
},
created() {
const key = this.$route.query && this.$route.query.key
if (key) {
this.queryParams['key'] = key
}
this.getList();
},
methods: {
/** 查询流程定义列表 */
getList() {
this.loading = true;
getProcessDefinitionPage(this.queryParams).then(response => {
this.list = response.data.list;
this.total = response.data.total;
this.loading = false;
}
);
},
/** 流程表单的详情按钮操作 */
handleFormDetail(row) {
// 流程表单
if (row.formId) {
// 设置值
this.detailForm = {
...JSON.parse(row.formConf),
fields: decodeFields(row.formFields)
}
// 弹窗打开
this.detailOpen = true
// 业务表单
} else if (row.formCustomCreatePath) {
this.$router.push({ path: row.formCustomCreatePath});
}
},
/** 流程图的详情按钮操作 */
handleBpmnDetail(row) {
getProcessDefinitionBpmnXML(row.id).then(response => {
this.bpmnXML = response.data
// 弹窗打开
this.showBpmnOpen = true
})
},
/** 处理任务分配规则列表的按钮操作 */
handleAssignRule(row) {
this.$refs['taskAssignRuleDialog'].initProcessDefinition(row.id);
},
}
};
</script>
<style lang="scss" scoped>
/* .my-process-designer {
height: calc(100vh - 200px);
} */
</style>