SimpleFlow.vue
11 KB
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
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
<template>
<div>
<el-dialog
fullscreen
:visible="dialogVisible"
custom-class="simple-flow-dialog"
:show-close="false"
>
<div class="simple-flow-header" slot="title">
<el-button
@click="closeDialog"
type="primary"
icon="el-icon-arrow-left"
circle
class="simple-flow-header_left"
></el-button>
<ul>
<li
v-for="(item, index) in headerTabs"
:key="index"
:class="{active: activeName === item.key}"
@click="handleTab(item)"
>
{{ item.text }}
</li>
</ul>
</div>
<div class="simple-flow-content">
<!--建模表单-->
<business-obj-dialog-simple
ref="objDialog"
:clickTree="clickTree"
v-show="activeName == 'model'"
:modelAlias="modelAlias"
:data="modelDetail"
:dataView="dataView"
@publishSuccess="publishSuccess"
></business-obj-dialog-simple>
<!-- 表单 -->
<form-designer-simple
v-if="activeName == 'form' && isFormShow"
:form-type="formType"
:form-id.sync="formId"
:form-def-id.sync="formDefId"
:add-bpm-form="bpmForm"
:bos="bpmForm.bos"
:formAlias="formAlias"
ref="formDesignerSimpleRef"
class="simple-form-designer"
@switchForm="switchForm"
@updateForm="updateForm"
/>
<!-- 流程新增 -->
<BpmnEdit
v-if="activeName == 'flow'"
:flowData="flowData"
class="simple-flow"
:defId="curSelectDefId"
design-pattern="simple"
@def-deploy-success="handleDefDeploySuccess"
@switch-config-refresh="handleDefSignSuccess"
/>
<!-- 流程配置 -->
<simple-flow-config
v-if="activeName == 'flowConfig'"
:defId="curSelectDefId"
:pcFormData="pcFormData"
:mobileFormData="mobileFormData"
></simple-flow-config>
</div>
</el-dialog>
<form-template-dialog
v-if="dialogVisible"
@onConfirm="confirmTemplate"
formType="pc"
ref="formTemplateDialog"
/>
</div>
</template>
<script>
import form from '@/api/form.js'
import flow from '@/api/flow.js'
const BusinessObjDialogSimple = () =>
import('@/views/form/BusinessObjDialogSimple.vue')
const FormDesignerSimple = () =>
import('@/components/form/FormDesignerSimple.vue')
const SimpleFlowConfig = () =>
import('@/views/flow/simpleFlow/SimpleFlowConfig.vue')
const BpmnEdit = () => import('@/components/VueBpmn/BpmnEdit.vue')
const FormTemplateDialog = () =>
import('@/components/dialog/FormTemplateDialog.vue')
export default {
components: {
BusinessObjDialogSimple,
FormDesignerSimple,
SimpleFlowConfig,
BpmnEdit,
FormTemplateDialog
},
props: {
flowData: Object
},
data() {
return {
isFlowPublish: false,
isFormShow: true,
formType: 'pc',
mobileFormData: null,
pcFormData: null, // 表单详情
dataView: {id: '', type: ''},
modelDetail: null, // 建模具体数据
currentStep: 1,
curSelectDefId: '', // 流程id
bpmForm: {
formKey: '',
bos: '',
desc: '',
templateConf: {},
formType: 'pc'
},
formId: '',
formDefId: '',
formEditorDialogVisible: false,
clickTree: {id: '', name: ''},
opretaId: '',
dialogVisible: false,
headerTabs: [
{text: '①建模', key: 'model', step: 1},
{text: '②表单设计', key: 'form', step: 2},
{text: '③流程设计', key: 'flow', step: 3},
{text: '④流程配置', key: 'flowConfig', step: 4}
],
activeName: ''
}
},
computed: {
modelAlias() {
return this.flowData.alias + 'BoDef'
},
formAlias() {
return this.flowData.alias + 'Form'
}
},
created() {
this.initData()
},
methods: {
// 选择生成表单的模板
confirmTemplate(templateModel) {
// 已选择模板
if(templateModel){
this.bpmForm.bos = [this.modelDetail]
this.bpmForm.templateConf = templateModel
}else{
// 空模板
this.bpmForm.bos = [this.modelDetail]
this.bpmForm.templateConf = {}
}
this.bpmForm.formType = 'pc'
this.activeName = 'form'
},
closeDialog() {
this.dialogVisible = false
this.$emit('update:isSimpleFlowShow', false)
},
updateForm(data) {
if (this.formType == 'pc') {
this.pcFormData = data
this.formId = data.id
this.formDefId = data.defId
}
if (this.formType == 'mobile') {
this.mobileFormData = data
this.formId = data.id
this.formDefId = data.defId
}
},
// 流程保存成功
handleDefSignSuccess(data) {},
// 发布流程成功
handleDefDeploySuccess() {
this.isFlowPublish = true
this.getFlowDetail('reset')
},
async switchForm() {
// 如果是pc 切换移动端表单 需掉用接口生成移动端表单
if (this.formType == 'pc') {
let result = await this.getMobileDetail()
if (result) {
this.formType = 'mobile'
this.bpmForm = result
this.formId = this.mobileFormData.formId || this.mobileFormData.id
this.formDefId = this.mobileFormData.defId
this.reloadForm()
}
return
}
if (this.formType == 'mobile') {
let pcResult = await this.getFormDetail()
if (pcResult) {
this.formType = 'pc'
this.bpmForm = pcResult
this.formId = this.pcFormData.formId || this.pcFormData.id
this.formDefId = this.pcFormData.defId
this.reloadForm()
}
}
},
reloadForm() {
this.isFormShow = false
this.$nextTick(() => {
this.isFormShow = true
})
},
async getMobileDetail() {
return new Promise(resolve => {
flow.getMobileDetailByAlias(this.pcFormData.formKey).then(res => {
if (res.data) {
this.mobileFormData = res.data
resolve(res.data)
} else {
resolve(false)
}
})
})
},
// 建模成功
publishSuccess(data) {
// 发布成功
if (data && data.state) {
// 获取建模具体数据
form.getEntData(data.message, resp => {
if (resp.data) {
this.modelDetail = resp.data
// 建模成功后弹出是否初始化模板
this.$refs.formTemplateDialog.showDialog(this.modelDetail.id);
}
})
}
// 保存成功需要重新获取最新数据
if (!data) {
this.$message.success('保存成功!')
this.getModelDetail()
}
},
initData() {
this.getModelDetail()
this.activeName = ''
this.dialogVisible = true
this.$nextTick(() => {
this.handleTab(this.headerTabs[0])
})
// 获取表单数据
this.getFormDetail('init')
},
// 获取建模详情
getModelDetail() {
return new Promise(resolve => {
flow.getModelDetailByAlias(this.modelAlias).then(res => {
if (res && res.data) {
// 如果已存在建模数据 就为编辑
this.dataView = {id: res.data.id, type: 'edit'}
this.modelDetail = res.data
return
}
this.dataView = {id: '', type: ''}
})
})
},
async handleTab(item) {
if (this.activeName === item.key) {
return
}
if (item.key === 'form') {
// 判断是否可以点form并赋值
if (!this.modelDetail) {
this.$message('请先发布建模!')
return
}
// 判断是否已经存在表单
let result = await this.getFormDetail()
// 如果存在就是编辑 否则是新增
if (result) {
this.bpmForm.bos = []
} else {
this.$refs.formTemplateDialog.showDialog(this.modelDetail.id)
return
}
}
// 需判断是否已存在发布的表单,才能编辑流程
if (item.key === 'flow') {
if (!this.pcFormData) {
this.$message('请先编辑发布表单!')
return
}
// 判断是否已经发布流程
await this.getFlowDetail()
}
// 需判断流程是否存在且已发布
if (item.key === 'flowConfig') {
await this.getFlowDetail()
if (
(!this.curSelectDefId ||
(this.flowDetail && this.flowDetail.version < 1)) &&
!this.isFlowPublish
) {
this.$message.info('请先发布流程!')
return
}
}
this.activeName = item.key
},
// 获取表单详情
async getFormDetail(type) {
return new Promise(resolve => {
if (this.pcFormData) {
resolve(this.pcFormData)
return
}
flow.getFormDetailByAlias(this.formAlias).then(res => {
if (res && res.data) {
this.pcFormData = res.data
this.formId = res.data.formId
this.formDefId = res.data.defId
if (type == 'init') {
this.getMobileDetail()
}
resolve(res.data)
return
}
// 表单新增
resolve(false)
})
})
},
// 获取流程详情
async getFlowDetail(type = '') {
return new Promise(resolve => {
if (this.flowDetail && type != 'reset') {
this.curSelectDefId = this.flowDetail.defId
resolve(this.flowDetail)
return
}
flow.getFlowImageByAlias(this.flowData.alias).then(res => {
if (res && res.data) {
this.flowDetail = res.data
this.curSelectDefId = this.flowDetail.defId
resolve(res.data)
return
}
// 表单新增
resolve(false)
})
})
}
}
}
</script>
<style lang="scss" scoped>
::v-deep .simple-flow-dialog {
background: #e8e8e8;
> .el-dialog__header {
padding: 0;
}
.el-dialog__body {
padding: 0;
height: calc(100% - 62px);
}
.simple-flow-header {
padding: 0;
display: flex;
align-items: center;
justify-content: center;
position: relative;
background: #fff;
.simple-flow-header_left {
position: absolute;
left: 20px;
}
ul {
list-style: none;
display: flex;
align-items: center;
li {
border-bottom: 2px solid transparent;
color: #909399;
padding: 0 20px;
height: 60px;
line-height: 60px;
cursor: pointer;
&.active {
border-bottom-color: rgb(64, 158, 255);
color: rgb(64, 158, 255);
}
}
}
}
.simple-flow-content {
height: 100%;
.simple-form-designer {
height: 100%;
background: #fff;
.container__body {
height: calc(100% - 48px);
}
}
}
}
</style>